/*--------------------------------------------------------------
# Semantic Utility Classes
--------------------------------------------------------------*/

/* Gradient Text Effects */
.gradient-text-orange {
    background: linear-gradient(45deg, #f88b39, #ff5e3a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.gradient-text-orange-bold {
    background: linear-gradient(45deg, #f88b39, #ff5e3a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 2.3rem;
}

.gradient-text-blue {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 2.3rem;
}

/* Glass Morphism Cards */
.glass-card {
    border-radius: 25px;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.glass-card-orange {
    background: #ffffff;
    border: 1px solid rgba(255, 94, 58, 0.3);
    border-radius: 25px;
    backdrop-filter: blur(12px);
    padding: 40px;
}

.glass-card-orange:hover {
    background: #f4f9ff;
    border-color: rgba(255, 94, 58, 0.5);
}

.glass-card-blue {
    background: #ffffff;
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 25px;
    backdrop-filter: blur(12px);
    padding: 40px;
}

.glass-card-blue:hover {
    background: #f4f9ff;
    border-color: rgba(0, 210, 255, 0.5);
}

.glass-card-subtle {
    padding: 10px;
    border-radius: 25px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: 0 14px 36px var(--color-card-shadow);
}

.border-left-orange {
    border-left: 4px solid #ff5e3a !important;
    background: #ffffff !important;
}

/* Text Styling */
.text-shadow-deep {
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.text-spacing-wide {
    letter-spacing: 1px;
    font-weight: 500;
}

.text-bold-800 {
    font-weight: 800;
}

.text-size-lg {
    font-size: 1.3rem;
    line-height: 1.8;
}

.text-info-italic {
    font-style: italic;
    color: #0dcaf0;
}

/* Accent Elements */
.gradient-divider {
    width: 70px;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 30px;
}

.gradient-divider-orange {
    background: linear-gradient(90deg, #ff5e3a, transparent);
}

.gradient-divider-blue {
    background: linear-gradient(90deg, #00d2ff, transparent);
}

/* Highlight Boxes */
.highlight-box-blue {
    background: rgba(0, 210, 255, 0.05);
    border-left: 4px solid #00d2ff;
    padding: 12px;
    border-radius: 4px;
    margin-top: 16px;
}

.highlight-box-orange {
    background: rgba(255, 94, 58, 0.05);
    border-left: 4px solid #ff5e3a;
    padding: 12px;
    border-radius: 4px;
    margin-top: 16px;
}

/* Background Decorations */

/* Premium Button Style */
.btn-premium {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    background: linear-gradient(45deg, #f88b39, #ff5e3a);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(255, 94, 58, 0.4);
    transition: all 0.3s ease;
}

.btn-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255, 94, 58, 0.6);
    color: white;
}

.section-dark .position-relative {
    position: relative;
}

/* Responsive Typography */

/* The "dark" sections are painted light now (see .section-dark below), so the
   white text utilities inside them would be invisible — re-point them at the
   light-theme colours. White text outside these sections (hero banners, the
   orange breadcrumb bar, header/footer) is left alone. */
.section-dark .text-white {
    color: var(--color-text-main) !important;
}

.section-dark .text-white-50 {
    color: var(--color-text-muted) !important;
}

/* Section Background */
.section-dark {
    background: var(--color-bg-section) !important;
    position: relative;
    overflow: hidden;
}

/* Padding and Spacing */

/* Image Wrapper */
.img-wrapper-glass {
    border-radius: 25px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: 0 14px 36px var(--color-card-shadow);
}

.img-wrapper-glass img {
    width: 100%;
    border-radius: 20px;
}

/*--------------------------------------------------------------
# Responsive Utilities
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Responsive Media Queries
--------------------------------------------------------------*/

/* Tablets and smaller laptops */
@media (max-width: 1366px) {

    .gradient-text-orange-bold,
    .gradient-text-blue {
        font-size: 2rem;
    }

    .glass-card-orange,
    .glass-card-blue {
        padding: 30px;
    }
}

/* Tablets */
@media (max-width: 991px) {
    :root {
        --body-font-size: 17.2px;
        --h2-font-size: 1.7rem;
        --h3-font-size: 1.5rem;
    }

    .glass-card-orange,
    .glass-card-blue {
        padding: 20px;
    }

    .gradient-text-orange-bold,
    .gradient-text-blue {
        font-size: 1.7rem;
    }

    .text-size-lg {
        font-size: 1.2rem;
    }

    .img-wrapper-glass {
        padding: 8px;
    }

    .btn-premium {
        padding: 12px 30px;
        font-size: 1.1rem;
    }
}

/* Mobile devices */
@media (max-width: 767px) {
    :root {
        --body-font-size: 16.2px;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.3rem;
    }

    .glass-card-orange,
    .glass-card-blue {
        padding: 15px;
        margin-bottom: 20px;
    }

    .glass-card-subtle {
        padding: 12px;
    }

    .gradient-text-orange-bold,
    .gradient-text-blue {
        font-size: 1.5rem;
    }

    .text-size-lg {
        font-size: 1.15rem;
    }

    .text-spacing-wide {
        letter-spacing: 0.5px;
    }

    .gradient-divider {
        width: 50px;
        margin-bottom: 20px;
    }

    .btn-premium {
        display: block;
        width: 100%;
        padding: 12px 20px;
        text-align: center;
    }

    .section-dark {
        overflow-x: hidden;
    }

    .row.g-5,
    .row.g-4 {
        gap: 1rem !important;
    }

    .highlight-box-blue,
    .highlight-box-orange {
        padding: 10px;
    }

    /* Ensure images are responsive */
    .img-wrapper-glass img {
        max-width: 100%;
        height: auto;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    :root {
        --body-font-size: 15.2px;
    }

    .glass-card-orange,
    .glass-card-blue {
        padding: 12px;
    }

    .text-size-lg {
        font-size: 1.1rem;
    }

    .gradient-text-orange-bold,
    .gradient-text-blue {
        font-size: 1.3rem;
    }

    .btn-premium {
        padding: 10px 16px;
        font-size: 1.05rem;
    }

    h1 {
        font-size: 1.7rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
    }
}

@media (min-width: 1450px) {
    .container {
        max-width: 1520px;
    }
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover>ul {
        left: -100%;
    }

    :root {
        --nave-font-size: 19.2px;
        --hero-heading-size: 2rem;
        --hero-description-size: 1.5rem;
        --h2-font-size: 2.2rem;
        --h3-font-size: 1.95rem;
        --h4-font-size: 1.45rem;
        --h5-font-size: 1.2rem;
        --body-font-size: 1.2rem;
        --a-font-size: 1.2rem;
    }

}

@media (max-width: 991px) {
    :root {
        --nave-font-size: 17.2px;
        --hero-heading-size: 2rem;
        --hero-description-size: 1rem;
        --h2-font-size: 1.7rem;
        --h3-font-size: 1.7rem;
        --h5-font-size: 19.2px;
        --body-font-size: 17.2px;
        --a-font-size: 17.2px;
    }

    .head-box .nav-box {
        width: 100%
    }

    .about-btn {
        padding: 10px 16px;
    }

    .nav-box h4 {
        font-size: calc(1.2rem + .3vw);
    }

    #header #logo img {
        width: 122px;
    }

    .buy-tickets {
        margin: 0 15px 0 0;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

@media (max-width: 767px) {
    .head-box .nav-box {
        width: 100%;
        border-bottom: 1px solid #3a3838;
    }

    .sol-box h6 {
        text-align: center !important;
        padding-top: 20px;

    }

    .ceo-box {
        display: grid !important;
        justify-content: center;
        align-items: center;
    }

    .ceo-box .ceo-text {
        text-align: center;

    }

    .ceo-img {
        display: flex;
        justify-content: center;
    }

    .solution p {
        text-align: center;
    }

    .sol-box ul {
        padding-left: 1rem !important;
    }

    .contact-div {
        display: inline;
    }

    .box-1 {
        margin-top: 20px;
        padding: 25px 0;
    }

    /* .sol-box{
     padding-top: 15px;
    } */
    .sol-box li {
        text-align: center;
    }

    .base-2 h6 {
        text-align: center;
    }

    .buttons-div {
        display: flex;
        justify-content: center;
    }

    #pro {
        align-items: center;
        /* justify-content: center; */
    }

    .sol-box h4 {
        text-align: center !important;
        color: var(--color-text-main);
    }

    .p-text h2 {
        text-align: center;
    }

    .p-text p {
        text-align: center;
    }

    .p-text .border {
        display: flex;
        margin: 0 auto;
    }

    .sol-box h2 {
        text-align: center !important;
        padding-top: 20px;
    }

    .gas .border {
        display: flex;
        margin: 0 auto;
    }

    .gas h2 {
        text-align: center;
    }

    .gas p {
        text-align: center;
    }

    #hotels::after {
        content: "";
        display: none;
    }

    #supporters .container {
        padding: 0 !important;
    }

    .sol-box p {
        text-align: center !important;

    }

    .sol-box {
        padding-top: 10px;
    }

    .sol-box .border {
        display: flex;
        margin: 20px auto 0;
    }

    .sol-box .about-btn {
        display: flex;
        margin: 0 auto !important;
    }

    .sol-img {
        display: flex;
        justify-content: center;
    }

    .sol-box h5 {
        text-align: center !important;
    }

    .supporter-logo {
        display: flex;

        justify-content: center;
    }

    .footer-btn {
        justify-content: center;
        padding-top: 25px;
    }

    #footer-logo-icon {
        display: grid !important;
        gap: 10px;

    }

    #footer-logo-icon .footer-img {
        display: flex;
        justify-content: center;
    }

    .footer-info h4 {
        text-align: center;
    }

    .footer-info .border {
        display: flex;
        margin: 0 auto 19px !important;
        ;
    }

    #footer .footer-top .footer-info p {
        text-align: center;
    }

    .f-img {
        justify-content: center;
    }
}

@media (max-width:575px) {
    .head-box .nav-box {
        width: 100%;
    }

    .nav-col-box {
        display: block;
    }

    .nav-pro {
        justify-content: center;
    }

    .buttons-div ul {
        padding-left: 1rem !important;
    }
}

@media (max-width:375px) {
    .nav-col .buttons-div {
        display: grid;

    }

    .footer-btn {
        display: grid;
    }
}

/* =============================================
   COMPLETE FACILITY SPECIFICATIONS SECTION
   ============================================= */
.facility-specs-section {
    background: linear-gradient(180deg, #eef5fc 0%, #dfecf9 100%);
    padding: 90px 0 80px;
    position: relative;
    overflow: hidden;
}

.facility-specs-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 170, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
}

.facility-specs-section>.container {
    position: relative;
    z-index: 1;
}

.facility-specs-title {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--color-text-main);
    letter-spacing: 0.5px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.facility-specs-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-muted);
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
}

/* Reactor Cards */
.reactor-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    backdrop-filter: blur(10px);
    height: 100%;
    cursor: pointer;
}

.reactor-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 200, 255, 0.3);
}

.reactor-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.reactor-card:hover .reactor-card-img {
    transform: scale(1.05);
}

.reactor-card-img-wrap {
    overflow: hidden;
    position: relative;
}

