/* ASCO India Technologies LLP — Global Styles */
:root{--navy:#071c2a;--navy2:#0c2a3b;--ink:#132532;--muted:#667580;--paper:#f4f5f2;--white:#fff;--line:#dce2e3;--lime:#d2f36b;--blue:#4b8aa5;--gold:#c7a66a;--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.site-header{height:82px;position:sticky;top:0;z-index:100;background:rgba(7,28,42,.97);border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px)}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#fff}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(210,243,107,.7);color:var(--lime);font:800 19px var(--display);letter-spacing:-3px}.brand-mark span{color:#fff}.brand-copy{display:flex;flex-direction:column;line-height:1.15;letter-spacing:.11em}.brand-copy strong{font:800 14px var(--display)}.brand-copy small{font-size:9px;letter-spacing:.23em;margin-top:5px;color:#f4f5f2}.main-nav{display:flex;align-items:center;gap:32px;color:#d9e1e5;font-size:12px;font-weight:600}.main-nav>a:not(.nav-cta){transition:color .2s}.main-nav>a:hover{color:var(--lime)}.nav-cta{background:var(--lime);color:var(--navy);padding:12px 17px;font-weight:800}.nav-cta span{margin-left:14px}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:25px;height:2px;background:white;margin:5px}
.hero{position:relative;overflow:hidden;min-height:690px;background:var(--navy);color:#fff;isolation:isolate}.hero-grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(90deg,black,transparent 88%)}.hero:after{content:"";position:absolute;z-index:-1;width:650px;height:650px;border-radius:50%;right:-130px;top:20px;background:radial-gradient(circle,rgba(75,138,165,.18),transparent 68%)}.hero-content{position:relative;padding-top:120px;padding-bottom:105px;z-index:2}.eyebrow,.section-kicker{font-size:10px;font-weight:800;letter-spacing:.17em;color:#8ba2af;display:flex;align-items:center;gap:12px}.eyebrow-line{width:34px;height:2px;background:var(--lime)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);letter-spacing:-.055em;line-height:1.08;font-weight:600}h1{font-size:clamp(42px,5.3vw,70px);max-width:720px;margin:26px 0 22px}h1 em,h2 em{font-style:normal;color:var(--lime)}.hero-content>p{max-width:520px;color:#b8c6cd;font-size:16px;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:15px 19px;font-size:12px;font-weight:800;border:1px solid transparent;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--lime);color:var(--navy)}.btn-primary span{font-size:17px}.text-link{font-size:12px;color:#dbe4e8;font-weight:700}.text-link span{margin-left:10px;color:var(--lime)}.hero-footnote{margin-top:66px;color:#90a4af;font-size:10px;letter-spacing:.12em;display:flex;align-items:center;gap:10px}.pulse{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(210,243,107,.1)}.hero-art{position:absolute;width:520px;height:520px;right:max(1%,calc((100vw - 1280px)/2));top:95px;opacity:.9}.art-orbit{position:absolute;border:1px solid rgba(126,170,190,.25);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-one{width:430px;height:430px}.orbit-two{width:320px;height:320px;border-style:dashed;border-color:rgba(210,243,107,.35)}.art-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:205px;height:205px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#24516a,#0b2637 70%);box-shadow:0 0 90px rgba(75,138,165,.22),inset 0 0 0 1px rgba(255,255,255,.12)}.core-ring{position:absolute;inset:14px;border:1px solid rgba(210,243,107,.4);border-radius:50%}.core-label{text-align:center;font:800 27px var(--display);letter-spacing:.14em;color:#fff}.core-label span{display:block;font:700 7px var(--font);letter-spacing:.17em;color:var(--lime);margin-top:8px}.art-tag{position:absolute;font-size:9px;letter-spacing:.15em;font-weight:700;color:#c5d2d8;border:1px solid rgba(255,255,255,.15);background:#0b2637;padding:11px 13px}.tag-top{right:0;top:115px}.tag-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px}.tag-bottom{left:35px;bottom:94px}.art-cross{position:absolute;width:14px;height:14px}.art-cross:before,.art-cross:after{content:"";position:absolute;background:var(--lime)}.art-cross:before{width:14px;height:1px;top:6px}.art-cross:after{height:14px;width:1px;left:6px}.cross-one{top:60px;left:130px}.cross-two{right:90px;bottom:80px}.hero-bottom{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid rgba(255,255,255,.13);color:#8197a3;font-size:9px;letter-spacing:.14em}
.trust-strip{background:var(--lime);color:var(--navy)}.trust-inner{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px}.trust-inner>span{font-size:9px;font-weight:800;letter-spacing:.14em}.trust-inner strong{font:800 22px var(--display)}.trust-inner small{display:block;font:700 8px var(--font);letter-spacing:.12em;margin-top:2px}.trust-divider{width:1px;height:35px;background:rgba(7,28,42,.25)}
.section{padding:110px 0}.about-grid{display:grid;grid-template-columns:1fr 2fr .8fr;gap:44px}.section-kicker{color:#768791}.section-kicker span{color:#8ca0aa}.about-main h2,.section-heading h2,.expertise-grid h2,.contact-grid h2{font-size:clamp(34px,4vw,52px);margin:20px 0 28px}.about-main h2 em,.section-heading h2 em{color:#6c8c9a}.lead{font-size:19px;font-weight:600;line-height:1.6;max-width:650px}.about-main>p:not(.lead){font-size:14px;color:var(--muted);max-width:690px}.underlined-link{display:inline-flex;gap:26px;align-items:center;font-size:12px;font-weight:800;border-bottom:1px solid var(--ink);padding:8px 0;margin-top:12px}.underlined-link span{color:#7d9b30;font-size:17px}.about-aside{align-self:center;border-left:1px solid var(--line);padding-left:32px}.aside-number{font:800 72px/.95 var(--display);letter-spacing:-.07em;color:#76909a}.aside-number span{color:#8fae37;font-size:37px;vertical-align:top}.about-aside p{font-size:13px;color:var(--muted);margin:17px 0 26px}.aside-rule{height:1px;background:var(--line);margin-bottom:18px}.aside-note{font-size:9px;line-height:2;letter-spacing:.12em;font-weight:800;color:#7d9099}
.solutions-section{background:#e9edeb}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:48px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:390px;color:var(--muted);font-size:13px;margin-bottom:5px}.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.solution-card{min-height:300px;background:#fff;padding:24px 22px;display:flex;flex-direction:column;border:1px solid #e3e8e6;transition:transform .25s,box-shadow .25s}.solution-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(11,37,51,.08)}.feature-card{background:var(--navy);color:#fff;border-color:var(--navy)}.card-top{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.13em;font-weight:800;color:#8799a2}.feature-card .card-top{color:#a4b6be}.card-arrow{font-size:17px;color:#8aa832}.solution-symbol{width:43px;height:43px;display:grid;place-items:center;background:#eef2e8;color:#6f8c2b;font-size:25px;margin:24px 0 17px}.feature-card .solution-symbol{background:rgba(210,243,107,.13);color:var(--lime)}.solution-card h3{font:700 18px/1.3 var(--display);letter-spacing:-.03em;margin-bottom:12px}.solution-card p{font-size:11px;color:#71808a;line-height:1.8;margin-bottom:20px}.feature-card p{color:#aebdc4}.solution-card>a{margin-top:auto;font-size:10px;font-weight:800;display:flex;justify-content:space-between;border-top:1px solid #e8ecea;padding-top:14px}.feature-card>a{border-color:rgba(255,255,255,.17)}.solution-card>a span{color:#8aa832;font-size:15px}
.expertise-section{padding:105px 0;background:var(--navy);color:#fff}.expertise-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.light{color:#8ea3ae}.expertise-grid h2{margin-top:23px}.expertise-intro{font-size:13px;color:#a8bac3;max-width:380px;margin:0 0 28px}.btn-outline{border-color:rgba(255,255,255,.35);color:#fff}.btn-outline span{color:var(--lime)}.expertise-list{border-top:1px solid rgba(255,255,255,.18)}.expertise-item{display:grid;grid-template-columns:40px 1fr 20px;gap:18px;align-items:start;padding:23px 0;border-bottom:1px solid rgba(255,255,255,.18)}.expertise-item>span{font-size:10px;color:var(--lime);padding-top:4px}.expertise-item h3{font:700 17px var(--display);margin:0 0 6px}.expertise-item p{font-size:11px;color:#91a5af;margin:0}.expertise-item b{font-weight:400;color:var(--lime)}
.clients-section{background:var(--paper)}.client-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.client-name{min-height:105px;padding:22px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font:800 16px var(--display);letter-spacing:-.03em}.client-name small{font:500 10px/1.5 var(--font);letter-spacing:0;color:#849198;margin-top:6px}.client-note{font-size:10px;color:#839098;margin-top:20px}
.contact-section{background:#102f40;color:#fff;padding:105px 0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.contact-grid h2{margin-top:22px}.contact-grid h2 em{color:var(--lime)}.contact-grid>div>p{color:#adc0c9;font-size:13px;max-width:380px}.contact-details{display:grid;gap:18px;margin-top:40px}.contact-details a,.contact-details>div{font-size:13px;color:#e6edf0}.contact-details span{display:block;font-size:8px;letter-spacing:.15em;color:#8da6b1;font-weight:800;margin-bottom:5px}.contact-form{background:#f8f9f6;color:var(--ink);padding:34px}.form-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:25px}.form-heading>span{font-size:10px;font-weight:800;letter-spacing:.14em}.form-heading small{font-size:10px;color:#839098}.contact-form label{display:block;font-size:10px;font-weight:800;margin-bottom:16px}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #dfe5e3;background:#fff;color:var(--ink);outline:none;font-size:12px;border-radius:0}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#829b3c}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a0abad}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.submit-btn{width:100%;border:0;cursor:pointer}.form-note{font-size:9px;color:#8a969b;margin:12px 0 0}
.site-footer{background:#061722;color:#fff;padding:30px 0 0}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:28px}.footer-top>p{font-size:10px;line-height:1.8;color:#91a4ad;margin:0}.back-top{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--lime)}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:17px 0;display:flex;justify-content:space-between;color:#718791;font-size:9px;letter-spacing:.08em}
@media(max-width:1000px){.main-nav{gap:18px}.hero-art{right:-130px;opacity:.55}.hero-content{padding-top:105px}.about-grid{grid-template-columns:.7fr 1.6fr}.about-aside{grid-column:2;display:flex;align-items:center;gap:20px;border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.aside-number{font-size:52px}.aside-rule{display:none}.aside-note{margin-left:auto}.solution-grid{grid-template-columns:repeat(2,1fr)}.expertise-grid{gap:55px}.contact-grid{gap:45px}}
@media(max-width:720px){.container{width:min(100% - 34px,560px)}.site-header{height:72px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--navy);padding:18px 22px 25px;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid rgba(255,255,255,.12)}.main-nav.open{display:flex}.main-nav>a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08)}.main-nav .nav-cta{margin-top:13px;padding:14px}.hero{min-height:670px}.hero-content{padding-top:92px;padding-bottom:120px}.hero-art{width:320px;height:320px;right:-150px;top:270px;opacity:.22}.orbit-one{width:300px;height:300px}.orbit-two{width:220px;height:220px}.art-core{width:145px;height:145px}.core-label{font-size:19px}.tag-top{top:55px}.tag-bottom{bottom:30px}.hero-content>p{font-size:14px;max-width:390px}.hero-actions{gap:20px;align-items:flex-start;flex-direction:column}.hero-footnote{margin-top:42px;font-size:8px}.hero-bottom{font-size:7px;gap:20px}.trust-inner{padding:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.trust-inner>span{font-size:8px}.trust-inner strong{font-size:19px}.trust-divider{display:none}.section{padding:75px 0}.about-grid{display:block}.about-main{margin-top:27px}.about-main h2,.section-heading h2,.expertise-grid h2,.contact-grid h2{font-size:36px}.lead{font-size:17px}.about-aside{margin-top:35px;gap:16px}.aside-number{font-size:46px}.aside-number span{font-size:25px}.aside-note{font-size:7px}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:23px}.solution-grid{grid-template-columns:1fr 1fr;gap:8px}.solution-card{padding:17px 14px;min-height:310px}.solution-card h3{font-size:15px}.solution-card p{font-size:10px}.card-top{font-size:7px}.solution-symbol{margin:20px 0 14px}.expertise-section,.contact-section{padding:75px 0}.expertise-grid,.contact-grid{grid-template-columns:1fr;gap:45px}.expertise-list{margin-top:0}.client-grid{grid-template-columns:repeat(2,1fr)}.client-name{min-height:95px;padding:16px;font-size:14px}.contact-form{padding:23px 18px}.form-heading{display:block}.form-heading small{display:block;margin-top:5px}.form-row{grid-template-columns:1fr;gap:0}.footer-top{align-items:flex-start;flex-wrap:wrap}.footer-top>p{order:3;width:100%}.footer-bottom{gap:12px;flex-direction:column}.back-top{margin-left:auto}}
@media(max-width:390px){.solution-grid{grid-template-columns:1fr}.solution-card{min-height:260px}.hero h1{font-size:40px}.hero-bottom span:last-child{display:none}}

.main-nav {
color: #000;
}
/* BRAND LOGO */
.site-header{
background: #ffffff;

}
.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo img {
    display: block;
    width: 170px;
    height: 60px;
    object-fit: contain;
    object-position: left center;
}

/* Responsive Logo */

@media (max-width: 768px) {
    .brand-logo img {
        width: 135px;
        height: 48px;
    }
}



/* =====================================
   ASCO PREMIUM BRAND LOGO
===================================== */

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    padding: 6px 0;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.brand-logo img {
    display: block;
    width: 175px;
    height: 65px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 8px rgba(0, 194, 255, 0.18));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.brand-logo:hover img {
    transform: scale(1.04);
    filter:
        drop-shadow(0 0 8px rgba(0, 194, 255, 0.3))
        drop-shadow(0 0 10px rgba(163, 255, 63, 0.2));
}

/* Mobile Logo */

@media (max-width: 768px) {
    .brand-logo img {
        width: 140px;
        height: 52px;
    }
}

@media (max-width: 390px) {
    .brand-logo img {
        width: 125px;
        height: 46px;
    }
}

/* =====================================
   ASCO SOLUTIONS PAGES
===================================== */

.solutions-view-all {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.solutions-page-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 0 90px;
    background: var(--navy);
    color: var(--white);
}

.solutions-page-hero h1 {
    max-width: 800px;
    margin: 24px 0;
}

.solutions-page-hero p {
    max-width: 650px;
    color: #b8c6cd;
    font-size: 15px;
    line-height: 1.9;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #9aadb7;
    font-size: 11px;
}

.breadcrumb a:hover {
    color: var(--lime);
}

.service-card-link {
    display: block;
    height: 100%;
}

.service-card-link:focus-visible,
.solution-card a:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

.service-detail-hero {
    padding: 95px 0 85px;
    background: var(--navy);
    color: var(--white);
}

.service-detail-hero h1 {
    max-width: 850px;
}

.service-detail-hero h1 em {
    color: var(--lime);
}

.service-detail-hero .service-intro {
    max-width: 680px;
    color: #b8c6cd;
    font-size: 16px;
    line-height: 1.9;
}

.service-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, .7fr);
    gap: 55px;
    align-items: start;
}

.service-content h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    margin: 18px 0;
}

.service-content h3 {
    font: 700 21px/1.4 var(--display);
    margin: 35px 0 12px;
}

.service-content p,
.service-content li {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}

.service-content ul {
    padding-left: 21px;
}

.service-content li {
    padding: 5px 0;
}

.service-sidebar {
    padding: 28px;
    background: var(--navy);
    color: var(--white);
}

.service-sidebar h3 {
    font: 700 22px var(--display);
}

.service-sidebar p {
    color: #b8c6cd;
    font-size: 13px;
    line-height: 1.8;
}

.service-sidebar .btn {
    width: 100%;
    margin-top: 15px;
}

.service-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.service-feature {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--line);
}

.service-feature h3 {
    font: 700 17px/1.4 var(--display);
    margin: 15px 0 10px;
}

.service-feature p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 0;
}

.service-number {
    color: #809a36;
    font: 800 12px var(--display);
    letter-spacing: .12em;
}

.service-faq {
    border-top: 1px solid var(--line);
}

.service-faq details {
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}

.service-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
}

