/* ── AVC Page Typography ── */

/* Body / UI — Open Sans, primary font throughout */
body {
    font-family: 'Open Sans', sans-serif !important;
}

/* ── Colour Palette ── */
:root {
    --blue:       #0072BC;
    --blue-dark:  #005A96;
    --blue-deep:  #003F6B;
    --blue-light: #E6F3FB;
    --blue-mid:   #CCE4F6;
    --orange:       #F7941D;
    --orange-dark:  #D97D10;
    --orange-light: #FFF4E6;
    --green:        #8DC63F;
    --green-dark:   #6FA32E;
    --green-light:  #F0F8E6;
    --white:        #FFFFFF;
    --bg-alt:       #F5F7FA;
    --bg-dark:      #0D1F35;
    --text:         #333333;
    --text-mid:     #555555;
    --text-muted:   #777777;
    --text-light:   #999999;
    --rule:         #E8ECF0;
    --r:            6px;
    --r2:           10px;
    --r3:           14px;
}

/* ── Heading Hierarchy ── */

/* H1 — Hero */
.avc-hero-title {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.8vw, 2.6rem) !important;
    line-height: 1.1 !important;
}

/* H2 — Section headings */
.sh-section-h2,
.sh-section-title {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800;
    font-size: 2.25rem !important;
}

/* H3 — Steps, sub-sections */
.ui.small.header {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
}

/* H4 — Output cards, inline CTA */
.ui.black.small.header {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
}

/* ── Layout ── */

/* Page background */
body {
    background-color: #FFFFFF !important;
}

/* Max content width: 1080px, centred */
.container-limit {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Side padding */
.container-limit {
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
}

/* AVC light grey background */
.shbg-avc-light-grey {
    background-color: #f5f7fa !important;
}

/* Section vertical padding — default */
.fifty.ui.segment {
    padding-top: clamp(52px, 7vw, 96px) !important;
    padding-bottom: clamp(52px, 7vw, 96px) !important;
}

/* Section vertical padding — compact */
.fifty.ui.segment.compact-section {
    padding-top: clamp(28px, 4vw, 48px) !important;
    padding-bottom: clamp(28px, 4vw, 48px) !important;
}

/* Pull quotes — Open Sans, customer testimonials only */
.sh-quote-block,
.sh-cta-quote-text {
    font-family: 'Open Sans', sans-serif !important;
    font-style: italic;
    font-weight: 400;
}

/* ── Stat Bar ── */
.sh-stat-bar {
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--rule);
}

.sh-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.sh-stat-col {
    text-align: center;
    padding: 1.5rem 1rem;
}

.sh-stat-col + .sh-stat-col {
    border-left: 1px solid var(--rule);
}

@media (max-width: 767px) {
    .sh-stat-grid {
        grid-template-columns: 1fr;
    }

    .sh-stat-col + .sh-stat-col {
        border-left: none;
        border-top: 1px solid var(--rule);
    }
}

/* ── Section label ── */
.sh-label { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.sh-label-dash { width: 28px; height: 2px; background: var(--orange); flex-shrink: 0; }
.sh-label-dash--sm { width: 24px; }
.sh-label-text { color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7em; font-weight: 600; }
.sh-label-text--sm { font-size: 0.75em; font-weight: 700; }
.sh-label-text--blue { color: var(--blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Step circle ── */
.sh-step-circle { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-mid); display: flex; align-items: center; justify-content: center; }
.sh-step-circle > span { font-size: 0.95rem; font-weight: 700; color: var(--blue); }

/* ── Quote block ── */
.sh-quote-block { background: var(--blue-light); border-left: 3px solid var(--blue); border-radius: 0 0.5rem 0.5rem 0; padding: 0.65rem 0.9rem; }



/* ── Tags ── */
.sh-tag-green { background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green-border); padding: 0.15rem 0.45rem; border-radius: 2rem; font-size: 0.68rem; font-weight: 700; }
.sh-tag-muted { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.55); padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.62em; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Standard badge ── */
.sh-std-badge { display: inline-block; background: var(--blue); color: #fff; padding: 0.2rem 0.65rem; border-radius: var(--r); font-size: 0.62rem; font-weight: 600; white-space: nowrap; min-width: 150px; width: 150px; text-align: center; }

/* ── Check item ── */
.sh-check-item { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.72rem; color: var(--text-mid); }
.sh-check-tick { color: var(--green); font-weight: 700; flex-shrink: 0; }

/* ── Navbar links + dividers ── */
.sh-nav-link { font-size: 0.78rem; font-weight: 500; color: #444; text-decoration: none; white-space: nowrap; padding: 0.25rem 0.4rem; }
.sh-nav-divider { width: 1px; height: 14px; background: rgba(0,0,0,0.12); flex-shrink: 0; }

/* Narrow desktop (992–1199px): shrink nav links so all fit before CTAs */
@media (min-width: 992px) and (max-width: 1199px) {
    .sh-nav-link { font-size: 0.68rem; padding: 0.2rem 0.25rem; }
    .sh-navbar-links { gap: 0.2rem !important; }
    .sh-navbar-ctas { padding-left: 0.75rem !important; margin-left: 0.5rem !important; }
}

/* ── On this page: main site navbar scrolls with page ── */
#main_menu.ui.top.fixed.menu {
    position: relative !important;
}

/* ── Smooth scroll ── */
/* scroll-behavior: smooth removed — handled via JS click listener only (prevents auto-scroll to #hash on page load) */

/* ── Page Navbar ── */
#page-navbar {
    position: relative;
    z-index: 998;
    background: #fff;
}
#page-navbar.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}
#page-navbar-spacer {
    display: none;
}
#page-navbar.is-fixed ~ #page-navbar-spacer,
#page-navbar-spacer.active {
    display: block;
    height: 56px;
}