.reactor-card-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(5, 20, 45, 0.95));
}

.reactor-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.98rem;
    font-weight: 800;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    color: #fff;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.reactor-card-body {
    padding: 16px 18px 20px;
}

.reactor-card-name {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-main);
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    margin-bottom: 6px;
}

.reactor-card-desc {
    font-size: 1.02rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.reactor-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px solid var(--color-border);
    background: #f4f9ff;
}

/* Flow line */
.flow-line-wrap {
    position: relative;
    padding: 8px 0;
}

.flow-line {
    width: 100%;
    height: 2px;
    border-top: 2px dashed rgba(0, 200, 255, 0.3);
    position: relative;
}

.flow-arrow {
    position: absolute;
    right: -6px;
    top: -8px;
    color: rgba(0, 200, 255, 0.5);
    font-size: 1.2rem;
}

/* Vessel Card — unit 09. Same shell as .reactor-card (see above), with a
   green accent and a short feature list above the icon. */

.vessel-badge {
    background: linear-gradient(135deg, #dc3545, #c0392b);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);
}

.vessel-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
}

.vessel-feature:last-child {
    margin-bottom: 0;
}

.vessel-feature i {
    font-size: 1.05rem;
    color: #0ea371;
    flex-shrink: 0;
}

/* Badge colors */
.badge-01 {
    background: linear-gradient(135deg, #0066cc, #0099ff);
    box-shadow: 0 4px 12px rgba(0, 100, 255, 0.4);
}

.badge-02 {
    background: linear-gradient(135deg, #00704a, #00cc88);
    box-shadow: 0 4px 12px rgba(0, 150, 100, 0.4);
}

.badge-03 {
    background: linear-gradient(135deg, #d4520a, #ff7c20);
    box-shadow: 0 4px 12px rgba(220, 100, 0, 0.4);
}

.badge-04 {
    background: linear-gradient(135deg, #1a66cc, #3399ff);
    box-shadow: 0 4px 12px rgba(0, 100, 200, 0.4);
}

.badge-05 {
    background: linear-gradient(135deg, #1a7a50, #22c888);
    box-shadow: 0 4px 12px rgba(0, 160, 100, 0.4);
}

.badge-06 {
    background: linear-gradient(135deg, #b8860b, #ffd700);
    box-shadow: 0 4px 12px rgba(200, 150, 0, 0.4);
}

.badge-07 {
    background: linear-gradient(135deg, #6a0dad, #c77dff);
    box-shadow: 0 4px 12px rgba(140, 50, 255, 0.4);
}

.badge-08 {
    background: linear-gradient(135deg, #0d6efd, #74b9ff);
    box-shadow: 0 4px 12px rgba(0, 100, 255, 0.4);
}

/* =============================================
   REACTOR DETAIL MODAL STYLES
   ============================================= */
.reactor-modal .modal-content {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 40px 80px var(--color-card-shadow), 0 0 60px rgba(30, 111, 208, 0.08);
    overflow: hidden;
    color: var(--color-text-main);
}

.reactor-modal .modal-header {
    background: linear-gradient(90deg, rgba(30, 111, 208, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 28px;
    align-items: center;
}

.reactor-modal .modal-title {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-text-main);
}

.reactor-modal .btn-close {
    filter: none;
    opacity: 0.6;
}

.reactor-modal .btn-close:hover {
    opacity: 1;
}

.reactor-modal .modal-body {
    padding: 28px;
    max-height: 75vh;
    overflow-y: auto;
}

.reactor-modal .modal-body::-webkit-scrollbar {
    width: 5px;
}

.reactor-modal .modal-body::-webkit-scrollbar-track {
    background: rgba(13, 34, 56, 0.06);
    border-radius: 10px;
}

.reactor-modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 170, 255, 0.3);
    border-radius: 10px;
}

.modal-hero-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 20px;
    display: block;

}

.modal-process-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative;
}

.modal-process-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.04), transparent);
    animation: flowSweep 4s infinite linear;
    pointer-events: none;
}

@keyframes flowSweep {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.modal-step {
    flex: 1;
    padding: 18px 12px;
    text-align: center;
    border-right: 1px solid var(--color-border);
}

.modal-step:last-child {
    border-right: none;
}

.modal-step-emoji {
    font-size: 2rem;
    margin-bottom: 6px;
}

.modal-step-label {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 6px;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
}

.modal-step-text {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

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

.modal-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.08rem;
    color: var(--color-text-main);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.modal-features li:last-child {
    border-bottom: none;
}

.modal-features li i {
    color: #0ea371;
    margin-top: 2px;
    flex-shrink: 0;
}

.modal-section-label {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1559b8;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
}

.reactor-modal.modal {
    backdrop-filter: blur(4px);
}

/* =============================================
   CREDENTIALS & FOUNDATIONS SECTION — REDESIGN
   index.html — Dark glassmorphic premium style
   ============================================= */

/* Section wrapper */
.cred-section {
    position: relative;
    background: radial-gradient(rgba(247, 126, 26, 0.12) 1px, transparent 1.5px) 0 0 / 22px 22px, radial-gradient(circle at 0% 0%, rgba(247, 126, 26, 0.12), transparent 40%), radial-gradient(circle at 100% 100%, rgba(247, 126, 26, 0.1), transparent 45%), linear-gradient(180deg, #fff6ee 0%, #fffaf6 100%);
    border-top: 1px solid rgba(247, 126, 26, 0.15);
    border-bottom: 1px solid rgba(247, 126, 26, 0.15);
    padding: 60px 0;
    overflow: hidden;
}

/* Animated glow orbs */
.cred-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: credOrbFloat 12s ease-in-out infinite;
}

.cred-orb--1 {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(247, 108, 47, 0.18) 0%, transparent 70%);
    top: -120px;
    left: -100px;
    animation-delay: 0s;
}

.cred-orb--2 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0, 120, 255, 0.14) 0%, transparent 70%);
    bottom: -80px;
    right: 5%;
    animation-delay: -4s;
}

.cred-orb--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.10) 0%, transparent 70%);
    top: 40%;
    left: 50%;
    animation-delay: -8s;
}

@keyframes credOrbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -20px) scale(1.05);
    }

    66% {
        transform: translate(-20px, 15px) scale(0.97);
    }
}

/* Container */
.cred-inner {
    position: relative;
    z-index: 2;
}

/* ── Section Header ── */
.cred-header {
    margin-bottom: 60px;
}

.cred-eyebrow {
    display: inline-block;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f76c2f;
    border: 1px solid rgba(247, 108, 47, 0.35);
    border-radius: 50px;
    padding: 5px 18px;
    margin-bottom: 18px;
}

.cred-main-title {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.2;
    margin-bottom: 16px;
}

.cred-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-muted);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Standard Cards (a–h) ── */
.cf-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-left: 3px solid rgba(247, 108, 47, 0.5);
    border-radius: 16px;
    padding: 28px 26px 26px 28px;
    height: 100%;
    backdrop-filter: blur(12px);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    overflow: hidden;
}

