/* ===== PAGE TRANSITION ===== */
body {
    transition: opacity ease-in 0.2s;
}
body[unresolved] {
    opacity: 0;
    display: block;
    overflow: hidden;
    position: relative;
}

/* ===== GLOBAL FONT & BASE ===== */
html {
    scroll-behavior: smooth;
}
body, * {
    font-family: 'Inter', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}
p, li, span, label, input, select, textarea, button, a {
    font-family: 'Inter', sans-serif !important;
}

/* ===== LAYOUT ===== */
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 80vh;
}
.video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
    .video-container {
        height: 50vh;
    }
}
.dropdown-content {
    display: none;
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
.dropdown:hover .dropdown-content {
    display: block;
    transform: translateY(0);
    opacity: 1;
}
.slide-card {
    width: 270px;
}

/* ===== GLOBAL TEXT SIZING ===== */
p {
    font-size: 0.97rem !important;
    line-height: 1.75 !important;
    color: #374151;
}
.text-indigo-700 {
    color: #2D4E8A !important;
}
.text-indigo-800 {
    color: #0A2240 !important;
}
.text-3xl {
    font-size: 1.75rem !important;
}
.text-4xl {
    font-size: 2rem !important;
}
.text-5xl {
    font-size: 2.4rem !important;
}
.text-6xl {
    font-size: 2.8rem !important;
}
label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
}

/* ===== CCPL PROFESSIONAL PALETTE ===== */
:root {
    --ccpl-navy: #0A2240;
    --ccpl-blue: #0056A8;
    --ccpl-sky: #0090D4;
    --ccpl-green: #00875A;
    --ccpl-amber: #E8A000;
    --ccpl-light: #F0F5FB;
    --ccpl-border: #D0DFF0;
}

/* ===== TOP HEADER ===== */
.top-header {
    background: linear-gradient(135deg, #0A2240 0%, #0056A8 100%) !important;
    height: 42px !important;
    display: flex;
    align-items: center;
    overflow: visible !important;
    position: relative;
    z-index: 9999;
}
.top-header > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100%;
}

/* ===== TOP QUICKNAV ===== */
.top-quicknav a {
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.top-quicknav a:hover {
    color: #fcd116 !important;
}
#menu-topbar-menu {display: flex;}
#ccpl-lang-select:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}
.check-certificate {display: none;}

/* Hide Google Translate bar */
.goog-te-banner-frame,
.skiptranslate {
    display: none !important;
}
body {
    top: 0 !important;
}
.goog-te-gadget {
    display: none !important;
}

/* ===== MAIN HEADER NAV ===== */
header {
    border-bottom: 3px solid #0056A8;
    box-shadow: 0 2px 12px rgba(10, 34, 64, 0.1) !important;
}
header nav a {
    color: #0A2240 !important;
    font-weight: 600;
    font-size: 0.93rem;
    padding: 30px 10px;
    transition: color 0.2s, background 0.2s !important;
    border-radius: 6px;
}
header nav a:hover {
    color: #0056A8;
    background: rgba(0, 86, 168, 0.06);
}
header nav a span {
    background-color: #0056A8 !important;
}
header .bg-gradient-to-r.from-indigo-600 {
    background: linear-gradient(135deg, #0056A8, #0090D4) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

/* ===== STATS SECTION ===== */
section.stats-section {
    padding: 20px 0 !important;
}
.stats-bar {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.section-compact {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* ===== ISO STANDARDS BOXES ===== */
#standardsnav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
@media (max-width: 1024px) {
    #standardsnav {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #standardsnav {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.iso-card {
    background: #fff;
    border: 1.5px solid #D0DFF0;
    border-radius: 10px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 86, 168, 0.07);
}
.iso-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0056A8, #0090D4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.iso-card:hover::before {
    transform: scaleX(1);
}
.iso-card:hover {
    border-color: #0090D4;
    box-shadow: 0 8px 24px rgba(0, 86, 168, 0.18);
    transform: translateY(-4px);
}
.iso-icon-wrap {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #E8F2FF 0%, #D0E8FF 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}
.iso-card:hover .iso-icon-wrap {
    background: linear-gradient(135deg, #0056A8 0%, #0090D4 100%);
}
.iso-icon-wrap svg, .iso-icon-wrap img {
    color: #0056A8;
    width: 26px;
    height: 26px;
    transition: color 0.3s;
}
.iso-card:hover .iso-icon-wrap svg, .iso-card:hover .iso-icon-wrap img {
    color: #fff;
    filter: brightness(0) invert(1);
}
.iso-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0A2240;
    line-height: 1.35;
    margin-bottom: 5px;
    transition: color 0.3s;
}
.iso-card:hover .iso-title {
    color: #0056A8;
}
.iso-number {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #0056A8;
    border-radius: 20px;
    padding: 2px 10px;
    margin-top: 4px;
    letter-spacing: 0.03em;
    display: inline-block;
}

/* ===== SERVICES / ABOUT / STANDARDS / FAQS SECTIONS ===== */
#services-overview {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
#about {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
#standards {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
#faqs {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
#certification-request {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.section-headline {
    color: #0A2240 !important;
}
.section-sub {
    color: #0056A8 !important;
}

/* ===== CERTIFICATION PROCESS SECTION ===== */
.cert-process-section {
    background: linear-gradient(160deg, #0A2240 0%, #0056A8 60%, #0090D4 100%) !important;
    padding: 56px 0 !important;
}
.cert-process-section h2 {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}
.cert-process-section > .container > .text-center > p {
    color: rgba(255, 255, 255, 0.85) !important;
}
#journeyProgress {
    background: linear-gradient(90deg, #00875A, #0090D4, #E8A000) !important;
}
.step-info-card {
    background: rgba(255, 255, 255, 0.97) !important;
    border: none !important;
    border-left: 4px solid #0056A8 !important;
    border-radius: 10px !important;
}
#stepTitle {
    color: #0A2240 !important;
}
#stepDesc {
    color: #0056A8 !important;
}
#stepTime {
    color: #00875A !important;
    font-weight: 700 !important;
}
#stepDetails .w-2 {
    background: #0056A8 !important;
}
.cert-cta-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    border-radius: 14px !important;
}
.cert-cta-card h3 {
    color: #fff !important;
}
.cert-cta-card p {
    color: rgba(255, 255, 255, 0.88) !important;
}
.cert-cta-card a {
    background: #fff !important;
    color: #0056A8 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}
.cert-cta-card a:hover {
    background: #E8F2FF !important;
}
.cert-process-section details {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}
.cert-process-section details summary {
    color: #fff !important;
}
.cert-process-section details li {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ===== FAQ SECTION ===== */
#faqdivhead {
    border: 1px solid #D0DFF0 !important;
}
#mainFaqdiv,
#mainFaqdiv2 {
    font-weight: 600 !important;
}
details summary {
    color: #0A2240;
    font-weight: 600 !important;
}
details p {
    color: #374151 !important;
}

/* ===== CONSULTATION FORM ===== */
#certification-request h2 {
    color: #0A2240 !important;
}
.consultationForm-area button[type=submit] {
    background: linear-gradient(135deg, #0056A8, #0090D4) !important;
}
.consultationForm-area button[type=submit]:hover {
    background: linear-gradient(135deg, #003d7a, #0070aa) !important;
}

/* ===== CTA BAND ===== */
.py-16.bg-primary {
    background: linear-gradient(135deg, #0A2240, #0056A8) !important;
}
.py-16.bg-primary a.bg-white {
    color: #0056A8 !important;
    font-weight: 700 !important;
}

/* ===== FOOTER ===== */
footer {
    background: linear-gradient(160deg, #06172B 0%, #0A2240 60%, #0D2D55 100%) !important;
}
footer h3 {
    color: #fff !important;
}
footer p {
    color: rgba(255, 255, 255, 0.75) !important;
}
footer a:not(.hover\:text-white) {
    color: rgba(255, 255, 255, 0.75) !important;
}
footer a:hover {
    color: #E8A000 !important;
}
footer svg.text-\[#00a3dd\] {
    color: #0090D4 !important;
}

/* ===== BACK TO TOP ===== */
#myBtn {
    background: linear-gradient(135deg, #0056A8, #0090D4) !important;
}

/* ===== GOVERNMENT PARTNERS ===== */
.government-partner-info {
    padding: 3rem 1rem;
}
.partners-head {
    margin-bottom: 32px !important;
}
.healthcare-btn {
    margin-top: 2rem !important;
}

/* ===== BELIEF / GOAL CARDS ===== */
.bg-white.rounded-xl.p-8 {
    padding: 24px !important;
}

/* ===== VISION/MISSION CARDS ===== */
.vision-mission {
    margin-top: 28px !important;
}
.vision-mission > div {
    padding: 20px 20px 20px 26px !important;
}

/* ===== ISO STANDARDS SECTION HEADING ===== */
#standards h2 {
    color: #0A2240 !important;
}
#standards p.text-indigo-700 {
    color: #0056A8 !important;
}

/* ===== STATS BAND ===== */
.stats-band {
    background: linear-gradient(135deg, #0A2240 0%, #0056A8 100%) !important;
}

/* ===== SERVICES OVERVIEW SECTION ===== */
#services-overview {
    background: #fff !important;
}
#services-overview .text-center p {
    font-size: 0.97rem;
    line-height: 1.8;
    color: #374151;
}

/* ===== ABOUT SECTION ===== */
#about {
    background: #F7FAFF !important;
}

/* ===== CARD BORDERS & SHADOWS ===== */
.border-indigo-100 {
    border-color: #D0DFF0 !important;
}
.shadow-lg {
    box-shadow: 0 4px 18px rgba(10, 34, 64, 0.09) !important;
}
.shadow-xl {
    box-shadow: 0 8px 28px rgba(10, 34, 64, 0.12) !important;
}

/* ===== FORM CONTAINER ===== */
.consultationForm-area {
    background: #fff;
    border-radius: 14px !important;
    border: 1.5px solid #D0DFF0 !important;
    box-shadow: 0 6px 24px rgba(0, 86, 168, 0.1) !important;
    padding: 32px;
}

/* ===== BANNER TEXT ===== */
.banner-content .banner-heading h2 {
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}
.banner-content .banner-heading p {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    opacity: 0.92;
}
.banner-content .banner-heading .consultationBtn a {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.85rem 2.2rem;
    border-radius: 8px;
}

/* ===== FAQ ACCORDION ===== */
.menu-footer-menu-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-footer-menu-container .menu > .menu-item > a {
    font-size: 0.8rem !important;
    padding: 0 !important;
}
.menu-footer-menu-container .menu > .menu-item > a::before {display: none;}

/* ===== FAQ ACCORDION ===== */
details summary {
    list-style: none;
}
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    color: #0056A8;
    border-bottom: 1px solid #E8F2FF;
    padding-bottom: 12px !important;
}

/* ===== MOBILE MENU ===== */
#mymenudiv a {
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    color: #0A2240 !important;
}
#mymenudiv a:hover {
    color: #0056A8 !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #F0F5FB;
}
::-webkit-scrollbar-thumb {
    background: #0056A8;
    border-radius: 3px;
}