/* ── Simulation Gallery grid ── */
/* Gallery outer layout: 5×3 cards full width */
.sh-gallery-layout {
    display: block;
}

.sh-sim-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    align-items: stretch;
}
.sh-sim-grid a {
    display: block;
    background: var(--bg-alt);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sh-sim-grid a:hover {
    border-color: rgba(33,133,208,0.4);
    box-shadow: 0 2px 8px rgba(33,133,208,0.1);
}
.sh-sim-card-img {
    padding: 0 !important;
    position: relative;
    min-height: 82px;
}
.sh-sim-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.5rem;
}
@media (max-width: 991px) {
    .sh-sim-grid { grid-template-columns: repeat(3, 1fr); }
    .sh-sim-card-img { height: auto; min-height: 70px; }
}
@media (max-width: 767px) {
    .sh-sim-grid { grid-template-columns: repeat(2, 1fr); }
    .sh-sim-card-img { height: auto; min-height: 150px; }
}

/* Gallery header row: stack on tablet/mobile */
@media (max-width: 991px) {
    .sh-gallery-desc-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .sh-gallery-desc-row > a {
        align-self: flex-start;
    }
}

/* ── Pricing "Most Popular" badge ── */
@media (max-width: 767px) {
    .sh-popular-badge {
        position: static !important;
        transform: none !important;
        display: inline-block;
        margin-bottom: 0.75rem;
    }
}

/* ── FAQ tabs wrap on mobile ── */
.sh-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.sh-faq-tabs button {
    flex-shrink: 0;
}

/* ── "Is AVC Right For You?" rows ── */
.sh-fit-row {
    display: grid;
    grid-template-columns: 240px 1fr 180px;
    align-items: start;
    column-gap: 4rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #E8ECF0;
}
.sh-fit-row-right { display: flex; justify-content: flex-end; align-items: center; }
.sh-fit-row-right .sh-btn-blue { min-width: 13rem; text-align: center; }
@media (max-width: 767px) {
    .sh-fit-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .sh-fit-row-right { justify-content: flex-start; }
}

/* Reduce trusted-by bar spacing to keep equal visual rhythm in hero column */
.sh-hero-content .trusted-desktop {
    margin-bottom: -0.25rem;
}

/* ── Trusted-by bar: responsive scaling on smaller screens ── */
@media (max-width: 768px) {
    .trusted-desktop { max-width: 100% !important; }
    .trusted-desktop > div {
        zoom: 1 !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        flex-wrap: wrap !important;
    }
    .trusted-desktop > div > span:first-child { font-size: 11px !important; }
    .trusted-desktop > div > div { height: 16px !important; }
    .trusted-desktop > div img { height: 22px !important; }
    .trusted-desktop > div > span { font-size: 11px !important; }
    .trusted-desktop > div > span:last-child { font-size: 12px !important; font-weight: 700 !important; }
}
@media (max-width: 380px) {
    .trusted-desktop > div {
        gap: 6px !important;
        padding: 5px 8px !important;
    }
    .trusted-desktop > div img { height: 18px !important; }
    .trusted-desktop > div > span:first-child { font-size: 10px !important; }
    .trusted-desktop > div > span:last-child { font-size: 11px !important; }
}