.cf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(ellipse at top left, rgba(247, 108, 47, 0.06) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.cf-card:hover {
    transform: translateY(-6px);
    border-color: rgba(247, 108, 47, 0.7);
    border-left-color: #f76c2f;
    background: #f4f9ff;
    box-shadow: 0 14px 36px var(--color-card-shadow), 0 0 0 1px rgba(247, 108, 47, 0.15);
}

.cf-card:hover::before {
    opacity: 1;
}

/* Ghost letter watermark */

/* i & j share the standard orange treatment */

/* Icon circle */
.cf-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(247, 108, 47, 0.12);
    border: 1px solid rgba(247, 108, 47, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #f76c2f;
    margin-bottom: 14px;
    transition: background 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
}

.cf-card:hover .cf-card__icon {
    background: rgba(247, 108, 47, 0.2);
    box-shadow: 0 0 18px rgba(247, 108, 47, 0.25);
}

/* i & j use the same orange icon tile as a–h */
.cf-card__icon--gold {
    background: rgba(247, 108, 47, 0.12);
    border-color: rgba(247, 108, 47, 0.25);
    color: #f76c2f;
}

.cf-card--pioneer:hover .cf-card__icon--gold {
    background: rgba(247, 108, 47, 0.2);
    box-shadow: 0 0 18px rgba(247, 108, 47, 0.25);
}

/* Card body */
.cf-card__body {
    position: relative;
    z-index: 1;
}

/* Title */
.cf-card__title {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 1.18rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: 10px;
    line-height: 1.45;
}

.cf-card__title--gold {
    color: var(--color-text-main);
}

/* Body text */
.cf-card__text {
    font-size: 1.07rem;
    color: var(--color-text-muted);
    line-height: 1.72;
    margin: 0;
}

.cf-card__text strong {
    color: var(--color-text-main);
    font-weight: 600;
}

/* ── Pioneer Cards (i & j) — same frame as the a–h cards ── */
.cf-card--pioneer {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-left: 3px solid rgba(247, 108, 47, 0.5);
}

.cf-card--pioneer:hover {
    border-color: rgba(247, 108, 47, 0.7);
    border-left-color: #f76c2f;
    background: #f4f9ff;
    box-shadow: 0 14px 36px var(--color-card-shadow), 0 0 0 1px rgba(247, 108, 47, 0.15);
}

.cf-card--pioneer::before {
    background: radial-gradient(ellipse at top left, rgba(247, 108, 47, 0.06) 0%, transparent 60%);
}

/* Pioneer inner glow blob — off, so i & j read as plain white cards like a–h */
.cf-pioneer-glow,
.cf-pioneer-glow--blue {
    display: none;
}

/* Responsive */
@media (max-width: 767px) {
    .cred-section {
        padding: 70px 0 60px;
    }

    .cred-main-title {
        font-size: 1.9rem;
    }

    .cred-header {
        margin-bottom: 40px;
    }
}

/* =============================================
   HERO CINEMATIC SECTION REDESIGN
   ============================================= */
.hero-cinematic {
    position: relative;
    width: 100%;
    height: 100vh;
    /* background: #000; */
    overflow: hidden;
    align-items: center;
    display: flex;
    flex-direction: column;
    background-image: url(../img/Difrex-Homepage-Img/slider/default-tplant-img.webp);
    background-size: cover;
}

.hero-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Unified slide-in timing (matches left panel + typed block) */
    transition: padding-left 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-item.custom-active .hero-bg-wrap {
    padding-left: 360px;
    /* Slower, smoother ENTER (1.8s). Exit uses the base 1.2s above. */
    transition: padding-left 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.camical-plant1,
.camical-plant2,
.camical-plant3,
.camical-plant4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 8s linear;
    object-fit: cover;
}

.carousel-item.custom-active .camical-plant1,
.carousel-item.custom-active .camical-plant2,
.carousel-item.custom-active .camical-plant3,
.carousel-item.custom-active .camical-plant4 {
    /* transform: translateX(360px); */
}

.camical-plant1.active-plant,
.camical-plant2.active-plant,
.camical-plant3.active-plant,
.camical-plant4.active-plant {
    opacity: 1;
}

.hero-overlay-gradient {
    position: absolute;
    background: linear-gradient(180deg, rgba(46, 56, 121, 0) 31%, rgb(0 0 0 / 65%) 54%);
    transition: opacity 1.2s ease-in-out;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* .carousel-item.custom-active .hero-overlay-gradient {
    background: #00000052;
} */

.hero-content {
    position: relative;
    z-index: 10;
}

/* Slide 1: Center Layout & Animation */
.slide-content-center {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1.5s cubic-bezier(0.2, 1, 0.3, 1);
    width: 100%;
    text-align: center;
}

.slide-content-center h1 {
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.slide-content-center h5 {
    color: #fff;
}

.slide-content-center .type-wrap {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
}

.carousel-item.active .slide-content-center {
    opacity: 1;
    transform: scale(1);
    padding-top: 100px;
}

.btn-icon-circle {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .carousel-item.custom-active .hero-bg-wrap {
    padding-left: 400px;
} */

.carousel-item-2 .hero-content.slide-content-anim {
    opacity: 1;
    /* Unified slide-in timing (matches bg-wrap + typed block) */
    transition: margin-left 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    /* Travel distance matches the 360px the background/bars shift, so the
       panel and the opening gap move at the exact same velocity (in lockstep) */
    margin-left: -360px;
    background: #3c3b3b;
}

/* Drive in-position state from custom-active ONLY (not .active).
   custom-active toggles at slide START for both enter and exit, so the panel
   slides out in sync with the background. Bootstrap keeps .active until the
   slide END, which would delay the exit and desync it. */
.carousel-item-2.custom-active .hero-content.slide-content-anim {
    margin-left: 0px;
    /* Slower, smoother ENTER (1.8s). Exit uses the base 1.2s above. */
    transition: margin-left 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-item-2.custom-active .ts2-typed-block {
    padding-left: 360px;
    /* Slower, smoother ENTER (1.8s). Exit uses the base 1.2s above. */
    transition: padding-left 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================
   SLIDE 2 — Tech Suite Reference Design (ts2)
   ============================================= */

/* Dark teal overlay for slide 2 */
/* .ts2-overlay {
    background: linear-gradient(90deg,
            rgba(3, 30, 30, 0.92) 0%,
            rgba(4, 42, 40, 0.88) 40%,
            rgba(0, 0, 0, 0.3) 100%) !important;
} */

/* Content panel */
.ts2-content {
    max-width: 360px !important;
    /* padding: 60px 0 !important; */
    /* background: rgba(2, 22, 22, 0.78);
    backdrop-filter: blur(14px);
    border-right: 1px solid rgba(0, 200, 180, 0.12); */
    /* overflow-y: auto; */
    scrollbar-width: none;
    /* Make it cover full height so it scrolls from below the header */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 1vw;
    height: 100%;
}

.header-scrolled .ts2-content {
    padding-top: 7vw;
}

.ts2-content::-webkit-scrollbar {
    display: none;
}

/* Title block */
.ts2-title-block {
    border-bottom: 1px solid rgba(0, 200, 180, 0.15);
    padding-bottom: 12px;
}

/* "the" word in cursive/script above title */
.ts2-the-word {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem;
    font-weight: 500;
    color: #dfb55c;
    /* Tan/Gold color from screenshot */
    margin-right: -8px;
    vertical-align: middle;
    text-transform: none;
}

.ts2-typed-block {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
    z-index: 5;
    /* Unified slide-in timing (matches bg-wrap + left panel) */
    transition: padding-left 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .carousel-item.custom-active .ts2-typed-block {
    left: 370px;
} */

/* Animation items — hidden by default, animate in when .ts2-entered is set */
.ts2-anim-item {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ts2-typed-block.ts2-entered .ts2-anim-item,
.carousel-item-2.active .ts2-content .ts2-anim-item {
    opacity: 1;
    transform: translateY(0);
}

.ts2-typed-block.ts2-entered .ts2-anim-item {
    opacity: 1;
    transform: translateY(0);
    /* box-shadow: inset 0px 0px 95px #000000; */
    color: #fff;
}

/* Staggered delays for sidebar items */
.carousel-item-2.active .ts2-title-block {
    transition-delay: 0.3s;
}

.carousel-item-2.active .ts2-intro-row {
    transition-delay: 0.5s;
}

.carousel-item-2.active .ts2-para.ts2-anim-item:nth-of-type(1) {
    transition-delay: 0.7s;
}

.carousel-item-2.active .ts2-para.ts2-anim-item:nth-of-type(2) {
    transition-delay: 0.9s;
}

.carousel-item-2.active .ts2-para.ts2-anim-item:nth-of-type(3) {
    transition-delay: 1.1s;
}

/* Main "Tech Suite" heading */
.ts2-main-title {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 2vw;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    text-align: right;
    padding-right: 50px;
}

.ts2-tech-word {
    color: #ffffff;
    margin-left: 10px;
}

.ts2-suite-word {
    color: #f77e1a;
    /* Professional Orange */
}

.ts2-tm {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #f77e1a;
    vertical-align: top;
    position: relative;
    top: -5px;
}

/* "Platform" link */

/* Badge + intro row */
.ts2-intro-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.ts2-badge-wrap {
    flex-shrink: 0;
    width: 160px;
}

.ts2-badge-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Paragraphs */
.ts2-para {
    font-size: 0.9rem;
    color: #eee40d;
    line-height: 1.7;
    margin-bottom: 10px;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    margin-bottom: 0;
    text-align: start;
}

/* Cyan keyword highlight (works on span & a tags) */
.ts2-kw-cyan {
    color: #00c8c0 !important;
    font-weight: 500;
    text-decoration: none;
}

a.ts2-kw-cyan:hover {
    color: #00e8e0 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Responsive */
@media (max-width: 767px) {

    .ts2-main-title {
        font-size: 1.5rem;
    }

    .ts2-the-word {
        font-size: 1.2rem;
    }
}

/* Fix for overlapping content during fade */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 1.2s;
    transition-property: opacity;
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
    position: relative;
    z-index: 1;
}

.carousel-fade .carousel-item:not(.active) {
    pointer-events: none;
    z-index: 0;
}

/* Hero slider dots (replaces the prev/next arrows) */
.hero-dots {
    z-index: 40;
    bottom: 110px;
    margin: 0;
    gap: 12px;
    align-items: center;
}

/* Bootstrap's own indicator rule sets height:3px plus 10px transparent
   top/bottom borders, and it outranks a bare `.hero-dots button`. Match its
   specificity so the dots stay circular instead of collapsing into bars. */
.hero-dots [data-bs-target] {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #f77e1a;
    background: transparent;
    background-clip: border-box;
    opacity: 1;
    margin: 0;
    padding: 0;
    text-indent: 0;
    flex: 0 0 auto;
    transition: width 0.4s ease, background 0.4s ease;
}

.hero-dots [data-bs-target].active {
    width: 30px;
    border-radius: 12px;
    background: #f77e1a;
}

@media (max-width: 991px) {
    .hero-dots {
        bottom: 90px;
    }
}

.slider-content-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* text-align: center;
    font-size: 12px;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1px; */
    /* Unified slide-in timing (matches panel + bg-wrap + top bar) */
    transition: left 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-item.custom-active .slider-content-text {
    left: 360px;
    /* Slower, smoother ENTER (1.8s). Exit uses the base 1.2s above. */
    transition: left 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-top-content {
    z-index: 1;
    text-align: center;
    /* background: linear-gradient(90deg, rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 1) 66%, rgba(255, 255, 255, 0) 100%, rgba(0, 0, 0, 0) 100%); */
    padding: 10px 0;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    font-weight: 600;
    font-size: 21.2px;
}

.carousel-item.custom-active .slider-top-content {
    padding-left: 360px;
    /* Unified slide-in timing (matches panel + bg-wrap) */
    transition: padding-left 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-top-content-main {
    /* Single-row grid collapsed to 0fr. Animating 0fr -> 1fr interpolates the
       row against the bar's REAL content height, so the navbar below slides down
       exactly as far as the bar grows. max-height can't do this: it needs a fixed
       ceiling, and any ceiling above the true height makes the box finish opening
       early and then sit still for the rest of the duration. */
    display: grid;
    grid-template-rows: 0fr;
    /* EXIT timing: immediate — stays in sync with the panel leaving */
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.second-slide-active .slider-top-content-main {
    grid-template-rows: 1fr;
    /* ENTER timing: the bar is fully opaque (it sits outside the carousel),
       but the panel fades in over the carousel-fade and only becomes visible
       in the second half of its slide. Without this delay the bar appears to
       arrive first. */
    transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.text-yellow {
    color: #f77e1a !important;
}

.text-orange {
    color: var(--color-accent) !important;
}

/* Tech Suite Branding */

.text-orange {
    color: #f77e1a;
}

.text-white {
    color: #fff;
}

/* Taglines */
.hero-taglines {
    margin-top: 15px;
}

.hero-taglines h3 {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.tagline-yellow {
    color: #f77e1a;
    font-size: 0.95rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.tagline-white {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 5px;
    opacity: 0.9;
}

/* Scanner Line Effect inside glow */
#marker-r2.active {
    bottom: 0 !important;
}

#marker-r3.active {
    bottom: 0 !important;
}

#marker-r4.active {
    bottom: 0 !important;
}

/* Base heights for each reactor - triggered by .active */

/* Static visibility for markers without animations */

/* Existing Reactor Markers override */

/* SVG Connection Lines */

.floating-keywords {
    position: relative;
    display: block;
    text-align: center;
    color: #ffffff;
    font-style: italic;
    font-size: 21px;
    margin-bottom: 12px;
}

img.cap-image {
    margin: 0;
    position: absolute;
    top: -18px;
    left: 0%;
    /* Start at the far left */
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: all 1s cubic-bezier(0.34, 1.3, 0.64, 1);
    /* Bouncy entrance */
}

img.cap-image.cap-entered {
    opacity: 1;
    left: 50% !important;
    /* Land in the center */
    transform: translateX(-50%);
}

#typed-strings {
    display: none !important;
}

#typed {
    white-space: inherit;
    display: block;
    text-align: center;
    margin-top: 30px;
}

#typed-2 {
    margin-top: 30px;
}

.type-wrap d {
    font-style: italic;
    color: #f77e1a;
    /* Professional Orange */
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(247, 126, 26, 0.4);
}

.slider-content {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    background: #000;
    padding-top: 10px;
}

/* Mobile Adjustments */

@media (max-width: 1199px) {

    .tagline-yellow {
        font-size: 1.7rem;
    }

    /* Muted lines on smaller screens */
}

@media (max-width: 991px) {

    .hero-cinematic {
        height: 60vh;
    }

    .hero-content {
        text-align: left;
        margin: 0;
        padding-top: 50px;
    }

    .hero-bg-img {
        object-position: 70% center;
        /* Focus on reactors on mobile */
    }

    /* .hero-overlay-gradient {
        background: radial-gradient(circle at 10% 30%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.7) 100%);
    } */

    /* Reposition markers for mobile to fit better */

    #marker-r4 {
        left: 80% !important;
        bottom: 60% !important;
    }

    #marker-r3 {
        left: 70% !important;
        bottom: 45% !important;
    }

    #marker-r2 {
        left: 60% !important;
        bottom: 30% !important;
    }

    #marker-r1 {
        left: 50% !important;
        bottom: 12% !important;
    }
}

@media (max-width: 991px) {
    .carousel-item.custom-active .hero-bg-wrap {
        padding-left: 0 !important;
    }

    .hero-taglines {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 767px) {

    .tagline-white,
    .hero-taglines h3 {
        font-size: 0.7rem;
    }

    .tagline-yellow {
        font-size: 0.9rem;
    }

    .hero-bg-img {
        object-position: 70% center;
    }

}

/* =============================================
   TECH SUITE KEYWORD MODALS — kw-modal
   ============================================= */

.kw-modal {
    /* Light palette mirrored from the Tech Suite hero (.ts-hero-shell) */
    --kw-navy: #0e2545;
    --kw-navy-soft: #40506b;
    --kw-blue: #17347e;
    --kw-orange: #f2751a;
    --kw-chip: #eef3fc;
    --kw-chip-border: #dde6f6;
    --kw-icon-bg: #e4ecfb;

    backdrop-filter: blur(6px);
}

.kw-modal-dialog {
    max-width: 500px;
}

.kw-modal-content {
    background: #ffffff;
    border: 1px solid var(--kw-chip-border);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(20, 45, 90, 0.22);
    overflow: hidden;
    color: var(--kw-navy);
}

.kw-modal-header {
    background: linear-gradient(90deg, var(--kw-chip) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--kw-chip-border);
    padding: 18px 24px;
}

.kw-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--kw-icon-bg);
    border: 1px solid var(--kw-chip-border);
    color: var(--kw-blue);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.kw-modal-title {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kw-blue);
    margin: 0;
}

/* dark close icon on the light header */
.kw-modal .btn-close {
    filter: none;
    opacity: .55;
}

.kw-modal .btn-close:hover {
    opacity: .9;
}

.kw-modal-body {
    padding: 24px;
}

.kw-modal-desc {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 1.08rem;
    color: var(--kw-navy-soft);
    line-height: 1.75;
    margin-bottom: 20px;
    border-left: 3px solid var(--kw-orange);
    padding-left: 14px;
}

.kw-modal-desc strong,
.kw-modal-desc b,
.kw-modal-desc em {
    color: var(--kw-blue);
}

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

.kw-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    color: var(--kw-navy-soft);
    padding: 8px 0;
    border-bottom: 1px solid var(--kw-chip-border);
}

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

.kw-modal-list li strong,
.kw-modal-list li b {
    color: var(--kw-blue);
}

.kw-modal-list li i {
    color: var(--kw-blue);
    font-size: 1.08rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Cursor pointer for keyword trigger elements */
a.ts2-kw-cyan,
[data-bs-toggle="modal"].ts2-kw-cyan {
    cursor: pointer;
}

/* =========================================================
   HERO SLIDER MOBILE & TABLET FULL RESPONSIVENESS
   ========================================================= */

@media (max-width: 1199px) {

    /* The absolute positioned cap image breaks when text dynamically wraps to a new line */
    .cap-image {
        display: none !important;
    }
}

@media (max-width: 991px) {

    /* Tablets */
    .type-wrap,
    #typed,
    #typed-2,
    .ts2-main-title {
        font-size: 2.2rem !important;
        line-height: 1.3;
        white-space: normal !important;
    }

    .hero-content,
    .slide-content-center {
        max-width: 100%;
        margin: 0 auto;
        padding: 40px 20px;
        text-align: center;
        align-items: center;
    }

    .ts2-overlay {
        background: rgba(0, 0, 0, 0.8);
        /* Darken bg behind text for contrast */
    }
}

@media (max-width: 767px) {

    /* Mobile */
    .type-wrap,
    #typed,
    #typed-2,
    .ts2-main-title {
        font-size: 1.5rem !important;
        line-height: 1.4;
    }

    .floating-keywords {
        font-size: 0.75rem !important;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .ts2-para {
        font-size: 0.95rem !important;
        margin-bottom: 1rem;
        text-align: center;
    }

    .slider-content-text {
        font-size: 0.65rem !important;
        bottom: 5%;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {

    /* Small Mobile */
    .type-wrap,
    #typed,
    #typed-2,
    .ts2-main-title {
        font-size: 1.3rem !important;
    }
}

/* =============================================
   HOMO-GENEOUS PAGE RE-DESIGN
   ============================================= */

/* Main solution box redesign */
.sol-box {
    background: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.sol-box:hover {
    background: #f4f9ff;
    border-color: rgba(247, 126, 26, 0.3);
    box-shadow: 0 14px 36px var(--color-card-shadow),
        inset 0 0 20px rgba(247, 126, 26, 0.05);
    transform: translateY(-5px);
}

/* Accent for headers */
.sol-box h2 {
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #0d2238 0%, #41526b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}

.sol-box h2::after {
    display: none;
    /* Hide old border */
}

/* One heading underline colour site-wide: every .border divider uses the
   same #f77e1a fade as the .sol-box one (style.css drew a 1px solid
   rgb(197, 90, 17) line elsewhere). Centred dividers fade both ways. */
.border {
    height: 3px;
    background: linear-gradient(90deg, #f77e1a 0%, transparent 100%);
    border: none !important;
    opacity: 0.8;
}

.border.mx-auto {
    background: linear-gradient(90deg, transparent 0%, #f77e1a 50%, transparent 100%);
}

/* Custom separator using the new icon */
.sol-box .border {
    height: 3px;
    background: linear-gradient(90deg, #f77e1a 0%, transparent 100%);
    border: none !important;
    width: 60px;
    margin: 1rem 0;
    opacity: 0.8;
}

/* Glassmorphism for images */
.sol-img {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.5s ease;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}

.sol-img img {
    max-height: 420px;
    object-fit: fill;
    width: 100%;
}

.sol-img:hover {
    transform: scale(1.02);
}

.sol-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 13, 26, 0.4) 0%, transparent 40%);
    pointer-events: none;
}

/* Banner text enhancement */
.banner-text h1 {
    font-weight: 500;
    letter-spacing: -0.5px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.banner-text h1 span {
    color: #f77e1a;
    position: relative;
    display: inline-block;
}

/* Divider icon styling */
.pro img {
    height: 45px !important;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(247, 126, 26, 0.4));
    margin: 0 15px;
    transition: transform 0.3s ease;
}

.pro:hover img {
    transform: rotate(5deg) scale(1.1);
}

.next-pre-btn {
    backdrop-filter: blur(8px);
    background: rgba(247, 126, 26, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Adjustments for CSTR bg (even sections) */
.cstr-bg {
    background: linear-gradient(180deg, #eef5fc 0%, #dfecf9 100%) !important;
}

/* =======================================================
   DIGITAL TWIN DESIGN SYSTEM (MODERNIZED PAGES)
   ======================================================= */

.vista-dark-theme {
    background: var(--color-bg-section) !important;
    position: relative;
    overflow: hidden;
}

.glass-card-premium {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 25px;
    backdrop-filter: blur(12px);
    padding: 3rem;
    /* Default for desktop */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Responsive padding for glass cards */
@media (max-width: 768px) {
    .glass-card-premium {
        padding: 1.5rem !important;
    }
}

.glass-card-premium--orange {
    border-color: rgba(255, 94, 58, 0.3) !important;
}

.glass-card-premium--cyan {
    border-color: rgba(0, 210, 255, 0.3) !important;
}

.text-gradient-orange {
    background: linear-gradient(45deg, #f88b39, #ff5e3a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.text-gradient-cyan {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.accent-bar-orange {
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #ff5e3a, transparent);
    margin-bottom: 30px;
    border-radius: 2px;
}

.accent-bar-cyan {
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #00d2ff, transparent);
    margin-bottom: 30px;
    border-radius: 2px;
}

.btn-premium {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    color: white !important;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-premium--orange {
    background: linear-gradient(45deg, #f88b39, #ff5e3a);
    box-shadow: 0 10px 30px rgba(255, 94, 58, 0.4);
}

.btn-premium:hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
}

.glow-decoration {
    position: absolute;
    width: 600px;
    height: 600px;
    pointer-events: none;
    z-index: 0;
}

.glow-decoration--orange {
    background: radial-gradient(circle, rgba(255, 94, 58, 0.08) 0%, transparent 70%);
}

.image-container-premium {
    padding: 10px;
    border-radius: 25px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: 0 14px 36px var(--color-card-shadow);
}

.section-modern {
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .section-modern {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .fs-responsive-h2 {
        font-size: 1.7rem !important;
    }
}

.btn-text {
    color: #1a1005;
    /* Very dark brown/black as in screenshot */
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'Barlow-Light', Helvetica, Arial, sans-serif;
}

.btn-icon-circle {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-icon-circle svg {
    width: 28px;
    height: 28px;
    color: #1a1005;
}

/* =============================================
   POWER ON BUTTON — Tech Suite hero (slide 2)
   Scoped to .ts-hero-shell; overrides the legacy
   off-canvas rules above (right:-250px / opacity:0)
   that only un-hid inside .carousel-item.active.
   ============================================= */

/* plant overlays inside the new hero — hidden until the button switches them
   on one after another (JS adds .active-plant with a 1s stagger).
   Scoped copy of the legacy .camical-plantN rules so the more specific
   `.ts-hero-shell .ts-hero-bg img` rule can't win over them. */
.ts-hero-shell .ts-hero-bg img.camical-plant1,
.ts-hero-shell .ts-hero-bg img.camical-plant2,
.ts-hero-shell .ts-hero-bg img.camical-plant3,
.ts-hero-shell .ts-hero-bg img.camical-plant4 {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.ts-hero-shell .ts-hero-bg img.active-plant {
    opacity: 1;
}

/* sidebar top row: "the TECH SUITE PLATFORM" + power button */
.ts-hero-shell .ts-side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ts-hero-shell .btn-power-on {
    position: static;
    right: auto;
    top: auto;
    opacity: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 32% 24%, #ffa64d 0%, #f2751a 46%, #d55f0b 100%);
    color: #2a1503;
    cursor: pointer;
    overflow: visible;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .2s ease;
}

.ts-hero-shell .btn-power-on svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.6;
    transition: color .35s ease, filter .35s ease;
}

.ts-hero-shell .btn-power-on:hover {
    transform: scale(1.08);
}

.ts-hero-shell .btn-power-on:focus-visible {
    outline: 2px solid #0e2545;
    outline-offset: 3px;
}

/* ON state — reactors are running */
.ts-hero-shell .btn-power-on.is-active {
    background: radial-gradient(circle at 32% 24%, #7bff9a 0%, #1fd15a 46%, #0f9e40 100%);
    color: #04220f;
    box-shadow: 0 0 0 0 rgba(31, 209, 90, .55), 0 2px 8px rgba(0, 0, 0, .25);
    animation: tsPowerPulse 1.8s ease-out infinite;
}

.ts-hero-shell .btn-power-on.is-active svg {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85));
}

@keyframes tsPowerPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(31, 209, 90, .55), 0 2px 8px rgba(0, 0, 0, .25);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(31, 209, 90, 0), 0 2px 8px rgba(0, 0, 0, .25);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(31, 209, 90, 0), 0 2px 8px rgba(0, 0, 0, .25);
    }
}

@media (prefers-reduced-motion: reduce) {

    .ts-hero-shell .btn-power-on,
    .ts-hero-shell .btn-power-on.is-active {
        animation: none;
        transition: none;
    }
}

/* Width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #6e6e6e;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
    background: #838383;
}

/*--------------------------------------------------------------
# High Resolution Responsiveness (2560px & 3840px)
--------------------------------------------------------------*/
.index-page #header #logo img {
    transition: opacity 0.8s ease 0.8s;
    /* Slow fade in with delay */
    opacity: 1;
    background-color: #000;
    border-radius: 5px;
    /* width: 260px;
    position: absolute;
    top: 15px; */
}

/* .index-page.header-scrolled #header #logo img {
    transition: opacity 0.8s ease 0.8s;
    opacity: 1;
    width: 130px;
    position: unset;
    top: 15px;
} */

.index-page.second-slide-active #header #logo img {
    transition: opacity 2s ease;

}

/* Large Desktop (QHD/Retina) - 2560px */
@media (min-width: 2560px) {
    :root {
        --nave-font-size: 25.2px;
        --body-font-size: 1.45rem;
        --h2-font-size: 3.2rem;
        --h3-font-size: 2.7rem;
        --h4-font-size: 2.2rem;
        --h5-font-size: 1.8rem;
        --a-font-size: 1.45rem;
        --hero-heading-size: 4rem;
        --hero-description-size: 2.5rem;
    }

    .container {
        max-width: 2300px;
    }

    .hero-content {
        max-width: 600px;
    }

    .ts2-content {
        max-width: 360px !important;
    }

    .carousel-item-2.active .ts2-typed-block {
        padding-left: 360px;
    }

    .carousel-item.custom-active .slider-top-content {
        padding-left: 360px;
    }

    .carousel-item.custom-active .slider-content-text {
        left: 360px;
    }

    .slide-content-center {
        max-width: 1400px !important;
    }

    .ts2-main-title {
        font-size: 2rem;
    }

    .ts2-para {
        font-size: 1.1rem;
    }

    .ts2-the-word {
        font-size: 2.5rem;
    }

    .ts2-badge-wrap,
    .ts2-badge-img {
        width: 120px;
        height: 120px;
    }

    .floating-keywords {
        font-size: 24px;
    }

    .slider-top-content {
        font-size: 31.2px;
        top: 120px;
    }

    .slider-content-text {
        font-size: 18px;
    }

    .slider-content-text .p-2.fs-5 {
        font-size: 24px !important;
    }

    #header #logo img {
        width: 180px;

    }

    .facility-specs-title {
        font-size: 4.2rem;
    }

    .reactor-card-name {
        font-size: 1.7rem;
    }

    .reactor-card-desc {
        font-size: 1.3rem;
    }

    .cf-card__title {
        font-size: 1.7rem;
    }

    .cf-card__text {
        font-size: 1.4rem;
    }

    .cf-card__icon {
        width: 80px;
        height: 80px;
        font-size: 2.2rem;
    }

    .navbar>ul>li {
        padding-left: 30px;
    }

    #header #logo img {
        width: 220px;
    }

    .cred-main-title {
        font-size: 4.2rem !important;
        margin-bottom: 2rem !important;
    }

    .cred-subtitle {
        font-size: 1.7rem !important;
        max-width: 800px !important;
    }

    .cred-eyebrow {
        font-size: 1.3rem !important;
        padding: 8px 25px !important;
        margin-bottom: 2.5rem !important;
    }

    .supporter-logo img {
        max-height: 110px;
    }

    .marquee-wrapper {
        padding: 40px 0;
    }

    .about-btn,
    .btn-premium {
        padding: 22px 50px;
        font-size: 1.4rem;
    }

    .detailPoints .bullet-box li {
        font-size: 1.5rem !important;
        padding: 25px 30px;
    }

    .detailPoints .bullet-box {
        padding-left: 76px;
    }

    .detailPoints .bullet-box li::after {
        left: -76px;
        top: 20px;
        width: 46px;
        height: 46px;
        font-size: 22px;
        border-width: 3px;
    }

    /* Width */
    ::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #6e6e6e;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #ffffff;
        border-radius: 10px;
    }

    /* Hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #838383;
    }
}

/* Ultra Large Desktop (4K) - 3840px */
@media (min-width: 3840px) {
    :root {
        --nave-font-size: 31.2px;
        --body-font-size: 1.8rem;
        --h2-font-size: 4.7rem;
        --h3-font-size: 3.7rem;
        --h4-font-size: 3rem;
        --h5-font-size: 2.4rem;
        --a-font-size: 1.8rem;
        --hero-heading-size: 6rem;
        --hero-description-size: 3.5rem;
    }

    .container {
        max-width: 3400px;
    }

    .hero-content {
        max-width: 900px;
    }

    .ts2-content {
        max-width: 360px !important;
    }

    .carousel-item-2.active .ts2-typed-block {
        padding-left: 360px;
    }

    .carousel-item.custom-active .slider-top-content {
        padding-left: 360px;
    }

    .carousel-item.custom-active .slider-content-text {
        left: 360px;
    }

    .slide-content-center {
        max-width: 2200px !important;
    }

    .ts2-main-title {
        font-size: 3.5rem;
    }

    .ts2-para {
        font-size: 1.6rem;
    }

    .ts2-the-word {
        font-size: 3.5rem;
    }

    .ts2-badge-wrap,
    .ts2-badge-img {
        width: 180px;
        height: 180px;
    }

    .floating-keywords {
        font-size: 36px;
    }

    .slider-top-content {
        font-size: 45.2px;
        top: 160px;
    }

    .slider-content-text {
        font-size: 24px;
    }

    .slider-content-text .p-2.fs-5 {
        font-size: 32px !important;
    }

    #header #logo img {
        width: 300px;
    }

    .navbar>ul>li {
        padding-left: 50px;
    }

    .facility-specs-title {
        font-size: 6.2rem;
    }

    .reactor-card-name {
        font-size: 2.4rem;
    }

    .reactor-card-desc {
        font-size: 1.7rem;
    }

    .reactor-badge {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
    }

    .reactor-card-img {
        height: 300px;
    }

    .cf-card__title {
        font-size: 2.4rem;
    }

    .cf-card__text {
        font-size: 1.8rem;
    }

    .cf-card__icon {
        width: 120px;
        height: 120px;
        font-size: 3.2rem;
    }

    .cred-main-title {
        font-size: 6.2rem !important;
        margin-bottom: 3rem !important;
    }

    .cred-subtitle {
        font-size: 2.4rem !important;
        max-width: 1200px !important;
    }

    .cred-eyebrow {
        font-size: 1.7rem !important;
        padding: 12px 40px !important;
        margin-bottom: 4rem !important;
    }

    .supporter-logo img {
        max-height: 150px;
    }

    .marquee-wrapper {
        padding: 60px 0;
    }

    .about-btn,
    .btn-premium {
        padding: 30px 70px;
        font-size: 1.8rem;
    }

    .detailPoints .bullet-box li {
        font-size: 2rem !important;
        padding: 35px 45px;
    }

    .detailPoints .bullet-box {
        padding-left: 104px;
    }

    .detailPoints .bullet-box li::after {
        left: -104px;
        top: 28px;
        width: 62px;
        height: 62px;
        font-size: 30px;
        border-width: 4px;
    }

    /* Width */
    ::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #6e6e6e;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #ffffff;
        border-radius: 10px;
    }

    /* Hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #838383;
    }
}

/*--------------------------------------------------------------
# Top Bar (Header Top Content) - Index Page Only
--------------------------------------------------------------*/
/* Always in flow on the index page (never display:none) so the wrapper's grid row
   has real content to measure. #header is a fixed-position column flex, so the
   navbar below has no position of its own -- it slides down purely as this box
   grows. Toggling `display` instead would snap the navbar in one frame.
   min-height:0 is required: a grid item's default `min-height: auto` refuses to
   shrink below its content and would pin the row open at 1fr. */
.index-page .slider-top-content {
    display: block !important;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    background: linear-gradient(180deg, #9ad9ff 0%, #c4e7ff 100%);
    color: #ffffff;
    text-align: center;
    padding: 6px 0;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 998;
    text-shadow: 0 2px 2px rgb(0 0 0);
    opacity: 0;
    /* EXIT: no delay -- fades as the navbar lifts back up. */
    transition: opacity 0.35s ease;
}

.index-page.second-slide-active .slider-top-content {
    opacity: 1;
    /* ENTER: delayed to match the panel, same 0.5s as the wrapper's row growth. */
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.index-page .slider-top-content span {
    color: #6b21a8;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 3px;
}

.index-page .logo-div {
    top: 0;
    /* EXIT: no delay -- snaps back with the rest of the header. */
    transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
}

.index-page.second-slide-active .logo-div {
    top: 10px;
    /* ENTER: held 2s so the logo drops only after the slide has settled. */
    transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.platform-box {
    display: block !important;
    width: 100%;
    background: linear-gradient(180deg, #9ad9ff 0%, #c4e7ff 100%);
    color: #ffffff;
    text-align: center;
    padding: 6px 0;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 998;
    text-shadow: 0 2px 2px rgb(0 0 0);
}

.platform-box span {
    color: #6b21a8;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 3px;
}

.platform-box-bottom {
    background: #022b33;
    display: flex;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0 1%;
    overflow: hidden;
    transition: opacity 0.8s ease-in-out 1s, max-height 0.6s ease-in-out 0.8s, padding 0.6s ease-in-out 0.6s;
    color: #fff;
}

.second-slide-active .platform-box-bottom {
    opacity: 1;
    visibility: visible;
    max-height: 100px;
}

/* Hide on scroll. Each rule restates its transition: without that it inherits the
   .second-slide-active rule's 0.5s enter delay and the bar lags a beat behind the
   scroll. (The wrapper rule outranks its counterpart on specificity; the bar rule
   ties and wins only by coming later in the file -- don't move it above.) */
.index-page.header-scrolled .slider-top-content-main {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.index-page.header-scrolled .slider-top-content {
    opacity: 0;
    margin: 0;
    border-bottom: none;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjust header layout on index page */
.index-page header#header {
    flex-direction: column;
    padding-left: 0;
    /* padding-left is listed after `all` so it overrides the 0.4s catch-all and
       keeps the 1.2s exit in sync with the panel sliding out. */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding-left 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Make room for the panel that slides in on the 2nd slide. This indents the whole
   header (bar + logo + nav), not just the top bar -- the logo is faded out here by
   .index-page.second-slide-active #header #logo img, so only the nav visibly moves. */
.index-page.second-slide-active header#header {
    padding-left: 360px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.overlay-bg {
    position: absolute;
    transition: opacity 1.2s ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgba(0, 0, 0, 0.342) 50%);

}

.banner-clint-logo {
    z-index: 1;
    background: #ffffff;
}

.banner-clint-logo .marquee-wrapper {
    background: transparent;
}

@media (max-width: 768px) {
    .slider-top-content {
        font-size: 14.2px;
        padding: 8px 15px;
        letter-spacing: 1px;
        line-height: 1.4;
    }
}

/* ============================================================
   Dark glass-card utilities (extracted from repeated inline styles)
   Placed after .glass-card so radius/blur overrides win on conflict.
   ============================================================ */
.gc-dark {
    background: rgba(10, 20, 40, 0.5);
    border-radius: 25px;
    backdrop-filter: blur(12px);
}

.gc-dark--orange {
    border: 1px solid rgba(255, 94, 58, 0.3);
}

.gc-dark--cyan {
    border: 1px solid rgba(0, 210, 255, 0.3);
}

.gc-panel {
    background: rgba(10, 20, 40, 0.5);
    border: 1px solid rgba(255, 94, 58, 0.2);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(8px);
}

.gc-panel--shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Readable body copy / lists on dark cards */
.card-copy {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #d8dde6;
}

.card-copy--lg {
    font-size: 1.1rem;
    line-height: 1.8;
}

.card-list {
    list-style: none;
    padding-left: 0;
    font-size: 1rem;
    color: #d8dde6;
}

/* ============================================================
   Blue-light footer (matches the light-blue theme site-wide)
   ============================================================ */
#footer,
#footer .footer-top {
    background: linear-gradient(180deg, #eef5fc 0%, #e0ecfa 100%);
    color: #1a2b45;
    border-top: 1px solid rgba(58, 123, 213, 0.15);
}

#footer .footer-top .footer-links ul a,
#footer .footer-top .footer-info p,
#footer .footer-top p,
#footer .copyright,
#footer .footer-top .footer-address li a {
    color: #1a2b45;
}

/* Blue section headings */
#footer .footer-top h4.text-orange {
    color: #1f6fb2 !important;
}

#footer .footer-top .footer-links ul a:hover {
    color: #3a7bd5;
}

/* Social icons: white -> blue so they show on the light footer */
#footer .f-img i,
#footer .f a i {
    color: #ffffff !important;
    transition: 0.3s;
}

#footer .f-img i:hover,
#footer .f a i:hover {
    color: #ffffff !important;
}

#footer input[type="email"] {
    background: #ffffff;
    color: #1a2b45;
    border: 1px solid rgba(58, 123, 213, 0.3);
    border-radius: 6px;
}

#footer input[type="email"]::placeholder {
    color: rgba(26, 43, 69, 0.5);
}

#footer .border-auto {
    border-color: rgba(58, 123, 213, 0.18);
}

/* ============================================================
   Light-blue theme cards (e.g. go-no-go page)
   ============================================================ */
.section-light-blue {
    background: linear-gradient(180deg, #f4f9ff 0%, #e7f1fc 100%);
    position: relative;
    overflow: hidden;
}

.gc-light {
    background: #ffffff;
    border: 1px solid rgba(58, 123, 213, 0.18);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(30, 80, 150, 0.10);
    backdrop-filter: none;
    color: #1a2b45;
}

.gc-light--blue {
    border: 1px solid rgba(58, 123, 213, 0.45);
}

.text-ink {
    color: #1a2b45 !important;
}

.imglist {
    width: 100%;
}

/* ============================================================
   Publications card (about page) — same card language as the
   credentials cards: white card, orange accents, quiet rules.
   ============================================================ */
.pub-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 14px 36px var(--color-card-shadow);
    overflow: hidden;
}

.pub-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    cursor: pointer;
    transition: background 0.3s ease;
}

.pub-toggle:hover {
    background: #f4f9ff;
}

.pub-toggle__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-main);
}

.pub-toggle__title i {
    color: #f76c2f;
    font-size: 1.3rem;
}

/* chevron in an orange disc; points up while the list is open */
.pub-toggle__chev {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f76c2f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease, background 0.3s ease;
}

.pub-toggle__chev svg {
    width: 20px;
    height: 20px;
    display: block;
}

.pub-toggle[aria-expanded="true"] .pub-toggle__chev {
    transform: rotate(180deg);
}

.pub-toggle:hover .pub-toggle__chev {
    background: #d1571c;
}

.pub-body {
    padding: 8px 26px 22px;
    background: #ffffff;
}

/* numbered list: orange numeral in the gutter, hairline between entries */
.pub-list {
    list-style: none;
    counter-reset: pub;
    margin: 0;
    padding: 0;
}

.pub-list li {
    counter-increment: pub;
    position: relative;
    padding: 14px 0 14px 52px;
    border-bottom: 1px solid rgba(13, 34, 56, 0.07);
    color: var(--color-text-muted);
    font-weight: 300;
    line-height: 1.7;
    /* beats the inner-page "centre every p, li" rule (#_ specificity) */
    text-align: left !important;
}

/* About > Why us: checklist copy reads left, beside its tick */
.company-1 .list-unstyled li {
    text-align: left !important;
}

@media (max-width: 767px) {
    .company-1 .list-unstyled {
        padding-left: 0 !important;
    }
}

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

.pub-list li::before {
    content: counter(pub) ".";
    position: absolute;
    left: 0;
    top: 14px;
    width: 40px;
    text-align: right;
    color: #f76c2f;
    font-weight: 700;
}

.pub-subhead {
    margin: 26px 0 6px;
    padding-top: 20px;
    border-top: 2px solid rgba(247, 108, 47, 0.35);
    color: var(--color-text-main);
    font-weight: 700;
    letter-spacing: .5px;
}

@media (max-width: 575px) {
    .pub-toggle {
        padding: 16px 18px;
    }

    .pub-toggle__title {
        font-size: 1rem;
    }

    .pub-body {
        padding: 6px 18px 18px;
    }

    .pub-list li {
        padding-left: 38px;
    }

    .pub-list li::before {
        width: 28px;
    }
}

/* Hamburger: it is a Bootstrap .btn, whose :hover/:focus/:active colour is
   the dark body text, so on the dark header the icon vanished on hover.
   (index.css colours the icon itself navy for the light homepage header,
   and that id-level rule still wins there.) */
.hamburger .btn:hover,
.hamburger .btn:focus-visible,
.hamburger .btn:active {
    color: #f77e1a;
    border-color: transparent;
    box-shadow: none;
}

/* The fixed header is 83px tall above 991px but ~61px at <=991px (nav
   collapses to the hamburger), while every page banner is pushed down a flat
   83px in style.css - that left a 22px strip between header and banner on
   tablets and phones. Selectors mirror the style.css ones so they out-rank them. */
@media (max-width: 991px) {

    .banner,
    .service,
    .development.banner,
    .product.banner,
    .service.banner,
    .debottlenecking-revamp.banner,
    .experimental-validation.banner,
    .pricing.banner {
        margin-top: 61px;
    }
}

/* ==========================================================
   Inner-page typography scale (2026-10-22)
   H1 48-56/32-38 | H2 34-40/26-32 | H3 20-24/19-22 | body 16-18/16 | helper 14-15/14
   Every page except the homepage (it has its own block in index-responsive.css).
   Page content only: header/footer have no <section>; the prev/next bar is excluded.
   Same mechanics as the ONE TYPE SCALE block in responsive.css: :not(#_) to outrank
   class rules, and an element with an inline font-size is left as authored.
   Font family unchanged (Barlow).
   ========================================================== */
body:not(.index-page) section:not(.next-pre-btn) h1:not([style*="font-size"]):not(#_) {
    font-size: 48px !important;
}

/* section headings vs. headings that title a card */
body:not(.index-page) section:not(.next-pre-btn) h2:not([style*="font-size"]):not(#_) {
    font-size: 30px !important;
}

body:not(.index-page) section:not(.next-pre-btn) :is(.sol-box, [class*="card"]) h2:not([style*="font-size"]):not(#_) {
    font-size: 24px !important;
}

body:not(.index-page) section:not(.next-pre-btn) h3:not([style*="font-size"]):not(#_) {
    font-size: 22px !important;
}

body:not(.index-page) section:not(.next-pre-btn) h4:not([style*="font-size"]):not(#_) {
    font-size: 21px !important;
}

body:not(.index-page) section:not(.next-pre-btn) :is(h5, h6):not([style*="font-size"]):not(#_) {
    font-size: 18px !important;
}

body:not(.index-page) section:not(.next-pre-btn) .accordion-button:not([style*="font-size"]):not(#_) {
    font-size: 20px !important;
}

body:not(.index-page) section:not(.next-pre-btn) :is(p, li):not([style*="font-size"]):not(#_) {
    font-size: 17px !important;
}

/* leads, small print, and the hero tagline above the H1 (lead size: it sits on a dark photo) */
body:not(.index-page) section:not(.next-pre-btn) :is(p, li):is(.text-size-lg, .card-copy--lg):not([style*="font-size"]):not(#_) {
    font-size: 18px !important;
}

body:not(.index-page) section:not(.next-pre-btn) :is(p, li).small:not([style*="font-size"]):not(#_) {
    font-size: 14px !important;
}

body:not(.index-page) section:not(.next-pre-btn) .banner-text p:not([style*="font-size"]):not(#_) {
    font-size: 18px !important;
}

/* Hero tagline ("...environment / CO₂ / PTF ...") had 400/normal on most
   pages, 500/1px or 600/2px (inline / .text-spacing-wide) on others. */
body:not(.index-page) section:not(.next-pre-btn) .banner-text p.text-orange:not(#_) {
    font-family: inherit !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* Section headings centred on every inner page; headings inside cards
   stay left with their copy. The accent line under a heading follows it. */
body:not(.index-page):not(.rx-page) section:not(.next-pre-btn) :is(h2, h3, h4):not(.accordion-header):not(.accordion *):not(.modal *):not(#footer *):not(.d-flex > *):not(:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) *):not(#_) {
    text-align: center !important;
    /* card titles are width: fit-content (responsive.css) */
    margin-left: auto !important;
    margin-right: auto !important;
}

body:not(.index-page):not(.rx-page) section:not(.next-pre-btn) :is(h2, h3, h4):not(.accordion-header)+ :is(.border, .gradient-divider, div[style*="width: 70px"]):not(:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) *):not(#_) {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 991px) {
    body:not(.index-page) section:not(.next-pre-btn) h1:not([style*="font-size"]):not(#_) {
        font-size: 42px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) h2:not([style*="font-size"]):not(#_) {
        font-size: 28px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) :is(.sol-box, [class*="card"]) h2:not([style*="font-size"]):not(#_) {
        font-size: 22px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) h3:not([style*="font-size"]):not(#_) {
        font-size: 21px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) h4:not([style*="font-size"]):not(#_) {
        font-size: 20px !important;
    }
}

@media (max-width: 767px) {
    body:not(.index-page) section:not(.next-pre-btn) h1:not([style*="font-size"]):not(#_) {
        font-size: 34px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) h2:not([style*="font-size"]):not(#_) {
        font-size: 24px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) :is(.sol-box, [class*="card"]) h2:not([style*="font-size"]):not(#_) {
        font-size: 21px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) h3:not([style*="font-size"]):not(#_) {
        font-size: 20px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) h4:not([style*="font-size"]):not(#_) {
        font-size: 19px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) :is(h5, h6):not([style*="font-size"]):not(#_) {
        font-size: 17px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) .accordion-button:not([style*="font-size"]):not(#_) {
        font-size: 19px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) :is(p, li):not([style*="font-size"]):not(#_) {
        font-size: 16px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) :is(p, li):is(.text-size-lg, .card-copy--lg):not([style*="font-size"]):not(#_) {
        font-size: 16px !important;
    }

    body:not(.index-page) section:not(.next-pre-btn) .banner-text p:not([style*="font-size"]):not(#_) {
        font-size: 16px !important;
    }
}

/* ======= Ready-to-use: formula / key-output blocks (fx-*) ======= */
.fx-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f77e1a;
    margin-bottom: 10px;
}

.fx-outputs,
.fx-eq-wrap {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f6f8fc;
    border: 1px solid #e3e9f3;
}

.fx-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fx-chips li {
    padding: 5px 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #dfe6f1;
    font-size: 13.5px;
    line-height: 1.4;
    color: #0e2545;
}

.fx-v {
    font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.08em;
}

.fx-note {
    margin-top: 14px;
    padding: 14px 18px;
    border-left: 4px solid #f77e1a;
    border-radius: 0 12px 12px 0;
    background: #fff5ec;
    font-size: 15.5px;
    line-height: 1.6;
    color: #40506b;
}

.fx-note b {
    color: #0e2545;
}

.fx-note-dark {
    border-left-color: #f9c74f;
    background: #0e2545;
    color: #d6deec;
}

.fx-note-dark b {
    color: #f9c74f;
}

.fx-eq {
    overflow-x: auto;
    padding: 6px 0;
    color: #0e2545;
}

.fx-eq math {
    font-size: 1.25em;
}

/* GRM model panel */
.fx-grm {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f3;
    box-shadow: 0 14px 34px rgba(14, 37, 69, .07);
}

.fx-grm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    background: linear-gradient(90deg, #0e2545, #17347e);
}

.fx-grm-badge {
    padding: 6px 14px;
    border-radius: 8px;
    background: #f9c74f;
    color: #0e2545;
    font-weight: 800;
    letter-spacing: .04em;
}

.fx-grm-sub {
    color: #d6deec;
    font-size: 15px;
}

.fx-grm-eqs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 24px 28px;
    background: #f6f8fc;
    border-bottom: 1px solid #e3e9f3;
}

