/* ============================================================
   QTM GROUPS – Shared Stylesheet for All Inner Pages
   Design System: Primary Blue 85% | Royal Green 10% | Burgundy 5%
   ============================================================ */

:root {
    --primary-blue:  #003366;
    --royal-green:   #e66123;
    --burgundy:      #800020;
    /* Aliases used throughout the codebase */
    --brand-blue:    #3F51B5;
    --brand-green:   #FF9800;
    --brand-burgundy:#800020;
    --pure-white:    #ffffff;
    --neutral-bg:    #eef2f7;
    --text-main:     #334155;
}

/* ── Organization name treatment (site-wide) ── */
.org-name {
    color:#f36e24;
    font-family:'Inter';
    font-weight:700;
}
.org-abbr {
    color:var(--primary-blue);
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    letter-spacing:1px;
}
.org-tm {
    color:#8a2531;
    font-weight:700;
    font-size:21px;
    vertical-align:super;
    line-height:1;
    margin-left:1px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }

html, body {
    max-width:100%;
    overflow-x:hidden;
}

body {
    font-family:'Inter', sans-serif;
    background-color:var(--pure-white);
    color:var(--text-main);
    line-height:1.6;
    /* Reserve space for the fixed header on first paint. Previously this was only
       set by JS (qtm-shared.js setHeaderOffset) after DOMContentLoaded, so every
       page rendered its hero content under the fixed header first, then jumped
       down ~110px once the script ran — a large, avoidable layout shift (CLS)
       that also delayed the final stable paint of the LCP image. --header-h is
       kept in sync by that same JS for edge cases (zoom, font overrides); the
       fallback values here match the header's actual rendered height per
       breakpoint, so the JS update is a no-op on a normal load. */
    padding-top:var(--header-h, 110px);
}

a { text-decoration:none; }

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

/* ── Container ── */
.container { max-width:1280px; margin:0 auto; }

/* ── Section Base ── */
section { padding:30px 10%; }
.text-center { text-align:center; }

.section-title {
    font-family:'Montserrat', sans-serif;
    font-size:2.1rem;
    color:#3F51B5;
    text-align:center;
    /* margin-bottom:20px; */
    font-weight:800;
    position:relative;
    /* padding-bottom:15px; */
}
.section-title::after {
    content:'';
    display:block;
    width:80px;
    height:5px;
    margin:10px auto 0;
}
.section-title span {
    color:#3F51B5;
}

.section-subtitle {
    text-align:center;
    color:#64748b;
    font-size:1.1rem;
    max-width:700px;
    margin:0px auto 30px;
    line-height:1.8;
}

/* ── Skip to content (visually hidden until keyboard-focused) ── */
.skip-link {
    position:fixed;
    top:-60px;
    left:10px;
    background:var(--primary-blue);
    color:#fff !important;
    padding:12px 20px;
    border-radius:0 0 8px 8px;
    z-index:10000;
    transition:top 0.2s ease;
    text-decoration:none;
    font-weight:600;
}
.skip-link:focus { top:0; }

/* ── Header & Navigation ── */
header {
    background-color:var(--primary-blue);
    color:white;
    padding:10px 5%;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:2000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 4px 6px rgba(0,0,0,0.08);
}

.logo {
    display:flex;
    align-items:center;
}
.logo a { display:flex; align-items:center; }
.logo img { height:90px; width:auto; display:block; }

.nav-links { display:flex; list-style:none; gap:20px; }
.nav-links > li { position:relative; padding:15px 0; }
.nav-links a {
    color:white;
    text-decoration:none;
    font-size:0.8rem;
    font-weight:600;
    text-transform:uppercase;
    padding:5px 10px;
    transition:0.3s;
}
.nav-links a:hover { color:var(--royal-green); }

/* Dropdown */
.dropdown {
    display:none;
    position:absolute;
    background:#ffffff;
    min-width:240px;
    top:100%;
    left:0;
    box-shadow:0 15px 30px rgba(0,0,0,0.15);
    border-top:3px solid var(--royal-green);
    padding:10px 0;
    z-index:3000;
    animation:fadeInUp 0.3s ease;
}
.nav-links li:hover > .dropdown,
.nav-links li:focus-within > .dropdown { display:block; }
.dropdown a {
    color: var(--primary-blue) !important;
    padding: 12px 12px;
    display: block;
    text-transform: none !important;
    font-size: 13px !important;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500 !important;
    transition: 0.25s;
}
.dropdown a:last-child { border-bottom:none; }
.dropdown a:hover {
    background:#f8fafc;
    color:var(--burgundy) !important;
    padding-left:30px;
}

.dropdown.dropdown-2col {
    min-width:480px;
    column-count:2;
    column-gap:0;
}
.dropdown.dropdown-2col a {
    break-inside:avoid;
}

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

/* ── Active Nav Item ── */
.nav-links > li.active > a {
    color: white !important;
    background: rgba(255,255,255,0.13);
    border-radius: 6px;
    padding: 6px 12px !important;
    border-bottom: 3px solid var(--royal-green);
    padding-bottom: 4px !important;
}

/* ── Hamburger (mobile) ── */
.hamburger {
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
}
.hamburger span {
    width:25px; height:3px;
    background:white;
    border-radius:3px;
    transition:0.3s;
    transform-origin:center;
}
.hamburger.active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* ── Page Banner / Breadcrumb ── */
.page-banner {
    background:linear-gradient(rgba(0,51,102,0.88), rgba(0,51,102,0.88)),
               url('../images/home/precision-in-mineral-processing.webp') center/cover no-repeat;
    padding:30px 10%;
    color:white;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.page-banner::before {
    content:'QTM';
    position:absolute;
    font-size:12rem;
    font-weight:900;
    color:rgba(255,255,255,0.03);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}
.page-banner h1 {
    font-family:'Montserrat', sans-serif;
    font-size:3rem;
    font-weight:800;
    margin-bottom:15px;
    text-transform:uppercase;
    letter-spacing:2px;
}
.banner-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,51,102,0.82), rgba(0,51,102,0.82));
    z-index:1;
}
.banner-content {
    position:relative;
    z-index:2;
}
.breadcrumb-nav { font-size:0.9rem; opacity:0.8; }
.breadcrumb-nav a { color:white; transition:0.2s; }
.breadcrumb-nav a:hover { color:var(--royal-green); }
.breadcrumb-nav .sep { margin:0 8px; opacity:0.5; }
.breadcrumb-nav .current { color:rgba(255,255,255,0.6); }

