/**********************************************************
 * KISI — Services Theme Layer
 * Loaded AFTER assets/css/style.css, css/style.css and
 * css/premium.css on every page inside /services.
 * Purpose: bring the whole Services section in line with the
 * premium Khyber International Safety Institute design system
 * (teal gradient primary, gold accent, soft rounded surfaces,
 * Sora / Plus Jakarta typography, smooth elevation on hover).
 * No markup structure is changed — presentation only.
 **********************************************************/

:root {
    --svc-primary: #0B8F9E;
    --svc-primary-deep: #076C78;
    --svc-primary-glow: #1FC8D6;
    --svc-accent: #E0A73C;
    --svc-accent-ink: #8A6413;
    --svc-ink: #0E1B2B;
    --svc-ink-soft: #46586B;
    --svc-line: rgba(14, 27, 43, .10);
    --svc-surface: #FFFFFF;
    --svc-light: #F2FAFB;
    --svc-radius: 18px;
    --svc-radius-sm: 12px;
    --svc-shadow-sm: 0 2px 10px rgba(14, 27, 43, .06);
    --svc-shadow-md: 0 14px 34px -14px rgba(14, 27, 43, .22);
    --svc-shadow-lg: 0 30px 60px -24px rgba(14, 27, 43, .34);
    --svc-gradient: linear-gradient(135deg, var(--svc-primary-deep), var(--svc-primary) 55%, var(--svc-primary-glow));
    --svc-gradient-ink: linear-gradient(150deg, #0E1B2B 0%, #12293C 55%, #0B3742 100%);
}

/*** Base typography inside the services section ***/
body {
    font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
    color: var(--svc-ink-soft);
    background: #FBFDFE;
    line-height: 1.75;
}

.hero h1, .hero h2,
section h1, section h2, section h3, section h4, section h5 {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
    color: var(--svc-ink);
    letter-spacing: -.02em;
}

section { padding: 5rem 0; }
section p { color: var(--svc-ink-soft); }

.container { max-width: 1240px; }

/*** Eyebrow → premium pill badge (matches .section-title on home) ***/
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(11, 143, 158, .09);
    color: var(--svc-primary);
    border: 1px solid rgba(11, 143, 158, .18);
    margin-bottom: 1.1em;
}

.eyebrow::before { display: none; }

.eyebrow.on-dark {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #EAF7F9;
}

/*** Hero band ***/
.hero {
    background: var(--svc-gradient-ink);
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 4rem !important;
    color: #E7EEF5;
}

.hero::after {
    content: "";
    position: absolute;
    right: -12%;
    top: -35%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 200, 214, .22), transparent 62%);
    pointer-events: none;
}