.fx-grm-eqs .fx-eq {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e3e9f3;
}

.fx-grm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fx-grm-col {
    padding: 22px 24px;
    border-right: 1px solid #edf1f7;
}

.fx-grm-col:last-child {
    border-right: 0;
}

.fx-grm-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-grm-col li {
    position: relative;
    padding: 4px 0 4px 16px;
    font-size: 14px;
    line-height: 1.45;
    color: #40506b;
}

.fx-grm-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f77e1a;
}

@media (max-width: 991px) {
    .fx-grm-eqs {
        grid-template-columns: 1fr;
    }

    .fx-grm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fx-grm-col:nth-child(2) {
        border-right: 0;
    }

    .fx-grm-col:nth-child(-n+2) {
        border-bottom: 1px solid #edf1f7;
    }
}

@media (max-width: 575px) {

    .fx-grm-head,
    .fx-grm-eqs {
        padding: 16px;
    }

    .fx-grm-grid {
        grid-template-columns: 1fr;
    }

    .fx-grm-col {
        border-right: 0;
        border-bottom: 1px solid #edf1f7;
        padding: 16px;
    }

    .fx-grm-col:last-child {
        border-bottom: 0;
    }

    .fx-eq math {
        font-size: 1.05em;
    }
}

/* Highlighted words carried over from the live site (class="yellow").
   Home page keeps its own styling. */
