/* ====== Page-specific styles (keeps your original vibe) ====== */
#cs-hero {
    /* https://www.pexels.com/photo/detailed-interior-of-an-electrical-control-panel-28942196/ */
    background: linear-gradient(0deg, rgba(0,16,80,0.75), rgba(0,16,80,0.75)),
                url('../../assets/gwDevice.jpg') center/cover no-repeat;
    color: #DEEDF1;
    min-height: 56vh;
    display: flex;
    align-items: center;
}
#cs-hero h1 { font: normal normal 600 60px/72px Lexend; font-size: 2.6rem; margin: 0; color: #DEEDF1; }
#cs-main { background: #EAF9FF; padding: 4rem 0 5rem; }

.section-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.section-head h2 { margin:0; font: normal normal 500 60px/56px Lexend; font-size:2.1rem; color: var(--brand-light-blue); white-space:nowrap; }
.section-head .line { flex:1; height:3px; background: var(--brand-light-blue); }

.card-soft { background: var(--card-bg); border-radius:.4rem; padding:1.25rem; box-shadow:0 4px 12px var(--card-shadow); height:100%; }
.cap-title { font: normal normal 700 14px/20px Muli; color:#082B6D; }
.cap-text { font: normal normal 400 14px/22px Muli; color:#1A1A1A; }
.note { font: normal normal 400 14px/22px Muli; color:#1A1A1A; opacity:.9; }

/* Chips */
.badge-tech { border:1px solid #bfe0ff; background:#f6fbff; border-radius:999px; padding:.35rem .7rem; margin:.25rem; display:inline-block; font:500 13px/18px Lexend; color:#082B6D; }

/* Architecture row: no wrap + horizontal scroll */
.arch{
    display: flex;
    align-items: stretch;
    gap: .75rem;
    overflow-x: auto;              /* keep in one row; scroll on small screens */
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;        /* room for scrollbar */
    scrollbar-width: thin;
}
.arch::-webkit-scrollbar{ height: 8px; }
.arch::-webkit-scrollbar-thumb{ background: rgba(8,43,109,.25); border-radius: 8px; }

.arch-box{
    flex: 0 0 clamp(240px, 30vw, 360px);   /* responsive box width, won’t shrink below 240px */
    background:#F7FCFF; border:1px solid #bfe0ff; border-radius:.4rem; padding:.75rem;
}
.arch-box h6{ margin:0 0 .25rem 0; font:800 13px/1.2 Muli; color:#082B6D; }

.arch-arrow{
    flex: 0 0 auto;                         /* keep arrows at natural size */
    display:flex; align-items:center; justify-content:center;
    color:#082B6D;
}
.arch-arrow i{ opacity:.6; font-size: 1.1rem; }

/* Optional: hide arrows on very small phones for extra room */
@media (max-width: 420px){
    .arch-arrow{ display:none; }
}