.service-faq details p {
    color: var(--muted);
    font-size: 13px;
    margin: 14px 0 0;
    line-height: 1.8;
}

.related-solutions {
    background: #e9edeb;
}

@media (max-width: 720px) {
    .solutions-page-hero,
    .service-detail-hero {
        padding: 70px 0 60px;
    }

    .service-detail-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .service-feature-grid {
        grid-template-columns: 1fr;
    }

    .service-sidebar {
        padding: 23px;
    }

    .solutions-view-all {
        margin-top: 28px;
    }
}


/* =====================================
   ASCO HEADER LOGO — FIXED SIZE
===================================== */

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.site-header .brand-logo-image {
    display: block;
    width: 140px;
    height: 52px;
    max-width: 140px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

.site-header .brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.site-header .brand-copy strong {
    font-size: 13px;
}

.site-header .brand-copy small {
    font-size: 8px;
    color: #000;
}

@media (max-width: 768px) {
    .site-header .brand-logo-image {
        width: 110px;
        height: 42px;
        max-width: 110px;
    }

    .site-header .brand {
        gap: 7px;
    }
}

/* ==========================================
   ASCO — PREMIUM SOLUTIONS DIRECTORY
========================================== */

.solutions-directory {
    position: relative;
    padding: 105px 0 110px;
    overflow: hidden;
    background: #f4f6f5;
}

.solutions-directory .container {
    width: min(100% - 48px, 1240px);
    margin: 0 auto;
}

/* Section heading */

.solutions-directory .section-heading {
    max-width: 720px;
    margin: 0 auto 58px;
    text-align: center;
}

.solutions-directory .section-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #657c28;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.solutions-directory .section-heading .eyebrow::before,
.solutions-directory .section-heading .eyebrow::after {
    content: "";
    width: 23px;
    height: 2px;
    background: #b2d44d;
}

.solutions-directory .section-heading h2 {
    margin: 0 0 17px;
    color: #091e2a;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(35px, 4.5vw, 52px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -1.8px;
}

.solutions-directory .section-heading h2 span {
    color: #819d30;
}

.solutions-directory .section-heading p {
    max-width: 580px;
    margin: 0 auto;
    color: #667681;
    font-size: 15px;
    line-height: 1.85;
}

/* Cards grid */

.solutions-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* Individual card */

.solutions-directory-grid .directory-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 285px;
    box-sizing: border-box;
    padding: 30px 28px 25px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, #102c3b 0%, #071b28 100%);
    border: 1px solid rgba(7, 28, 42, 0.08);
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(7, 28, 42, 0.045);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Decorative corner glow */

.solutions-directory-grid .directory-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -75px;
    right: -75px;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(210, 243, 107, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(210, 243, 107, 0.025);
    transition: transform 0.4s ease;
}

/* Lime accent line */

.solutions-directory-grid .directory-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    width: 36px;
    height: 3px;
    background: #d2f36b;
    border-radius: 0 0 3px 3px;
    transition: width 0.3s ease;
}

.solutions-directory-grid .directory-card:hover {
    transform: translateY(-7px);
    border-color: rgba(210, 243, 107, 0.55);
    box-shadow: 0 20px 40px rgba(7, 28, 42, 0.14);
}

.solutions-directory-grid .directory-card:hover::before {
    transform: scale(1.15);
}

.solutions-directory-grid .directory-card:hover::after {
    width: 70px;
}

/* Number */

.solutions-directory-grid .directory-number {
    display: block;
    margin: 5px 0 25px;
    color: #d2f36b;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 2px;
}

/* Card title */

.solutions-directory-grid .directory-card h3 {
    position: relative;
    margin: 0 0 14px;
    min-height: 58px;
    color: #f5f8fa;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.25px;
    text-align: left;
    overflow-wrap: anywhere;
    transition: color 0.25s ease;
}

.solutions-directory-grid .directory-card:hover h3 {
    color: #d2f36b;
}

/* Description */

.solutions-directory-grid .directory-card p {
    margin: 0 0 25px;
    color: #b4c2cb;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.85;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Explore link stays at bottom */

.solutions-directory-grid .directory-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 17px;
    color: #d2f36b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.25s ease;
}

.solutions-directory-grid .directory-card:hover .directory-link {
    color: #fff;
}

/* Tablet */

@media (max-width: 1000px) {
    .solutions-directory {
        padding: 85px 0;
    }

    .solutions-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .solutions-directory-grid .directory-card {
        min-height: 270px;
    }

    .solutions-directory-grid .directory-card h3 {
        min-height: auto;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .solutions-directory {
        padding: 65px 0;
    }

    .solutions-directory .container {
        width: calc(100% - 36px);
    }

    .solutions-directory .section-heading {
        margin-bottom: 35px;
        text-align: left;
    }

    .solutions-directory .section-heading h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .solutions-directory .section-heading p {
        margin: 0;
        font-size: 13px;
        line-height: 1.8;
    }

    .solutions-directory .section-heading .eyebrow {
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .solutions-directory-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .solutions-directory-grid .directory-card {
        min-height: 245px;
        padding: 27px 24px 23px;
    }

    .solutions-directory-grid .directory-card::after {
        left: 24px;
    }

    .solutions-directory-grid .directory-number {
        margin-bottom: 20px;
    }

    .solutions-directory-grid .directory-card h3 {
        margin-bottom: 12px;
        font-size: 19px;
    }

    .solutions-directory-grid .directory-card p {
        margin-bottom: 22px;
        font-size: 13px;
    }
}

/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .solutions-directory-grid .directory-card,
    .solutions-directory-grid .directory-card::before,
    .solutions-directory-grid .directory-card::after,
    .solutions-directory-grid .directory-card h3,
    .solutions-directory-grid .directory-link {
        transition: none;
    }

    .solutions-directory-grid .directory-card:hover {
        transform: none;
    }
}

/* ==========================================
   ASCO SOLUTIONS HERO — PREMIUM DESIGN
========================================== */

.solutions-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 145px 0 90px;
    color: #fff;
    background:
        radial-gradient(ellipse at 85% 15%, rgba(210, 243, 107, 0.10), transparent 32%),
        radial-gradient(ellipse at 10% 100%, rgba(38, 94, 120, 0.20), transparent 40%),
        linear-gradient(125deg, #06141e 0%, #0a2433 52%, #0b1d29 100%);
}

/* Subtle technical grid */

.solutions-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to right, transparent, black 45%, black);
    -webkit-mask-image: linear-gradient(to right, transparent, black 45%, black);
}

/* Decorative glow */

.solutions-hero::after {
    content: "";
    position: absolute;
    top: 70px;
    right: -140px;
    z-index: -1;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(210, 243, 107, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(210, 243, 107, 0.025),
        0 0 0 110px rgba(210, 243, 107, 0.018);
    pointer-events: none;
}

.solutions-hero .container {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1240px);
    margin: 0 auto;
}

/* Breadcrumb */

.solutions-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 38px;
    color: #8295a1;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.solutions-breadcrumb a {
    color: #d2f36b;
    text-decoration: none;
    transition: color 0.25s ease;
}

.solutions-breadcrumb a:hover {
    color: #fff;
}

.solutions-breadcrumb > span:nth-child(2) {
    color: #526774;
}

/* Eyebrow label */

.solutions-hero .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    color: #d2f36b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    line-height: 1.7;
}

.solutions-hero .section-kicker::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 2px;
    flex-shrink: 0;
    background: #d2f36b;
}

/* Main heading */

.solutions-hero h1 {
    max-width: 950px;
    margin: 0 0 27px;
    color: #f8fafb;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(44px, 6.2vw, 78px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -3.5px;
    text-align: left;
}

.solutions-hero h1 em {
    display: inline-block;
    color: #d2f36b;
    font-style: normal;
    font-weight: 600;
}

/* Intro paragraph */

.solutions-hero .container > p {
    max-width: 690px;
    margin: 0;
    color: #b4c2cb;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.1px;
    text-align: left;
}

/* Stats panel */

.solutions-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 870px;
    margin-top: 52px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.solutions-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 125px;
    padding: 25px 30px;
    transition: background 0.3s ease;
}

.solutions-hero-stat + .solutions-hero-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.solutions-hero-stat:hover {
    background: rgba(210, 243, 107, 0.055);
}