body:not(.index-page) .yellow:not(#_) {
    color: #f77e1a !important;
    -webkit-text-fill-color: #f77e1a !important;
    font-weight: 700;
}

/* Emphasised (<em>) body text: brand orange, medium weight.
   Headings keep their own colour/weight; bold or highlighted emphasis stays bold.
   Home page excluded. */
body:not(.index-page) section em:not(#_) {
    color: #f77e1a !important;
    -webkit-text-fill-color: #f77e1a !important;
    font-weight: 500;
}

body:not(.index-page) section :is(h1, h2, h3, h4, h5, h6) em:not(#_) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-weight: inherit;
}

body:not(.index-page) section :is(strong, b, .yellow) em:not(#_),
body:not(.index-page) section em:has(strong, b):not(#_) {
    font-weight: 700;
}

/* contact form errors: Bootstrap's #dc3545 is too dim on the dark form panel */
#contactForm .invalid-feedback {
    color: #ff8080;
}

/* ============================================================
   Site footer (footer.html, loaded into div#footer on every page)
   ============================================================ */
div#footer {
    padding: 0;
    border: 0;
    background: none;
}

#footer.site-footer {
    --sf-bg: #0b1a30;
    --sf-text: #b6c2d4;
    --sf-head: #ffffff;
    --sf-accent: #f2751a;
    --sf-line: rgba(255, 255, 255, 0.09);
    background: var(--sf-bg);
    color: var(--sf-text);
    border-top: 3px solid var(--sf-accent);
    padding: 0;
    font-size: 15px;
}