/* ── Reusable utility classes ── */
.sh-trust-badge { display: inline-block; background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.1); padding: 0.15rem 0.5rem; border-radius: 0.25rem; font-size: 0.62em; font-weight: 600; letter-spacing: 0.04em; }
.sh-faq-question { font-weight: 700; font-size: 0.85rem; color: rgba(0,0,0,0.85); margin-bottom: 0.35rem; display: block; padding-left: 2.2rem; }
.sh-faq-question::before { display: none; }
.sh-faq-answer { font-size: 0.6rem; color: rgba(0,0,0,0.55); line-height: 1.5; margin: 0; }
.sh-faq-divider { padding-bottom: 0.65rem; border-bottom: none; }
.sh-faq-tab-label { margin-bottom: 0.6rem; }
.sh-faq-col { display: flex; flex-direction: column; gap: 0.75rem; }
.sh-fit-heading { font-weight: 600; font-size: 14px; line-height: 1.3; color: rgba(0,0,0,0.85); }
.sh-fit-body { font-weight: 400; font-size: 13px !important; color: rgba(0,0,0,0.6); line-height: 1.45; margin: 0; }
.sh-cta-check { font-size: 0.74rem; color: rgba(0,0,0,0.45); }
.sh-cta-check-tick { color: var(--green); font-weight: 700; }
.sh-card-body { font-size: 0.8rem; color: rgba(0,0,0,0.55); line-height: 1.65; text-align: left; margin: 0; }
.sh-card-white { background: #fff; border: 1px solid var(--card-border); border-radius: 0.75rem; }
.sh-card-white-sm { background: #fff; border: 1px solid var(--card-border); border-radius: 0.65rem; }
.sh-stat-col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sh-section-title { font-size: 1.5rem; line-height: 1.2; text-align: left; }
.sh-section-subtitle { font-size: 0.78rem; color: rgba(0,0,0,0.6); line-height: 1.5; text-align: left; }
.sh-cta-quote-card { border: 1px solid rgba(33,133,208,0.15); border-radius: 0.5rem; padding: 0.5rem 0.75rem; display: flex; align-items: flex-start; gap: 0.65rem; }
.sh-cta-quote-text { margin: 0; font-size: 0.68rem; line-height: 1.45; color: var(--text-mid); }

/* ── Reduce card grid gutter ── */
.ui.three.column.stackable.grid > .row > .column { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.ui.three.column.stackable.grid > .row { margin-left: -0.5rem !important; margin-right: -0.5rem !important; }
.ui.three.column.stackable.grid > .row > .column .container-fluid { box-shadow: none !important; border: 0.5px solid #e0e0e0 !important; }
@media (max-width: 767px) {
    .ui.three.column.stackable.grid > .row > .column { padding-left: 0.25rem !important; padding-right: 0.25rem !important; padding-bottom: 0.5rem !important; }
    .ui.three.column.stackable.grid > .row > .column .container-fluid { padding: 0.65rem 0.75rem !important; }
}

/* ── Card icon + title (stacked: icon on top, text below) ── */
.sh-services-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.sh-services-title .image { display: flex; align-items: center; justify-content: center; }
.sh-services-title .image i.icon { margin: 0; }
.sh-services-title .content { padding: 0; margin: 0; }
.sh-services-title .content .header { text-align: left !important; margin: 0; padding: 0; font-size: 0.85rem !important; }

/* ── Stats numbers ── */
.sh-stat-number { font-size: 2.8rem; font-weight: 800; line-height: 1; margin-bottom: 0.35rem; }
.sh-stat-heading { font-size: 0.9rem; font-weight: 600; color: rgba(0,0,0,0.82); line-height: 1.4; margin-bottom: 0.2rem; }
.sh-stat-sub { font-size: 0.7rem; color: rgba(0,0,0,0.45); font-weight: 400; }

/* ── Section heading 2.2rem ── */
.sh-section-h2 { font-size: 2.2rem; line-height: 1.2; text-align: left; }

/* ── Section intro paragraph ── */
.sh-section-intro { font-size: 0.93rem !important; color: rgba(0,0,0,0.6); line-height: 1.65; text-align: left; margin-bottom: 0;}

/* ── Icon wrapper in feature/problem/solution cards ── */
.sh-icon-wrap { width: 36px; min-width: 36px; flex-shrink: 0; }

/* ── Tech & Standards mini-cards ── */
.sh-tech-card { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 0.65rem; padding: 0.75rem 1rem; height: 100%; }
.sh-tech-card-title { color: #2185D0; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
.sh-tech-card-body { font-size: 0.82rem; color: rgba(0,0,0,0.6); line-height: 1.45; }

/* ── Customer Stories cards ── */
.sh-story-card { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 0.75rem; padding: 0.75rem 1rem; width: 100%; display: flex; flex-direction: column; gap: 0.4rem; }
.sh-story-company { display: flex; align-items: center; gap: 0.55rem; color: #2185D0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.sh-story-company img { height: 28px; width: auto; object-fit: contain; flex-shrink: 0; text-transform: none; letter-spacing: normal; }
.sh-story-title { font-weight: 600; font-size: 0.87rem; line-height: 1.35; color: rgba(0,0,0,0.85); margin-bottom: 0.3rem; }
.sh-story-body { font-size: 0.81rem; color: rgba(0,0,0,0.55); line-height: 1.45; margin: 0; font-weight: 400; }

/* ── Simulation Gallery item labels ── */
.sh-sim-name { font-size: 0.82rem; font-weight: 600; color: rgba(0,0,0,0.8); margin-bottom: 0.15rem; }
.sh-sim-meta { font-size: 0.72rem; color: rgba(0,0,0,0.45); }

/* ── Pricing cards ── */
.sh-pricing-card { background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 0.85rem; padding: 1.1rem 1.25rem; height: 100%; display: flex; flex-direction: column; gap: 0; }
.sh-pricing-card--featured { border: 2px solid #f2711c; position: relative; }
.sh-pricing-tier-label { color: #2185D0; font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.sh-pricing-plan-name { font-size: 1.1rem; font-weight: 800; color: rgba(0,0,0,0.88); margin-bottom: 0.25rem; }
.sh-pricing-meta { font-size: 0.68rem; color: rgba(0,0,0,0.45); margin-bottom: 0.6rem; }
.sh-pricing-desc { font-size: 0.72rem; color: rgba(0,0,0,0.6); line-height: 1.5; margin-bottom: 0.75rem; }
.sh-pricing-divider { border-top: 1px solid rgba(0,0,0,0.08); margin-bottom: 0.6rem; }
.sh-pricing-section-label { font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0,0,0,0.4); margin-bottom: 0.45rem; }
.sh-pricing-features { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.sh-pricing-btn-wrap { margin-top: 0.85rem; }

/* ── CTA quote card icon fix ── */
.sh-cta-icon { flex-shrink: 0; width: 36px; height: 36px; min-width: 36px; min-height: 36px; background: #fff; display: flex; align-items: center; justify-content: center; }
.sh-cta-icon i.icon { margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important; }

/* ── Button hover styles (uniform size) ── */
.avc_btn_orange, .sh-btn-orange, .sh-btn-white, .sh-btn-blue, .sh-btn-blue-outline,
.sh-pricing-btn-primary, .sh-pricing-btn-outline {
    display: inline-block; padding: 0.55rem 1.15rem; font-size: 0.8rem;
    font-weight: 600; border-radius: 0.4rem; text-decoration: none;
    white-space: nowrap; cursor: pointer; transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.sh-pricing-btn-primary, .sh-pricing-btn-outline { display: block; text-align: center; }
.sh-btn-orange { background: var(--orange); color: #fff !important; border: 1.5px solid var(--orange); }
.sh-btn-orange:hover { background: var(--orange); box-shadow: 0 2px 10px rgba(242,113,28,0.3); color: #fff !important; }
.avc_btn_orange { background: var(--orange); color: #fff !important; border: 1.5px solid var(--orange); }
.avc_btn_orange:hover { background: var(--orange-dark); box-shadow: 0 2px 10px rgba(247,148,29,0.3); color: #fff !important; }
.sh-btn-white { background: #fff; color: #333 !important; border: 1.5px solid #a8a8a8; }
.sh-btn-white:hover { background: #f5f5f5; border-color: #888; box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: #333 !important; }
.sh-btn-blue { background: #2185D0; color: #fff !important; border: 1.5px solid #2185D0; }
.sh-btn-blue:hover { background: #1a6db3; box-shadow: 0 2px 10px rgba(33,133,208,0.3); color: #fff !important; }
.sh-btn-blue-outline { background: #fff; color: #2185D0 !important; border: 1.5px solid #2185D0; }
.sh-btn-blue-outline:hover { background: rgba(33,133,208,0.08); box-shadow: 0 2px 8px rgba(33,133,208,0.15); color: #2185D0 !important; }
.sh-pricing-btn-primary { background: var(--orange); color: #fff !important; border: 1.5px solid var(--orange); font-weight: 700; }
.sh-pricing-btn-primary:hover { background: var(--orange); box-shadow: 0 2px 8px rgba(242,113,28,0.25); color: #fff !important; }
.sh-pricing-btn-outline { background: #fff; color: #2185D0 !important; border: 1.5px solid #2185D0; }
.sh-pricing-btn-outline:hover { background: rgba(33,133,208,0.08); box-shadow: 0 2px 8px rgba(33,133,208,0.15); color: #2185D0 !important; }
.sh-pricing-btn-outline:hover { background: rgba(33,133,208,0.08); box-shadow: 0 2px 8px rgba(33,133,208,0.15); color: #2185D0; }

/* ── Solutions CTA box buttons ── */
.sh-solution-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background-color: #fef4e7 !important;
    border: 1px solid var(--orange) !important;
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
}
.sh-solution-cta-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sh-solution-cta-buttons .ui.button {
    white-space: normal;
    word-break: break-word;
}
@media (max-width: 600px) {
    .sh-solution-cta {
        flex-direction: column;
        align-items: stretch;
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }
    .sh-solution-cta p { font-size: 0.82rem !important; margin-bottom: 0.15rem !important; }
    .sh-solution-cta-buttons { flex-direction: column; width: 100%; }
    .sh-solution-cta-buttons a { width: 100%; text-align: center; }
}

/* ── CTA section quote cards ── */
.sh-cta-left-col  { min-width: 0; }

/* ── Customer Stories full-width boxes ── */
.sh-story-wide {
    padding: 1.5rem 2rem;
}
@media (max-width: 767px) {
    .sh-story-wide { padding: 1.25rem; }
}

/* ── General: prevent any inline-flex/flex from overflowing ── */
@media (max-width: 767px) {
    [style*="display: flex"] { flex-wrap: wrap; }
    /* Override only containers that must stay row */
    .sh-nowrap { flex-wrap: nowrap !important; }
}

/* ── Stats grid ── */
.sh-stats-grid.ui.four.column.grid > .column {
    min-width: 0;
}
@media (max-width: 767px) {
    .sh-stats-grid.ui.four.column.grid > .column {
        width: 50% !important;
        margin-bottom: 1rem;
    }
}

/* ── Hero: fix display:table inner-content overflow ── */
/* .inner-content has display:table (no width) in site CSS — it expands to content
   width (620px from heading max-width), overflowing viewport on small screens.
   Force it to fill its container cell at 100%. */
.autonomous-hvac-cfd .inner-content {
    width: 100%;
    max-width: 100%;
}
.autonomous-hvac-cfd .content-block {
    width: 100%;
}

/* ── Hero content column ── */
.sh-hero-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: space-between;
    min-height: 55vh;
}

/* ── Hero: mobile responsive ── */
@media (max-width: 767px) {
    .autonomous-hvac-cfd.header-background.background-position-right-center {
        background-position: left center !important;
        background-size: cover !important;
        position: relative;
    }
    /* White overlay so text/buttons are readable over background image */
    .autonomous-hvac-cfd.header-background::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.88);
        z-index: 0;
        pointer-events: none;
    }
    .autonomous-hvac-cfd .row {
        position: relative;
        z-index: 1;
    }
    /* Override inline padding-left: 40px on hero column */
    .autonomous-hvac-cfd .sixteen.wide.mobile.column[style*="padding-left"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Reduce container-fluid padding inside hero on mobile */
    .autonomous-hvac-cfd .responsive-padding.padding-medium {
        padding: 1.25rem 1rem !important;
    }
    /* Hero title: readable size, natural reflow */
    .avc-hero-title {
        font-size: 1.25rem !important;
        min-height: auto !important;
        max-width: 100% !important;
        line-height: 1.35 !important;
    }
    /* Hero description: remove max-width, hide hard <br> */
    .avc-hero-desc {
        max-width: 100% !important;
        font-size: 0.8rem !important;
        line-height: 1.55 !important;
    }
    .avc-hero-desc br { display: none; }
    /* Hero content gap */
    .sh-hero-content { gap: 0.5rem; }
}

/* ── Hero CTA buttons: responsive at all widths ── */
.sh-hero-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; width: 100%; }
.sh-hero-scale-link { color: var(--blue) !important; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; margin-left: 0.25rem; }
.sh-hero-scale-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
    .sh-hero-btns { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .sh-hero-btns a:not(.sh-hero-scale-link) { text-align: center; width: 100%; box-sizing: border-box; padding: 0.75rem 1rem; font-size: 0.85rem; border-radius: 0.5rem; }
    .sh-hero-scale-link { margin-left: 0; font-size: 0.78rem; text-align: center; padding: 0 !important; width: auto !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    /* Narrow computer/tablet: stack buttons if they don't fit side by side */
    .sh-hero-btns { flex-wrap: wrap; }
    .sh-hero-btns a { flex-shrink: 1; min-width: 0; }
}

/* ── Hide page navbar on mobile ── */
@media (max-width: 767px) {
    #page-navbar { display: none !important; }
}

/* ── Problem Statement / Solutions: prevent flex-wrap from breaking column layouts ── */
@media (max-width: 767px) {
    #problem-statement .content-block,
    #problem-statement .inner-content,
    #solutions .content-block,
    #solutions .inner-content {
        flex-wrap: nowrap !important;
    }
}
/* ── Active nav link ── */
.sh-nav-link.active { color: var(--blue) !important; font-weight: 500; }

/* ── Customer Data: standards badges + comparison table responsive ── */
.sh-std-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sh-std-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap !important; }
.sh-std-row span:last-child { min-width: 0; }
@media (max-width: 767px) {
    .sh-std-badge { min-width: 120px; width: 120px; font-size: 0.7em; padding: 0.2rem 0.5rem; }
    .sh-std-row span:last-child { font-size: 0.75rem !important; }
    #customer-data table { font-size: 0.72rem; }
    #customer-data table th,
    #customer-data table td { padding: 8px 6px; word-break: break-word; }
    #customer-data [style*="min-height: 280px"] { min-height: auto !important; padding: 0.75rem !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
    .sh-std-badge { min-width: 110px; width: 110px; font-size: 0.62em; padding: 0.2rem 0.35rem; }
    .sh-std-row span:last-child { font-size: 0.68rem !important; }
    #customer-data table { font-size: 0.65rem; }
    #customer-data table th,
    #customer-data table td { padding: 6px 4px; }
}

/* Tag chips at bottom of problem cards */
.sh-ps-tag {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
}

/* ── AVC Hero ── */
.custom-section-height.desktop-60vh {
    height: 73vh;
    min-height: 400px;
}
@media (max-width: 767px) {
    .custom-section-height.desktop-60vh {
        height: auto !important;
        min-height: auto !important;
    }
    .custom-section-height.desktop-60vh.row {
        height: auto !important;
    }
}
/* Stats bar: 20vh on desktop to complete the 100vh load screen */
@media (min-width: 992px) {
    .sh-stat-bar.desktop-40vh {
        height: 17vh;
        min-height: 160px;
        display: flex;
        align-items: center;
    }
    .sh-stat-bar.desktop-40vh > .sh-stat-grid {
        width: 100%;
    }
    .sh-stat-bar.desktop-40vh .sh-stat-col {
        padding: 0.5rem 1rem;
    }
    .avc-hero-col {
        padding-left: 40px !important;
    }
}
/* Hero title */
.avc-hero-title { font-weight: 700; line-height: 1.2; color: #000; max-width: 700px; margin: 0; }
/* Hero description */
.avc-hero-desc { color: rgba(0,0,0,0.68); line-height: 1.6; margin-bottom: 10px; max-width: 420px; }

/* Short-viewport desktops: reduce hero padding so content fits in 70vh */
@media (min-width: 992px) and (max-height: 700px) {
    .custom-section-height.desktop-70vh .responsive-padding.padding-large {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }
}
/* ── Demo video ── */
.sh-demo-video-wrap {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.14);
    overflow: hidden;
}
@media (max-width: 767px) {
    .sh-demo-video-wrap {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }
}
.sh-demo-thumb {
    position: relative;
    cursor: pointer;
    line-height: 0;
}
.sh-demo-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.sh-demo-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #F7941D;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sh-demo-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 4px 20px rgba(247,148,29,0.4);
}
.sh-demo-iframe {
    position: relative;
    padding-top: 56.25%;
}
.sh-demo-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sh-demo-caption {
    font-size: 0.82rem;
    color: rgba(0,0,0,0.5);
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* ── Responsive: all sections below hero ── */

/* Prevent inner-content table-display overflow on narrow viewports */
@media (max-width: 991px) {
    .inner-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    .content-block { width: 100% !important; box-sizing: border-box; }
}

/* Mobile: ensure content has proper breathing room */
@media (max-width: 767px) {
    .inner-content { 
        width: 100% !important; 
        max-width: 100% !important; 
        box-sizing: border-box;
        padding-left: clamp(8px, 2vw, 16px) !important;
        padding-right: clamp(8px, 2vw, 16px) !important;
    }
    .content-block { 
        width: 100% !important; 
        box-sizing: border-box;
    }
}

/* Tablet: scale down large headings */
@media (max-width: 991px) {
    .inner-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    
    .sh-section-h2               { font-size: 1.8rem !important; }
    .sh-stat-number              { font-size: 2.2rem !important; }
    .sh-stat-heading             { font-size: 0.95rem; }
    #demo [style*="font-size: 2.2rem"] { font-size: 1.8rem !important; }
    
    /* Tablet padding for sections */
    .fifty.ui.segment {
        padding-left: clamp(20px, 4vw, 36px) !important;
        padding-right: clamp(20px, 4vw, 36px) !important;
    }
    
    .container-fluid {
        padding-left: clamp(20px, 4vw, 28px) !important;
        padding-right: clamp(20px, 4vw, 28px) !important;
    }
}

/* Mobile: scale headings, fix padding, fix overflows */
@media (max-width: 767px) {
    /* Ensure all sections have proper horizontal padding */
    .fifty.ui.segment {
        padding-left: clamp(16px, 4vw, 32px) !important;
        padding-right: clamp(16px, 4vw, 32px) !important;
    }
    
    /* Global container-fluid responsive padding */
    .container-fluid {
        padding-left: clamp(16px, 4vw, 24px) !important;
        padding-right: clamp(16px, 4vw, 24px) !important;
    }
    
    /* All demo/content sections need breathing room */
    #demo,
    #problem-statement,
    #solutions,
    #key-features,
    #customer-data,
    #technology-standards,
    #customer-stories,
    #simulation-gallery,
    #avc-fit,
    #pricing,
    #faq,
    #call-to-action {
        padding-left: clamp(16px, 4vw, 32px) !important;
        padding-right: clamp(16px, 4vw, 32px) !important;
    }
    
    /* Section heading constraints for readability */
    .sh-section-h2 br,
    .sh-section-title br,
    .sh-section-intro br {
        display: none;
    }
    
    /* Section headings */
    .sh-section-h2               { font-size: 1.3rem !important; }
    .sh-section-title            { font-size: 1.15rem !important; }
    .sh-section-intro            { font-size: 0.84rem !important; }
    .sh-stat-number              { font-size: 1.85rem !important; }
    .sh-stat-heading             { font-size: 0.8rem !important; }
    .sh-stat-sub                 { font-size: 0.72rem; }

    /* Hide <br> inside headings & intros on mobile — let text reflow naturally */
    .sh-section-h2 br,
    .sh-section-h2 strong br,
    .sh-section-intro br         { display: none; }

    /* Demo heading (inline 2.2rem) */
    #demo [style*="font-size: 2.2rem"] { font-size: 1.3rem !important; line-height: 1.3 !important; }
    #demo p[style*="0.97rem"]    { font-size: 0.82rem !important; }
    #demo p br                   { display: none; }

    /* Customer data ±5% big stat */
    #customer-data [style*="font-size: 3rem"] { font-size: 1.9rem !important; }

    /* ── Problem section: proper mobile padding ── */
    #problem-statement > .row > .column {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ── Solutions section ── */
    #solutions [style*="font-size: 0.87rem"] { font-size: 0.80rem !important; }
    #solutions .sh-step-circle   { width: 30px; height: 30px; min-width: 30px; }
    #solutions .sh-step-circle > span { font-size: 0.82rem; }

    /* ── Simulation Outputs: remove extra container padding ── */
    #key-features .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

    /* Neutralize Semantic UI's nested grid negative margins so content
       fits within the container on mobile. */
    #key-features .inner-content > .ui.grid { margin-left: 0 !important; margin-right: 0 !important; }

    /* Comparison table: tighten cell padding on mobile for narrow columns */
    .avc-compare-table th,
    .avc-compare-table td { padding: 2px 4px !important; }

    /* ── CTA "Sound Familiar" section ── */
    #call-to-action .container-fluid { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    #call-to-action .ui.centered.grid { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    #call-to-action .ui.large.header  { font-size: 1.15rem !important; line-height: 1.3 !important; }
    #call-to-action .ui.large.header br { display: none; }
    #call-to-action .ten.wide.column  { width: 100% !important; padding-bottom: 1.25rem !important; }
    #call-to-action .six.wide.column  { width: 100% !important; }
    #call-to-action .six.wide.column > div { padding: 1rem !important; }
    #call-to-action .sh-cta-quote-card { padding: 0.4rem 0.6rem; gap: 0.45rem; }
    #call-to-action .sh-cta-quote-text { font-size: 0.62rem !important; }
    #call-to-action .sh-trust-badge   { font-size: 0.55em; padding: 0.1rem 0.4rem; }

    /* Gallery item text */
    .sh-sim-name                 { font-size: 0.75rem !important; }
    .sh-sim-meta                 { font-size: 0.68rem !important; }

    /* Pricing: $0 price label */
    #pricing [style*="font-size: 1.5rem"] { font-size: 1.2rem !important; }

    /* Prevent any inline max-width on small containers overflowing */
    [style*="max-width: 220px"] { max-width: 100% !important; }

    /* Card body text baseline */
    .sh-card-body                { font-size: 0.82rem !important; }
    .sh-story-body               { font-size: 0.62rem !important; }
    .sh-faq-question             { font-size: 0.82rem; }
    .sh-faq-answer               { font-size: 0.6rem; }

    /* ── All section cards: compact mobile padding ── */
    .responsive-padding.padding-small { padding: 0.65rem 0.85rem !important; }

    /* ── Stackable grid columns: consistent left-right spacing ── */
    .ui.stackable.grid > .row > .column { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}

/* Small mobile: further reduce headings */
@media (max-width: 480px) {
    .sh-section-h2               { font-size: 1.1rem !important; }
    .sh-section-title            { font-size: 1rem !important; }
    .sh-stat-number              { font-size: 1.6rem !important; }
    #demo [style*="font-size: 2.2rem"] { font-size: 1.1rem !important; }
    #customer-data [style*="font-size: 3rem"] { font-size: 1.65rem !important; }
    .sh-pricing-plan-name        { font-size: 0.95rem; }

    /* CTA: even tighter on small phones */
    #call-to-action .ui.large.header { font-size: 1rem !important; }
    #call-to-action .sh-cta-quote-text { font-size: 0.58rem !important; }
    
    /* Extra small mobile padding */
    .fifty.ui.segment {
        padding-left: clamp(12px, 3vw, 24px) !important;
        padding-right: clamp(12px, 3vw, 24px) !important;
    }
    
    .container-fluid {
        padding-left: clamp(12px, 3vw, 20px) !important;
        padding-right: clamp(12px, 3vw, 20px) !important;
    }
    
    /* Reduce grid gaps on small mobile */
    .sh-sim-grid { gap: 0.35rem; }
    .ui.stackable.grid > .row > .column { padding-left: 0.3rem !important; padding-right: 0.3rem !important; }
}

/* ==========================================================================
   AVC Demo Section
   ========================================================================== */
.avc-demo-grid { align-items: center; }
.avc-demo-text-col { display: flex !important; flex-direction: column; justify-content: center; }
.avc-demo-title { font-size: 2.2rem; line-height: 1.2; text-align: left; margin-bottom: 0.5rem; font-weight: 800 !important; }
.avc-demo-logo-img { height: 80px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; display: block !important; margin: 0 0 0.1rem 0 !important; }
@media (min-width: 992px) { .avc-demo-logo-img { height: 100px !important; } }
@media (max-width: 767px) { .avc-demo-logo-img { height: 75px !important; } }
@media (max-width: 380px) { .avc-demo-logo-img { height: 60px !important; } }
.avc-demo-desc { font-size: 0.81rem !important; color: rgba(0,0,0,0.6); line-height: 1.65; text-align: left; margin-bottom: 0; }
.avc-demo-video-wrap { max-width: 100%; }
#demo .container-fluid.avc-demo-container { display: block !important; }
#demo .container-fluid.avc-demo-container > .content-block { display: block !important; width: 100% !important; }
#demo .container-fluid.avc-demo-container > .content-block > .inner-content { display: block !important; width: 100% !important; max-width: 100% !important; }
@media (min-width: 992px) {
    .avc-demo-container { max-width: 1200px !important; padding-left: 1rem !important; padding-right: 1rem !important; margin-left: auto !important; margin-right: auto !important; }
    #demo.fifty.ui.segment { padding-left: 0 !important; padding-right: 0 !important; }
    .avc-demo-video-wrap { transform: none !important; }
    .avc-demo-title { font-size: 2.6rem !important; }
    .avc-demo-desc { font-size: 1rem !important; max-width: 32rem; }
    .avc-demo-text-col { padding-left: 2rem !important; }
}