.solutions-hero-stat strong {
    display: block;
    margin-bottom: 10px;
    color: #d2f36b;
    font-family: "Manrope", sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

.solutions-hero-stat span {
    display: block;
    color: #aabac4;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.25px;
}

/* Tablet */

@media (max-width: 768px) {
    .solutions-hero {
        padding: 120px 0 70px;
    }

    .solutions-hero .container {
        width: min(100% - 36px, 1240px);
    }

    .solutions-hero h1 {
        font-size: clamp(42px, 8vw, 60px);
        letter-spacing: -2px;
    }

    .solutions-hero .container > p {
        max-width: 600px;
        font-size: 14px;
    }

    .solutions-hero-stats {
        margin-top: 38px;
    }

    .solutions-hero-stat {
        min-height: 110px;
        padding: 20px 18px;
    }

    .solutions-hero-stat strong {
        font-size: 30px;
    }

    .solutions-hero-stat span {
        font-size: 11px;
    }
}

/* Mobile */

@media (max-width: 520px) {
    .solutions-hero {
        padding: 105px 0 48px;
    }

    .solutions-hero::after {
        top: 120px;
        right: -280px;
        width: 360px;
        height: 360px;
    }

    .solutions-hero .container {
        width: calc(100% - 36px);
    }

    .solutions-breadcrumb {
        gap: 9px;
        margin-bottom: 30px;
        font-size: 11px;
    }

    .solutions-hero .section-kicker {
        gap: 9px;
        margin-bottom: 20px;
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .solutions-hero .section-kicker::before {
        width: 20px;
    }

    .solutions-hero h1 {
        margin-bottom: 22px;
        font-size: clamp(36px, 10vw, 47px);
        line-height: 1.18;
        letter-spacing: -1.7px;
    }

    .solutions-hero h1 em {
        margin-top: 4px;
    }

    .solutions-hero .container > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .solutions-hero-stats {
        grid-template-columns: 1fr;
        margin-top: 32px;
        border-radius: 10px;
    }

    .solutions-hero-stat {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        min-height: 82px;
        padding: 18px 22px;
    }

    .solutions-hero-stat + .solutions-hero-stat {
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        border-left: none;
    }

    .solutions-hero-stat strong {
        min-width: 64px;
        margin: 0;
        font-size: 29px;
    }

    .solutions-hero-stat span {
        font-size: 12px;
    }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .solutions-breadcrumb a,
    .solutions-hero-stat {
        transition: none;
    }
}

/* =========================================================
   ASCO INDIA TECHNOLOGIES LLP
   CABLES & ACCESSORIES — SOLUTION DETAIL PAGE
========================================================= */

.solution-detail-page {
    --sd-navy: #071c2a;
    --sd-navy-light: #0c2a3b;
    --sd-lime: #d2f36b;
    --sd-text: #172733;
    --sd-muted: #667580;
    --sd-light: #f5f7f5;
    --sd-border: #e1e7e5;
    --sd-white: #ffffff;

    background: var(--sd-white);
    color: var(--sd-text);
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

.solution-detail-page *,
.solution-detail-page *::before,
.solution-detail-page *::after {
    box-sizing: border-box;
}

.solution-detail-page a {
    text-decoration: none;
}

.solution-detail-page img,
.solution-detail-page svg {
    max-width: 100%;
}

.solution-detail-page .container {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
}

.solution-detail-page .section {
    padding: 110px 0;
}


/* =========================================================
   HEADER
========================================================= */

.solution-detail-page .site-header {
    position: relative;
    z-index: 100;
}

.solution-detail-page .site-header .nav-wrap {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.solution-detail-page .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.solution-detail-page .brand-logo-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.solution-detail-page .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.solution-detail-page .brand-copy strong {
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.2;
}

.solution-detail-page .brand-copy small {
    color: #63717a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.solution-detail-page .main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

.solution-detail-page .main-nav > a {
    color: var(--sd-navy);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.solution-detail-page .main-nav > a:hover,
.solution-detail-page .main-nav > a.active {
    color: #73931c;
}

.solution-detail-page .main-nav > a.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 4px;
    background: var(--sd-navy);
    color: var(--sd-white);
    transition: background 0.25s ease,
                color 0.25s ease,
                transform 0.25s ease;
}

.solution-detail-page .main-nav > a.nav-cta:hover {
    background: var(--sd-lime);
    color: var(--sd-navy);
    transform: translateY(-2px);
}

.solution-detail-page .menu-toggle {
    display: none;
}


/* =========================================================
   HERO
========================================================= */

.solution-detail-page .solution-detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--sd-navy);
    color: var(--sd-white);
    padding: 72px 0 0;
}

.solution-detail-page .solution-detail-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -280px;
    right: -180px;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(210, 243, 107, 0.12) 0%,
        rgba(210, 243, 107, 0.035) 38%,
        transparent 70%
    );
    pointer-events: none;
}

.solution-detail-page .solution-detail-hero-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 40%,
        #000 100%
    );
}

.solution-detail-page .solution-detail-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    align-items: center;
    gap: 55px;
    min-height: 540px;
    padding-bottom: 82px;
}

.solution-detail-page .solution-detail-hero-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
}

.solution-detail-page .solutions-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
    font-weight: 500;
}

.solution-detail-page .solutions-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.2s ease;
}

.solution-detail-page .solutions-breadcrumb a:hover {
    color: var(--sd-lime);
}

.solution-detail-page .solutions-breadcrumb > span:last-child {
    color: var(--sd-lime);
}

.solution-detail-page .solution-detail-kicker,
.solution-detail-page .solution-detail-section-label {
    margin: 0 0 20px;
    color: #819d40;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    line-height: 1.6;
}

.solution-detail-page .solution-detail-hero .solution-detail-kicker {
    color: var(--sd-lime);
}

.solution-detail-page .solution-detail-number {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.solution-detail-page .solution-detail-number::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--sd-lime);
}

.solution-detail-page .solution-detail-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--sd-white);
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 5.1vw, 70px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -2.8px;
}

.solution-detail-page .solution-detail-hero h1 span {
    display: block;
    margin-top: 12px;
    color: var(--sd-lime);
    font-size: 0.66em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -1px;
}

.solution-detail-page .solution-detail-lead {
    max-width: 600px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, 0.69);
    font-size: 15px;
    line-height: 1.95;
}

.solution-detail-page .solution-detail-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 35px;
}

.solution-detail-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 54px;
    padding: 15px 23px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    transition: background 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                transform 0.25s ease;
}

.solution-detail-page .btn-primary {
    background: var(--sd-lime);
    color: var(--sd-navy);
}

.solution-detail-page .btn-primary:hover {
    background: var(--sd-white);
    color: var(--sd-navy);
    transform: translateY(-3px);
}

.solution-detail-page .btn span {
    font-size: 16px;
}

.solution-detail-page .solution-detail-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.solution-detail-page .solution-detail-text-link:hover {
    color: var(--sd-lime);
}


/* =========================================================
   HERO ORBIT VISUAL
========================================================= */

.solution-detail-page .solution-detail-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.solution-detail-page .solution-detail-hero-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 470px);
    aspect-ratio: 1;
}

.solution-detail-page .solution-detail-orbit-ring {
    position: absolute;
    border: 1px solid rgba(210, 243, 107, 0.19);
    border-radius: 50%;
}

.solution-detail-page .solution-detail-orbit-ring.ring-one {
    inset: 3%;
    border-style: dashed;
    animation: sdOrbit 55s linear infinite;
}

.solution-detail-page .solution-detail-orbit-ring.ring-two {
    inset: 13%;
    border-color: rgba(255, 255, 255, 0.17);
}

.solution-detail-page .solution-detail-orbit-ring.ring-three {
    inset: 25%;
    border-color: rgba(210, 243, 107, 0.34);
}

.solution-detail-page .solution-detail-visual-core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46%;
    aspect-ratio: 1;
    border: 1px solid rgba(210, 243, 107, 0.45);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(210, 243, 107, 0.12),
        rgba(12, 42, 59, 0.5) 70%
    );
    box-shadow:
        0 0 65px rgba(210, 243, 107, 0.07),
        inset 0 0 35px rgba(210, 243, 107, 0.05);
}

.solution-detail-page .solution-detail-visual-icon {
    display: grid;
    place-items: center;
    width: 64%;
    color: var(--sd-lime);
}

.solution-detail-page .solution-detail-visual-icon svg {
    display: block;
    width: 100%;
}

.solution-detail-page .solution-detail-core-label {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.solution-detail-page .solution-detail-orbit-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 3px;
    background: rgba(7, 28, 42, 0.9);
    color: rgba(255, 255, 255, 0.85);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.solution-detail-page .solution-detail-orbit-label::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sd-lime);
}

.solution-detail-page .orbit-label-one {
    top: 15%;
    right: 1%;
}

.solution-detail-page .orbit-label-two {
    bottom: 21%;
    right: 0;
}

.solution-detail-page .orbit-label-three {
    bottom: 14%;
    left: 1%;
}

.solution-detail-page .solution-detail-visual-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}

.solution-detail-page .solution-detail-caption-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sd-lime);
    box-shadow: 0 0 14px rgba(210, 243, 107, 0.6);
}

@keyframes sdOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.solution-detail-page .solution-detail-hero-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.solution-detail-page .solution-detail-hero-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 30px;
    min-height: 66px;
}

.solution-detail-page .solution-detail-hero-bottom-inner span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* =========================================================
   OVERVIEW
========================================================= */

.solution-detail-page .solution-detail-overview {
    background: var(--sd-white);
}

.solution-detail-page .solution-detail-overview-grid {
    display: grid;
    grid-template-columns: 0.7fr 2fr;
    gap: 80px;
}

.solution-detail-page .solution-detail-overview-aside {
    padding-top: 9px;
}

.solution-detail-page .solution-detail-overview-index {
    display: block;
    margin-top: 38px;
    color: #dce3df;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 6vw, 84px);
    font-weight: 800;
    letter-spacing: -5px;
}

.solution-detail-page .solution-detail-overview-index span {
    margin-inline: 6px;
    color: var(--sd-lime);
    font-size: 0.65em;
}

.solution-detail-page .solution-detail-overview-content h2 {
    max-width: 850px;
    margin: 0 0 30px;
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 4vw, 51px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.8px;
}

.solution-detail-page .solution-detail-overview-content h2 span {
    display: block;
    color: #82934f;
}

.solution-detail-page .solution-detail-overview-content p {
    max-width: 850px;
    margin: 0 0 18px;
    color: var(--sd-muted);
    font-size: 14px;
    line-height: 2;
}

.solution-detail-page .solution-detail-overview-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.solution-detail-page .solution-detail-capabilities {
    background: var(--sd-light);
}

.solution-detail-page .solution-detail-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 45px;
    margin-bottom: 55px;
}

.solution-detail-page .solution-detail-heading {
    max-width: 760px;
    margin: 0;
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 4vw, 49px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.8px;
}

.solution-detail-page .solution-detail-heading > span {
    display: block;
    color: #82934f;
}

.solution-detail-page .solution-detail-heading-description {
    max-width: 360px;
    margin: 0 0 04px;
    color: var(--sd-muted);
    font-size: 13px;
    line-height: 1.9;
}

.solution-detail-page .solution-detail-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.solution-detail-page .solution-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 365px;
    padding: 30px 25px;
    overflow: hidden;
    border: 1px solid var(--sd-border);
    background: var(--sd-white);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.solution-detail-page .solution-feature-card::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -35px;
    width: 105px;
    height: 105px;
    border: 1px solid #e8eddf;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.35s ease;
}

.solution-detail-page .solution-feature-card:hover {
    transform: translateY(-7px);
    border-color: #cbd7a6;
    box-shadow: 0 20px 50px rgba(7, 28, 42, 0.07);
}

.solution-detail-page .solution-feature-card:hover::after {
    transform: scale(1.35);
}

.solution-detail-page .solution-feature-index {
    position: absolute;
    top: 28px;
    right: 25px;
    color: #c7d0cb;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.solution-detail-page .solution-feature-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 30px;
    border: 1px solid #e2e9d2;
    border-radius: 50%;
    background: #f7faef;
    color: var(--sd-navy);
}

.solution-detail-page .solution-feature-icon svg {
    width: 35px;
    height: 35px;
}

.solution-detail-page .solution-feature-card h3 {
    margin: 0 0 14px;
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.solution-detail-page .solution-feature-card p {
    margin: 0 0 26px;
    color: var(--sd-muted);
    font-size: 12px;
    line-height: 1.9;
}

.solution-detail-page .solution-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    color: var(--sd-navy);
    font-size: 11px;
    font-weight: 800;
    transition: color 0.2s ease;
}

.solution-detail-page .solution-feature-link span {
    color: #8aa13f;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.solution-detail-page .solution-feature-link:hover {
    color: #7b9233;
}