.site-footer .sf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr 1.4fr;
    gap: 40px;
    padding: 64px 0 48px;
}

.site-footer .sf-title {
    position: relative;
    margin: 0 0 26px;
    padding-bottom: 12px;
    color: var(--sf-head);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.site-footer .sf-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--sf-accent);
}

.site-footer .sf-links,
.site-footer .sf-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .sf-links li {
    margin-bottom: 12px;
}

.site-footer .sf-links a {
    color: var(--sf-text);
    display: inline-block;
    line-height: 1.4;
    transition: color 0.2s, transform 0.2s;
}

.site-footer .sf-links a:hover,
.site-footer .sf-contact a:hover {
    color: var(--sf-accent);
}

.site-footer .sf-links a:hover {
    transform: translateX(4px);
}

.site-footer .sf-contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    line-height: 1.6;
}

.site-footer .sf-contact a {
    color: var(--sf-text);
    transition: color 0.2s;
}

.site-footer .sf-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(242, 117, 26, 0.12);
    color: var(--sf-accent);
    font-size: 17px;
}

.site-footer .sf-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-footer .sf-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 18px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.site-footer .sf-social a:hover {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    transform: translateY(-3px);
}

.site-footer .sf-guarantee {
    margin: 24px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--sf-accent);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--sf-text);
    font-size: 14px;
    line-height: 1.6;
}