/* ── Buttons ── */
.btn-primary {
    background:var(--burgundy);
    color:white;
    padding:15px 40px;
    border-radius:50px;
    font-weight:700;
    font-size:0.95rem;
    display:inline-block;
    transition:0.4s;
    border:none;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(128,0,32,0.25);
}
.btn-primary:hover {
    background:var(--royal-green);
    transform:translateY(-4px);
    box-shadow:0 15px 25px rgba(29,91,46,0.35);
    color:white;
}
.btn-outline {
    border:2px solid var(--primary-blue);
    color:var(--primary-blue);
    padding:13px 38px;
    border-radius:50px;
    font-weight:700;
    display:inline-block;
    transition:0.4s;
}
.btn-outline:hover {
    background:var(--primary-blue);
    color:white;
    transform:translateY(-4px);
}
.btn-green {
    background:var(--royal-green);
    color:white;
    padding:15px 40px;
    border-radius:50px;
    font-weight:700;
    display:inline-block;
    transition:0.4s;
    border:none;
    cursor:pointer;
}
.btn-green:hover {
    background:var(--primary-blue);
    transform:translateY(-4px);
    color:white;
}

/* ── Mineral Cards ── */
.minerals-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:35px;
}
.m-card {
    background:#fff;
    padding:20px 30px;
    border-radius:20px;
    text-align:center;
    transition:all 0.5s cubic-bezier(0.23,1,0.32,1);
    position:relative;
    overflow:hidden;
    border:1px solid #f0f0f0;
    box-shadow:0 10px 30px rgba(0,0,0,0.03);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.m-card::before {
    content:'';
    position:absolute;
    top:0; left:0; width:100%; height:5px;
    transition:all 0.5s ease;
}
.m-card.green::before  { background:var(--royal-green); }
.m-card.blue::before   { background:var(--primary-blue); }
.m-card.burgundy::before { background:var(--burgundy); }
.m-card::after {
    content:'QTM';
    position:absolute;
    bottom:-20px; right:-10px;
    font-size:5rem; font-weight:900;
    color:rgba(0,0,0,0.03);
    z-index:0;
}
.icon-box {
    width:80px; height:80px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    margin-bottom:25px;
    font-size:2rem;
    transition:all 0.5s ease;
    background:#f8fafc;
}
.m-card.green .icon-box    { color:var(--royal-green);  border:1px solid rgba(29,91,46,0.15); }
.m-card.blue .icon-box     { color:var(--primary-blue); border:1px solid rgba(0,51,102,0.15); }
.m-card.burgundy .icon-box { color:var(--burgundy);     border:1px solid rgba(128,0,32,0.15); }
.m-card h3 {
    color:var(--brand-blue);
    font-family:'Montserrat', sans-serif;
    font-size:1.1rem; font-weight:700;
    margin-bottom:0px;
    position:relative; z-index:1;
}
.m-card p { color:#64748b; font-size:0.95rem; line-height:1.6; position:relative; z-index:1; }
.m-card .tag-badge {
    background:var(--neutral-bg);
    color:var(--primary-blue);
    font-size:0.75rem;
    font-weight:700;
    padding:5px 14px;
    border-radius:50px;
    margin-bottom:15px;
    letter-spacing:1px;
    text-transform:uppercase;
    position:relative; z-index:1;
}
.m-card:hover {
    transform:translateY(-15px) rotateX(5deg);
    box-shadow:0 25px 50px rgba(0,51,102,0.1);
    border-color:transparent;
}
.m-card:hover .icon-box {
    transform:scale(1.2) rotate(10deg);
    background:var(--primary-blue);
    color:white !important;
}
.m-card:hover .icon-box i { color:#fff !important; }
.m-card.green:hover    { border-bottom:5px solid var(--royal-green); }
.m-card.blue:hover     { border-bottom:5px solid var(--primary-blue); }
.m-card.burgundy:hover { border-bottom:5px solid var(--burgundy); }

/* ── Application List Items ── */
.app-box {
    background:#ffffff;
    padding:20px;
    border-radius:24px;
    box-shadow:0 10px 40px rgba(0,51,102,0.04);
    border:1px solid #f0f4f8;
    transition:all 0.4s ease;
    position:relative;
}
.app-box:hover {
    transform:translateY(-5px);
    box-shadow:0 20px 60px rgba(0,51,102,0.08);
    border-color:rgba(29,91,46,0.2);
}
.app-box h3 {
    font-family:'Montserrat', sans-serif;
    font-size:1.6rem;
    color:var(--primary-blue);
    margin-bottom:30px;
    position:relative;
    display:inline-block;
}
.app-box h3::after {
    content:'';
    position:absolute;
    bottom:-8px; left:0;
    width:50px; height:4px;
    background:var(--royal-green);
    border-radius:10px;
    transition:width 0.4s ease;
}
.app-box:hover h3::after { width:100%; }
.app-box ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.app-box li {
    font-size:0.92rem;
    color:#475569;
    display:flex; align-items:center;
    padding:11px 14px;
    background:#f8fafc;
    border-radius:12px;
    transition:all 0.3s ease;
    border:1px solid transparent;
}
.app-box li:hover {
    background:#fff;
    color:var(--primary-blue);
    transform:scale(1.04);
    border-color:var(--royal-green);
    box-shadow:0 5px 15px rgba(29,91,46,0.1);
}
.app-box li i { margin-right:10px; font-size:1rem; color:var(--royal-green); transition:0.3s; }

/* ── Info / Feature Cards ── */
.info-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:30px;
}
.info-card {
    background:white;
    padding:20px 30px;
    border-radius:20px;
    text-align:center;
    border:1px solid #eef2f7;
    transition:0.4s;
    box-shadow: rgb(0 0 0 / 62%) 0px 5px 15px;
}
.info-card:hover {
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,51,102,0.08);
    border-color:var(--royal-green);
}
.info-card .ic-icon {
    width:70px; height:70px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px;
    font-size:1.8rem;
    background:rgba(29,91,46,0.08);
    color:var(--royal-green);
    transition:0.4s;
}
.info-card:hover .ic-icon {
    background:var(--royal-green);
    color:white;
}
.info-card .info-icon {
    width:70px; height:70px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px;
    font-size:1.8rem;
    background:rgba(29,91,46,0.08);
    color:var(--royal-green);
    transition:0.4s;
}
.info-card:hover .info-icon {
    background:var(--royal-green);
    color:white;
}
.info-card .ic-img {
    width:90px; height:90px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 20px;
    border:3px solid rgba(29,91,46,0.15);
    transition:0.4s;
}
.info-card:hover .ic-img {
    transform:scale(1.08);
    border-color:var(--royal-green);
}
.info-card h4 {
    font-family:'Montserrat', sans-serif;
    font-size:1.1rem;
    color:var(--primary-blue);
    margin-bottom:5px;
    font-weight:700;
}
.info-card p { font-size:0.9rem; color:#64748b; line-height:1.6; }

/* ── Media Cards ── */
.media-card {
    background:white;
    padding:35px;
    border-radius:16px;
    box-shadow:0 5px 20px rgba(0,0,0,0.04);
    border-left:5px solid var(--primary-blue);
    transition:0.3s;
}
.media-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}
.media-card h3 { color:var(--burgundy); margin-bottom:8px; font-size:1.25rem; font-family:'Montserrat',sans-serif; }

/* ── Two-col Text + Image Layout ── */
.split-section {
    display:flex;
    gap:60px;
    align-items:center;
}
.split-section.reverse { flex-direction:row-reverse; }
.split-img {
    flex:1;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,51,102,0.12);
}
.split-img img {
    width:100%; height:400px;
    object-fit:cover;
    transition:transform 0.6s ease;
}
.split-img:hover img { transform:scale(1.05); }
.split-text { flex:1.2; }
.split-text .sub-tag {
    color:var(--burgundy);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:0.85rem;
    display:block;
    margin-bottom:12px;
}
.split-text h2 {
    font-family:'Montserrat', sans-serif;
    font-size:2.1rem;
  color: #3F51B5;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}
.split-text h2 span { color:#3F51B5; }
.split-text p { color:#475569; font-size:1.05rem; line-height:1.8; margin-bottom:20px; }

/* ── Feature List (tick only, no bullet) ── */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: #475569;
    font-size: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li i {
    color: var(--royal-green);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Timeline ── */
.timeline { position:relative; padding-left:40px; }
.timeline::before {
    content:'';
    position:absolute;
    left:16px; top:0; bottom:0;
    width:3px;
    background:linear-gradient(to bottom, var(--primary-blue), var(--royal-green));
}
.timeline-item { position:relative; margin-bottom:50px; }
.timeline-item::before {
    content:'';
    position:absolute;
    left:-30px; top:6px;
    width:18px; height:18px;
    background:var(--royal-green);
    border-radius:50%;
    border:3px solid white;
    box-shadow:0 0 0 3px var(--royal-green);
}
.timeline-year {
    font-family:'Montserrat', sans-serif;
    font-size:1.1rem;
    font-weight:800;
    color:var(--primary-blue);
    margin-bottom:5px;
}
.timeline-item h4 {
    font-family:'Montserrat', sans-serif;
    font-size:1.2rem;
    color:var(--royal-green);
    margin-bottom:8px;
}
.timeline-item p { color:#475569; font-size:0.95rem; line-height:1.7; }

/* ── Stats Bar ── */
.stats-bar {
    background: #eef2f7;
    padding: 30px 10%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.stat-item {
    background: white;
    border-radius: 20px;
    padding: 40px 24px 36px;
    text-align: center;
    box-shadow: 0 6px 32px rgba(0,51,102,0.09);
    border-bottom: 4px solid var(--royal-green);
    transition: transform 0.35s, box-shadow 0.35s;
}
.stat-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 55px rgba(0,51,102,0.14);
}
.stat-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), var(--royal-green));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.4rem;
    color: white;
    transition: transform 0.35s;
}
.stat-item:hover .stat-icon { transform: scale(1.12) rotate(-6deg); }
.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}
.stat-suffix { color: var(--royal-green); font-size: 2.4rem; font-weight: 800; }
.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #64748b;
    font-weight: 600;
}