.solution-detail-page .solution-feature-link:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   APPLICATIONS
========================================================= */

.solution-detail-page .solution-detail-applications {
    background: var(--sd-white);
}

.solution-detail-page .solution-detail-app-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 100px;
    align-items: start;
}

.solution-detail-page .solution-detail-app-copy {
    position: sticky;
    top: 40px;
}

.solution-detail-page .solution-detail-app-copy .solution-detail-heading {
    margin-bottom: 26px;
}

.solution-detail-page .solution-detail-app-copy > p:not(.solution-detail-section-label) {
    margin: 0 0 17px;
    color: var(--sd-muted);
    font-size: 13px;
    line-height: 1.95;
}

.solution-detail-page .solution-detail-app-copy .btn {
    margin-top: 20px;
}

.solution-detail-page .solution-detail-app-list {
    border-top: 1px solid var(--sd-border);
}

.solution-detail-page .solution-application-item {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--sd-border);
    transition: padding 0.25s ease;
}

.solution-detail-page .solution-application-item:hover {
    padding-inline: 10px;
}

.solution-detail-page .solution-application-number {
    align-self: start;
    padding-top: 3px;
    color: #91a45a;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.solution-detail-page .solution-application-item h3 {
    margin: 0 0 7px;
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.solution-detail-page .solution-application-item p {
    margin: 0;
    color: var(--sd-muted);
    font-size: 12px;
    line-height: 1.8;
}

.solution-detail-page .solution-application-arrow {
    color: #91a45a;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.solution-detail-page .solution-application-item:hover .solution-application-arrow {
    transform: translate(3px, -3px);
}


/* =========================================================
   TECHNICAL NOTE
========================================================= */

.solution-detail-page .solution-detail-note-section {
    padding: 0 0 100px;
    background: var(--sd-white);
}

.solution-detail-page .solution-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 30px 35px;
    border: 1px solid #e0e8cd;
    background: #f8faF2;
}

.solution-detail-page .solution-detail-note-mark {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sd-lime);
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.solution-detail-page .solution-detail-note h3 {
    margin: 2px 0 9px;
    color: var(--sd-navy);
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.solution-detail-page .solution-detail-note p {
    max-width: 1000px;
    margin: 0;
    color: var(--sd-muted);
    font-size: 12px;
    line-height: 1.95;
}


/* =========================================================
   FINAL CTA
========================================================= */

.solution-detail-page .solution-detail-cta-section {
    padding: 0 0 100px;
    background: var(--sd-white);
}

.solution-detail-page .solution-detail-cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    min-height: 300px;
    padding: 60px 65px;
    overflow: hidden;
    background: var(--sd-navy);
    color: var(--sd-white);
}

.solution-detail-page .solution-detail-cta-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.solution-detail-page .solution-detail-cta-content .solution-detail-section-label {
    color: var(--sd-lime);
}

.solution-detail-page .solution-detail-cta-content h2 {
    margin: 0 0 20px;
    color: var(--sd-white);
    font-family: "Manrope", sans-serif;
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.5px;
}

.solution-detail-page .solution-detail-cta-content h2 span {
    display: block;
    color: var(--sd-lime);
}

.solution-detail-page .solution-detail-cta-content > p:last-child {
    max-width: 550px;
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.9;
}

.solution-detail-page .solution-detail-cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    flex-shrink: 0;
}

.solution-detail-page .solution-detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.solution-detail-page .solution-detail-back-link:hover {
    color: var(--sd-lime);
}

.solution-detail-page .solution-detail-cta-decoration {
    position: absolute;
    right: -130px;
    bottom: -250px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(210, 243, 107, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.solution-detail-page .solution-detail-cta-decoration::before,
.solution-detail-page .solution-detail-cta-decoration::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(210, 243, 107, 0.12);
    border-radius: 50%;
}

.solution-detail-page .solution-detail-cta-decoration::before {
    inset: 35px;
}

.solution-detail-page .solution-detail-cta-decoration::after {
    inset: 75px;
}


/* =========================================================
   FOOTER
========================================================= */

.solution-detail-page .site-footer {
    padding: 50px 0 0;
    border-top: 1px solid var(--sd-border);
    background: #f8f9f7;
}

.solution-detail-page .solution-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 25px 40px;
}

.solution-detail-page .solution-footer-brand .brand-logo-image {
    width: 48px;
    height: 48px;
}

.solution-detail-page .solution-footer-inner > p {
    margin: 0;
    color: var(--sd-muted);
    font-size: 12px;
    line-height: 1.8;
    text-align: right;
}

.solution-detail-page .solution-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    grid-column: 1 / -1;
    padding: 25px 0;
    border-bottom: 1px solid var(--sd-border);
}

.solution-detail-page .solution-footer-links a {
    color: #566670;
    font-size: 12px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.solution-detail-page .solution-footer-links a:hover {
    color: #7c9337;
}

.solution-detail-page .solution-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    grid-column: 1 / -1;
    padding: 0 0 25px;
}

.solution-detail-page .solution-footer-bottom span,
.solution-detail-page .solution-footer-bottom a {
    color: #77848a;
    font-size: 10px;
    line-height: 1.8;
}

.solution-detail-page .solution-footer-bottom a {
    font-weight: 700;
    transition: color 0.2s ease;
}

.solution-detail-page .solution-footer-bottom a:hover {
    color: var(--sd-navy);
}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .solution-detail-page .solution-detail-hero-inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        gap: 25px;
    }

    .solution-detail-page .solution-detail-hero h1 {
        font-size: clamp(38px, 5vw, 57px);
        letter-spacing: -2px;
    }

    .solution-detail-page .solution-detail-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solution-detail-page .solution-feature-card {
        min-height: 325px;
    }

    .solution-detail-page .solution-detail-overview-grid {
        gap: 50px;
    }

    .solution-detail-page .solution-detail-app-grid {
        gap: 55px;
    }

    .solution-detail-page .solution-detail-cta-box {
        padding: 50px 40px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 768px) {

    .solution-detail-page .container {
        width: calc(100% - 40px);
    }

    .solution-detail-page .section {
        padding: 75px 0;
    }

    .solution-detail-page .site-header .nav-wrap {
        min-height: 78px;
    }

    .solution-detail-page .brand-logo-image {
        width: 46px;
        height: 46px;
    }

    .solution-detail-page .brand-copy strong {
        font-size: 14px;
    }

    .solution-detail-page .brand-copy small {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .solution-detail-page .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 43px;
        height: 43px;
        padding: 10px;
        border: 1px solid #dce4df;
        border-radius: 4px;
        background: var(--sd-white);
        cursor: pointer;
    }

    .solution-detail-page .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--sd-navy);
    }

    .solution-detail-page .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 20px 20px;
        border-top: 1px solid var(--sd-border);
        background: var(--sd-white);
        box-shadow: 0 18px 30px rgba(7, 28, 42, 0.09);
    }

    .solution-detail-page .main-nav.active {
        display: flex;
    }

    .solution-detail-page .main-nav > a {
        padding: 15px 5px;
        border-bottom: 1px solid #edf0ee;
    }

    .solution-detail-page .main-nav > a.nav-cta {
        justify-content: center;
        margin-top: 12px;
        padding: 15px;
    }

    .solution-detail-page .solution-detail-hero {
        padding-top: 35px;
    }

    .solution-detail-page .solution-detail-hero-inner {
        grid-template-columns: 1fr;
        gap: 35px;
        min-height: auto;
        padding-bottom: 50px;
    }

    .solution-detail-page .solutions-breadcrumb {
        margin-bottom: 28px;
    }

    .solution-detail-page .solution-detail-hero h1 {
        max-width: 650px;
        font-size: clamp(38px, 8vw, 58px);
        letter-spacing: -1.8px;
    }

    .solution-detail-page .solution-detail-lead {
        font-size: 14px;
    }

    .solution-detail-page .solution-detail-hero-visual {
        width: min(100%, 420px);
        margin: 0 auto;
    }

    .solution-detail-page .solution-detail-hero-orbit {
        width: min(100%, 360px);
    }

    .solution-detail-page .solution-detail-hero-bottom-inner {
        justify-content: flex-start;
        padding: 18px 0;
    }

    .solution-detail-page .solution-detail-hero-bottom-inner span {
        width: calc(50% - 15px);
        font-size: 8px;
    }

    .solution-detail-page .solution-detail-overview-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .solution-detail-page .solution-detail-overview-index {
        display: none;
    }

    .solution-detail-page .solution-detail-overview-content h2 {
        font-size: clamp(31px, 6vw, 43px);
    }

    .solution-detail-page .solution-detail-section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 35px;
    }

    .solution-detail-page .solution-detail-heading {
        font-size: clamp(30px, 6vw, 42px);
    }

    .solution-detail-page .solution-detail-heading-description {
        max-width: 550px;
    }

    .solution-detail-page .solution-detail-app-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .solution-detail-page .solution-detail-app-copy {
        position: static;
    }

    .solution-detail-page .solution-detail-note-section {
        padding-bottom: 75px;
    }

    .solution-detail-page .solution-detail-cta-section {
        padding-bottom: 75px;
    }

    .solution-detail-page .solution-detail-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        min-height: auto;
        padding: 40px 30px;
    }

    .solution-detail-page .solution-detail-cta-actions {
        align-items: flex-start;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 480px) {

    .solution-detail-page .container {
        width: calc(100% - 32px);
    }

    .solution-detail-page .section {
        padding: 60px 0;
    }

    .solution-detail-page .site-header .nav-wrap {
        gap: 12px;
        min-height: 72px;
    }

    .solution-detail-page .brand {
        gap: 8px;
    }

    .solution-detail-page .brand-logo-image {
        width: 40px;
        height: 40px;
    }

    .solution-detail-page .brand-copy strong {
        font-size: 12px;
        letter-spacing: 0.7px;
    }

    .solution-detail-page .brand-copy small {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .solution-detail-page .solution-detail-hero {
        padding-top: 27px;
    }

    .solution-detail-page .solutions-breadcrumb {
        gap: 7px;
        margin-bottom: 27px;
        font-size: 9px;
    }

    .solution-detail-page .solution-detail-kicker,
    .solution-detail-page .solution-detail-section-label {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .solution-detail-page .solution-detail-hero h1 {
        font-size: clamp(34px, 9vw, 43px);
        letter-spacing: -1.5px;
    }

    .solution-detail-page .solution-detail-hero h1 span {
        font-size: 0.67em;
    }

    .solution-detail-page .solution-detail-lead {
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.85;
    }

    .solution-detail-page .solution-detail-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 19px;
        margin-top: 27px;
    }

    .solution-detail-page .btn {
        width: 100%;
        min-height: 51px;
        padding: 14px 16px;
        font-size: 11px;
    }

    .solution-detail-page .solution-detail-hero-visual {
        width: 100%;
    }

    .solution-detail-page .solution-detail-hero-orbit {
        width: min(100%, 315px);
    }

    .solution-detail-page .solution-detail-orbit-label {
        gap: 5px;
        padding: 8px;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .solution-detail-page .solution-detail-orbit-label::before {
        width: 5px;
        height: 5px;
    }

    .solution-detail-page .solution-detail-core-label {
        font-size: 7px;
        letter-spacing: 1.3px;
    }

    .solution-detail-page .solution-detail-visual-caption {
        font-size: 7px;
        letter-spacing: 1.2px;
    }

    .solution-detail-page .solution-detail-hero-bottom-inner {
        gap: 14px 10px;
    }

    .solution-detail-page .solution-detail-hero-bottom-inner span {
        width: 100%;
    }

    .solution-detail-page .solution-detail-overview-content h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .solution-detail-page .solution-detail-overview-content p {
        font-size: 13px;
    }

    .solution-detail-page .solution-detail-heading {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .solution-detail-page .solution-detail-feature-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .solution-detail-page .solution-feature-card {
        min-height: 0;
        padding: 25px 22px;
    }

    .solution-detail-page .solution-feature-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 23px;
    }

    .solution-detail-page .solution-feature-card h3 {
        font-size: 16px;
    }

    .solution-detail-page .solution-feature-card p {
        font-size: 12px;
    }

    .solution-detail-page .solution-application-item {
        grid-template-columns: 28px minmax(0, 1fr) 18px;
        gap: 12px;
        padding: 23px 0;
    }

    .solution-detail-page .solution-application-item h3 {
        font-size: 14px;
    }

    .solution-detail-page .solution-application-item p {
        font-size: 11px;
    }

    .solution-detail-page .solution-detail-note {
        gap: 14px;
        padding: 22px 17px;
    }

    .solution-detail-page .solution-detail-note-mark {
        width: 30px;
        height: 30px;
    }

    .solution-detail-page .solution-detail-note h3 {
        font-size: 14px;
    }

    .solution-detail-page .solution-detail-note p {
        font-size: 11px;
    }

    .solution-detail-page .solution-detail-cta-box {
        padding: 32px 22px;
    }

    .solution-detail-page .solution-detail-cta-content h2 {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .solution-detail-page .solution-detail-cta-content > p:last-child {
        font-size: 12px;
    }

    .solution-detail-page .solution-footer-inner {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .solution-detail-page .solution-footer-inner > p {
        text-align: left;
    }

    .solution-detail-page .solution-footer-links {
        gap: 18px;
    }

    .solution-detail-page .solution-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =========================================================
   ACCESSIBILITY & MOTION
========================================================= */

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

    .solution-detail-page *,
    .solution-detail-page *::before,
    .solution-detail-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   ASCO INDIA — CABLES & ACCESSORIES
   PREMIUM SOLUTION DETAIL PAGE
========================================================= */

.solution-detail-page {
    --cable-bg: #071c2a;
    --cable-bg-2: #0c2a3b;
    --cable-card: #102f40;
    --cable-lime: #d2f36b;
    --cable-white: #f4f7f8;
    --cable-muted: #aab9c3;
    background: var(--cable-bg);
    color: var(--cable-white);
    overflow-x: clip;
}

.solution-detail-page *,
.solution-detail-page *::before,
.solution-detail-page *::after {
    box-sizing: border-box;
}

.solution-detail-page a {
    text-decoration: none;
}

.solution-detail-page .container {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.solution-detail-page .section {
    padding: 105px 0;
}

/* HEADER */

.solution-detail-page .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(7, 28, 42, .96);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
}

.solution-detail-page .nav-wrap {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.solution-detail-page .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.solution-detail-page .brand-logo-image {
    width: 49px;
    height: 49px;
    object-fit: contain;
    border-radius: 5px;
}

.solution-detail-page .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solution-detail-page .brand-copy strong {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.solution-detail-page .brand-copy small {
    color: var(--cable-lime);
    font-size: 9px;
    letter-spacing: 2px;
}

.solution-detail-page .main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.solution-detail-page .main-nav > a {
    color: #d7e1e6;
    font-size: 12px;
    font-weight: 600;
    transition: color .25s ease;
}

.solution-detail-page .main-nav > a:hover,
.solution-detail-page .main-nav > a.active {
    color: var(--cable-lime);
}

.solution-detail-page .main-nav > .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    background: var(--cable-lime);
    color: var(--cable-bg);
}

.solution-detail-page .main-nav > .nav-cta:hover {
    background: #e4ff99;
    color: var(--cable-bg);
}

.solution-detail-page .menu-toggle {
    display: none;
}

/* =========================================================
   HERO
========================================================= */

.solution-detail-hero {
    position: relative;
    isolation: isolate;
    min-height: 690px;
    display: flex;
    align-items: center;
    padding: 90px 0 115px;
    background:
        radial-gradient(ellipse at 82% 42%,
            rgba(30, 110, 125, .2), transparent 40%),
        linear-gradient(120deg, #071c2a 0%, #0a2637 60%, #0c3040 100%);
    overflow: hidden;
}

.solution-detail-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, #000, transparent 95%);
}

.solution-detail-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 500px;
    height: 500px;
    top: -270px;
    right: -100px;
    border: 1px solid rgba(210,243,107,.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(210,243,107,.025),
        0 0 0 110px rgba(210,243,107,.02);
}

.solution-detail-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: center;
    gap: 45px;
}

.solution-detail-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.solution-detail-hero .solutions-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 32px;
    color: #8fa4b0;
    font-size: 11px;
}

.solution-detail-hero .solutions-breadcrumb a {
    color: #b7c6ce;
    transition: color .2s ease;
}

.solution-detail-hero .solutions-breadcrumb a:hover {
    color: var(--cable-lime);
}

.solution-detail-hero .solutions-breadcrumb span:last-child {
    color: var(--cable-lime);
}
.solution-detail-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    margin: 0 0 17px;
    padding: 9px 14px;
    color: #e8eee8;
    background: #202a23;
    border: 1px solid #39463b;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.5;
}

.solution-detail-kicker::before {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    flex-shrink: 0;
    background: #e8eee8;
}
.solution-detail-number {
    display: inline-block;
    margin-bottom: 12px;
    color: #8196a2;
    font-size: 10px;
    letter-spacing: 2px;
}

.solution-detail-hero h1 {
    margin: 0 0 25px;
    color: #fff;
    font-size: clamp(43px, 5.2vw, 70px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -2.7px;
}

.solution-detail-hero h1 span {
    display: block;
    margin-top: 15px;
    color: var(--cable-lime);
    font-size: .53em;
    line-height: 1.4;
    letter-spacing: -.5px;
}

.solution-detail-lead {
    max-width: 610px;
    margin: 0;
    color: #b7c6ce;
    font-size: 14px;
    line-height: 1.95;
}

.solution-detail-hero .solution-detail-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 33px;
}

.solution-detail-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    transition: background .25s ease, transform .25s ease;
}

.solution-detail-page .btn-primary {
    background: var(--cable-lime);
    color: var(--cable-bg);
}

.solution-detail-page .btn-primary:hover {
    background: #e5ff9b;
    transform: translateY(-3px);
}

.solution-detail-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #e3eaee;
    font-size: 12px;
    font-weight: 600;
    transition: color .25s ease;
}

.solution-detail-text-link:hover {
    color: var(--cable-lime);
}

/* HERO ORBIT VISUAL */

.solution-detail-hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    justify-self: end;
}