.site-footer .sf-bottom {
    border-top: 1px solid var(--sf-line);
    padding: 20px 0;
    font-size: 14px;
}

.site-footer .sf-bottom .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px 24px;
}

@media (max-width: 991px) {
    .site-footer .sf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
        padding: 48px 0 36px;
    }
}

@media (max-width: 575px) {
    .site-footer .sf-grid {
        gap: 32px 20px;
    }

    .site-footer .sf-grid>.sf-col:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    .site-footer .sf-bottom .container {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   Inner-page banner tagline ("...environment / CO2 / PTF ...")
   in a glass box so it reads cleanly on any banner photo
   ============================================================ */
body:not(.index-page) .banner-text>p.text-orange:first-child {
    display: table;
    margin: 0 auto 18px !important;
    padding: 10px 22px;
    background: rgb(1 2 3 / 70%);

    line-height: 1.7;
    text-shadow: none;
}

@media (max-width: 575px) {
    body:not(.index-page) .banner-text>p.text-orange:first-child {
        padding: 8px 14px;
        margin-bottom: 14px !important;
    }
}

/* ============================================================
   TECH SUITE(TM) wordmark (replaces GRM(TM) in running text)
   TECH takes the surrounding colour so it works on light and dark
   ============================================================ */
.tsm {
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: inherit;
    font-style: normal;
}

.tsm .tsm-s,
.tsm sup {
    color: #f2751a;
}

/* .navbar a is flex + space-between: "(", TECH SUITE and ")" became
   separate items spread across the row */
.navbar a:has(> .tsm) {
    justify-content: flex-start;
}

/* .banner-text h1 span paints every span orange; keep TECH white */
.banner-text h1 .tsm {
    color: #ffffff;
}

.tsm sup {
    font-size: max(0.5em, 8px);
    font-weight: 700;
    top: -0.9em;
    margin-left: 2px;
}

/* yellow GRM badge: orange on yellow is unreadable */
.fx-grm-badge .tsm .tsm-s,
.fx-grm-badge .tsm sup {
    color: #b4400a;
}

/* ONE button on every page (the .btn-premium look): orange gradient pill,
   white bold uppercase label. Was orange and blue gradients (inline),
   Bootstrap blue (a2z), brown square (contact form), an outline
   (smartpack), small mixed-case pills (coverage, article pages), and the
   link-colour rule turned several labels dark orange on orange. */
.btn-premium:not(#_):not(#_):not(#_) {
    background: linear-gradient(45deg, #f88b39, #ff5e3a) !important;
    text-align: center;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(255, 94, 58, 0.35) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    cursor: pointer;
}

.btn-premium:hover:not(#_):not(#_):not(#_) {
    color: #fff !important;
    filter: brightness(1.08);
}

/* secondary (outline) button beside it on the article pages: same size */
a.rx-btn--ghost:not(#_) {
    padding: 15px 40px;
    border-radius: 50px !important;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* .sol-box is a grid — without this the button stretches the card width */
.sol-box>.btn-premium {
    justify-self: start;
}

/* Content images: square art rendered 600–1044px tall in wide columns
   (got-smartpack, reactor, bench-test-non, ready-pack, kinetics …) —
   taller than a laptop screen. Cap at the 480px of the standard
   .sol-img cards; the whole image is kept (no crop) and centred. */
body:not(.index-page):not(.rx-page) section:not(.banner) a.imglist:has(> img):not(.sol-img *):not(#_) {
    display: block;
    text-align: center;
}

body:not(.index-page):not(.rx-page) section:not(.banner) a.imglist>img:not(.sol-img img):not(#_) {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Content images: square art was shown at its natural shape in wide
   columns — 600 to 1044px tall (got-smartpack, reactor, bench-test-non,
   fastest-path ...). Cap at 480px, the height of the standard .sol-img
   cards; whole image kept (no crop, labels stay), centred in its column. */
@media (min-width: 768px) {
    body:not(.index-page):not(.rx-page) section:not(.banner):not(.next-pre-btn) a.imglist>img:not(.sol-img img):not([style*="object-fit"]):not(.product-2 img):not(#_) {
        max-height: 480px;
        width: auto !important;
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* ready-pack pair: two labelled squares in a col-md-4 + col-md-8 row
       left a wide gap (the -8 column is twice as wide). Show them as one
       centred pair of equal squares; cropping would cut off the labels. */
    .product-2 .row:has(> .col-md-4 .imglist):has(> .col-md-8 .imglist):not(#_) {
        justify-content: center;
        align-items: flex-start;
    }

    .product-2 .row> :is(.col-md-4, .col-md-8):has(> .imglist):not(#_) {
        flex: 0 0 auto;
        width: auto;
        max-width: 50%;
    }

    .product-2 .row> :is(.col-md-4, .col-md-8) .imglist:not(#_) {
        height: auto;
    }

    .product-2 .row> :is(.col-md-4, .col-md-8) .imglist img:not(#_):not(#_):not(#_) {
        width: 480px !important;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

/* contactus office photo was 1296x729: same 480px cap, trimmed from the
   bottom (parking lot) so the building and the sign stay */
@media (min-width: 768px) {
    img[src$="Contact-us/back-img.webp"]:not(#_) {
        width: 100%;
        height: 480px;
        object-fit: cover;
        object-position: center top;
    }
}

/* kinetics: journal cover (col-lg-8) + detail (col-lg-4) — same gap as
   the ready-pack pair once the cover was capped at 480px. One centred
   pair of equal squares, each in its glass frame. */
@media (min-width: 992px) {
    .row:has(> .col-lg-8 .imglist):has(> .col-lg-4 .imglist):not(#_) {
        justify-content: center;
        align-items: flex-start;
    }

    .row:has(> .col-lg-8 .imglist):has(> .col-lg-4 .imglist)> :is(.col-lg-8, .col-lg-4):not(#_) {
        flex: 0 0 auto;
        width: auto;
        max-width: 50%;
    }

    .row:has(> .col-lg-8 .imglist):has(> .col-lg-4 .imglist) .imglist img:not(#_):not(#_):not(#_) {
        width: 480px !important;
        max-width: 100%;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

/* .sol-img cards cropped the square art to 636x480 (object-fit: cover),
   cutting off the top and bottom labels ("PLATE HEAT EXCHANGER",
   "DISTILLATION COLUMN" on reactor.html, and the same on every page).
   Show the whole square instead, filling the full column width. */
@media (min-width: 768px) {
    .sol-img:not(#_) {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .sol-img img:not(#_) {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        display: block;
    }
}

/* Desktop: the .sol-img art is now 3:2 (1200x800), so a 3:2 frame shows
   the whole image at ~420px tall in the ~630px column. The two PNG
   diagrams keep their own shape and are never cropped. */
@media (min-width: 992px) {
    .sol-img img:not(#_) {
        height: auto;
        max-height: none;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        object-position: center;
    }

    .sol-img img[src$=".png"]:not(#_) {
        aspect-ratio: auto;
        width: auto;
        max-height: 420px;
        margin: 0 auto;
        object-fit: contain;
    }
}

/* The square art in the other image frames (glass-card, img-wrapper-glass,
   image-container-premium, dev-img) was also redrawn 3:2, so let it fill
   its frame edge to edge instead of the 480px-tall centred cap above. */
body:not(.index-page):not(.rx-page) section:not(.banner) :is(.glass-card, .img-wrapper-glass, .image-container-premium, .dev-img)>a.imglist>img:not(.sol-img img):not(#_):not(#_) {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    max-height: none;
}

/* In a wide column (one-stop-solutions col-lg-10) a full-width 3:2 image
   ran ~1100x730. Cap the image frame at 720px (=> ~480px tall) and centre
   it, so the frame still hugs the image and nothing is cropped. */
body:not(.index-page):not(.rx-page) section:not(.banner) :is(.glass-card, .img-wrapper-glass, .image-container-premium, .dev-img):has(> a.imglist > img):not(#_) {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* <=991px the image stacks under its card in a full-width column; the
   380px height cap + fit-content frame left blank space left and right.
   Fill the column instead (whole image still shown, no crop). */
@media (max-width: 991px) {
    .sol-img:not(#_) {
        width: 100%;
        max-width: 100%;
    }

    .sol-img img:not(#_) {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        display: block;
    }
}

/* Same rounded corners on every content image (reactor.html 3-step
   images were square-cornered next to the 20px-rounded .sol-img cards). */
body:not(.index-page):not(.rx-page) section:not(.banner):not(.next-pre-btn) a.imglist>img:not(#_) {
    border-radius: 20px;
}

/* =============================================================
   Contact form card (contactus.html) — dark form panel + orange
   info panel, per the supplied mockup. Field ids / .invalid-feedback
   siblings / #submitBtn are what the validation script uses.
   ============================================================= */
.cx-card {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(8, 14, 26, .28);
    margin-top: 8px;
}

.cx-form-side {
    position: relative;
    padding: 40px 44px 44px;
    background: linear-gradient(135deg, #0d1117 0%, #151b24 60%, #1b1d22 100%);
    isolation: isolate;
}

/* faded night refinery, top right of the dark panel */
.cx-form-side::before {
    content: "";
    position: absolute;
    inset: 0 0 35% 45%;
    background: url("../img/homo-geneous/homo_banner_v2.webp") center / cover no-repeat;
    opacity: .35;
    -webkit-mask-image: linear-gradient(to left, #000 20%, transparent), linear-gradient(to top, transparent, #000 45%);
    mask-image: linear-gradient(to left, #000 20%, transparent);
    z-index: -1;
}

.cx-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
    color: #f7931e !important;
    -webkit-text-fill-color: #f7931e !important;
    font-size: 15px !important;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: none !important;
}

.cx-eyebrow::after {
    content: "";
    width: 40px;
    height: 1.5px;
    background: #f7931e;
}

.cx-card .cx-title:not(#_):not(#_):not(#_):not(#_) {
    margin: 0 0 10px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.05;
    text-align: left !important;
    background: none !important;
    width: auto;
}

.cx-title span {
    color: #f7931e;
    -webkit-text-fill-color: #f7931e;
}

.cx-sub {
    max-width: 520px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 17px !important;
    line-height: 1.55;
}

.cx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cx-wide {
    grid-column: 1 / -1;
}

.cx-field {
    position: relative;
}

.cx-field>i {
    position: absolute;
    left: 16px;
    top: 21px;
    transform: translateY(-50%);
    color: #4b5563;
    font-size: 17px;
    pointer-events: none;
    z-index: 2;
}

.cx-field .form-control {
    height: 44px;
    padding: 10px 14px 10px 46px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    font-size: 16px;
    box-shadow: none;
}

.cx-field textarea.form-control {
    height: auto;
    min-height: 86px;
    padding-top: 12px;
    resize: vertical;
}

.cx-field .form-control:focus {
    border-color: #f7931e;
    box-shadow: 0 0 0 3px rgba(247, 147, 30, .25);
}

/* label sits where a placeholder would; hides once there is a value */
.cx-field label {
    position: absolute;
    left: 46px;
    top: 11px;
    margin: 0;
    color: #4b5563;
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
}

.cx-field label span {
    color: #f7931e;
}

.cx-field .form-control:focus+label,
.cx-field .form-control:not(:placeholder-shown)+label {
    display: none;
}

.cx-field .invalid-feedback {
    color: #ff8a65;
    font-size: 13px;
}

.cx-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 13px 30px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ff8a1f 0%, #f26b0f 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(247, 120, 20, .45);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.cx-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.cx-btn:disabled {
    opacity: .7;
    cursor: wait;
    transform: none;
}

.cx-btn i {
    font-size: 20px;
}

/* orange info panel with refinery silhouettes and a glowing wave */
.cx-info-side {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 34px;
    background: linear-gradient(160deg, #f7931e 0%, #f37a16 55%, #ec6a10 100%);
    isolation: isolate;
    overflow: hidden;
}

.cx-info-side::before {
    content: "";
    position: absolute;
    inset: 45% 0 0 0;
    background: url("../img/homo-geneous/homo_banner_v2.webp") 70% bottom / cover no-repeat;
    filter: grayscale(1) contrast(1.4) brightness(1.05);
    mix-blend-mode: multiply;
    opacity: .5;
    -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 95%), linear-gradient(to right, transparent, #000 35%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, #000 40%, transparent 95%), linear-gradient(to right, transparent, #000 35%);
    mask-composite: intersect;
    z-index: -1;
}

.cx-info-side::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 6%;
    height: 90px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C90 70 140 20 220 40 S340 80 400 30' fill='none' stroke='%23ffe0b8' stroke-width='2.5'/%3E%3Cpath d='M0 80 C100 78 150 35 230 52 S350 88 400 45' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 6px rgba(255, 220, 170, .9));
    z-index: -1;
}

.cx-info {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
}

.cx-info+.cx-info {
    border-top: 1px solid rgba(255, 255, 255, .45);
}

.cx-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: #f37a16;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(120, 40, 0, .25);
}

.cx-info-side .cx-info h3:not(#_):not(#_):not(#_):not(#_) {
    margin: 4px 0 6px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    font-size: 21px !important;
    font-weight: 700;
    text-align: left !important;
    width: auto;
}

.cx-info-side .cx-info p,
.cx-info-side .cx-info a {
    margin: 0;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 15.5px !important;
    line-height: 1.6;
    text-align: left !important;
    text-decoration: none;
}

@media (max-width: 991px) {
    .cx-card {
        grid-template-columns: 1fr;
    }

    /* stacked panel is short: keep the wave below the email line */
    .cx-info-side {
        padding-bottom: 70px;
    }

    .cx-info-side::after {
        bottom: 0;
        height: 60px;
    }
}

@media (max-width: 575px) {
    .cx-form-side {
        padding: 28px 20px 30px;
    }

    .cx-grid {
        grid-template-columns: 1fr;
    }

    .cx-info-side {
        padding: 26px 20px;
    }
}

/* Contact info panel: purpose-made background (orange gradient, dotted
   world map, refinery, glowing wave — generated in Figma) replaces the
   CSS silhouette + wave layers. */
.cx-info-side:not(#_) {
    background: #f37a16 url("../img/Contact-us/contact-info-bg.webp") right bottom / cover no-repeat;
}

.cx-info-side:not(#_)::before,
.cx-info-side:not(#_)::after {
    content: none;
}

@media (max-width: 991px) {
    .cx-info-side:not(#_) {
        background-position: center 85%;
    }
}

/* ready-pack: "Complete design packs for key chemical products" sits on
   left-aligned body copy, so the heading + its orange rule go left too
   (overrides the site-wide centred h2 rule above). */
body:not(.index-page):not(.rx-page) section.product-2 .p-text h2.sec-title:not(#_):not(#_):not(#_),
body:not(.index-page):not(.rx-page) section.product-2 .p-text h2.sec-title+.border:not(#_):not(#_):not(#_) {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* better-design: safety-first design order (Safety → … → Catalyst/Reactor Life) */
.safety-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 14px;
}

.safety-flow li {
    display: flex;
    align-items: center;
}

.safety-flow li span {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
}

.safety-flow li:not(:last-child)::after {
    content: "\2192";
    margin: 0 10px;
    color: #f77e1a;
    font-weight: 700;
}

.safety-callout {
    margin: 0;
    padding: 22px 26px;
    border-left: 4px solid #f77e1a;
    border-radius: 0 14px 14px 0;
    background: rgba(247, 126, 26, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-main);
}

.safety-callout span {
    color: #f77e1a;
}

/* design-order flow sitting in the callout box inside the ROC card */
.safety-callout--flow {
    text-transform: none;
    letter-spacing: normal;
}

.safety-callout--flow .safety-flow {
    justify-content: flex-start;
}

@media (max-width: 575px) {
    .safety-flow {
        flex-direction: column;
        row-gap: 0;
    }

    .safety-flow li {
        flex-direction: column;
    }

    .safety-flow li:not(:last-child)::after {
        content: "\2193";
        margin: 6px 0;
    }

    .safety-callout {
        font-size: 0.95rem;
        padding: 18px 20px;
    }
}