/* ===== CONTACT US PAGE CSS BEGIN ===== */
.contact-body {padding: 0 9%;}

.contact-header {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 70px;
}

.contact-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: #0055a6;
}

.contact-header-rule {
    width: 60px;
    height: 2px;
    background: #c9a84c;
    margin: 24px auto 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin: 0 auto;
    border: 2px solid #9ebcff;
    margin-bottom: 100px;
}

.contact-card {
    background: #f0f4ff;
    padding: 36px 32px 40px;
    border: 1px solid #9ebcff;
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 0;
    background: #9ebcff;
    transition: height 0.35s ease;
}

.contact-card:hover {background: #e3eaff;}
.contact-card:hover::before {height: 100%;}

.contact-card-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #2b2b29;
    border: 1px solid #2b2b29;
    padding: 3px 9px;
    margin-bottom: 18px;
}

.contact-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 28px;
    color: #1a4ac9;
}

.contact-field {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 0 12px;
    align-items: start;
    margin-bottom: 18px;
}

.contact-field:last-child { margin-bottom: 0; }

.contact-field-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.contact-field-icon svg {
    width: 20px;
    height: 20px;
    stroke: #2d2d2b;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-field-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2d2d2b;
    margin-bottom: 4px;
}

.contact-field-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a4ac9;
    line-height: 1.55;
}

.contact-field-value a {
    color: #e8e4dc;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.contact-field-value a:hover {
    color: #f0d080;
    border-color: #f0d080;
}
/* ===== CONTACT US PAGE CSS END ===== */