.solution-detail-hero-orbit {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.solution-detail-orbit-ring {
    position: absolute;
    border: 1px solid rgba(210,243,107,.2);
    border-radius: 50%;
    animation: cableOrbit 32s linear infinite;
}

.solution-detail-orbit-ring.ring-one {
    inset: 3%;
    border-style: dashed;
}

.solution-detail-orbit-ring.ring-two {
    inset: 15%;
    border-color: rgba(210,243,107,.32);
    animation-direction: reverse;
    animation-duration: 25s;
}

.solution-detail-orbit-ring.ring-three {
    inset: 27%;
    border-color: rgba(255,255,255,.2);
    animation-duration: 40s;
}

.solution-detail-orbit-ring::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 13%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cable-lime);
    box-shadow: 0 0 20px rgba(210,243,107,.7);
}

.solution-detail-visual-core {
    position: relative;
    z-index: 2;
    width: 44%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(210,243,107,.5);
    border-radius: 50%;
    background: radial-gradient(circle, #123b4a, #081e2b 75%);
    box-shadow:
        0 0 55px rgba(28,117,126,.2),
        inset 0 0 35px rgba(210,243,107,.04);
}

.solution-detail-visual-icon {
    width: 64%;
    display: block;
    color: #b8cbd4;
}

.solution-detail-visual-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

.solution-detail-core-label {
    color: var(--cable-lime);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.solution-detail-orbit-label {
    position: absolute;
    z-index: 3;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(7,28,42,.93);
    color: #e3eaee;
    font-size: 9px;
    letter-spacing: 1.7px;
}

.solution-detail-orbit-label.orbit-label-one {
    top: 12%;
    right: 3%;
}

.solution-detail-orbit-label.orbit-label-two {
    bottom: 18%;
    left: 0;
}

.solution-detail-orbit-label.orbit-label-three {
    right: 0;
    bottom: 12%;
}

.solution-detail-visual-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    color: #91a5af;
    font-size: 9px;
    letter-spacing: 1.7px;
}

.solution-detail-caption-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cable-lime);
    box-shadow: 0 0 12px rgba(210,243,107,.5);
}

@keyframes cableOrbit {
    to {
        transform: rotate(360deg);
    }
}

/* HERO BOTTOM STRIP */

.solution-detail-hero-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(3,17,26,.3);
}

.solution-detail-hero-bottom-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.solution-detail-hero-bottom-inner span {
    color: #91a5af;
    font-size: 9px;
    letter-spacing: 1.5px;
}

/* =========================================================
   OVERVIEW
========================================================= */

.solution-detail-overview {
    background: #f4f6f3;
    color: #102d3b;
}

.solution-detail-overview-grid {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 85px;
    align-items: start;
}

.solution-detail-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #6d8b35;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

.solution-detail-section-label::before {
    content: "";
    width: 24px;
    height: 2px;
    background: #a3c64b;
}

.solution-detail-overview-index {
    display: block;
    color: #173848;
    font-size: clamp(52px, 6vw, 78px);
    font-weight: 800;
    letter-spacing: -4px;
    line-height: 1;
}

.solution-detail-overview-index span {
    color: #9bb1b7;
    font-size: .6em;
}

.solution-detail-overview-content h2 {
    max-width: 800px;
    margin: 0 0 28px;
    font-size: clamp(33px, 4vw, 49px);
    line-height: 1.2;
    letter-spacing: -1.7px;
}

.solution-detail-overview-content h2 span {
    display: block;
    color: #6b8737;
}

.solution-detail-overview-content p {
    max-width: 820px;
    margin: 0 0 18px;
    color: #5c6d74;
    font-size: 14px;
    line-height: 2;
}

/* =========================================================
   CAPABILITIES
========================================================= */

.solution-detail-capabilities {
    background:
        radial-gradient(ellipse at 95% 0%, rgba(30,103,116,.12), transparent 35%),
        #071c2a;
}

.solution-detail-section-heading {
    display: grid;
    grid-template-columns: 1.1fr .7fr;
    align-items: end;
    gap: 50px;
    margin-bottom: 48px;
}

.solution-detail-heading {
    margin: 0;
    color: #f4f7f8;
    font-size: clamp(34px, 4.3vw, 51px);
    line-height: 1.15;
    letter-spacing: -1.7px;
}

.solution-detail-heading > span {
    display: block;
    color: var(--cable-lime);
}

.solution-detail-heading-description {
    max-width: 420px;
justify-content: first baseline;
    margin: 0 0 05px -145px ;
    color: #aab9c3;
    font-size: 13px;
    line-height: 1.9;
}

.solution-detail-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.solution-detail-page .solution-feature-card {
    position: relative;
    min-height: 285px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(140deg, #0e2b3b, #0a2231);
    overflow: hidden;
    transition: border-color .3s ease, transform .3s ease, background .3s ease;
}

.solution-detail-page .solution-feature-card::after {
    content: "";
    position: absolute;
    top: -65px;
    right: -65px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(210,243,107,.07);
    border-radius: 50%;
    box-shadow: 0 0 0 25px rgba(210,243,107,.02);
    pointer-events: none;
}

.solution-detail-page .solution-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(210,243,107,.4);
    background: linear-gradient(140deg, #123345, #0b2535);
}

.solution-feature-index {
    position: absolute;
    top: 28px;
    right: 28px;
    color: #718794;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.solution-feature-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border: 1px solid rgba(210,243,107,.25);
    background: rgba(210,243,107,.06);
    color: #d8e5e9;
}

.solution-feature-icon svg {
    width: 37px;
    height: 37px;
}

.solution-feature-card h3 {
    margin: 0 0 12px;
    color: #f4f7f8;
    font-size: 19px;
    letter-spacing: -.3px;
}

.solution-feature-card p {
    max-width: 480px;
    margin: 0;
    color: #aab9c3;
    font-size: 12px;
    line-height: 1.9;
}
.solution-feature-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-top: 22px;
    padding: 10px 14px;
    color: #e8eee8;
    background: #202a23;
    border: 1px solid #39463b;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.solution-feature-link:hover {
    color: #ffffff;
    background: #303d32;
    border-color: #65745e;
}

.solution-feature-link i,
.solution-feature-link svg {
    color: inherit;
    transition: transform 0.3s ease;
}

.solution-feature-link:hover i,
.solution-feature-link:hover svg {
    transform: translateX(4px);
}

/* =========================================================
   APPLICATIONS
========================================================= */

.solution-detail-applications {
    background: #0b2636;
}

.solution-detail-app-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 75px;
    align-items: start;
}

.solution-detail-app-copy .solution-detail-heading {
    margin-bottom: 25px;
}

.solution-detail-app-copy > p:not(.solution-detail-section-label) {
    margin: 0 0 18px;
    color: #afbec6;
    font-size: 13px;
    line-height: 1.95;
}

.solution-detail-app-copy .btn {
    margin-top: 15px;
}