/* ── Global / Pill Section ── */
.global-section { background:var(--primary-blue); color:white; text-align:center; }
.global-section .section-title { color:white; }
.global-section .section-title span { color:white; }
.pill-container { display:flex; justify-content:center; flex-wrap:wrap; gap:15px; margin:40px 0; }
.pill {
    border:1px solid rgba(255,255,255,0.3);
    color:white;
    padding:10px 30px;
    border-radius:50px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:0.3s;
    cursor:default;
}
.pill:hover { background:var(--burgundy); border-color:var(--burgundy); }

/* ── Profile / Team Cards ── */
.team-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:35px;
}
.team-card {
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    border:1px solid #eef2f7;
    transition:0.4s;
}
.team-card:hover {
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,51,102,0.12);
}
.team-card .card-img {
    height:362px;
    background: linear-gradient(135deg, #0033664d, #e661234f);
    display:flex; align-items:center; justify-content:center;
    font-size:4rem; color:rgba(255,255,255,0.4);
    position:relative;
    overflow:hidden;
}
.team-card .card-img img {
    width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
}
.team-card .card-body { padding:25px; }
.team-card h4 {
    font-family:'Montserrat', sans-serif;
    font-size:1.2rem;
    color:var(--primary-blue);
    margin-bottom:5px;
    font-weight:700;
}
.team-card .role {
    color:var(--royal-green);
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:12px;
    display:block;
}
.team-card p { font-size:0.9rem; color:#64748b; line-height:1.6; }

/* ── Contact Form ── */
.contact-form-wrapper {
    background:white;
    padding:50px;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,51,102,0.07);
    border:1px solid #f1f5f9;
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-group { margin-bottom:5px; }
.form-group.full { grid-column:span 2; }
.form-group label {
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:var(--primary-blue);
    font-size:0.88rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    padding:14px 18px;
    border:2px solid #f1f5f9;
    border-radius:12px;
    font-family:'Inter', sans-serif;
    font-size:0.95rem;
    color:var(--text-main);
    transition:all 0.3s ease;
    background:#fdfdfd;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none;
    border-color:var(--royal-green);
    background:white;
    box-shadow:0 0 0 4px rgba(29,91,46,0.08);
}
.form-group textarea { resize:vertical; min-height:130px; }
.submit-btn {
    width:100%;
    background:var(--royal-green);
    color:white;
    padding:16px;
    border:none;
    border-radius:12px;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:0.4s;
    margin-top:10px;
    font-family:'Inter', sans-serif;
}
.submit-btn:hover { background:var(--primary-blue); transform:translateY(-3px); }

/* ── Form Alerts ── */
.form-alert {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px 20px;
    border-radius:12px;
    font-size:0.92rem;
    line-height:1.6;
    margin-bottom:24px;
}
.form-alert i { font-size:1.1rem; margin-top:2px; flex-shrink:0; }
.form-alert-success { background:#ecfdf3; color:#166534; border:1px solid #bbf7d0; }
.form-alert-success i { color:#16a34a; }
.form-alert-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.form-alert-error i { color:#dc2626; }

/* ── Form Button Row (Submit + WhatsApp) ── */
.form-btn-row {
    display:flex;
    gap:14px;
    margin-top:20px;
    flex-wrap:wrap;
}
.form-btn-row .submit-btn { flex:1; margin-top:0; min-width:200px; }
.whatsapp-btn {
    flex:1;
    min-width:200px;
    background:#25D366;
    color:white;
    padding:16px;
    border:none;
    border-radius:12px;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:0.4s;
    font-family:'Inter', sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.whatsapp-btn:hover { background:#1ebe57; transform:translateY(-3px); }
@media(max-width:560px){
    .form-btn-row { flex-direction:column; }
    .form-btn-row .submit-btn, .whatsapp-btn { min-width:auto; }
}

/* ── Gallery Grid ── */
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
}
.gallery-item {
    border-radius:16px;
    overflow:hidden;
    position:relative;
    background:#f1f5f9;
    aspect-ratio:4/3;
    cursor:pointer;
}
.gallery-item img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.5s ease;
}
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,51,102,0.75), transparent);
    opacity:0;
    transition:0.4s;
    display:flex; align-items:flex-end; padding:20px;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay span { color:white; font-weight:600; font-size:0.9rem; }

/* ── Placeholder Image Box ── */
.img-placeholder {
    background:linear-gradient(135deg, #e8f0fa, #dce8f5);
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    color:var(--primary-blue);
    opacity:0.6;
    border:2px dashed #b0c4de;
}
.img-placeholder i  { font-size:2.5rem; margin-bottom:10px; }
.img-placeholder p  { font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; }

/* ── Map Placeholder ── */
.map-placeholder {
    height:350px;
    background:linear-gradient(135deg, #e8f0fa, #dce8f5);
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    color:var(--primary-blue);
    border:2px dashed #b0c4de;
    gap:12px;
}
.map-placeholder i { font-size:3rem; opacity:0.5; }
.map-placeholder p { font-size:0.95rem; font-weight:600; opacity:0.6; }

/* ── CTA Strip ── */
.cta-strip {
    background:linear-gradient(135deg, var(--primary-blue), #005599);
    padding:40px 10%;
    text-align:center;
    color:white;
}
.cta-strip h2 {
    font-family:'Montserrat', sans-serif;
    font-size:2.2rem;
    font-weight:800;
    margin-bottom:15px;
}
.cta-strip p { font-size:1.05rem; opacity:0.85; margin-bottom:35px; max-width:600px; margin-left:auto; margin-right:auto; }
.btn-cta {
    display: inline-block;
    background: white;
    color: var(--primary-blue);
    padding: 14px 40px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.btn-cta:hover {
    background: var(--royal-green);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(29,91,46,0.35);
}

/* ── Highlight Box ── */
.highlight-box {
    background:linear-gradient(135deg, var(--primary-blue), #004d99);
    color:white;
    padding:50px;
    border-radius:24px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.highlight-box::before {
    content:'';
    position:absolute;
    width:300px; height:300px;
    background:rgba(255,255,255,0.04);
    border-radius:50%;
    top:-80px; right:-80px;
}
.highlight-box h3 {
    font-family:'Montserrat', sans-serif;
    font-size:1.5rem; font-weight:800;
    margin-bottom:12px;
    color:#f3931f;
}
.highlight-box p { opacity:0.9; font-size:1rem; line-height:1.7; }

/* ── Neutral Section Bg ── */
.bg-neutral { background:var(--neutral-bg) !important; }
.bg-grey { background-color: #3f51b514; }
.bg-blue    { background:var(--primary-blue) !important; }
.bg-white   { background:var(--pure-white) !important; }

/* ── Floating Action Buttons (WhatsApp + Call) ── */
.qtm-fab {
    position: fixed;
    bottom: 28px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 9999;
    align-items: flex-end;
}
.qtm-fab-btn {
    position: relative;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qtm-fab-btn:hover {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}
.qtm-fab-wa  { background: #25d366; }
.qtm-fab-call { background: var(--primary-blue); }

/* Pulse ring on WhatsApp */
.qtm-fab-wa::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid #25d366;
    animation: fabPulse 2s ease-out infinite;
    opacity: 0;
}
@keyframes fabPulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Tooltip */
.qtm-fab-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%; transform: translateY(-50%);
    background: rgba(15,23,42,0.9);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    font-family: 'Inter', sans-serif;
}
.qtm-fab-tip::after {
    content: '';
    position: absolute;
    left: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(15,23,42,0.9);
}
.qtm-fab-btn:hover .qtm-fab-tip { opacity: 1; }

/* ── Footer ── */
footer {
    background:linear-gradient(rgb(0 51 102 / 86%), rgb(0 51 102)), url(../images/industrial-minerals/engineered-minerals-for-global-industries.webp);
    background-size:cover;
    background-position:center;
    color:rgba(255,255,255,0.6);
    padding:50px 10%;
    font-size:0.9rem;
    border-top:1px solid rgba(255,255,255,0.08);
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
    margin-bottom:40px;
}
.footer-brand .logo { margin-bottom:15px; }
.footer-brand .logo img { height:100px; }
.footer-brand p { color:rgba(255,255,255,0.45); font-size:0.88rem; line-height:1.7; margin-bottom:20px; }
.footer-social { display:flex; gap:12px; }
.footer-social a {
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid transparent;
    display:flex; align-items:center; justify-content:center;
    color:white;
    transition:0.3s;
}
.footer-social a:hover { transform:translateY(-4px); box-shadow:0 6px 14px rgba(0,0,0,0.25); }
.footer-social .social-facebook { background:#1877F2; }
.footer-social .social-instagram { background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.footer-social .social-linkedin { background:#0A66C2; }
.footer-social .social-youtube { background:#FF0000; }
.footer-social a i { color:white; }
.footer-col h5 {
    color:white;
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    font-size:0.95rem;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:1px;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a { color:rgba(255,255,255,0.45); font-size:0.88rem; transition:0.2s; }
.footer-col a:hover { color:var(--royal-green); padding-left:5px; }
.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    font-size:0.85rem;
}
.footer-bottom a { color:rgba(255,255,255,0.45); transition:0.2s; }
.footer-bottom a:hover { color:white; }

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
   ══════════════════════════════════════════ */

/* ── Tablet 1024px ── */
@media (max-width:1024px) {
    :root { --header-h: 122px; }
    header { padding:1rem 4%; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
    .split-section { flex-direction:column; gap:36px; }
    .split-section.reverse { flex-direction:column; }
    .split-img, .split-text { width:100%; }
    .split-img img { height:320px; }
    .stats-bar { grid-template-columns:repeat(2,1fr); }
    .stat-item { border-right:none; border-bottom:1px solid rgba(0,51,102,0.08); }
    .info-grid { grid-template-columns:repeat(2,1fr); }
    .m-cards-row { grid-template-columns:repeat(2,1fr); }
    .qtm-grid-3 { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── Tablet 992px ── */
@media (max-width:992px) {
    section { padding:60px 5%; }
    .page-banner { padding:80px 5%; min-height:300px; }
    .page-banner h1 { font-size:2.2rem; }
    .section-title { font-size:2rem; }
    .section-intro { font-size:0.95rem; }
    .stats-bar { padding:50px 5%; }
    .contact-form-wrapper { padding:30px; }
    .form-grid { grid-template-columns:1fr; }
    .form-group.full { grid-column:span 1; }
    .cta-strip { padding:60px 5%; }
    .cta-strip h2 { font-size:1.8rem; }
    footer { padding:40px 5%; }
}

/* ── Mobile 768px ── */
@media (max-width:768px) {

    /* Floating Action Buttons — center-right on mobile */
    .qtm-fab {
        top:60%;
        bottom:auto;
        right:14px;
        transform:translateY(-50%);
    }

    /* Global pills */
    .pill-container { margin:10px 0; }

    /* Header & Nav */
    :root { --header-h: 111px; }
    header { padding:1rem 5%; position:fixed; flex-wrap:wrap; }
    .logo img { height:79px; }
    .footer-brand .logo img { height:70px; }
    .hamburger { display:flex; }
    .nav-links {
        display:none;
        flex-direction:column;
        gap:0;
        width:100%;
        background:var(--primary-blue);
        position:absolute;
        top:100%; left:0;
        padding:16px 20px 24px;
        z-index:2000;
        box-shadow:0 8px 24px rgba(0,0,0,0.2);
        max-height:calc(100vh - var(--header-h, 110px));
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }
    .nav-links.open { display:flex; }
    .nav-links > li { padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.07); }
    .nav-links > li:last-child { border-bottom:none; }
    .nav-links > li.active > a {
        background:transparent;
        border-radius:0;
        border-bottom:2px solid var(--royal-green);
        padding:6px 0 !important;
    }
    .nav-links a { font-size:0.85rem; padding:6px 0; display:block; }
    .nav-links a[aria-haspopup="true"] i.fa-chevron-down {
        margin-left:6px;
        font-size:0.7em;
        display:inline-block;
        transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .nav-links a[aria-expanded="true"] i.fa-chevron-down { transform:rotate(180deg); }

    .dropdown {
        position:static;
        display:block;
        box-shadow:none;
        border-top:none;
        border-left:2px solid transparent;
        background:transparent;
        margin-top:0;
        padding:0 4px;
        max-height:0;
        opacity:0;
        overflow:hidden;
        transform:translateY(-6px);
        transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, transform 0.35s ease, padding 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    }
    .nav-links li:hover > .dropdown { max-height:0; opacity:0; }
    .dropdown.mob-open {
        max-height:2000px !important;
        opacity:1 !important;
        transform:translateY(0);
        padding:8px 4px 10px 14px;
        margin:8px 0 6px;
        background:rgba(255,255,255,0.05);
        border-left:2px solid var(--royal-green);
        border-radius:0 10px 10px 0;
    }
    .dropdown a {
        position:relative;
        color:rgba(255,255,255,0.8) !important;
        font-size:0.82rem !important;
        padding:10px 14px !important;
        border-bottom:none !important;
        border-radius:8px;
        transition:background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
    }
    .dropdown.mob-open a {
        opacity:0;
        transform:translateX(-8px);
        animation:qtmDropdownItemIn 0.35s ease forwards;
    }
    .dropdown.mob-open a:nth-child(1) { animation-delay:0.05s; }
    .dropdown.mob-open a:nth-child(2) { animation-delay:0.1s; }
    .dropdown.mob-open a:nth-child(3) { animation-delay:0.15s; }
    .dropdown.mob-open a:nth-child(4) { animation-delay:0.2s; }
    .dropdown.mob-open a:nth-child(5) { animation-delay:0.25s; }
    .dropdown.mob-open a:nth-child(6) { animation-delay:0.3s; }
    .dropdown.mob-open a:nth-child(n+7) { animation-delay:0.35s; }
    .dropdown a:hover, .dropdown a:active {
        background:rgba(255,255,255,0.1);
        color:#fff !important;
        padding-left:22px !important;
    }
    .dropdown a:hover::before, .dropdown a:active::before {
        content:'\203A';
        position:absolute;
        left:8px;
        color:var(--royal-green);
    }
    .dropdown.dropdown-2col { min-width:auto; column-count:1; }
    @keyframes qtmDropdownItemIn {
        to { opacity:1; transform:translateX(0); }
    }

    /* Page Banner */
    .page-banner { padding:70px 5%; min-height:260px; }
    .page-banner h1 { font-size:1.8rem; }
    .breadcrumb-nav { font-size:0.8rem; }

    /* Section titles */
    .section-title { font-size:1.7rem; }

    /* Split sections — always stack */
    .split-section { flex-direction:column !important; gap:28px; padding:10px 5% !important; }
    .split-img img { height:240px; }
    .split-text h2 { font-size:1.7rem; }
    .sub-tag { font-size:0.75rem; }

    /* Stats — 2 cols */
    .stats-bar { grid-template-columns:repeat(2,1fr); padding:40px 5%; gap:16px; }
    .stat-number { font-size:2.4rem; }
    .stat-icon { width:50px; height:50px; font-size:1.1rem; }

    /* Info cards — 1 col */
    .info-grid { grid-template-columns:1fr; gap:16px; }
    .info-card { padding:18px 20px; }

    /* App box list — 1 col */
    .app-box { padding:15px 25px; }
    .app-box ul { grid-template-columns:1fr; }
    .app-box h3 { font-size:1.2rem; margin-bottom:20px; }

    /* Mineral cards */
    .m-cards-row { grid-template-columns:1fr; }
    .m-card { padding:28px 22px; }

    /* Generic 3-col inline grids (organization.php etc.) */
    .qtm-grid-3 { grid-template-columns:1fr !important; }

    /* Team */
    .team-grid { grid-template-columns:repeat(2,1fr); gap:18px; }

    /* Timeline */
    .timeline { padding-left:20px; }
    .timeline-item { padding-left:20px; }
    .timeline-year { font-size:1.1rem; }

    /* CTA */
    .cta-strip { padding:20px 5%; }
    .cta-strip h2 { font-size:1.6rem; }
    .btn-cta, .btn-primary { padding:12px 28px; font-size:0.9rem; }

    /* Contact form */
    .contact-form-wrapper { padding:24px 20px; border-radius:16px; }

    /* Footer */
    .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
    .footer-bottom { flex-direction:column; text-align:center; gap:8px; }

    /* Gallery */
    .gallery-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ══════════════════════════════════════════
   TDS (Technical Data Sheet) Cards
   ══════════════════════════════════════════ */
.tds-card {
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 40px rgba(0,51,102,0.12);
    margin:40px 0;
    border:1px solid #edf2fb;
}
.tds-header {
    background:linear-gradient(135deg, #003366 0%, #005599 100%);
    padding:44px 50px 38px;
    color:white;
    position:relative;
    overflow:hidden;
}
.tds-header.green-header { background:linear-gradient(135deg, #e66123 0%, #2d7a3e 100%); }
.tds-header.calcined-header { background:linear-gradient(135deg, #1a2a4a 0%, #003366 60%, #e66123 100%); }
.tds-header::before {
    content:'';
    position:absolute;
    right:-60px; top:-60px;
    width:240px; height:240px;
    background:rgba(255,255,255,0.05);
    border-radius:50%;
}
.tds-header::after {
    content:'TDS';
    position:absolute;
    right:40px; bottom:-20px;
    font-size:7rem; font-weight:900;
    color:rgba(255,255,255,0.05);
    font-family:'Montserrat', sans-serif;
    letter-spacing:-2px;
    pointer-events:none;
}
.tds-header-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
    position:relative; z-index:1;
}
.tds-product-name {
    font-family:'Montserrat', sans-serif;
    font-size:2.2rem;
    font-weight:800;
    color:#a3f0c0;
    line-height:1.1;
}
.tds-product-sub {
    font-size:0.92rem;
    opacity:0.7;
    margin-top:6px;
    font-style:italic;
}
.tds-badges { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.tds-badge {
    background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.3);
    color:white;
    padding:6px 18px;
    border-radius:50px;
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    white-space:nowrap;
}
.tds-badge.badge-green { background:rgba(163,240,192,0.2); border-color:rgba(163,240,192,0.4); color:#a3f0c0; }
.tds-desc {
    opacity:0.88;
    line-height:1.75;
    font-size:0.97rem;
    max-width:740px;
    position:relative; z-index:1;
}
.tds-body { padding:44px 50px; }
.tds-label {
    font-family:'Montserrat', sans-serif;
    font-size:0.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#003366;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:8px;
}
.tds-label::before {
    content:'';
    display:inline-block;
    width:16px; height:3px;
    background:var(--royal-green);
    border-radius:2px;
    flex-shrink:0;
}
.tds-tables-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    margin-bottom:36px;
}
.tds-table {
    width:100%;
    border-collapse:collapse;
    font-size:0.875rem;
    border:1px solid #eef2fb;
    border-radius:12px;
    overflow:hidden;
}
.tds-table thead tr { background:#f0f5ff; }
.tds-table thead td {
    padding:10px 16px;
    font-weight:700;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:#003366;
}
.tds-table tbody td {
    padding:10px 16px;
    border-bottom:1px solid #f3f5fa;
    color:#334155;
}
.tds-table tbody tr:last-child td { border-bottom:none; }
.tds-table tbody tr:hover td { background:#fafbff; }
.tds-table td:first-child { color:#475569; }
.tds-table td:last-child { font-weight:600; color:#003366; text-align:right; }
.tds-row-divider { border:none; border-top:1px solid #f0f3fa; margin:32px 0; }
.adv-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.adv-tag {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#edf7f2;
    color:#e66123;
    padding:9px 20px;
    border-radius:50px;
    font-size:0.84rem;
    font-weight:600;
    border:1.5px solid #c3e8d4;
    transition:all 0.25s;
    cursor:default;
}
.adv-tag i { font-size:0.72rem; }
.adv-tag:hover { background:#e66123; color:white; border-color:#e66123; }
.app-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.app-chip {
    background:#f0f5ff;
    color:#003366;
    padding:8px 18px;
    border-radius:50px;
    font-size:0.83rem;
    font-weight:600;
    border:1.5px solid #c5d5ee;
    transition:all 0.25s;
    cursor:default;
}
.app-chip:hover { background:#003366; color:white; border-color:#003366; }
.tds-footer-bar {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid #eef0f5;
    background:#f8fbff;
}
.tds-footer-item {
    padding:22px 28px;
    border-right:1px solid #eef0f5;
}
.tds-footer-item:last-child { border-right:none; }
.tds-footer-item h6 {
    font-family:'Montserrat', sans-serif;
    font-size:0.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#94a3b8;
    margin-bottom:7px;
    display:flex;
    align-items:center;
    gap:6px;
}
.tds-footer-item h6 i { color:#003366; font-size:0.78rem; }
.tds-footer-item p { font-size:0.85rem; color:#475569; line-height:1.5; margin:0; }
.tds-disclaimer {
    font-size:0.77rem;
    color:#94a3b8;
    padding:14px 50px;
    border-top:1px solid #f0f3fa;
    background:#fff;
    font-style:italic;
}
@media(max-width:900px) {
    .tds-tables-row { grid-template-columns:1fr; gap:24px; }
    .tds-footer-bar { grid-template-columns:1fr; }
    .tds-footer-item { border-right:none; border-bottom:1px solid #eef0f5; }
    .tds-footer-item:last-child { border-bottom:none; }
}
@media(max-width:768px) {
    .tds-card { margin:10px 0; }
    .tds-header { padding: 20px 20px 20px; }
    .tds-header::after { display:none; }
    .tds-header-top { flex-direction:column; }
    .tds-badges { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
    .tds-product-name { font-size:1.2rem; }
    .tds-body { padding:28px 24px; }
    .tds-disclaimer { padding:14px 24px; }
}

/* ══════════════════════════════════════════
   Industry Grade Selection Cards
   ══════════════════════════════════════════ */
.grade-card {
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 40px rgba(0,51,102,0.10);
    margin:40px 0;
    border:1px solid #edf2fb;
}
.grade-card-header {
    background:linear-gradient(135deg, #003366 0%, #005599 100%);
    padding:30px 44px;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:relative;
    overflow:hidden;
}
.grade-card-header::after {
    content:'GRADE';
    position:absolute;
    right:30px; bottom:-15px;
    font-size:5rem; font-weight:900;
    color:rgba(255,255,255,0.05);
    font-family:'Montserrat', sans-serif;
    pointer-events:none;
    letter-spacing:2px;
}
.grade-card-header.gh-green  { background:linear-gradient(135deg, #e66123 0%, #2d7a3e 100%); }
.grade-card-header.gh-calcined { background:linear-gradient(135deg, #1a2a4a 0%, #003366 60%, #e66123 100%); }
.grade-header-title {
    font-family:'Montserrat', sans-serif;
    font-size:1.25rem;
    font-weight:800;
    color:#a3f0c0;
    line-height:1.2;
}
.grade-header-sub { font-size:0.83rem; opacity:0.7; margin-top:4px; }
.grade-badge {
    background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.3);
    color:white;
    padding:6px 16px;
    border-radius:50px;
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    white-space:nowrap;
    flex-shrink:0;
}
.grade-table-wrap { overflow-x:auto; }
.grade-table {
    width:100%;
    border-collapse:collapse;
    font-size:0.875rem;
    min-width:540px;
}
.grade-table thead tr { background:#f0f5ff; }
.grade-table thead th {
    padding:12px 18px;
    font-weight:700;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:#003366;
    text-align:left;
    white-space:nowrap;
    border-bottom:2px solid #dce8f5;
}
.grade-table tbody tr {
    border-bottom:1px solid #f0f3fa;
    transition:background 0.2s;
}
.grade-table tbody tr:last-child { border-bottom:none; }
.grade-table tbody tr:hover { background:#f8fbff; }
.grade-table td { padding:13px 18px; color:#334155; vertical-align:middle; }

/* Grade pills — blue progression 100→500 */
.grade-pill {
    display:inline-flex;
    align-items:center;
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    font-size:0.78rem;
    padding:5px 14px;
    border-radius:50px;
    letter-spacing:0.3px;
    white-space:nowrap;
}
.grade-g1 { background:#eef3fb; color:#4a6890; border:1px solid #c8d9ef; }
.grade-g2 { background:#ddeaf8; color:#2a5898; border:1px solid #a8c8e8; }
.grade-g3 { background:#cce0f5; color:#1a4f91; border:1px solid #88b8e0; }
.grade-g4 { background:#bed6f0; color:#0d418a; border:1px solid #68a5d8; }
.grade-g5 { background:linear-gradient(90deg, #003366, #005599); color:white; border:none; box-shadow:0 4px 12px rgba(0,51,102,0.25); }

/* Brightness bar */
.brightness-bar { display:flex; align-items:center; gap:8px; }
.brightness-bar-track {
    flex:1;
    height:6px;
    background:#e8eef8;
    border-radius:10px;
    overflow:hidden;
    min-width:55px;
}
.brightness-bar-fill {
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg, #003366, #0d6fb8);
    transition:width 0.6s ease;
}
.brightness-val { font-weight:600; color:#003366; font-size:0.82rem; white-space:nowrap; }

/* Application tag */
.grade-app-tag {
    background:#f0f5ff;
    color:#003366;
    padding:4px 12px;
    border-radius:50px;
    font-size:0.8rem;
    font-weight:600;
    white-space:nowrap;
    border:1px solid #c8d9f0;
}

/* Benefits row */
.grade-benefits-row {
    padding:18px 44px;
    background:#f8fbff;
    border-top:1px solid #eef0f5;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.grade-benefits-label {
    font-family:'Montserrat', sans-serif;
    font-size:0.67rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#94a3b8;
    margin-right:4px;
    white-space:nowrap;
}
.grade-benefit-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#edf7f2;
    color:#e66123;
    padding:6px 14px;
    border-radius:50px;
    font-size:0.8rem;
    font-weight:600;
    border:1.5px solid #c3e8d4;
}
.grade-benefit-tag i { font-size:0.65rem; }

/* Footer */
.grade-footer-bar {
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid #eef0f5;
    background:#fff;
}
.grade-footer-item {
    padding:18px 28px;
    border-right:1px solid #eef0f5;
}
.grade-footer-item:last-child { border-right:none; }
.grade-footer-item h6 {
    font-family:'Montserrat', sans-serif;
    font-size:0.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#94a3b8;
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:6px;
}
.grade-footer-item h6 i { color:#003366; font-size:0.78rem; }
.grade-footer-item p { font-size:0.84rem; color:#475569; line-height:1.5; margin:0; }
.grade-disclaimer {
    font-size:0.77rem;
    color:#94a3b8;
    padding:12px 44px;
    border-top:1px solid #f0f3fa;
    background:#fff;
    font-style:italic;
}

@media(max-width:900px) {
    .grade-footer-bar { grid-template-columns:1fr; }
    .grade-footer-item { border-right:none; border-bottom:1px solid #eef0f5; }
    .grade-footer-item:last-child { border-bottom:none; }
}
@media(max-width:768px) {
    .grade-card { margin:10px 0; }
    .grade-card-header { padding:22px 20px; flex-direction:column; align-items:flex-start; }
    .grade-card-header::after { display:none; }
    .grade-benefits-row { padding:16px 20px; }
    .grade-disclaimer { padding:12px 20px; }
}

/* ── Mobile 480px ── */
@media (max-width:480px) {
    :root { --header-h: 105px; }
    header { padding:0.9rem 4%; }
    .logo img { height:76px; }

    .page-banner { padding:55px 4%; min-height:220px; }
    .page-banner h1 { font-size:1.45rem; }

    section { padding:20px 4%; }
    .section-title { font-size:1.4rem; }

    /* Stats — 1 col on very small */
    .stats-bar { grid-template-columns:1fr 1fr; padding:30px 4%; gap:12px; }
    .stat-number { font-size:2rem; }
    .stat-item { padding:24px 14px; }

    /* Cards full width */
    .team-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:20px; }
    .gallery-grid { grid-template-columns:1fr; }
    .info-grid { grid-template-columns:1fr; }

    .m-card h3 {
        font-size: 18px;
        margin-bottom: 0px;
        margin-top: 4px;
    }

    /* Typography */
    .split-text h2 { font-size:1.4rem; }
    .split-text p { font-size:0.95rem; }
    .feature-list li { font-size:0.9rem; }

    /* Buttons full width on tiny screens */
    .btn-group { flex-direction:column; align-items:center; }
    .btn-cta, .btn-primary { width:100%; text-align:center; padding:14px 20px; }

    /* CTA */
    .cta-strip h2 { font-size:1.3rem; }
    .cta-strip p { font-size:0.9rem; }

    /* Footer */
    .footer-col h5 { font-size:0.85rem; }
    .footer-col a { font-size:0.82rem; }
}

/* ── Mobile 360px (small phones, e.g. 320px width) ── */
@media (max-width:360px) {
    :root { --header-h: 93px; }
    .logo img { height:64px; }
}