/*********************************************************
    Download Section Start
*********************************************************/
.news-block {
    padding: 90px 0;
    background: linear-gradient(135deg, #d3e3f0 0%, #eafcfe 50%, #d2e1ff 100%);
    margin-bottom: -1.5rem;
}

.news-header {
    text-align: center;
    margin-bottom: 48px;
    /* position: relative;
    z-index: 10; */
}

.news-main-title {
    font-size: 2.15rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 16px;
    letter-spacing: -0.025em;
}

.news-subtitle {
    font-size: 1.15rem;
    color: #1d4ed8;
    font-weight: 400;
}

.news-container {
    max-width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* position: relative;
    z-index: 10; */
}

.news-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.news-card:hover {
    transform: scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.news-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.news-headline {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e3a8a;
    line-height: 1.4;
    margin-bottom: 0;
    transition: color 0.2s ease;
}
.news-card:hover .news-headline {color: #1e40af;}

.news-date-container {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a6a6a;
    font-size: 0.875rem;
    font-weight: 400;
    flex-shrink: 0;
}

.calendar-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.file-download {
    text-decoration: none;
    display: inline-block;
    width: max-content;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #204de2;
    color: #204de2;
    background: transparent;
    background-image: none;
    box-shadow: none;
    border-radius: .5rem;
    padding: 7px 25px;
    cursor: pointer;
    transition: all .3s ease;
}

.file-download:hover {
    border-color: #e26520;
    color: #e26520;
    transform: scale(1.05);
}

/*********************************************************
    About Us Start
*********************************************************/
.gradient-header {
    background: linear-gradient(to right, #272289, #9333ea);
    color: white;
    padding: 1rem 10%;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0;
}

.page-subtitle {
    font-size: 1rem !important;
    color: white;
    max-width: 48rem;
}
.section {padding: 0.9rem 10%;}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    align-items: center;
}

.section-title.gradient-text {
    background: linear-gradient(to right, #ea580c, #db2777, #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.text-content {
    color: #1a1b1c;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.image-container {
    background: linear-gradient(to bottom right, #fef3c7, #fce7f3);
    border-radius: 1.5rem;
    padding: 2rem;
}

.rounded-image {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

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

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.card-orange {border: 2px solid #fed7aa;}
.card-pink {border: 2px solid #fbcfe8;}
.card-purple {border: 2px solid #e9d5ff;}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.gradient-1 {background: linear-gradient(to right, #f97316, #ec4899);}
.gradient-2 {background: linear-gradient(to right, #ec4899, #9333ea);}
.gradient-3 {background: linear-gradient(to right, #9333ea, #f97316);}
.feature-icon i {color: #fff;}

.feature-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 1rem;
}

.feature-text {
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/*********************************************************
    Our Services Start
*********************************************************/
.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.industry-card {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px;
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(243, 244, 246);
    border-image: initial;
    transition: 0.5s;
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 12px 40px;
    border-color: transparent;
}

.industry-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: white;
    border-radius: 1rem;
    transition: 0.3s;
}

.industry-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(31, 41, 55);
    margin-bottom: 1rem;
    transition: 0.3s;
}

.industry-card:hover .industry-title {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right, rgb(234, 88, 12), rgb(236, 72, 153)) text;
}

.industry-description {
    color: rgb(107, 114, 128);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .top-header {height: auto !important;}
    .top-quicknav a {padding: 8px !important;}
    header nav a {
        font-size: 0.85rem;
        padding: 6px 7px;
    }
    .banner-content .banner-heading h2 {
        font-size: 1.5rem !important;
    }
    .banner-content .banner-heading p {
        font-size: 0.95rem !important;
    }

    /* ===== CONTACT US PAGE CSS BEGIN ===== */
    .contact-header {margin: 40px 0;}
    .contact-header h1 {font-size: 1.5rem;}
    .contact-header-rule {margin: 10px auto 0;}

    .contact-grid {
        grid-template-columns: repeat(1, 1fr);
        border: none;
        gap: 1.25rem;
        margin-bottom: 2rem;
    }
    .contact-card {padding: 18px;}
    
    .cert-request-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }

    .contact-card-title {
        font-size: 1.25rem;
        margin-bottom: 25px;
    }

    /*********************************************************
        News Section Start
    *********************************************************/
    .news-block {padding: 50px 12px !important;}
    .news-main-title {font-size: 1.5rem;}
    .news-subtitle {font-size: 1.05rem;}    
    .news-card {padding: 20px;}
    .news-container, .highlights-container {max-width: 100%;}
    
    .news-card-content {
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }
    .news-date-container {align-self: flex-start;}
}


/******************************************************************
 *  ISO CERTIFICATION PAGES — SHARED FOUNDATION STYLES
 *  Covers: ccpl-iso37001, ccpl-iso9001, ccpl-iso14001,
 *          ccpl-iso20000, ccpl-iso21001, ccpl-iso22000,
 *          ccpl-iso27001, ccpl-iso37000, ccpl-iso37301,
 *          ccpl-iso41001, ccpl-iso45001, ccpl-iso50001
 *
 *  These classes replace the separate per-page CSS files.
 *  Do NOT edit the blocks above this line.
 ******************************************************************/

/* ---------------------------------------------------------------
   Shared: Section Header
--------------------------------------------------------------- */
.section-header {
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------------
   Shared: ISO Page Header (gradient-header + image)
--------------------------------------------------------------- */
.iso-header {
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.iso-header .container {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.iso-header .left-column {
    flex: 1;
    min-width: 0;
}

/* Small label above the h1: "ISO 37001:2025" */
.iso-header-subnumber {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.72) !important;
    text-transform: uppercase;
    margin: 0 0 0.35rem !important;
    line-height: 1.4 !important;
}

/* Image panel – fully contained inside banner */
.iso-header-image-wrap {
    flex: 0 0 35%;
    max-width: 35%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
    padding: 0.2rem;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Override the global .rounded-image height only inside the banner */
.iso-header-image-wrap .rounded-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0.875rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    display: block;
}

/* ---------------------------------------------------------------
   Shared: Intro Section
--------------------------------------------------------------- */
.iso-intro-section {
    background: #fff;
}
.iso-intro-section .text-content {
    max-width: 100%;
    text-align: left;
}

/* ---------------------------------------------------------------
   Shared: "What Is" Section
--------------------------------------------------------------- */
.iso-what-section {
    background: linear-gradient(to bottom right, #fff7ed, #fdf2f8);
}
.iso-what-intro {
    text-align: left;
    max-width: 100%;
    margin: 0 auto 2.5rem;
}

/* Two-column card pair */
.iso-dual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.iso-info-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border-top: 4px solid transparent;
    border-image: linear-gradient(to right, #4f46e5, #ff007e) 1;
}
.iso-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.iso-card-icon {
    font-size: 1.5rem;
}
.iso-card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

/* Checklist with orange tick – reused across all ISO pages */
.iso-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.iso-checklist li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: #4b5563;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.95rem;
    line-height: 1.6;
}
.iso-checklist li:last-child { border-bottom: none; }
.iso-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ea580c;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   Shared: Key Elements / Components Section
--------------------------------------------------------------- */
.iso-elements-section {
    background: #fff;
}
.iso-elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}
.iso-element-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.iso-element-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #ea580c, #ec4899);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.iso-element-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    border-color: #fed7aa;
}
.iso-element-card:hover::before { transform: scaleX(1); }
.iso-element-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(to right, #ea580c, #ec4899);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.iso-element-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.85rem;
}
.iso-element-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.iso-element-list li {
    font-size: 0.875rem;
    color: #4b5563;
    padding: 0.35rem 0 0.35rem 1.25rem;
    position: relative;
    line-height: 1.5;
}
.iso-element-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #ec4899;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
}

/* ---------------------------------------------------------------
   Shared: Benefits Section
--------------------------------------------------------------- */
.iso-benefits-section {
    background: linear-gradient(to bottom right, #fdf2f8, #fff7ed);
}
.iso-benefits-inner {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.iso-benefits-text { width: 100%; }
.iso-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.iso-benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0;
    color: #374151;
    font-size: 0.975rem;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.5;
}
.iso-benefits-list li:last-child { border-bottom: none; }
.iso-benefits-list li span:last-child { flex: 1; text-align: left; }

/* Round icon used in benefits list and other check lists */
.iso-benefit-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #ea580c, #ec4899);
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 2×2 stat card grid on the right */
.iso-benefits-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.iso-stat-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s;
}
.iso-stat-card:hover { transform: translateY(-3px); }
.iso-stat-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}
.iso-stat-label {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.9rem;
    margin: 0 0 0.25rem;
}
.iso-stat-desc {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}

/* ---------------------------------------------------------------
   Shared: Who Can Apply / CTA Box
--------------------------------------------------------------- */
.iso-apply-section { background: #fff; }
.iso-apply-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(to bottom right, #fff7ed, #fdf2f8);
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.iso-apply-box .text-content { text-align: left; }

/* ---------------------------------------------------------------
   Shared: "Explore Other ISO Services" Grid
   Compact 4-column navigation cards reused on every ISO page.
   The outer section uses a narrower container to keep
   the grid from stretching too wide.
--------------------------------------------------------------- */
.eoms-other-services-section { background: #fff; }

.eoms-services-narrow-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 24px;
}

.eoms-other-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.eoms-other-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.65rem 0.5rem;
    width: 100%;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.eoms-other-service-card::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #ea580c, #ec4899);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.eoms-other-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: #fed7aa;
}
.eoms-other-service-card:hover::after { transform: scaleX(1); }

.eoms-other-service-code {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.eoms-other-service-name {
    font-size: 0.75rem;
    color: #4b5563;
    font-weight: 500;
    line-height: 1.25;
}
/* Optional divider between code & name (used in ccpl-iso21001) */
.eoms-other-service-divider {
    width: 1px;
    height: 1rem;
    background: #e5e7eb;
    flex-shrink: 0;
}

/* ISO code colour helpers */
.eoms-code-blue   { color: #185FA5; }
.eoms-code-green  { color: #3B6D11; }
.eoms-code-red    { color: #A32D2D; }
.eoms-code-purple { color: #534AB7; }
.eoms-code-amber  { color: #854F0B; }
.eoms-code-gold   { color: #BA7517; }
.eoms-code-teal   { color: #0F6E56; }
.eoms-code-gray   { color: #5F5E5A; }
.eoms-code-coral  { color: #993C1D; }

/* ---------------------------------------------------------------
   ISO Pages Responsive
--------------------------------------------------------------- */
@media (max-width: 1024px) {
    .iso-benefits-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .iso-benefits-visual {
        grid-template-columns: repeat(4, 1fr);
    }
    .eoms-other-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .eoms-services-narrow-container {
        max-width: 960px;
    }
}

@media (max-width: 768px) {
    /* Header */
    .iso-header .container {
        flex-direction: column;
        gap: 1.5rem;
    }
    .iso-header-image-wrap {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .iso-header-image-wrap .rounded-image {
        height: 180px;
    }

    /* Grids */
    .iso-dual-grid,
    .iso-elements-grid,
    .iso-benefits-inner {
        grid-template-columns: 1fr;
    }
    .iso-benefits-visual {
        grid-template-columns: repeat(2, 1fr);
    }
    .iso-apply-box {
        padding: 2rem 1.5rem;
    }

    /* Other ISO Services */
    .eoms-other-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .eoms-services-narrow-container {
        max-width: 100%;
        padding: 0 20px;
    }
    .eoms-other-service-card {
        padding: 0.6rem 0.4rem;
    }
    .eoms-other-service-name {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .iso-benefits-visual {
        grid-template-columns: repeat(2, 1fr);
    }
    .eoms-other-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ================================================================
   ISO 21001 – Educational Organizations Management System (EOMS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* Section subtitle under h2 heading */
.section-description {
    font-size: 0.975rem;
    color: #6b7280;
    margin: 0.35rem 0 0;
    line-height: 1.65;
}

/* ---------------------------------------------------------------
   What Is – two-column: text + HLS card
--------------------------------------------------------------- */
.eoms-what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.eoms-what-text .text-content { margin-bottom: 1.25rem; }

.eoms-hls-card {
    background: linear-gradient(135deg, #fff7ed 0%, #fdf2f8 100%);
    border: 1px solid #fed7aa;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    box-sizing: border-box;
}
.eoms-hls-icon { font-size: 2.25rem; display: block; }
.eoms-hls-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.4;
}
.eoms-hls-card p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.75;
    margin: 0;
}

/* ---------------------------------------------------------------
   Who Can Apply – 3-column icon + label cards
--------------------------------------------------------------- */
.eoms-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.eoms-who-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.eoms-who-card:hover {
    border-color: #fed7aa;
    background: linear-gradient(to right, #fff7ed, #fdf2f8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.eoms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Key Principles – 5-column pill grid (2 rows of 5)
--------------------------------------------------------------- */
.eoms-principles-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
.eoms-principle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.35;
    position: relative;
    overflow: hidden;
}
.eoms-principle-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #ea580c, #ec4899);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.eoms-principle-card:hover {
    border-color: #fed7aa;
    background: linear-gradient(to bottom, #fff7ed, #fff);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.09);
}
.eoms-principle-card:hover::before { transform: scaleX(1); }
.eoms-principle-icon { font-size: 1.6rem; display: block; }

/* ---------------------------------------------------------------
   Benefits – 4-col grid, 5th card centred (spans cols 2-3)
--------------------------------------------------------------- */
.eoms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}
.eoms-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.eoms-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #ea580c, #ec4899);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.eoms-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #fed7aa;
}
.eoms-benefit-card:hover::before { transform: scaleX(1); }
.eoms-benefit-card--wide { grid-column: 2 / 4; }
.eoms-benefit-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(to right, #ea580c, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.eoms-benefit-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.eoms-benefit-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Why Choose Us – horizontal flex pill strip
--------------------------------------------------------------- */
.eoms-choose-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.eoms-choose-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 2rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}
.eoms-choose-item:hover {
    border-color: #fed7aa;
    background: linear-gradient(to right, #fff7ed, #fdf2f8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.eoms-choose-icon {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(to right, #ea580c, #ec4899);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box additions (supplements .iso-apply-box)
--------------------------------------------------------------- */
.eoms-cta-box { text-align: center; }
.eoms-cta-box .text-content {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}
.eoms-cta-badge {
    display: inline-block;
    background: linear-gradient(to right, #fff7ed, #fdf2f8);
    border: 1px solid #fed7aa;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ea580c;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------
   CTA Button — shared across ISO pages
--------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
}
.btn-gradient {
    background: linear-gradient(to right, #ea580c, #ec4899);
    color: #fff !important;
}
.btn-gradient:hover {
    background: linear-gradient(to right, #c2410c, #db2777);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234,88,12,0.3);
}

/* ---------------------------------------------------------------
   ISO 21001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .eoms-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .eoms-benefit-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
    .eoms-what-grid { grid-template-columns: 1fr; }
    .eoms-hls-card { height: auto; }
    .eoms-who-grid { grid-template-columns: repeat(2, 1fr); }
    .eoms-principles-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
    .eoms-who-grid { grid-template-columns: 1fr; }
    .eoms-principles-grid { grid-template-columns: repeat(2, 1fr); }
    .eoms-benefits-grid { grid-template-columns: 1fr; }
    .eoms-benefit-card--wide { grid-column: auto; }
    .eoms-choose-grid { flex-direction: column; align-items: stretch; }
    .eoms-choose-item { border-radius: 0.75rem; }
}
@media (max-width: 480px) {
    .eoms-principles-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   ISO 9001 – Quality Management System (QMS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   Investment Note Banner
--------------------------------------------------------------- */
.qms-investment-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, #fefce8, #fef9c3);
    border: 1px solid #fde047;
    border-left: 4px solid #ca8a04;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.qms-investment-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.qms-investment-note p {
    margin: 0;
    font-size: 0.975rem;
    color: #713f12;
    line-height: 1.7;
}
.qms-investment-note strong { color: #92400e; }

/* ---------------------------------------------------------------
   Assessment – two-column: text + ISO 9000 trio card
--------------------------------------------------------------- */
.qms-assessment-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.qms-assessment-text .text-content { margin-bottom: 1rem; }

.qms-standards-trio {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.qms-standards-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 1.5rem;
    font-size: 0.975rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    background: linear-gradient(to right, #ca8a04, #ea580c);
}
.qms-standard-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    transition: background 0.2s ease;
}
.qms-standard-item:last-child { border-bottom: none; }
.qms-standard-item:hover { background: linear-gradient(to right, #fefce8, #fffbeb); }
.qms-standard-badge {
    background: #f3f4f6;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.3rem 0.75rem;
    border-radius: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.qms-badge-primary {
    background: linear-gradient(to right, #ca8a04, #ea580c);
    color: #fff;
    border-color: transparent;
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------
   Who Can Apply – two-column: text + chips / generic card
--------------------------------------------------------------- */
.qms-clients-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.qms-clients-text .text-content { margin-bottom: 1.25rem; }
.qms-client-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.qms-client-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff;
    border: 1px solid #fde047;
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #713f12;
    transition: all 0.2s ease;
}
.qms-client-chip:hover {
    background: linear-gradient(to right, #fefce8, #fef9c3);
    transform: translateY(-1px);
}
.qms-generic-card {
    background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
    border: 1px solid #fde047;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.qms-generic-icon { font-size: 2rem; display: block; }
.qms-generic-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}
.qms-generic-card p {
    font-size: 0.925rem;
    color: #78350f;
    line-height: 1.75;
    margin: 0;
}

/* ---------------------------------------------------------------
   Client Benefits – 3-column icon + text cards
--------------------------------------------------------------- */
.qms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.qms-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.qms-benefit-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #ca8a04, #ea580c);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.qms-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #fde047;
}
.qms-benefit-card:hover::before { transform: scaleX(1); }
.qms-benefit-icon-wrap {
    font-size: 2rem;
    display: block;
    margin-bottom: 1rem;
}
.qms-benefit-title {
    font-size: 0.975rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.qms-benefit-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Key Focus Areas – 2-column dot list panel
--------------------------------------------------------------- */
.qms-focus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.qms-focus-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
    line-height: 1.45;
}
.qms-focus-item:hover { background: linear-gradient(to right, #fefce8, #fffbeb); }
.qms-focus-item:nth-last-child(-n+2) { border-bottom: none; }
.qms-focus-dot {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #ca8a04, #ea580c);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – warm yellow / gold theme
--------------------------------------------------------------- */
.qms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
    border: 1px solid #fde047;
}
.qms-cta-box .section-title {
    background: linear-gradient(to right, #ca8a04, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.qms-cta-box .text-content {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 1.75rem;
}
.qms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #fde047;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------
   ISO 9001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1023px) {
    .qms-assessment-grid,
    .qms-clients-grid { grid-template-columns: 1fr; }
    .qms-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .qms-benefits-grid { grid-template-columns: 1fr; }
    .qms-focus-grid { grid-template-columns: 1fr; }
    .qms-focus-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .qms-focus-item:last-child { border-bottom: none; }
    .qms-client-chips { flex-direction: column; }
    .qms-client-chip { border-radius: 0.6rem; }
}
@media (max-width: 480px) {
    .qms-investment-note { flex-direction: column; gap: 0.5rem; }
}


/* ================================================================
   ISO 14001 – Environmental Management System (EMS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   Driver Chips – regulatory / market pressure indicators
--------------------------------------------------------------- */
.ems-drivers-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.75rem;
    justify-content: center;
}
.ems-driver-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid #bbf7d0;
    border-radius: 2rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #166534;
    box-shadow: 0 2px 8px rgba(22,163,74,0.08);
    transition: all 0.25s ease;
}
.ems-driver-chip:hover {
    background: linear-gradient(to right, #f0fdf4, #dcfce7);
    border-color: #4ade80;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(22,163,74,0.14);
}
.ems-driver-chip span:first-child { font-size: 1rem; }

/* ---------------------------------------------------------------
   Why It Matters – two-column: text + imperative card
--------------------------------------------------------------- */
.ems-why-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.ems-why-text .text-content { margin-bottom: 1rem; }
.ems-imperative-card {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    color: #fff;
}
.ems-imperative-icon { font-size: 2.25rem; display: block; }
.ems-imperative-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.ems-imperative-card p {
    font-size: 0.925rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.75;
    margin: 0;
}

/* ---------------------------------------------------------------
   Benefits – 4-column grid, 9th card centred
--------------------------------------------------------------- */
.ems-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.ems-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.6rem 1.4rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.ems-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #16a34a, #15803d);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.ems-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.11);
    border-color: #86efac;
}
.ems-benefit-card:hover::before { transform: scaleX(1); }
.ems-benefit-card--wide { grid-column: 2 / 4; }
.ems-benefit-icon-wrap {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.85rem;
}
.ems-benefit-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.ems-benefit-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* ---------------------------------------------------------------
   Who Needs – 3-column adoption stage cards
--------------------------------------------------------------- */
.ems-adoption-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}
.ems-adoption-card {
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.3s ease;
}
.ems-adoption-card:hover { transform: translateY(-3px); }
.ems-adopting {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}
.ems-engaged {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}
.ems-all {
    background: linear-gradient(135deg, #1e3a5f 0%, #0369a1 100%);
}
.ems-adoption-icon { font-size: 2rem; display: block; }
.ems-adoption-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.ems-adoption-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}
.ems-adopting h3 { color: #166534; }
.ems-adopting p  { color: #14532d; }
.ems-engaged h3, .ems-engaged p,
.ems-all h3,     .ems-all p     { color: rgba(255,255,255,0.9); }

.ems-challenge-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
    border-left: 4px solid #16a34a;
    border-radius: 0.75rem;
    padding: 1.1rem 1.5rem;
}
.ems-challenge-icon { font-size: 1.2rem; color: #16a34a; flex-shrink: 0; margin-top: 1px; }
.ems-challenge-note p {
    margin: 0;
    font-size: 0.95rem;
    color: #166534;
    line-height: 1.7;
}

/* ---------------------------------------------------------------
   Key Environmental Aspects – 2-column icon + text rows
--------------------------------------------------------------- */
.ems-aspects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.ems-aspect-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}
.ems-aspect-item:hover { background: linear-gradient(to right, #f0fdf4, #dcfce7); }
.ems-aspect-item:nth-last-child(-n+2) { border-bottom: none; }
.ems-aspect-icon { font-size: 1.85rem; flex-shrink: 0; }
.ems-aspect-item div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ems-aspect-item strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}
.ems-aspect-item span {
    font-size: 0.825rem;
    color: #6b7280;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   CTA Box – forest green theme
--------------------------------------------------------------- */
.ems-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}
.ems-cta-box .section-title {
    background: linear-gradient(to right, #15803d, #166534);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ems-cta-box .text-content {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 1.75rem;
}
.ems-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #86efac;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #166534;
    margin-bottom: 1rem;
}
/* Green CTA button override for ISO 14001 */
.ems-cta-box .btn-gradient {
    background: linear-gradient(to right, #15803d, #16a34a);
}
.ems-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #14532d, #15803d);
    box-shadow: 0 6px 20px rgba(22,163,74,0.3);
}

/* ---------------------------------------------------------------
   ISO 14001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .ems-benefits-grid { grid-template-columns: repeat(3, 1fr); }
    .ems-benefit-card--wide { grid-column: auto; }
}
@media (max-width: 1023px) {
    .ems-why-grid { grid-template-columns: 1fr; }
    .ems-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .ems-adoption-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .ems-benefits-grid { grid-template-columns: 1fr; }
    .ems-aspects-grid { grid-template-columns: 1fr; }
    .ems-aspect-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .ems-aspect-item:last-child { border-bottom: none; }
    .ems-challenge-note { flex-direction: column; gap: 0.5rem; }
}
@media (max-width: 480px) {
    .ems-drivers-bar { flex-direction: column; align-items: stretch; }
    .ems-driver-chip { border-radius: 0.6rem; justify-content: flex-start; }
}


/* ================================================================
   ISO 45001 – Occupational Health & Safety Management (OHS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   CCPL Commitment Note Banner
--------------------------------------------------------------- */
.ohs-ccpl-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, #fff7ed, #fef2f2);
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.ohs-ccpl-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.ohs-ccpl-note p {
    margin: 0;
    font-size: 0.975rem;
    color: #7f1d1d;
    line-height: 1.7;
}
.ohs-ccpl-note strong { color: #991b1b; }

/* ---------------------------------------------------------------
   Benefits to Organization – 4-column grid, 9th card centred
--------------------------------------------------------------- */
.ohs-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.ohs-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.6rem 1.4rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.ohs-benefit-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #dc2626, #ea580c);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.ohs-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #fca5a5;
}
.ohs-benefit-card:hover::before { transform: scaleX(1); }
.ohs-benefit-card--wide { grid-column: 2 / 4; }
.ohs-benefit-icon-wrap {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.85rem;
}
.ohs-benefit-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.ohs-benefit-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* ---------------------------------------------------------------
   Benefits to Client – 2-column icon + text cards
--------------------------------------------------------------- */
.ohs-client-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.ohs-client-card {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}
.ohs-client-card:hover {
    border-color: #fca5a5;
    background: linear-gradient(to right, #fff7ed, #fef2f2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.09);
}
.ohs-client-icon { font-size: 1.85rem; flex-shrink: 0; margin-top: 2px; }
.ohs-client-card h3 {
    font-size: 0.975rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.4rem;
    line-height: 1.3;
}
.ohs-client-card p {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Certification Process – horizontal 4-step flow
--------------------------------------------------------------- */
.ohs-process-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: start;
}
.ohs-process-step {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    text-align: center;
}
.ohs-process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.11);
    border-color: #fca5a5;
}
.ohs-process-connector {
    font-size: 1.5rem;
    color: #dc2626;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    margin-top: 1.75rem;
}
.ohs-process-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(to right, #dc2626, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.ohs-process-title {
    font-size: 0.975rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.ohs-process-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* ---------------------------------------------------------------
   CTA Box – red / safety theme
--------------------------------------------------------------- */
.ohs-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #fff7ed 0%, #fef2f2 100%);
    border: 1px solid #fca5a5;
}
.ohs-cta-box .section-title {
    background: linear-gradient(to right, #dc2626, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ohs-cta-box .text-content {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}
.ohs-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 1rem;
}
.ohs-cta-box .btn-gradient {
    background: linear-gradient(to right, #dc2626, #ea580c);
}
.ohs-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #b91c1c, #c2410c);
    box-shadow: 0 6px 20px rgba(220,38,38,0.3);
}

/* ---------------------------------------------------------------
   ISO 45001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .ohs-benefits-grid { grid-template-columns: repeat(3, 1fr); }
    .ohs-benefit-card--wide { grid-column: auto; }
    .ohs-process-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .ohs-process-connector { display: none; }
}
@media (max-width: 1023px) {
    .ohs-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .ohs-benefits-grid { grid-template-columns: 1fr; }
    .ohs-client-grid { grid-template-columns: 1fr; }
    .ohs-process-grid { grid-template-columns: 1fr; }
    .ohs-ccpl-note { flex-direction: column; gap: 0.5rem; }
}


/* ================================================================
   ISO 22000 – Food Safety Management Systems (FSMS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   HLS Compatibility Bar
--------------------------------------------------------------- */
.fsms-hls-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(to right, #fff7ed, #fefce8);
    border: 1px solid #fde68a;
    border-radius: 0.75rem;
}
.fsms-hls-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #92400e;
    white-space: nowrap;
}
.fsms-hls-chip {
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 2rem;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
    transition: all 0.2s ease;
}
.fsms-hls-chip:hover {
    border-color: #f59e0b;
    background: #fefce8;
}

/* ---------------------------------------------------------------
   Who Is It For – two-column: text + applicability card
--------------------------------------------------------------- */
.fsms-who-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.fsms-who-text .text-content { margin-bottom: 1rem; }
.fsms-applicability-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.fsms-applicability-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 1.5rem;
    font-size: 1.5rem;
    background: linear-gradient(to right, #d97706, #ea580c);
}
.fsms-applicability-header h3 {
    font-size: 0.975rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.fsms-applicability-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fsms-applicability-list li {
    padding: 0.8rem 1.5rem 0.8rem 2.5rem;
    font-size: 0.9rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
    line-height: 1.45;
    transition: background 0.2s ease;
}
.fsms-applicability-list li:last-child { border-bottom: none; }
.fsms-applicability-list li:hover { background: linear-gradient(to right, #fff7ed, #fefce8); }
.fsms-applicability-list li::before {
    content: "›";
    position: absolute;
    left: 1.25rem;
    color: #d97706;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
}

/* ---------------------------------------------------------------
   Key Elements – 4-column numbered cards
--------------------------------------------------------------- */
.fsms-elements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.fsms-element-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.fsms-element-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #d97706, #ea580c);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.fsms-element-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #fde68a;
}
.fsms-element-card:hover::before { transform: scaleX(1); }
.fsms-element-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(to right, #d97706, #ea580c);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.fsms-element-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.fsms-element-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Benefits – 3-column cards + integration note
--------------------------------------------------------------- */
.fsms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}
.fsms-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.fsms-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #d97706, #ea580c);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.fsms-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #fde68a;
}
.fsms-benefit-card:hover::before { transform: scaleX(1); }
.fsms-benefit-icon-wrap {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.85rem;
}
.fsms-benefit-title {
    font-size: 0.975rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.fsms-benefit-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}
.fsms-integration-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, #fff7ed, #fefce8);
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}
.fsms-integration-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.fsms-integration-note p {
    margin: 0;
    font-size: 0.95rem;
    color: #78350f;
    line-height: 1.7;
}
.fsms-integration-note strong { color: #92400e; }

/* ---------------------------------------------------------------
   CTA Box – warm orange / amber food theme
--------------------------------------------------------------- */
.fsms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #fff7ed 0%, #fefce8 100%);
    border: 1px solid #fde68a;
}
.fsms-cta-box .section-title {
    background: linear-gradient(to right, #d97706, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fsms-cta-box .text-content {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.75rem;
}
.fsms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 1rem;
}
.fsms-cta-box .btn-gradient {
    background: linear-gradient(to right, #d97706, #ea580c);
}
.fsms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #b45309, #c2410c);
    box-shadow: 0 6px 20px rgba(217,119,6,0.3);
}

/* ---------------------------------------------------------------
   ISO 22000 Responsive
--------------------------------------------------------------- */
@media (max-width: 1023px) {
    .fsms-who-grid { grid-template-columns: 1fr; }
    .fsms-elements-grid { grid-template-columns: repeat(2, 1fr); }
    .fsms-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .fsms-hls-bar { flex-direction: column; align-items: flex-start; }
    .fsms-elements-grid { grid-template-columns: 1fr; }
    .fsms-benefits-grid { grid-template-columns: 1fr; }
    .fsms-integration-note { flex-direction: column; gap: 0.5rem; }
}


/* ================================================================
   ISO 13485 – Medical Device Quality Management System (MDQMS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   Lifecycle Cards – icon + label inline grid
--------------------------------------------------------------- */
.mdqms-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.mdqms-lifecycle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.3;
}
.mdqms-lifecycle-card:hover {
    border-color: #99f6e4;
    background: linear-gradient(to bottom, #f0fdfa, #fff);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.mdqms-lifecycle-icon { font-size: 1.5rem; display: block; }

/* ---------------------------------------------------------------
   Who Should Apply – 3-column icon + label cards
--------------------------------------------------------------- */
.mdqms-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.mdqms-who-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.mdqms-who-card:hover {
    border-color: #99f6e4;
    background: linear-gradient(to right, #f0fdfa, #ecfdf5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.mdqms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Key Features – 2-column dot list panel
--------------------------------------------------------------- */
.mdqms-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.mdqms-feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
    line-height: 1.45;
}
.mdqms-feature-item:hover { background: linear-gradient(to right, #f0fdfa, #ecfdf5); }
.mdqms-feature-item:nth-last-child(-n+2) { border-bottom: none; }
.mdqms-feature-dot {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Benefits – 3-col grid, 7th card wide (spans cols 1–3)
--------------------------------------------------------------- */
.mdqms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.mdqms-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.mdqms-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.mdqms-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #99f6e4;
}
.mdqms-benefit-card:hover::before { transform: scaleX(1); }
.mdqms-benefit-card--wide { grid-column: 1 / -1; }
.mdqms-benefit-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.mdqms-benefit-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.mdqms-benefit-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Global Regulatory Alignment – two-column layout
--------------------------------------------------------------- */
.mdqms-regulatory-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.mdqms-regulatory-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1.25rem;
}
.mdqms-framework-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.mdqms-framework-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}
.mdqms-framework-item:last-child { border-bottom: none; }
.mdqms-framework-item:hover { background: linear-gradient(to right, #f0fdfa, #ecfdf5); }
.mdqms-framework-flag { font-size: 1.5rem; flex-shrink: 0; }
.mdqms-framework-item div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.mdqms-framework-item strong {
    font-size: 0.925rem;
    font-weight: 700;
    color: #1f2937;
}
.mdqms-framework-item span {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
}
.mdqms-markets-card {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
    border: 1px solid #99f6e4;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.mdqms-markets-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f6e56;
    margin: 0 0 0.65rem;
}
.mdqms-markets-note {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 1.1rem;
    line-height: 1.6;
}
.mdqms-markets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.mdqms-market-chip {
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: 2rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #0f6e56;
}

/* ---------------------------------------------------------------
   Why Choose Us – 3-column pill grid
--------------------------------------------------------------- */
.mdqms-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.mdqms-choose-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.mdqms-choose-item:hover {
    border-color: #99f6e4;
    background: linear-gradient(to right, #f0fdfa, #ecfdf5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.mdqms-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – teal / medical theme
--------------------------------------------------------------- */
.mdqms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
    border: 1px solid #99f6e4;
}
.mdqms-cta-box .section-title {
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mdqms-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.mdqms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f6e56;
    margin-bottom: 1rem;
}
.mdqms-cta-box .btn-gradient {
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
}
.mdqms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #0a5240, #0284c7);
    box-shadow: 0 6px 20px rgba(15,110,86,0.3);
}

/* ---------------------------------------------------------------
   ISO 13485 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(4, 1fr); }
    .mdqms-who-grid { grid-template-columns: repeat(2, 1fr); }
    .mdqms-regulatory-grid { grid-template-columns: 1fr; }
    .mdqms-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .mdqms-benefit-card--wide { grid-column: 1 / -1; }
    .mdqms-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(3, 1fr); }
    .mdqms-who-grid { grid-template-columns: 1fr; }
    .mdqms-features-grid { grid-template-columns: 1fr; }
    .mdqms-feature-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .mdqms-feature-item:last-child { border-bottom: none; }
    .mdqms-benefits-grid { grid-template-columns: 1fr; }
    .mdqms-choose-grid { grid-template-columns: 1fr; }
    .mdqms-markets-grid { flex-direction: column; }
}
@media (max-width: 480px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   ISO 13485 – Medical Device Quality Management System (MDQMS)
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   Lifecycle Grid – 7-item icon + label cards
--------------------------------------------------------------- */
.mdqms-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.85rem;
    margin-top: 1.75rem;
}
.mdqms-lifecycle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.35;
}
.mdqms-lifecycle-card:hover {
    border-color: #99f6e4;
    background: linear-gradient(to bottom, #f0fdfa, #fff);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.09);
}
.mdqms-lifecycle-icon { font-size: 1.5rem; display: block; }

/* ---------------------------------------------------------------
   Who Should Apply – 3-column icon + label cards
--------------------------------------------------------------- */
.mdqms-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.mdqms-who-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.mdqms-who-card:hover {
    border-color: #99f6e4;
    background: linear-gradient(to right, #f0fdfa, #ecfdf5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.mdqms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Key Features – 2-column dot list panel
--------------------------------------------------------------- */
.mdqms-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.mdqms-feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
    line-height: 1.45;
}
.mdqms-feature-item:hover { background: linear-gradient(to right, #f0fdfa, #ecfdf5); }
.mdqms-feature-item:nth-last-child(-n+2) { border-bottom: none; }
.mdqms-feature-dot {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Benefits – 3-column numbered cards, 7th card centred
--------------------------------------------------------------- */
.mdqms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.mdqms-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.mdqms-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.mdqms-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #99f6e4;
}
.mdqms-benefit-card:hover::before { transform: scaleX(1); }
.mdqms-benefit-card--wide { grid-column: 2 / 3; }
.mdqms-benefit-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.mdqms-benefit-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.mdqms-benefit-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Global Regulatory Alignment – two-column
--------------------------------------------------------------- */
.mdqms-regulatory-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.mdqms-regulatory-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1.25rem;
}
.mdqms-framework-list {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.mdqms-framework-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}
.mdqms-framework-item:last-child { border-bottom: none; }
.mdqms-framework-item:hover { background: linear-gradient(to right, #f0fdfa, #ecfdf5); }
.mdqms-framework-flag { font-size: 1.5rem; flex-shrink: 0; }
.mdqms-framework-item div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.mdqms-framework-item strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}
.mdqms-framework-item span {
    font-size: 0.825rem;
    color: #6b7280;
    line-height: 1.4;
}

.mdqms-markets-card {
    background: linear-gradient(135deg, #0f6e56 0%, #0ea5e9 100%);
    border-radius: 1rem;
    padding: 2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mdqms-markets-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.mdqms-markets-note {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.82);
    margin: 0;
    line-height: 1.6;
}
.mdqms-markets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.mdqms-market-chip {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 2rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    transition: background 0.2s ease;
}
.mdqms-market-chip:hover { background: rgba(255,255,255,0.25); }

/* ---------------------------------------------------------------
   Why Choose Us – 3-column pill strip
--------------------------------------------------------------- */
.mdqms-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.mdqms-choose-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.mdqms-choose-item:hover {
    border-color: #99f6e4;
    background: linear-gradient(to right, #f0fdfa, #ecfdf5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.mdqms-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – teal / medical theme
--------------------------------------------------------------- */
.mdqms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
    border: 1px solid #99f6e4;
}
.mdqms-cta-box .section-title {
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mdqms-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.mdqms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f6e56;
    margin-bottom: 1rem;
}
.mdqms-cta-box .btn-gradient {
    background: linear-gradient(to right, #0f6e56, #0ea5e9);
}
.mdqms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #0a5240, #0284c7);
    box-shadow: 0 6px 20px rgba(15,110,86,0.3);
}

/* ---------------------------------------------------------------
   ISO 13485 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(4, 1fr); }
    .mdqms-who-grid { grid-template-columns: repeat(2, 1fr); }
    .mdqms-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .mdqms-benefit-card--wide { grid-column: auto; }
    .mdqms-regulatory-grid { grid-template-columns: 1fr; }
    .mdqms-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(3, 1fr); }
    .mdqms-who-grid { grid-template-columns: 1fr; }
    .mdqms-features-grid { grid-template-columns: 1fr; }
    .mdqms-feature-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .mdqms-feature-item:last-child { border-bottom: none; }
    .mdqms-benefits-grid { grid-template-columns: 1fr; }
    .mdqms-markets-grid { grid-template-columns: 1fr; }
    .mdqms-choose-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mdqms-lifecycle-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===============================================================
   ISO 50001 – Energy Management System (EnMS)
   Prefix: enms-
   Reuses: .section, .container, .section-header, .section-title,
           .gradient-text, .text-content, .iso-checklist,
           .iso-apply-box, .btn, .btn-gradient,
           .eoms-other-services-section / grid / card classes,
           .iso-header, .page-header, .gradient-header,
           .rounded-image, .page-title, .page-subtitle
================================================================ */

/* ---------------------------------------------------------------
   HLS Compatibility Bar  (What is ISO 50001 section)
--------------------------------------------------------------- */
.enms-hls-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.75rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.75rem;
    padding: 1rem 1.4rem;
}
.enms-hls-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0369a1;
    white-space: nowrap;
}
.enms-hls-chip {
    background: #fff;
    border: 1px solid #bae6fd;
    border-radius: 2rem;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0369a1;
    transition: background 0.2s;
}
.enms-hls-chip:hover {
    background: #e0f2fe;
}

/* ---------------------------------------------------------------
   Why ISO 50001 – two-column: checklist + stat cards
--------------------------------------------------------------- */
.enms-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.enms-why-text .iso-checklist {
    margin-top: 0.75rem;
}
.enms-why-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.enms-stat-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.enms-stat-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #f59e0b, #ea580c);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.enms-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-color: #fcd34d;
}
.enms-stat-card:hover::before { transform: scaleX(1); }
.enms-stat-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.5rem;
}
.enms-stat-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.enms-stat-desc {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* ---------------------------------------------------------------
   Who Can Apply – icon card grid  (mirrors mdqms-who-grid style)
--------------------------------------------------------------- */
.enms-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.enms-who-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid #fef3c7;
    border-radius: 0.85rem;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.enms-who-card:hover {
    border-color: #fcd34d;
    background: linear-gradient(to right, #fffbeb, #fef9c3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.enms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Benefits – grouped category cards
--------------------------------------------------------------- */
.enms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.enms-benefit-group {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}
.enms-benefit-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.enms-benefit-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    font-size: 1.5rem;
}
.enms-benefit-group-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
/* colour themes per group */
.enms-financial    { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.enms-environmental{ background: linear-gradient(135deg, #10b981, #0ea5e9); }
.enms-operational  { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

.enms-benefit-list {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.enms-benefit-list li {
    font-size: 0.9rem;
    color: #374151;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.5;
}
.enms-benefit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #f59e0b;
}
.enms-environmental .enms-benefit-list li::before { color: #10b981; }
.enms-operational   .enms-benefit-list li::before { color: #6366f1; }

/* ---------------------------------------------------------------
   Why Choose CCPL – reuses mdqms-choose-grid / item / icon
   but with amber accent; new grid class for easy override
--------------------------------------------------------------- */
.enms-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.enms-choose-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.enms-choose-item:hover {
    border-color: #fcd34d;
    background: linear-gradient(to right, #fffbeb, #fef9c3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.enms-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #f59e0b, #ea580c);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.enms-support-note {
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   CTA Box – amber / energy theme
--------------------------------------------------------------- */
.enms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
    border: 1px solid #fcd34d;
}
.enms-cta-box .section-title {
    background: linear-gradient(to right, #f59e0b, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.enms-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.enms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 1rem;
}
.enms-cta-box .btn-gradient {
    background: linear-gradient(to right, #f59e0b, #ea580c);
}
.enms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #d97706, #c2410c);
    box-shadow: 0 6px 20px rgba(245,158,11,0.35);
}

/* ---------------------------------------------------------------
   ISO 50001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1023px) {
    .enms-why-grid      { grid-template-columns: 1fr; }
    .enms-who-grid      { grid-template-columns: repeat(2, 1fr); }
    .enms-benefits-grid { grid-template-columns: 1fr; }
    .enms-choose-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .enms-why-visual    { grid-template-columns: 1fr 1fr; }
    .enms-who-grid      { grid-template-columns: 1fr; }
    .enms-choose-grid   { grid-template-columns: 1fr; }
    .enms-hls-bar       { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .enms-why-visual    { grid-template-columns: 1fr; }
}
/* ===============================================================
   ISO/IEC 27001:2022 – Information Security Management System
   Prefix: isms-
   Reuses: .section, .container, .section-header, .section-title,
           .gradient-text, .text-content, .iso-apply-box,
           .btn, .btn-gradient, .eoms-other-services-* classes,
           .iso-header, .page-header, .gradient-header,
           .rounded-image, .page-title, .page-subtitle,
           .iso-header-subnumber
================================================================ */

/* ---------------------------------------------------------------
   Threat Bar  (Intro section)
--------------------------------------------------------------- */
.isms-threat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.75rem;
    background: #fdf2f8;
    border: 1px solid #f0abfc;
    border-radius: 0.75rem;
    padding: 1rem 1.4rem;
}
.isms-threat-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #f0abfc;
    border-radius: 2rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #86198f;
    transition: background 0.2s;
}
.isms-threat-chip:hover { background: #fae8ff; }
.isms-threat-arrow {
    font-size: 1.2rem;
    color: #a855f7;
    font-weight: 700;
}
.isms-threat-solution {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, #7e22ce, #3b82f6);
    border-radius: 2rem;
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

/* ---------------------------------------------------------------
   What is ISO 27001 – two-column: text+themes | annex card
--------------------------------------------------------------- */
.isms-what-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: start;
}
.isms-four-themes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.isms-theme-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.isms-theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.isms-theme-icon { font-size: 1.3rem; flex-shrink: 0; }
.isms-theme-org      { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.isms-theme-people   { background: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }
.isms-theme-physical { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.isms-theme-tech     { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

.isms-annex-card {
    background: linear-gradient(135deg, #7e22ce 0%, #3b82f6 100%);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    color: #fff;
    text-align: center;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 30px rgba(126,34,206,0.25);
}
.isms-annex-icon { font-size: 2rem; }
.isms-annex-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.isms-annex-count {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.03em;
}
.isms-annex-card p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   Why ISO 27001 is Important – 4+1 card grid
--------------------------------------------------------------- */
.isms-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.isms-why-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.isms-why-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #7e22ce, #3b82f6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.isms-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.11);
    border-color: #ddd6fe;
}
.isms-why-card:hover::before { transform: scaleX(1); }
.isms-why-card--wide { grid-column: 2 / 4; }
.isms-why-icon-wrap {
    font-size: 1.75rem;
    margin-bottom: 0.85rem;
    display: block;
}
.isms-why-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}
.isms-why-desc {
    font-size: 0.855rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Who Should Implement – icon card grid  (purple accent)
--------------------------------------------------------------- */
.isms-who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.isms-who-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid #ede9fe;
    border-radius: 0.85rem;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.isms-who-card:hover {
    border-color: #a78bfa;
    background: linear-gradient(to right, #faf5ff, #ede9fe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.isms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Benefits – 2-column dot list panel
--------------------------------------------------------------- */
.isms-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.isms-benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
    line-height: 1.45;
}
.isms-benefit-item:hover { background: linear-gradient(to right, #faf5ff, #ede9fe); }
.isms-benefit-item:nth-last-child(-n+2) { border-bottom: none; }
.isms-benefit-dot {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #7e22ce, #3b82f6);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Why Choose Us – pill strip  (purple accent)
--------------------------------------------------------------- */
.isms-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.isms-choose-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.isms-choose-item:hover {
    border-color: #a78bfa;
    background: linear-gradient(to right, #faf5ff, #ede9fe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.isms-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #7e22ce, #3b82f6);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – purple / security theme
--------------------------------------------------------------- */
.isms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
}
.isms-cta-box .section-title {
    background: linear-gradient(to right, #7e22ce, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.isms-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.isms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd6fe;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #7e22ce;
    margin-bottom: 1rem;
}
.isms-cta-box .btn-gradient {
    background: linear-gradient(to right, #7e22ce, #3b82f6);
}
.isms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #6b21a8, #2563eb);
    box-shadow: 0 6px 20px rgba(126,34,206,0.35);
}

/* ---------------------------------------------------------------
   ISO 27001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .isms-why-grid  { grid-template-columns: repeat(2, 1fr); }
    .isms-why-card--wide { grid-column: auto; }
    .isms-who-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
    .isms-what-grid { grid-template-columns: 1fr; }
    .isms-annex-card { min-width: unset; width: 100%; }
    .isms-who-grid  { grid-template-columns: repeat(2, 1fr); }
    .isms-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .isms-why-grid  { grid-template-columns: 1fr; }
    .isms-four-themes { grid-template-columns: 1fr 1fr; }
    .isms-who-grid  { grid-template-columns: 1fr; }
    .isms-benefits-grid { grid-template-columns: 1fr; }
    .isms-benefit-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .isms-benefit-item:last-child { border-bottom: none; }
    .isms-choose-grid { grid-template-columns: 1fr; }
    .isms-threat-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .isms-four-themes { grid-template-columns: 1fr; }
}

/* ===============================================================
   ISO/IEC 20000-1:2018 – IT Service Management System
   Prefix: itsm-
   Reuses: .section, .container, .section-header, .section-title,
           .gradient-text, .text-content, .iso-apply-box,
           .btn, .btn-gradient, .eoms-other-services-* classes,
           .iso-header, .page-header, .gradient-header,
           .rounded-image, .page-title, .page-subtitle,
           .iso-header-subnumber
================================================================ */

/* ---------------------------------------------------------------
   What is ISO 20000-1 – two-column: ensures card | HLS card
--------------------------------------------------------------- */
.itsm-what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.75rem;
    align-items: start;
}
.itsm-ensures-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.itsm-ensures-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1.25rem;
}
.itsm-ensures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.itsm-ensures-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
    transition: all 0.2s ease;
}
.itsm-ensures-item:hover {
    background: linear-gradient(to right, #eff6ff, #dbeafe);
    border-color: #93c5fd;
    transform: translateY(-1px);
}
.itsm-ensures-icon { font-size: 1.2rem; flex-shrink: 0; }

.itsm-hls-card {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    border-radius: 1rem;
    padding: 1.75rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 8px 30px rgba(14,165,233,0.25);
}
.itsm-hls-icon { font-size: 2rem; }
.itsm-hls-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.itsm-hls-card p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.65;
    margin: 0;
}
.itsm-hls-card strong { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------
   Who Should Apply – icon card grid  (blue accent)
--------------------------------------------------------------- */
.itsm-who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.itsm-who-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid #dbeafe;
    border-radius: 0.85rem;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.itsm-who-card:hover {
    border-color: #60a5fa;
    background: linear-gradient(to right, #eff6ff, #dbeafe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.itsm-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Key Benefits – 4-column feature cards
--------------------------------------------------------------- */
.itsm-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.itsm-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.itsm-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.itsm-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.11);
    border-color: #bfdbfe;
}
.itsm-benefit-card:hover::before { transform: scaleX(1); }
.itsm-benefit-icon-wrap {
    font-size: 1.75rem;
    margin-bottom: 0.85rem;
    display: block;
}
.itsm-benefit-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}
.itsm-benefit-desc {
    font-size: 0.855rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Core Requirements – two-column numbered + dot list
--------------------------------------------------------------- */
.itsm-requirements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.itsm-req-column {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.itsm-req-column-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    margin: 0;
    padding: 1rem 1.4rem;
}
.itsm-req-list {
    display: flex;
    flex-direction: column;
}
.itsm-req-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.4rem;
    font-size: 0.9rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
    line-height: 1.45;
}
.itsm-req-item:last-child { border-bottom: none; }
.itsm-req-item:hover { background: linear-gradient(to right, #eff6ff, #dbeafe); }
.itsm-req-num {
    font-size: 0.75rem;
    font-weight: 800;
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 1.8rem;
    flex-shrink: 0;
}
.itsm-req-dot {
    width: 0.55rem;
    height: 0.55rem;
    min-width: 0.55rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    flex-shrink: 0;
    margin-left: 0.1rem;
}

/* ---------------------------------------------------------------
   Why Choose Us – pill strip  (blue accent)
--------------------------------------------------------------- */
.itsm-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.itsm-choose-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.itsm-choose-item:hover {
    border-color: #60a5fa;
    background: linear-gradient(to right, #eff6ff, #dbeafe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.itsm-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – blue / IT theme
--------------------------------------------------------------- */
.itsm-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
    border: 1px solid #bfdbfe;
}
.itsm-cta-box .section-title {
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.itsm-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.itsm-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 1rem;
}
.itsm-cta-box .btn-gradient {
    background: linear-gradient(to right, #0ea5e9, #6366f1);
}
.itsm-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #0284c7, #4f46e5);
    box-shadow: 0 6px 20px rgba(14,165,233,0.35);
}

/* ---------------------------------------------------------------
   ISO 20000-1 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .itsm-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .itsm-who-grid      { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
    .itsm-what-grid         { grid-template-columns: 1fr; }
    .itsm-who-grid          { grid-template-columns: repeat(2, 1fr); }
    .itsm-requirements-grid { grid-template-columns: 1fr; }
    .itsm-choose-grid       { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .itsm-ensures-grid  { grid-template-columns: 1fr; }
    .itsm-who-grid      { grid-template-columns: 1fr; }
    .itsm-benefits-grid { grid-template-columns: 1fr; }
    .itsm-choose-grid   { grid-template-columns: 1fr; }
}

/* ===============================================================
   ISO 41001:2018 – Facility Management System
   Prefix: fms-
   Reuses: .section, .container, .section-header, .section-title,
           .gradient-text, .text-content, .iso-checklist,
           .iso-apply-box, .btn, .btn-gradient,
           .eoms-other-services-* classes,
           .iso-header, .page-header, .gradient-header,
           .rounded-image, .page-title, .page-subtitle,
           .iso-header-subnumber
================================================================ */

/* ---------------------------------------------------------------
   Pillars Bar  (What is section)
--------------------------------------------------------------- */
.fms-pillars-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 1.25rem 1.75rem;
}
.fms-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.85rem 1.25rem;
    min-width: 90px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.fms-pillar:hover {
    border-color: #7dd3fc;
    background: linear-gradient(to bottom, #f0f9ff, #e0f2fe);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.09);
}
.fms-pillar-icon { font-size: 1.5rem; }
.fms-pillar-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: 0.02em;
}
.fms-pillar-divider {
    font-size: 1.3rem;
    font-weight: 700;
    color: #94a3b8;
}
.fms-pillar-result {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f6e56;
    margin-left: 0.25rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Why ISO 41001 – two-column: checklist + stat cards
   (same pattern as enms-why-grid — new prefix for FMS theme)
--------------------------------------------------------------- */
.fms-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.fms-why-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.fms-stat-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.fms-stat-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.fms-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-color: #bae6fd;
}
.fms-stat-card:hover::before { transform: scaleX(1); }
.fms-stat-icon { font-size: 1.8rem; display: block; margin-bottom: 0.5rem; }
.fms-stat-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.fms-stat-desc {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* ---------------------------------------------------------------
   Who Should Implement – icon card grid  (sky-blue accent)
--------------------------------------------------------------- */
.fms-who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.fms-who-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid #e0f2fe;
    border-radius: 0.85rem;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.fms-who-card:hover {
    border-color: #7dd3fc;
    background: linear-gradient(to right, #f0f9ff, #e0f2fe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.fms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Benefits – grouped category cards
   (same structure as enms-benefit-group — FMS colour themes)
--------------------------------------------------------------- */
.fms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.fms-benefit-group {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}
.fms-benefit-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.fms-benefit-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    font-size: 1.5rem;
}
.fms-benefit-group-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.fms-operational { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.fms-financial   { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.fms-strategic   { background: linear-gradient(135deg, #10b981, #0ea5e9); }

.fms-benefit-list {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.fms-benefit-list li {
    font-size: 0.9rem;
    color: #374151;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.5;
}
.fms-benefit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #0ea5e9;
}
.fms-financial .fms-benefit-list li::before  { color: #f59e0b; }
.fms-strategic .fms-benefit-list li::before  { color: #10b981; }

/* ---------------------------------------------------------------
   Why Choose – pill strip  (sky-blue accent)
--------------------------------------------------------------- */
.fms-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.fms-choose-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.fms-choose-item:hover {
    border-color: #7dd3fc;
    background: linear-gradient(to right, #f0f9ff, #e0f2fe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.fms-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – sky-blue / facility theme
--------------------------------------------------------------- */
.fms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%);
    border: 1px solid #bae6fd;
}
.fms-cta-box .section-title {
    background: linear-gradient(to right, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fms-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.fms-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #bae6fd;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 1rem;
}
.fms-cta-box .btn-gradient {
    background: linear-gradient(to right, #0ea5e9, #6366f1);
}
.fms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #0284c7, #4f46e5);
    box-shadow: 0 6px 20px rgba(14,165,233,0.35);
}

/* ---------------------------------------------------------------
   ISO 41001 Responsive
--------------------------------------------------------------- */
@media (max-width: 1023px) {
    .fms-why-grid      { grid-template-columns: 1fr; }
    .fms-who-grid      { grid-template-columns: repeat(2, 1fr); }
    .fms-benefits-grid { grid-template-columns: 1fr; }
    .fms-choose-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .fms-why-visual    { grid-template-columns: 1fr 1fr; }
    .fms-who-grid      { grid-template-columns: 1fr; }
    .fms-choose-grid   { grid-template-columns: 1fr; }
    .fms-pillars-bar   { gap: 0.5rem; }
    .fms-pillar-result { white-space: normal; text-align: center; }
}
@media (max-width: 480px) {
    .fms-why-visual    { grid-template-columns: 1fr; }
    .fms-pillars-bar   { flex-direction: column; align-items: center; }
}

/* ===============================================================
   ISO 37301:2021 – Compliance Management System
   Prefix: cms-
   Reuses: .section, .container, .section-header, .section-title,
           .gradient-text, .text-content, .iso-checklist,
           .iso-apply-box, .btn, .btn-gradient,
           .eoms-other-services-* classes (with eoms-code-* colours),
           .iso-header, .page-header, .gradient-header,
           .rounded-image, .page-title, .page-subtitle,
           .iso-header-subnumber
================================================================ */

/* ---------------------------------------------------------------
   What is ISO 37301 – compliance items grid
--------------------------------------------------------------- */
.cms-compliance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.cms-compliance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    background: #fff;
    border: 1.5px solid #d1fae5;
    border-radius: 0.85rem;
    padding: 1.1rem 0.75rem;
    font-size: 0.845rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.cms-compliance-item:hover {
    border-color: #6ee7b7;
    background: linear-gradient(to bottom, #f0fdf4, #dcfce7);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.cms-compliance-icon { font-size: 1.5rem; }

/* ---------------------------------------------------------------
   Why Important – two-column: risk card | solution card
--------------------------------------------------------------- */
.cms-importance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.iso-info-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.iso-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, #dc2626, #f97316);
    font-size: 1.4rem;
}
.iso-card-icon { flex-shrink: 0; }
.iso-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.cms-risk-list {
    padding: 1.25rem 1.4rem 1.25rem 2.6rem !important;
    margin: 0 !important;
}
.cms-risk-list li {
    font-size: 0.9rem;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.cms-solution-card {
    background: linear-gradient(135deg, #065f46 0%, #0369a1 100%);
    border-radius: 1rem;
    padding: 2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 8px 30px rgba(6,95,70,0.25);
}
.cms-solution-icon { font-size: 2.2rem; }
.cms-solution-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.cms-solution-card p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.65;
    margin: 0;
}
.cms-solution-card strong { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------
   Key Principles – 6-column icon+title cards
--------------------------------------------------------------- */
.cms-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.cms-principle-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.cms-principle-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #065f46, #0369a1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.cms-principle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.11);
    border-color: #a7f3d0;
}
.cms-principle-card:hover::before { transform: scaleX(1); }
.cms-principle-icon { font-size: 1.9rem; }
.cms-principle-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
   Benefits – 3×2 numbered cards  (mirrors mdqms-benefit-card)
--------------------------------------------------------------- */
.cms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.cms-benefit-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.cms-benefit-card::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #065f46, #0369a1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.cms-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #a7f3d0;
}
.cms-benefit-card:hover::before { transform: scaleX(1); }
.cms-benefit-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(to right, #065f46, #0369a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.cms-benefit-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.cms-benefit-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Who Can Apply – icon card grid  (green accent)
--------------------------------------------------------------- */
.cms-who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.cms-who-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid #d1fae5;
    border-radius: 0.85rem;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.cms-who-card:hover {
    border-color: #6ee7b7;
    background: linear-gradient(to right, #f0fdf4, #dcfce7);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.cms-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Key Components – 2-column dot list panel
   (same structure as isms-benefits-grid — green accent)
--------------------------------------------------------------- */
.cms-components-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.cms-component-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
    line-height: 1.45;
}
.cms-component-item:hover { background: linear-gradient(to right, #f0fdf4, #dcfce7); }
.cms-component-item:nth-last-child(-n+2) { border-bottom: none; }
.cms-component-dot {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #065f46, #0369a1);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Why Choose Us – 2-column cards with title + description
--------------------------------------------------------------- */
.cms-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.cms-choose-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.85rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}
.cms-choose-item:hover {
    border-color: #6ee7b7;
    background: linear-gradient(to right, #f0fdf4, #f7fffe);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.cms-choose-icon {
    width: 1.8rem;
    height: 1.8rem;
    min-width: 1.8rem;
    border-radius: 50%;
    background: linear-gradient(to right, #065f46, #0369a1);
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.cms-choose-item div { display: flex; flex-direction: column; gap: 0.3rem; }
.cms-choose-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}
.cms-choose-item p {
    font-size: 0.855rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}

/* ---------------------------------------------------------------
   CTA Box – green / compliance theme  (no badge — plain box)
--------------------------------------------------------------- */
.cms-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #a7f3d0;
}
.cms-cta-box .section-title {
    background: linear-gradient(to right, #065f46, #0369a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cms-cta-box .text-content {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 1.75rem;
}
.cms-cta-box .text-content strong { color: #065f46; }
.cms-cta-box .btn-gradient {
    background: linear-gradient(to right, #065f46, #0369a1);
}
.cms-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #044335, #025085);
    box-shadow: 0 6px 20px rgba(6,95,70,0.35);
}

/* ---------------------------------------------------------------
   ISO 37301 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .cms-compliance-grid  { grid-template-columns: repeat(3, 1fr); }
    .cms-who-grid         { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
    .cms-importance-grid  { grid-template-columns: 1fr; }
    .cms-principles-grid  { grid-template-columns: repeat(2, 1fr); }
    .cms-benefits-grid    { grid-template-columns: repeat(2, 1fr); }
    .cms-who-grid         { grid-template-columns: repeat(2, 1fr); }
    .cms-choose-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .cms-compliance-grid  { grid-template-columns: repeat(2, 1fr); }
    .cms-principles-grid  { grid-template-columns: 1fr; }
    .cms-benefits-grid    { grid-template-columns: 1fr; }
    .cms-who-grid         { grid-template-columns: 1fr; }
    .cms-components-grid  { grid-template-columns: 1fr; }
    .cms-component-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .cms-component-item:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
    .cms-compliance-grid  { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   ISO 37000 – Governance of Organizations
   Unique page styles — depends on shared ISO foundation above
================================================================ */

/* ---------------------------------------------------------------
   Guidance Note Banner
--------------------------------------------------------------- */
.gov-guidance-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, #eff6ff, #eef2ff);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.gov-guidance-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
    color: #2563eb;
}
.gov-guidance-note p {
    margin: 0;
    font-size: 0.975rem;
    color: #1e3a5f;
    line-height: 1.7;
}

/* ---------------------------------------------------------------
   What Is – two-column: checklist + definition card
--------------------------------------------------------------- */
.gov-what-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.gov-what-text .text-content { margin-bottom: 1.25rem; }
.gov-definition-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #fff;
}
.gov-definition-icon { font-size: 2rem; display: block; }
.gov-definition-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.gov-definition-quote {
    border-left: 3px solid rgba(255,255,255,0.4);
    padding-left: 1rem;
    margin: 0;
    font-size: 0.975rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.75;
    font-style: italic;
}
.gov-definition-source {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    text-align: right;
}

/* ---------------------------------------------------------------
   Key Principles – 3-column icon + title cards
--------------------------------------------------------------- */
.gov-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.gov-principle-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.gov-principle-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #2563eb, #7c3aed);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}
.gov-principle-card:hover {
    border-color: #bfdbfe;
    background: linear-gradient(to right, #eff6ff, #fff);
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.gov-principle-card:hover::before { transform: scaleY(1); }
.gov-principle-icon { font-size: 1.4rem; flex-shrink: 0; }
.gov-principle-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
   Why Governance Matters – two-column: list + stat cards
--------------------------------------------------------------- */
.gov-matters-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    align-items: start;
}
.gov-matters-text .text-content { margin-bottom: 1.25rem; }
.gov-matters-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.gov-stat-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
}
.gov-stat-card:hover {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.gov-stat-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.gov-stat-label {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.9rem;
    margin: 0 0 0.3rem;
}
.gov-stat-desc { font-size: 0.78rem; color: #6b7280; margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------------
   Structure – 4-column numbered cards, 5th centred
--------------------------------------------------------------- */
.gov-structure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.gov-structure-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.gov-structure-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, #2563eb, #7c3aed);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.gov-structure-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #bfdbfe;
}
.gov-structure-card:hover::after { transform: scaleX(1); }
.gov-structure-card--wide { grid-column: 2 / 4; }
.gov-structure-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(to right, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.gov-structure-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
.gov-structure-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
   Benefits – 2-column dot list panel
--------------------------------------------------------------- */
.gov-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.gov-benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}
.gov-benefit-item:hover { background: linear-gradient(to right, #eff6ff, #eef2ff); }
.gov-benefit-item:nth-last-child(-n+2) { border-bottom: none; }
.gov-benefit-dot {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #2563eb, #7c3aed);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Who Should Implement – 4-column icon + label grid
--------------------------------------------------------------- */
.gov-who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.gov-who-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    line-height: 1.4;
}
.gov-who-card:hover {
    border-color: #bfdbfe;
    background: linear-gradient(to right, #eff6ff, #eef2ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.gov-who-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Why Choose – centred flex pill row
--------------------------------------------------------------- */
.gov-choose-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.gov-choose-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 2rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.925rem;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}
.gov-choose-item:hover {
    border-color: #bfdbfe;
    background: linear-gradient(to right, #eff6ff, #eef2ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.gov-choose-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(to right, #2563eb, #7c3aed);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   CTA Box – blue / governance theme
--------------------------------------------------------------- */
.gov-cta-box {
    text-align: center;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
    border: 1px solid #bfdbfe;
}
.gov-cta-box .section-title {
    background: linear-gradient(to right, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gov-cta-box .text-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.gov-cta-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 1rem;
}
.gov-cta-box .btn-gradient {
    background: linear-gradient(to right, #2563eb, #7c3aed);
}
.gov-cta-box .btn-gradient:hover {
    background: linear-gradient(to right, #1d4ed8, #6d28d9);
    box-shadow: 0 6px 20px rgba(37,99,235,0.3);
}

/* ---------------------------------------------------------------
   ISO 37000 Responsive
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .gov-who-grid { grid-template-columns: repeat(3, 1fr); }
    .gov-structure-grid { grid-template-columns: repeat(2, 1fr); }
    .gov-structure-card--wide { grid-column: auto; }
}
@media (max-width: 1023px) {
    .gov-what-grid,
    .gov-matters-grid { grid-template-columns: 1fr; }
    .gov-principles-grid { grid-template-columns: repeat(2, 1fr); }
    .gov-who-grid { grid-template-columns: repeat(2, 1fr); }
    .gov-benefits-grid { grid-template-columns: 1fr; }
    .gov-benefit-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .gov-benefit-item:last-child { border-bottom: none; }
}
@media (max-width: 767px) {
    .gov-principles-grid { grid-template-columns: 1fr; }
    .gov-structure-grid { grid-template-columns: 1fr; }
    .gov-who-grid { grid-template-columns: 1fr; }
    .gov-matters-visual { grid-template-columns: 1fr 1fr; }
    .gov-choose-grid { flex-direction: column; align-items: stretch; }
    .gov-choose-item { border-radius: 0.75rem; }
    .gov-guidance-note { flex-direction: column; gap: 0.5rem; }
}
@media (max-width: 480px) {
    .gov-matters-visual { grid-template-columns: 1fr 1fr; }
}

/* ===== POLICY BOXES SECTION ===== */
.policy-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px;
    justify-content: center;
}

.policy-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    flex: 1 1 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.policy-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #0056A8, #0090D4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.policy-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 86, 168, 0.12);
    border-color: #cbdff2;
}

.policy-box:hover::before {
    transform: scaleX(1);
}

.policy-box-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.policy-box h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0A2240;
}

.policy-box p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

@media (max-width: 768px) {
    .policy-box {
        flex: 1 1 100%;
        padding: 24px 20px;
    }
}

/* ===== CERTIFICATION PROCESS PAGE STYLES ===== */
.process-step-card {
    display: flex;
    gap: 24px;
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.process-step-card:hover {
    box-shadow: 0 8px 30px rgba(0, 86, 168, 0.1);
    border-color: #cbdff2;
}

.process-step-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0056A8, #0090D4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    min-width: 70px;
    text-align: center;
    line-height: 1;
}

.process-step-content {
    flex: 1;
}

.process-step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0A2240;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.process-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #0056A8;
    margin: 20px 0 10px 0;
}

.process-list {
    margin: 12px 0 0 20px;
    padding: 0;
}

.process-list li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 8px;
}

.process-list li:last-child {
    margin-bottom: 0;
}

.process-warning-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.process-danger-card {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
}

@media (max-width: 768px) {
    .process-step-card {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
        margin-bottom: 0 !important;
    }
    
    .process-step-number {
        text-align: left;
    }
    
    .process-step-title {
        font-size: 1.1rem;
    }
}

/* ===== APPEAL AND COMPLAINT PAGE STYLES ===== */
.appeal-complaint-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 5px;
}

.appeal-card,
.complaint-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.appeal-card::before,
.complaint-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.appeal-card::before {
    background: linear-gradient(90deg, #0056A8, #0090D4);
}

.complaint-card::before {
    background: linear-gradient(90deg, #E8A000, #f59e0b);
}

.appeal-card:hover,
.complaint-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 86, 168, 0.12);
    border-color: #cbdff2;
}

.appeal-title,
.complaint-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.appeal-title {
    color: #0056A8;
}

.complaint-title {
    color: #E8A000;
}

.appeal-icon,
.complaint-icon {
    font-size: 2rem;
}

.appeal-definition,
.complaint-definition {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #374151;
    background: #f8fafc;
    padding: 16px 20px;
    border-radius: 12px;
    margin: 16px 0 0 0;
    border-left: 3px solid;
}

.appeal-definition {
    border-left-color: #0056A8;
}

.complaint-definition {
    border-left-color: #E8A000;
}

.appeal-definition strong,
.complaint-definition strong {
    color: #0A2240;
    font-weight: 700;
}

.procedure-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 40px;
    text-align: center;
    border: 1px solid #bae6fd;
}

.procedure-box p {
    margin: 0;
    font-size: 1rem;
}

.procedure-box a {
    color: #0056A8;
    font-weight: 600;
    text-decoration: none;
}

.procedure-box a:hover {
    text-decoration: underline;
}

.section-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px 32px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.section-card:hover {
    box-shadow: 0 8px 25px rgba(0, 86, 168, 0.08);
    border-color: #cbdff2;
}

.section-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0A2240;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-card-title .emoji {
    font-size: 1.5rem;
}

.section-card-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #0056A8;
    margin: 20px 0 12px 0;
}

.process-list {
    margin: 12px 0 0 20px;
    padding: 0;
}

.process-list li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 10px;
}

.process-list li:last-child {
    margin-bottom: 0;
}

.process-list-disc {
    list-style-type: disc;
}

.process-list-circle {
    list-style-type: circle;
}

.aged-complaints-card {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    margin-top: 30px;
}

.aged-complaints-card .section-card-title {
    color: #991b1b;
    border-bottom-color: #fecaca;
}

.records-list {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 16px;
}

.records-list p {
    margin: 0 0 12px 0;
    font-weight: 600;
    color: #0A2240;
}

.records-list ul {
    margin: 0;
    padding-left: 20px;
}

.records-list li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .appeal-complaint-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .appeal-card,
    .complaint-card,
    .section-card {
        padding: 20px;
    }
    
    .appeal-title,
    .complaint-title {
        font-size: 1.3rem;
    }
    
    .section-card-title {
        font-size: 1.1rem;
    }
    
    .procedure-box {
        padding: 16px 20px;
        margin-bottom: 0 !important;
    }
}

/* ===== ABOUT US PAGE - FRESH & CLEAN DESIGN ===== */

/* Intro Section */
.about-intro {
    background: #ffffff;
    border-radius: 32px;
    padding: 30px;
    margin-bottom: 10px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.about-intro p {
    margin-bottom: 1px;
    font-size: 1rem;
    line-height: 1.7;
    color: #1a1a2e;
}

.about-intro p:last-child {
    margin-bottom: 0;
}

/* ISO Pills - Simple & Clean */
.iso-pills-container {
    margin: 32px 0 28px 0;
}

.iso-pills-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0056A8;
    margin-bottom: 16px;
}

.iso-pills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.iso-pill {
    background: #f1f5f9;
    border-radius: 5px;
    padding: 6px 18px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1e293b;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.iso-pill:hover {
    background: #0056A8;
    color: #ffffff;
    border-color: #0056A8;
    transform: translateY(-2px);
}

/* Funding Chip */
.funding-chip {
    background: #f0fdf4;
    border-radius: 12px;
    padding: 16px 24px;
    margin: 24px 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #bbf7d0;
}

.funding-chip span:first-child {
    font-size: 1.25rem;
}

.funding-chip p {
    margin: 0;
    font-size: 0.9rem;
    color: #166534;
}

/* About CCPL Section */
.about-ccpl {
    background: #f8fafc;
    border-radius: 32px;
    padding: 48px;
    margin-bottom: 48px;
    border: none;
}

.about-ccpl p {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.7;
    color: #1a1a2e;
}

.about-ccpl p:last-child {
    margin-bottom: 0;
}

/* Section Headers */
.section-header-center {
    text-align: center;
    margin-bottom: 48px;
}

.section-header-center .section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0A2240;
}

.section-header-center .section-sub {
    font-size: 1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
}

/* Why Choose CCPL - 3 Column Minimal Cards */
.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.why-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: left;
    border: 1px solid #eef2ff;
    transition: all 0.25s ease;
}

.why-card:hover {
    border-color: #0056A8;
    box-shadow: 0 8px 24px rgba(0, 86, 168, 0.06);
    transform: translateY(-3px);
}

.why-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.why-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0A2240;
    margin-bottom: 8px;
}

.why-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #566b82;
    margin: 0;
}

/* Advantages - Simple List Style */
.advantages-section {
    background: #f8fafc;
    border-radius: 32px;
    padding: 48px;
    margin-bottom: 48px;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.advantage-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e2e8f0;
}

.advantage-item:last-child {
    border-bottom: none;
}

.advantage-icon {
    font-size: 1.25rem;
    min-width: 32px;
    color: #0056A8;
}

.advantage-content p {
    font-size: 0.9rem;
    color: #334155;
    margin: 0;
    line-height: 1.5;
}

/* Stats Section - Clean Numbers */
.stats-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0056A8;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 25px;
    }
    
    .about-intro,
    .about-ccpl,
    .advantages-section {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .stat-number {font-size: 1.85rem;margin-bottom: 0;}
    
    .about-intro,
    .about-ccpl,
    .advantages-section {
        padding: 24px;
    }
    
    .section-header-center .section-title {
        font-size: 1.6rem;
    }
    
    .stats-grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .funding-chip {
        flex-direction: column;
        align-items: flex-start;
    }
}