.solution-detail-app-list {
    border-top: 1px solid rgba(255,255,255,.13);
}

.solution-application-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 16px;
    padding: 24px 8px;
    border-bottom: 1px solid rgba(255,255,255,.13);
    transition: padding .25s ease, background .25s ease;
}

.solution-application-item:hover {
    padding-right: 15px;
    padding-left: 15px;
    background: rgba(255,255,255,.025);
}

.solution-application-number {
    color: var(--cable-lime);
    font-size: 11px;
    font-weight: 700;
}

.solution-application-item h3 {
    margin: 0 0 7px;
    color: #f4f7f8;
    font-size: 15px;
}

.solution-application-item p {
    margin: 0;
    color: #9dafb9;
    font-size: 11px;
    line-height: 1.7;
}

.solution-application-arrow {
    color: var(--cable-lime);
    font-size: 17px;
    transition: transform .25s ease;
}

.solution-application-item:hover .solution-application-arrow {
    transform: translate(3px, -3px);
}

/* =========================================================
   TECHNICAL NOTE
========================================================= */

.solution-detail-note-section {
    padding: 65px 0;
    background: #eaf0e8;
}

.solution-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 23px;
    padding: 30px;
    border: 1px solid #d7e0d4;
    background: #f8faf7;
}

.solution-detail-note-mark {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dce9c5;
    color: #395422;
    font-family: Georgia, serif;
    font-size: 22px;
    font-style: italic;
}

.solution-detail-note h3 {
    margin: 2px 0 10px;
    color: #163543;
    font-size: 18px;
}

.solution-detail-note p {
    max-width: 950px;
    margin: 0;
    color: #62727a;
    font-size: 12px;
    line-height: 1.95;
}

/* =========================================================
   FINAL CTA
========================================================= */

.solution-detail-cta-section {
    padding: 80px 0;
    background: #071c2a;
}

.solution-detail-cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 55px;
    background: var(--cable-lime);
    color: #071c2a;
    overflow: hidden;
}

.solution-detail-cta-content,
.solution-detail-cta-actions {
    position: relative;
    z-index: 2;
}

.solution-detail-cta-content {
    max-width: 650px;
}

.solution-detail-cta-box .solution-detail-section-label {
    color: #425a26;
}

.solution-detail-cta-box .solution-detail-section-label::before {
    background: #425a26;
}

.solution-detail-cta-box h2 {
    margin: 0 0 17px;
    font-size: clamp(31px, 3.7vw, 46px);
    line-height: 1.16;
    letter-spacing: -1.6px;
}

.solution-detail-cta-box h2 span {
    display: block;
}

.solution-detail-cta-box p:not(.solution-detail-section-label) {
    max-width: 600px;
    margin: 0;
    color: #43562d;
    font-size: 13px;
    line-height: 1.9;
}

.solution-detail-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    flex-shrink: 0;
}

.solution-detail-cta-box .btn-primary {
    background: #071c2a;
    color: #fff;
}

.solution-detail-cta-box .btn-primary:hover {
    background: #14384a;
}

.solution-detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #233b23;
    font-size: 11px;
    font-weight: 700;
}

.solution-detail-back-link:hover {
    color: #000;
}

.solution-detail-cta-decoration {
    position: absolute;
    top: -170px;
    right: -100px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(7,28,42,.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(7,28,42,.035),
        0 0 0 80px rgba(7,28,42,.025);
}

/* =========================================================
   FOOTER
========================================================= */

.solution-detail-page .site-footer {
    padding: 35px 0 0;
    background: #04151f;
    border-top: 1px solid rgba(255,255,255,.07);
}

.solution-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 28px;
}

.solution-footer-brand {
    justify-self: start;
}

.solution-footer-inner > p {
    justify-self: end;
    margin: 0;
    color: #95a8b2;
    font-size: 12px;
}

.solution-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
}

.solution-footer-links a {
    color: #b7c5cc;
    font-size: 11px;
    transition: color .2s ease;
}

.solution-footer-links a:hover {
    color: var(--cable-lime);
}

.solution-footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.09);
}

.solution-footer-bottom span,
.solution-footer-bottom a {
    color: #80949f;
    font-size: 10px;
    line-height: 1.8;
}

.solution-footer-bottom a:hover {
    color: var(--cable-lime);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
    .solution-detail-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
        gap: 20px;
    }

    .solution-detail-hero h1 {
        font-size: clamp(42px, 5.5vw, 60px);
    }

    .solution-detail-hero-visual {
        max-width: 380px;
    }

    .solution-detail-overview-grid {
        gap: 45px;
    }

    .solution-detail-app-grid {
        gap: 40px;
    }

    .solution-detail-cta-box {
        padding: 40px;
        gap: 30px;
    }

    .solution-detail-page .main-nav {
        gap: 16px;
    }
}

/* =========================================================
   MOBILE NAVIGATION + LAYOUT
========================================================= */

@media (max-width: 768px) {
    .solution-detail-page .container {
        width: calc(100% - 36px);
    }

    .solution-detail-page .section {
        padding: 75px 0;
    }

    .solution-detail-page .nav-wrap {
        min-height: 72px;
    }

    .solution-detail-page .brand-logo-image {
        width: 43px;
        height: 43px;
    }

    .solution-detail-page .brand-copy strong {
        font-size: 13px;
    }

    .solution-detail-page .brand-copy small {
        font-size: 8px;
    }

    .solution-detail-page .menu-toggle {
        width: 43px;
        height: 43px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 3px;
        background: transparent;
        cursor: pointer;
    }

    .solution-detail-page .menu-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--cable-lime);
        transition: transform .25s ease, opacity .25s ease;
    }

    .solution-detail-page .menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(8px) rotate(45deg);
    }

    .solution-detail-page .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .solution-detail-page .menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(-8px) rotate(-45deg);
    }

    .solution-detail-page .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 12px 22px 22px;
        background: #071c2a;
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 18px 30px rgba(0,0,0,.25);
    }

    .solution-detail-page .main-nav.open {
        display: flex;
    }

    .solution-detail-page .main-nav > a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .solution-detail-page .main-nav > .nav-cta {
        justify-content: center;
        margin-top: 14px;
        padding: 14px;
        border-bottom: 0;
    }

    .solution-detail-hero {
        min-height: auto;
        padding: 65px 0 100px;
    }

    .solution-detail-hero-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .solution-detail-hero-content {
        max-width: 100%;
    }

    .solution-detail-hero h1 {
        max-width: 620px;
        font-size: clamp(42px, 9vw, 60px);
        letter-spacing: -1.8px;
    }

    .solution-detail-hero h1 span {
        font-size: .58em;
    }

    .solution-detail-lead {
        font-size: 13px;
    }

    .solution-detail-hero-visual {
        width: min(100%, 340px);
        justify-self: center;
    }

    .solution-detail-hero-bottom-inner {
        min-height: 48px;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 20px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .solution-detail-hero-bottom-inner span {
        font-size: 8px;
    }

    .solution-detail-overview-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .solution-detail-overview-index {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .solution-detail-overview-content h2,
    .solution-detail-heading {
        font-size: clamp(32px, 7vw, 42px);
    }

    .solution-detail-section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 32px;
    }

    .solution-detail-heading-description {
        /* justify-self: start; */
    }

    .solution-detail-feature-grid {
        grid-template-columns: 1fr;
    }

    .solution-detail-page .solution-feature-card {
        min-height: auto;
        padding: 26px;
    }

    .solution-detail-app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .solution-detail-note-section {
        padding: 45px 0;
    }

    .solution-detail-note {
        padding: 23px;
        gap: 17px;
    }

    .solution-detail-cta-section {
        padding: 60px 0;
    }

    .solution-detail-cta-box {
        align-items: flex-start;
        flex-direction: column;
        padding: 32px 25px;
        gap: 28px;
    }

    .solution-detail-cta-actions {
        align-items: flex-start;
    }

    .solution-footer-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .solution-footer-inner > p {
        justify-self: start;
    }

    .solution-footer-bottom {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* SMALL MOBILE */

@media (max-width: 420px) {
    .solution-detail-page .container {
        width: calc(100% - 28px);
    }

    .solution-detail-hero {
        padding-top: 48px;
    }

    .solution-detail-hero .solutions-breadcrumb {
        gap: 7px;
        font-size: 10px;
        margin-bottom: 25px;
    }

    .solution-detail-kicker {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .solution-detail-hero h1 {
        font-size: 39px;
    }

    .solution-detail-hero h1 span {
        font-size: .58em;
    }

    .solution-detail-hero .solution-detail-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .solution-detail-page .btn {
        min-height: 48px;
        padding: 0 16px;
        font-size: 11px;
    }

    .solution-detail-hero-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .solution-detail-overview-content h2,
    .solution-detail-heading {
        font-size: 31px;
    }

    .solution-application-item {
        grid-template-columns: 27px minmax(0, 1fr) 15px;
        gap: 10px;
        padding: 20px 2px;
    }

    .solution-detail-note {
        flex-direction: column;
    }

    .solution-detail-cta-box h2 {
        font-size: 31px;
    }

    .solution-footer-links {
        gap: 15px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .solution-detail-page *,
    .solution-detail-page *::before,
    .solution-detail-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* =====================================================
   LT PANELS & PLC — HERO VISUAL
===================================================== */

.lt-hero-visual {
    position: relative;
    min-height: 470px;
    width: 100%;
    overflow: hidden;
    padding: 28px;
    background: #101713;
    border: 1px solid rgba(210, 243, 107, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
}

.lt-visual-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(210,243,107,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210,243,107,.055) 1px, transparent 1px);
    background-size: 30px 30px;
}

.lt-visual-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 45%,
        rgba(210,243,107,.12),
        transparent 65%
    );
}

.lt-visual-topline,
.lt-visual-bottomline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #b8c2b8;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.lt-visual-topline span:last-child {
    color: #d2f36b;
}

.lt-panel-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 35px 0;
    perspective: 1000px;
}

.lt-main-panel {
    position: relative;
    width: min(285px, 76%);
    padding: 14px;
    background: linear-gradient(145deg, #39443d, #202923 70%);
    border: 1px solid #657167;
    box-shadow:
        12px 16px 0 rgba(0,0,0,.25),
        0 20px 45px rgba(0,0,0,.35);
    transform: rotateY(-7deg);
}

.lt-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #59655b;
}

.lt-panel-brand {
    color: #d2f36b;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
}

.lt-panel-status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #c5d0c7;
    font-size: 7px;
    letter-spacing: .8px;
}

.lt-panel-status i,
.lt-plc-header i,
.lt-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #d2f36b;
    box-shadow: 0 0 10px rgba(210,243,107,.65);
}

.lt-panel-screen {
    margin: 14px 0;
    padding: 12px;
    background: #111a15;
    border: 1px solid #48584a;
}

.lt-screen-top {
    display: flex;
    justify-content: space-between;
    color: #93a095;
    font-size: 7px;
    letter-spacing: 1px;
}

.lt-screen-top span:last-child {
    color: #d2f36b;
}

.lt-screen-values {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.lt-screen-values div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lt-screen-values small {
    color: #91a095;
    font-size: 7px;
    letter-spacing: 1px;
}

.lt-screen-values strong {
    color: #e5f6ce;
    font-size: 22px;
    font-weight: 500;
}

.lt-screen-values strong span {
    margin-left: 3px;
    color: #a4b59d;
    font-size: 10px;
}

.lt-screen-bars {
    display: flex;
    gap: 5px;
    margin-top: 13px;
}

.lt-screen-bars span {
    height: 4px;
    flex: 1;
    background: #d2f36b;
}

.lt-screen-bars span:nth-child(2) {
    opacity: .65;
}

.lt-screen-bars span:nth-child(3) {
    opacity: .3;
}

.lt-panel-components {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.lt-breaker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 9px 3px;
    background: #171f19;
    border: 1px solid #475248;
}

.lt-breaker-label {
    color: #c5cec5;
    font-size: 7px;
    letter-spacing: .5px;
}

.lt-breaker-switch {
    position: relative;
    width: 18px;
    height: 30px;
    background: linear-gradient(90deg, #202a23, #566257, #253027);
    border: 1px solid #738073;
}

.lt-breaker-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 10px;
    background: #d2f36b;
    box-shadow: 0 0 8px rgba(210,243,107,.3);
}

.lt-breaker small {
    color: #d2f36b;
    font-size: 7px;
}

.lt-panel-bottom {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #59655b;
    color: #aab5aa;
    font-size: 6px;
    letter-spacing: .8px;
}

.lt-plc-module {
    width: 76px;
    flex-shrink: 0;
    padding: 9px 7px;
    background: linear-gradient(145deg, #b7c0b8, #6e7b70);
    border: 1px solid #d4ded4;
    box-shadow: 7px 10px 20px rgba(0,0,0,.3);
    transform: translateY(20px);
}

.lt-plc-header,
.lt-plc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3px;
}

.lt-plc-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #59685b;
    color: #1a261c;
    font-size: 9px;
    font-weight: 900;
}