.hero h1 { color: #fff; }
.hero .lead { color: #B9CBD8; font-size: 1.08rem; }

.crumb {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .82rem;
    letter-spacing: .04em;
    color: #93A8B8;
}
.crumb a { color: #CFE0E8; transition: color .25s ease; }
.crumb a:hover { color: var(--svc-primary-glow); }
.crumb .sep { color: rgba(255, 255, 255, .25); }
.crumb .current { color: var(--svc-accent); }

.hero-stats {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--svc-radius);
    background: rgba(255, 255, 255, .10);
    overflow: hidden;
}
.hero-stat { background: rgba(255, 255, 255, .04); }
.hero-stat b { font-family: 'Sora', sans-serif; color: var(--svc-primary-glow); }
.hero-stat span { color: #A8BCC9; }

/*** Section heads ***/
.section-head h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.section-head .sub { color: var(--svc-ink-soft); }
.on-dark { background: var(--svc-gradient-ink); color: #fff; }
.on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .section-head .sub, .on-dark p { color: #B9CBD8; }
.on-dim { background: var(--svc-light); }
.divider { background: var(--svc-line); }

/*** Buttons — teal gradient, pill, lifted ***/
.vbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: 0;
    text-transform: none;
    padding: .82rem 1.7rem;
    border-radius: 999px;
    border: none;
    background: var(--svc-gradient);
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(11, 143, 158, .65);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background .35s ease, color .3s ease;
}
.vbtn:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 20px 38px -14px rgba(11, 143, 158, .7);
}
.vbtn-ghost, .vbtn.ghost {
    background: transparent;
    border: 1.5px solid var(--svc-primary);
    color: var(--svc-primary);
    box-shadow: none;
}
.vbtn-ghost:hover, .vbtn.ghost:hover { background: var(--svc-gradient); color: #fff; border-color: transparent; }
.vbtn-amber {
    background: linear-gradient(135deg, #C98F24, var(--svc-accent) 60%, #F0C874);
    color: #251A03;
    box-shadow: 0 12px 26px -12px rgba(224, 167, 60, .7);
}
.vbtn-amber:hover { color: #251A03; box-shadow: 0 20px 38px -14px rgba(224, 167, 60, .75); }
.vbtn-block { width: 100%; }

/*** Cards — services hub ***/
.cat-grid { gap: 1.6rem; }
.cat-card {
    background: var(--svc-surface);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
    padding: 2.3rem 2rem 2rem;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.cat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    top: 0; left: 0; right: 0;
    width: auto; height: 4px;
    border: none;
    background: var(--svc-gradient);
    opacity: 0;
    transition: opacity .35s ease;
}
.cat-card::after { display: none; }
.cat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(11, 143, 158, .28);
    box-shadow: var(--svc-shadow-md);
}
.cat-card:hover::before { opacity: 1; }
.cat-card .idx { font-family: 'Sora', sans-serif; color: var(--svc-primary); letter-spacing: .18em; }
.cat-card h3 { font-size: 1.35rem; }
.cat-card p { color: var(--svc-ink-soft); }
.cat-card .cat-list li::before { content: "•"; color: var(--svc-primary); }
.cat-card .go {
    font-family: 'Sora', sans-serif;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--svc-primary);
    border-top: 1px solid var(--svc-line);
    padding-top: 1.1rem;
    margin-top: 1.4rem;
}
.cat-card .go span { transition: transform .3s ease; display: inline-block; }
.cat-card:hover .go { color: var(--svc-primary-deep); }
.cat-card:hover .go span { transform: translateX(5px); }

/*** Course / training cards ***/
.subgroup-head h3 { font-size: 1.25rem; }
.subgroup-head .count {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .78rem;
    color: var(--svc-primary);
    background: rgba(11, 143, 158, .09);
    border-radius: 999px;
    padding: 2px 12px;
}
.subgroup-head::after { background: var(--svc-line); }

.course-card {
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.course-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 143, 158, .28);
    box-shadow: var(--svc-shadow-md);
}
.tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    border-radius: 999px;
    padding: .3rem .7rem;
    border: 1px solid currentColor;
    background: rgba(11, 143, 158, .06);
}
.tag-l3, .tag-iso { color: #2A5D8F; }
.tag-l6, .tag-cert { color: var(--svc-accent-ink); }
.tag-l7, .tag-eng { color: var(--svc-primary-deep); }
.tag-fire { color: #C1502E; }
.cc-meta { border-top: 1px solid var(--svc-line); font-family: 'Plus Jakarta Sans', sans-serif; }
.course-card .cc-link {
    background: var(--svc-light);
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--svc-primary-deep);
    transition: background .35s ease, color .35s ease;
}
.course-card:hover .cc-link { background: var(--svc-gradient); color: #fff; }

/*** Detail pages ***/
.detail-main .clause { font-family: 'Sora', sans-serif; color: var(--svc-primary); }
.detail-main h2 { border-bottom: 1px solid var(--svc-line); }
.chip {
    background: rgba(11, 143, 158, .07);
    border: 1px solid rgba(11, 143, 158, .18);
    color: var(--svc-primary-deep);
    border-radius: 999px;
    font-weight: 500;
}
.module-list li {
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius-sm);
    box-shadow: var(--svc-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.module-list li:hover { transform: translateX(4px); box-shadow: var(--svc-shadow-md); }
.module-list li .n { font-family: 'Sora', sans-serif; color: var(--svc-primary); }
.outcome-list li::before { color: var(--svc-primary); }

.spec-card {
    background: var(--svc-gradient-ink);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-lg);
    padding: 1.8rem;
}
.spec-card h3 { font-family: 'Sora', sans-serif; color: var(--svc-accent); }
.spec-row { border-top: 1px solid rgba(255, 255, 255, .12); }
.spec-row .k { color: #A8BCC9; }
.spec-card .price { font-family: 'Sora', sans-serif; color: var(--svc-primary-glow); }
.info-card {
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
}

/*** Benefits ***/
.benefit {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--svc-radius);
    transition: transform .35s ease, background .35s ease;
}
.benefit:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .09); }
.benefit .bi {
    border: none;
    background: var(--svc-gradient);
    color: #fff;
    font-family: 'Sora', sans-serif;
    box-shadow: 0 10px 22px -12px rgba(31, 200, 214, .8);
}

/*** Pillars / training rows ***/
.pillar {
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
}
.pillar-head .pillar-icon {
    background: var(--svc-gradient);
    color: #fff;
    border: none;
    font-family: 'Sora', sans-serif;
}
.train-row { border-top: 1px solid var(--svc-line); }
.train-row .tr-go {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    border: 1px solid rgba(11, 143, 158, .25);
    color: var(--svc-primary);
    border-radius: 999px;
    padding: .5rem 1rem;
    transition: all .3s ease;
}
.train-row:hover .tr-go { background: var(--svc-gradient); color: #fff; border-color: transparent; }

/*** Consultancy cards + process ***/
.consult-card {
    background: var(--svc-surface);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.consult-card:hover { transform: translateY(-6px); box-shadow: var(--svc-shadow-md); }
.consult-card .clause-no { font-family: 'Sora', sans-serif; color: var(--svc-primary); }
.consult-card .svc-list li::before { color: var(--svc-primary); }

.process-strip {
    background: var(--svc-line);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
}
.process-step .pn { font-family: 'Sora', sans-serif; color: var(--svc-primary); font-weight: 700; }

/*** Forms ***/
.form-card, .side-note {
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-radius);
    box-shadow: var(--svc-shadow-sm);
}
.side-note { background: var(--svc-light); }
.side-note li::before { color: var(--svc-primary); }
.field label { color: var(--svc-ink); font-size: .85rem; }
.field input, .field select, .field textarea {
    border: 1px solid var(--svc-line);
    border-radius: 12px;
    background: #FBFDFE;
    padding: .85rem 1rem;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--svc-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11, 143, 158, .12);
}
.success-box {
    border: 1px solid rgba(11, 143, 158, .35);
    background: rgba(11, 143, 158, .08);
    color: var(--svc-primary-deep);
    border-radius: var(--svc-radius-sm);
}

/*** Misc ***/
.stamp { border-color: var(--svc-accent); }
.stamp .stamp-txt { font-family: 'Sora', sans-serif; color: var(--svc-accent); }
.empty-state { color: var(--svc-ink-soft); }

/* keep the shared site navbar/footer styling from style.css intact */
.navbar .nav-item .nav-link, .footer .btn-link { font-family: 'Plus Jakarta Sans', sans-serif; }

/* keep the CTA row of hub cards aligned along the bottom */
.cat-card { display: flex; flex-direction: column; }
.cat-card .go { margin-top: auto; }