.lt-plc-header i {
    width: 5px;
    height: 5px;
}

.lt-plc-body {
    display: flex;
    gap: 5px;
    margin: 10px 0;
}

.lt-plc-cpu {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 85px;
    background: #28372c;
    color: #d2f36b;
    font-size: 8px;
}

.lt-plc-cpu strong {
    font-size: 19px;
}

.lt-plc-io {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    align-content: center;
}

.lt-plc-io div {
    width: 8px;
    height: 8px;
    background: #d2f36b;
    box-shadow: 0 0 5px rgba(210,243,107,.4);
}

.lt-plc-io div:nth-child(3n) {
    background: #465448;
    box-shadow: none;
}

.lt-plc-footer {
    padding-top: 7px;
    border-top: 1px solid #59685b;
    color: #273328;
    font-size: 5px;
    font-weight: 800;
}

.lt-visual-bottomline {
    padding-top: 14px;
    border-top: 1px solid rgba(210,243,107,.2);
    font-size: 8px;
}

.lt-visual-bottomline div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lt-floating-card {
    position: absolute;
    right: 18px;
    bottom: 70px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #202a23;
    border: 1px solid rgba(210,243,107,.3);
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.lt-floating-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: rgba(210,243,107,.12);
    color: #d2f36b;
    font-size: 20px;
}

.lt-floating-card div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lt-floating-card small {
    color: #9da99e;
    font-size: 7px;
    letter-spacing: 1px;
}

.lt-floating-card strong {
    color: #f0f4ee;
    font-size: 10px;
}

@media (max-width: 576px) {

    .lt-hero-visual {
        min-height: 390px;
        padding: 18px 12px;
    }

    .lt-panel-scene {
        gap: 7px;
        padding: 30px 0;
    }

    .lt-main-panel {
        padding: 10px;
        width: min(250px, 76%);
    }

    .lt-plc-module {
        width: 57px;
        padding: 6px 5px;
    }

    .lt-screen-values strong {
        font-size: 18px;
    }

    .lt-floating-card {
        right: 8px;
        bottom: 55px;
        padding: 8px;
    }

    .lt-visual-topline,
    .lt-visual-bottomline {
        font-size: 7px;
        letter-spacing: .8px;
    }

}
/* =====================================================
   OPERATIONAL MAINTENANCE — HERO VISUAL
===================================================== */

.maintenance-hero-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 470px;
    padding: 28px;
    overflow: hidden;
    background: #101713;
    border: 1px solid rgba(210, 243, 107, .2);
}

.maintenance-visual-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(210,243,107,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210,243,107,.055) 1px, transparent 1px);
    background-size: 30px 30px;
}

.maintenance-visual-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 45%,
        rgba(210,243,107,.12),
        transparent 65%
    );
}

.maintenance-visual-topline,
.maintenance-visual-bottomline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #b8c2b8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.maintenance-visual-topline span:last-child {
    color: #d2f36b;
}

.maintenance-visual-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 35px 0;
}

.maintenance-equipment-panel {
    width: min(320px, 78%);
    padding: 16px;
    background: linear-gradient(145deg, #303b33, #1b241e);
    border: 1px solid #586658;
    box-shadow: 12px 16px 35px rgba(0,0,0,.3);
}

.maintenance-equipment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 13px;
    border-bottom: 1px solid #4b594c;
    color: #e2e9df;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.maintenance-status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #d2f36b;
    font-size: 7px;
}

.maintenance-status i,
.maintenance-live-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #d2f36b;
    box-shadow: 0 0 10px rgba(210,243,107,.6);
}

.maintenance-equipment-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
}

.maintenance-equipment-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    background: rgba(210,243,107,.1);
    border: 1px solid rgba(210,243,107,.3);
    color: #d2f36b;
    font-size: 27px;
}

.maintenance-equipment-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.maintenance-equipment-info > span {
    color: #9eac9f;
    font-size: 7px;
    letter-spacing: 1px;
}

.maintenance-equipment-info strong {
    color: #eff5ec;
    font-size: 16px;
}

.maintenance-equipment-info small {
    color: #aab6ab;
    font-size: 8px;
    line-height: 1.5;
}

.maintenance-progress-heading {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0 9px;
    border-top: 1px solid #4b594c;
    color: #aeb9ae;
    font-size: 7px;
    letter-spacing: .7px;
}

.maintenance-progress-heading span:last-child {
    color: #d2f36b;
}

.maintenance-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #141c16;
    border: 1px solid #354438;
}

.maintenance-checklist > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #d5ded4;
    font-size: 9px;
}

.maintenance-checklist i {
    color: #d2f36b;
    font-size: 10px;
}

.maintenance-checklist .maintenance-check-pending i {
    color: #a5afa5;
}

.maintenance-tools-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 92px;
    flex-shrink: 0;
}

.maintenance-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 5px;
    background: #202a23;
    border: 1px solid #455348;
    color: #d2f36b;
    text-align: center;
}

.maintenance-tool i {
    font-size: 19px;
}

.maintenance-tool span {
    color: #c1ccc1;
    font-size: 6px;
    line-height: 1.4;
    letter-spacing: .5px;
}

.maintenance-visual-bottomline {
    padding-top: 14px;
    border-top: 1px solid rgba(210,243,107,.2);
    font-size: 8px;
}

.maintenance-visual-bottomline > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.maintenance-floating-card {
    position: absolute;
    right: 18px;
    bottom: 65px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #202a23;
    border: 1px solid rgba(210,243,107,.3);
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.maintenance-floating-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: rgba(210,243,107,.12);
    color: #d2f36b;
}

.maintenance-floating-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.maintenance-floating-card small {
    color: #9da99e;
    font-size: 7px;
    letter-spacing: 1px;
}

.maintenance-floating-card strong {
    color: #f0f4ee;
    font-size: 10px;
}


/* =====================================================
   MAINTENANCE — APPLICATION VISUAL
===================================================== */

.maintenance-app-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 390px;
    padding: 25px;
    overflow: hidden;
    background: #111914;
    border: 1px solid rgba(210,243,107,.2);
}

.maintenance-app-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(210,243,107,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210,243,107,.045) 1px, transparent 1px);
    background-size: 25px 25px;
}

.maintenance-app-top,
.maintenance-app-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #b6c1b7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.maintenance-app-top span:last-child {
    color: #d2f36b;
}

.maintenance-app-center {
    position: relative;
    display: grid;
    place-items: center;
    width: 250px;
    height: 250px;
    max-width: 100%;
    margin: 0 auto;
}

.maintenance-app-orbit {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(210,243,107,.35);
    border-radius: 50%;
}

.maintenance-app-orbit::before,
.maintenance-app-orbit::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(210,243,107,.25);
    border-radius: 50%;
}

.maintenance-app-orbit::after {
    inset: 40px;
    border-style: solid;
    border-color: rgba(210,243,107,.15);
}

.maintenance-app-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    background: #263328;
    border: 1px solid #d2f36b;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(210,243,107,.1);
    color: #d2f36b;
    font-size: 36px;
}

.maintenance-orbit-icon {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    background: #263328;
    border: 1px solid rgba(210,243,107,.5);
    border-radius: 50%;
    color: #d2f36b;
    font-size: 15px;
}

.maintenance-orbit-one {
    top: 20px;
    left: 102px;
}

.maintenance-orbit-two {
    top: 103px;
    right: 5px;
}

.maintenance-orbit-three {
    bottom: 15px;
    left: 102px;
}

.maintenance-orbit-four {
    top: 103px;
    left: 5px;
}

.maintenance-app-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 15px;
    border-top: 1px solid rgba(210,243,107,.2);
}

.maintenance-app-bottom > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.maintenance-app-bottom p {
    margin: 0;
    color: #89968b;
    font-size: 8px;
    letter-spacing: .7px;
}

.maintenance-app-bottom p span {
    padding: 0 4px;
    color: #d2f36b;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 576px) {

    .maintenance-hero-visual {
        min-height: 420px;
        padding: 18px 12px;
    }

    .maintenance-visual-main {
        gap: 7px;
        padding: 30px 0;
    }

    .maintenance-equipment-panel {
        padding: 10px;
        width: min(270px, 76%);
    }

    .maintenance-equipment-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .maintenance-equipment-info strong {
        font-size: 13px;
    }

    .maintenance-tools-panel {
        width: 58px;
        gap: 6px;
    }

    .maintenance-tool {
        padding: 10px 3px;
        gap: 7px;
    }

    .maintenance-tool i {
        font-size: 15px;
    }

    .maintenance-tool span {
        font-size: 5px;
    }

    .maintenance-floating-card {
        right: 8px;
        bottom: 58px;
        padding: 8px;
    }

    .maintenance-visual-topline,
    .maintenance-visual-bottomline {
        font-size: 7px;
        letter-spacing: .6px;
    }

    .maintenance-app-visual {
        min-height: 340px;
        padding: 18px;
    }

    .maintenance-app-center {
        transform: scale(.9);
    }

}
.dis{
    color: #fff;
}

.dis p{
    color: white;
}

.solution-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-feature-icon svg {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}


/* GAS DETECTOR TYPES */

.detector-types {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 22px 0;
}

.detector-type {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px;
    background: rgba(210, 243, 107, 0.045);
    border: 1px solid rgba(210, 243, 107, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.detector-type:hover {
    background: rgba(210, 243, 107, 0.09);
    border-color: #d2f36b;
    transform: translateX(4px);
}

.detector-type-number {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d2f36b;
    color: #071c2a;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.detector-type h4 {
    color: #ffffff;
    font-size: 15px;
    margin: 3px 0 10px;
    font-weight: 700;
}

.detector-type ul {
    padding-left: 18px;
    margin: 0;
}

.detector-type li,
.detector-type p {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    line-height: 1.8;
}

.detector-type p {
    margin: 0;
}


/* =====================================
   INTERACTIVE GAS DETECTOR ACCORDION
===================================== */

.detector-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0;
}

.detector-type {
    background: rgba(210, 243, 107, 0.04);
    border: 1px solid rgba(210, 243, 107, 0.18);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.detector-type[open] {
    border-color: #d2f36b;
    background: rgba(210, 243, 107, 0.07);
}

/* CLICKABLE HEADING */

.detector-type-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    cursor: pointer;
    list-style: none;
}

.detector-type-heading::-webkit-details-marker {
    display: none;
}

.detector-type-number {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d2f36b;
    color: #071c2a;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.detector-type-title {
    flex: 1;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.detector-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(210, 243, 107, 0.12);
    color: #d2f36b;
    font-size: 21px;
    transition: transform 0.3s ease;
}

.detector-type[open] .detector-toggle {
    transform: rotate(45deg);
}

/* EXPANDED CONTENT */

.detector-type-content {
    padding: 0 17px 17px 63px;
    animation: detectorReveal 0.3s ease;
}

@keyframes detectorReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detector-subtype {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.detector-subtype h5 {
    color: #ffffff;
    font-size: 14px;
    margin: 0 0 6px;
}

.detector-subtype p {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

/* DATASHEET BUTTON */

.datasheet-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 12px;
    border: 1px solid rgba(210,243,107,0.4);
    border-radius: 7px;
    color: #d2f36b;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.datasheet-link:hover {
    background: #d2f36b;
    color: #071c2a;
    border-color: #d2f36b;
}

/* MOBILE */

@media (max-width: 600px) {

    .detector-type-heading {
        padding: 14px;
        gap: 10px;
    }

    .detector-type-title {
        font-size: 13px;
    }

    .detector-type-content {
        padding: 0 14px 14px;
    }

    .detector-subtype {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =====================================================
   ASCO GAS PRODUCT GALLERY
===================================================== */

.asco-gas-gallery {
    padding: 110px 0;
    background: #071c2a;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.asco-gas-gallery .container {
    width: min(1380px, 90%);
    margin: auto;
}


/* HEADER */

.gas-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 55px;
}

.gas-gallery-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d2f36b;
    text-transform: uppercase;
}

.gas-gallery-label span {
    width: 24px;
    height: 2px;
    background: #d2f36b;
}

.gas-gallery-heading h2 {
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.12;
    letter-spacing: -2px;
    margin: 20px 0;
    font-weight: 700;
}

.gas-gallery-heading h2 span {
    color: #d2f36b;
}

.gas-gallery-heading p {
    max-width: 650px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.8;
}

.gas-gallery-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 8px;
}

.gas-gallery-count strong {
    font-size: 54px;
    line-height: 1;
    color: #d2f36b;
}

.gas-gallery-count span {
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: 10px;
    color: rgba(255,255,255,.5);
}


/* TOOLBAR */

.gas-gallery-toolbar {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 35px;
}

.gas-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gas-filter {
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.72);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
}

.gas-filter:hover,
.gas-filter.active {
    background: #d2f36b;
    color: #071c2a;
    border-color: #d2f36b;
}

.gas-gallery-search {
    width: 100%;
    max-width: 430px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.045);
}

.gas-gallery-search svg {
    width: 19px;
    height: 19px;
    color: #d2f36b;
    flex-shrink: 0;
}

.gas-gallery-search input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
}

.gas-gallery-search input::placeholder {
    color: rgba(255,255,255,.45);
}


/* PRODUCT GRID */

.gas-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.gas-product-card {
    min-width: 0;
    background: #0d2939;
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .35s ease, border-color .35s ease;
    overflow: hidden;
}

.gas-product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(210,243,107,.55);
}


/* PRODUCT IMAGE */

.gas-product-image {
    height: 245px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
    padding: 25px;
}

.gas-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s ease;
}

.gas-product-card:hover .gas-product-image img {
    transform: scale(1.06);
}

.gas-product-tag {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    background: #071c2a;
    color: #d2f36b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* PRODUCT DETAILS */

.gas-product-info {
    padding: 24px 22px 21px;
}

.gas-product-category {
    font-size: 10px;
    color: #d2f36b;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.gas-product-info h3 {
    font-size: 24px;
    margin: 12px 0;
    font-weight: 700;
    color: #ffffff;
}

.gas-product-info p {
    min-height: 58px;
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255,255,255,.62);
}

.gas-product-model {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,.43);
    padding: 13px 0;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.gas-product-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d2f36b;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 5px;
    transition: .3s ease;
}

.gas-product-link span {
    font-size: 18px;
}

.gas-product-link:hover {
    color: #ffffff;
}


/* EMPTY RESULT */

.gas-gallery-empty {
    display: none;
    text-align: center;
    padding: 70px 20px;
    border: 1px solid rgba(255,255,255,.1);
}

.gas-gallery-empty.show {
    display: block;
}

.gas-gallery-empty span {
    color: #d2f36b;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
}

.gas-gallery-empty p {
    color: rgba(255,255,255,.6);
    font-size: 13px;
}


/* BOTTOM CTA */

.gas-gallery-bottom {
    margin-top: 75px;
    padding: 38px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: #102f3e;
    border: 1px solid rgba(210,243,107,.2);
}

.gas-gallery-bottom h3 {
    font-size: 25px;
    margin: 15px 0 10px;
    color: #ffffff;
}

.gas-gallery-bottom p {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.58);
}

.gas-gallery-cta {
    flex-shrink: 0;
    padding: 17px 23px;
    background: #d2f36b;
    color: #071c2a;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.gas-gallery-cta span {
    margin-left: 15px;
}

.gas-gallery-cta:hover {
    background: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .gas-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {

    .asco-gas-gallery {
        padding: 75px 0;
    }

    .gas-gallery-header {
        align-items: flex-start;
    }

    .gas-gallery-count {
        display: none;
    }

    .gas-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .gas-product-image {
        height: 190px;
        padding: 15px;
    }

    .gas-product-info {
        padding: 18px 14px;
    }

    .gas-product-info h3 {
        font-size: 19px;
    }

    .gas-product-info p {
        font-size: 11px;
    }

    .gas-gallery-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 27px 22px;
    }

    .gas-gallery-bottom h3 {
        font-size: 21px;
    }

}

@media (max-width: 480px) {

    .gas-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gas-product-image {
        height: 150px;
        padding: 10px;
    }

    .gas-product-tag {
        font-size: 7px;
        top: 8px;
        left: 8px;
    }

    .gas-product-info {
        padding: 15px 11px;
    }

    .gas-product-info h3 {
        font-size: 17px;
    }

    .gas-product-info p {
        min-height: 75px;
        font-size: 10px;
    }

    .gas-product-category {
        font-size: 8px;
    }

    .gas-product-model {
        font-size: 9px;
    }

    .gas-gallery-heading h2 {
        letter-spacing: -1px;
    }

}

/* FIX: Show complete product details */
#process-instrumentation .solution-feature-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}

#process-instrumentation .solution-feature-card p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 1.7;
}

#process-instrumentation .solution-feature-card ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-left: 22px !important;
    margin: 10px 0 20px !important;
    list-style: disc !important;
}

#process-instrumentation .solution-feature-card ul li {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin-bottom: 9px;
    line-height: 1.6;
}

#process-instrumentation .solution-feature-card strong {
    display: inline;
    visibility: visible !important;
}

/* =====================================================
   PROCESS INSTRUMENTATION — PRODUCT RANGE
===================================================== */

.asco-product-section {
    width: 100%;
    padding: 80px 0;
    background: transparent;
    color: #ffffff;
}

.asco-product-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* =====================================================
   PRODUCT HEADING
===================================================== */

.asco-product-heading-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 55px;
}

.asco-product-heading {
    max-width: 700px;
}

.asco-product-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d2f36b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.asco-product-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #d2f36b;
}

.asco-product-heading h2 {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.8px;
    margin: 0;
}

.asco-product-heading h2 span {
    display: block;
    color: #d2f36b;
}

.asco-product-description {
    max-width: 390px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 5px;
}


/* =====================================================
   PRODUCT GRID
===================================================== */

.asco-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* =====================================================
   PRODUCT CARD
===================================================== */

.asco-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 38px 34px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.asco-product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #d2f36b;
    transition: width 0.4s ease;
}

.asco-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(210, 243, 107, 0.45);
    background: rgba(255, 255, 255, 0.055);
}

.asco-product-card:hover::before {
    width: 100%;
}


/* =====================================================
   PRODUCT INDEX
===================================================== */

.asco-product-index {
    position: absolute;
    top: 28px;
    right: 30px;
    color: rgba(255, 255, 255, 0.20);
    font-family: "Manrope", sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    transition: color 0.3s ease;
}

.asco-product-card:hover .asco-product-index {
    color: rgba(210, 243, 107, 0.45);
}


/* =====================================================
   PRODUCT ICON
===================================================== */

.asco-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 28px;
    color: #ffffff;
    background: rgba(210, 243, 107, 0.08);
    border: 1px solid rgba(210, 243, 107, 0.22);
    border-radius: 5px;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.asco-product-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.asco-product-card:hover .asco-product-icon {
    background: rgba(210, 243, 107, 0.15);
    transform: translateY(-3px);
}


/* =====================================================
   PRODUCT TITLE
===================================================== */

.asco-product-card h3 {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 17px;
    padding-right: 35px;
}


/* =====================================================
   PRODUCT DESCRIPTION
===================================================== */

.asco-product-card p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.85;
    margin: 0 0 16px;
}

.asco-product-card p strong {
    color: #d2f36b;
    font-size: 13px;
    font-weight: 700;
}


/* =====================================================
   PRODUCT LIST
===================================================== */

.asco-product-card ul {
    width: 100%;
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}

.asco-product-card ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.7;
}

.asco-product-card ul li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #d2f36b;
    border-radius: 50%;
}


/* =====================================================
   PRODUCT LINK
===================================================== */

.asco-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: auto;
    padding: 13px 18px;
    color: #071c2a;
    background: #d2f36b;
    border: 1px solid #d2f36b;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.asco-product-link span {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.asco-product-link:hover {
    color: #d2f36b;
    background: transparent;
}

.asco-product-link:hover span {
    transform: translate(3px, -3px);
}


/* =====================================================
   RESPONSIVE — TABLET
===================================================== */

@media (max-width: 991px) {

    .asco-product-section {
        padding: 65px 0;
    }

    .asco-product-heading-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
    }

    .asco-product-description {
        max-width: 600px;
    }

    .asco-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .asco-product-card {
        padding: 30px 25px;
    }

}


/* =====================================================
   RESPONSIVE — MOBILE
===================================================== */

@media (max-width: 600px) {

    .asco-product-section {
        padding: 50px 0;
    }

    .asco-product-heading-wrap {
        gap: 16px;
        margin-bottom: 30px;
    }

    .asco-product-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .asco-product-heading h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .asco-product-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .asco-product-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .asco-product-card {
        padding: 28px 23px;
    }

    .asco-product-index {
        top: 24px;
        right: 23px;
        font-size: 32px;
    }

    .asco-product-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 22px;
    }

    .asco-product-icon svg {
        width: 30px;
        height: 30px;
    }

    .asco-product-card h3 {
        font-size: 19px;
    }

    .asco-product-card p {
        font-size: 13px;
    }

    .asco-product-card ul li {
        font-size: 12.5px;
    }

}
/* FIX: SOLUTION PAGE HEADING OVERLAP */

.solution-detail-hero-content h1 {
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.solution-detail-overview-content h2,
.solution-detail-heading,
.solution-detail-app-copy h2,
.solution-detail-cta-content h2,
.solution-detail-note-content h2 {
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.2;
    letter-spacing: -1px;
    overflow-wrap: break-word;
}

.solution-detail-hero-content h1 span,
.solution-detail-heading span,
.solution-detail-overview-content h2 span,
.solution-detail-app-copy h2 span,
.solution-detail-cta-content h2 span {
    display: block;
}

@media (max-width: 768px) {

    .solution-detail-hero-content h1 {
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .solution-detail-overview-content h2,
    .solution-detail-heading,
    .solution-detail-app-copy h2,
    .solution-detail-cta-content h2,
    .solution-detail-note-content h2 {
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

}

@media (max-width: 480px) {

    .solution-detail-hero-content h1 {
        font-size: 31px;
    }

    .solution-detail-overview-content h2,
    .solution-detail-heading,
    .solution-detail-app-copy h2,
    .solution-detail-cta-content h2,
    .solution-detail-note-content h2 {
        font-size: 26px;
    }

}
/* SPECIFICATIONS - PARAMETER LIST */

.solution-detail-spec-list {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}

.solution-detail-spec-item {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 25px;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.solution-detail-spec-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.solution-detail-spec-item span {
    color: #d2f36b;
    font-size: 14px;
    font-weight: 600;
}

.solution-detail-spec-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .solution-detail-spec-item {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 15px 12px;
    }
}

/* =========================================
   CERTIFICATION CARDS
========================================= */

.certification-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    min-height: 280px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.35s ease;
}

.certification-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #d2f36b;
    transition: width 0.35s ease;
}

.certification-card:hover {
    transform: translateY(-7px);
    border-color: rgba(210, 243, 107, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.certification-card:hover::before {
    width: 100%;
}

.certification-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
}

.certification-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.certification-label {
    display: block;
    margin-bottom: 10px;
    color: #28372c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.certification-card h3 {
    margin: 0 0 12px;
    color: #ddd;
    font-family: 'Manrope', sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
}

.certification-card p {
    margin: 0;
    color: rgba(0, 0, 0, 0.68);
    font-size: 14px;
    line-height: 1.8;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .certification-card {
        padding: 25px 22px;
        min-height: auto;
    }

    .certification-icon {
        width: 66px;
        height: 66px;
        margin-bottom: 20px;
    }

    .certification-card h3 {
        font-size: 21px;
    }
}

/* CERTIFICATION GRID - 50/50 WIDTH */

.certification-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.certification-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* MOBILE */
@media (max-width: 600px) {
    .certification-grid {
        grid-template-columns: 1fr;
    }
}

.certifications-section {
    width: 100%;
}

.certifications-section h2 {
    margin-bottom: 30px;
}

.certification-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.certification-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .certification-grid {
        grid-template-columns: 1fr;
    }
}

/* CERTIFICATE BUTTON */

.certification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: fit-content;
    margin-top: 25px;
    padding: 12px 20px;
    background: #d2f36b;
    color: #071c2a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.certification-btn span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.certification-btn:hover {
    background: #ffffff;
    color: #071c2a;
}

.certification-btn:hover span {
    transform: translate(3px, -3px);
}