:root {
    --conny-green: #125687;
    --conny-green-dark: #125687;
    --conny-blue-light: #7dbbe7;
    --conny-black: #1a1a1a;
    --conny-charcoal: #242424;
    --conny-grey: #303030;
    --conny-white: #ffffff;
    --conny-mist: #f4f6f5;
    --conny-line: #dfe4e1;
}

html { width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; scroll-behavior: smooth; scroll-padding-top: 82px; }
body { width: 100%; max-width: 100%; color: var(--conny-black); background: var(--conny-white); font-family: "Source Sans 3", Arial, sans-serif; font-size: 1.05rem; line-height: 1.65; overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}
.cn-page { font-family: MiSans, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; letter-spacing: 0; }
.cn-page .navbar .nav-link { font-weight: 500; letter-spacing: 0; }
.cn-page .hero-typing { font-family: MiSans, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 300; letter-spacing: 0; }
.cn-page .hero h1,
.cn-page .section-title,
.cn-page .milestones h3,
.cn-page .industry-modal h2,
.cn-page .project-card-copy h3,
.cn-page .regional-presence h3 { font-weight: 600; letter-spacing: -.02em; }
.cn-page .business-card h3,
.cn-page .credential-card h3,
.cn-page .regional-card h4 { font-weight: 600; }
a { color: inherit; }
.skip-link { position: fixed; top: -80px; left: 1rem; z-index: 1100; padding: .75rem 1rem; color: var(--conny-white); background: var(--conny-green); transition: top .2s ease; }
.skip-link:focus { top: 1rem; }
.navbar { min-height: 82px; visibility: hidden; opacity: 0; pointer-events: none; background: rgba(26, 26, 26, .68); border-bottom: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(-100%); transition: min-height .35s ease, opacity .35s ease, transform .35s ease, visibility .35s ease; }
.navbar.navbar-scrolled { min-height: 70px; visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.navbar-brand img { display: block; width: 155px; height: auto; }
.navbar .nav-link { color: rgba(255, 255, 255, .82); font-size: .96rem; font-weight: 600; letter-spacing: .02em; padding: .6rem .7rem !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--conny-white); }
.navbar .nav-link:not(.language-link)::after { content: ""; display: block; width: 0; height: 2px; margin-top: 3px; background: var(--conny-green); transition: width .2s ease; }
.navbar .nav-link:not(.language-link):hover::after, .navbar .nav-link:not(.language-link):focus::after { width: 100%; }
@media (min-width: 992px) { .navbar .language-link { position: relative; top: -1px; } }
.btn { border-radius: 0; font-weight: 700; letter-spacing: .015em; padding: .75rem 1.25rem; }
.btn-lg { padding: .95rem 1.45rem; font-size: 1rem; }
.btn-conny { color: var(--conny-white); background: var(--conny-green); border-color: var(--conny-green); }
.btn-conny:hover, .btn-conny:focus { color: var(--conny-white); background: var(--conny-green-dark); border-color: var(--conny-green-dark); }

.hero { position: relative; width: 100%; height: 100vh; min-height: 100vh; overflow: hidden; color: var(--conny-white); background: var(--conny-black); }
.hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; transform: translate(-50%, -50%); }
.hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(17, 19, 20, .6); }
.hero-copy { padding-top: 0; }
.hero-state-shell { position: relative; min-height: 470px; }
.hero-brand-state, .hero-detail-state { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.hero-brand-state { align-items: center; opacity: 1; visibility: visible; transform: translateY(0); }
.hero-detail-state { margin: 0; padding-top: 70px; padding-right: 0; padding-left: 0; opacity: 0; visibility: hidden; transform: translateX(-48px); }
.hero.hero-scrolled .hero-brand-state { opacity: 0; visibility: hidden; transform: translateY(-24px); }
.hero.hero-scrolled .hero-detail-state { opacity: 1; visibility: visible; transform: translateX(0); }
.eyebrow, .section-kicker { color: var(--conny-green); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero .eyebrow,
.platform-section .section-kicker,
.contact-section .section-kicker,
.capability-section .section-kicker,
.regional-presence .section-kicker,
.regional-card-heading > span { color: var(--conny-blue-light); }
.hero h1 { max-width: 760px; font-size: clamp(3.25rem, 8vw, 6.4rem); line-height: .94; letter-spacing: -.045em; }
.hero-detail-state h1 { font-size: clamp(3.1rem, min(8vw, 10vh), 6.4rem); }
.hero-brand-logo { display: block; width: min(100%, 600px); height: auto; margin: 0 auto 1.5rem; animation: hero-logo-reveal 1.6s ease both; }
.hero-typing { min-height: 3.2em; max-width: 760px; margin: 0 auto; color: rgba(255, 255, 255, .92); font-family: "Source Sans Pro", "Noto Sans SC", sans-serif; font-size: 36px; font-weight: 300; line-height: 1.25; letter-spacing: -1px; white-space: pre-line; }
.hero-typing { max-width: 100%; white-space: normal; }
.hero-typing-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: .12em; background: var(--conny-white); vertical-align: -.12em; animation: hero-cursor-blink .7s steps(1) infinite; }
@keyframes hero-logo-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-brand-logo, .hero-typing-cursor { animation: none; } }
.hero-lead { max-width: 680px; color: rgba(255, 255, 255, .82); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, .75); font-size: .75rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--conny-blue-light); }
.scroll-cue span { width: 1px; height: 38px; margin-bottom: 8px; background: linear-gradient(var(--conny-green), transparent); }
.hero-detail-cue { opacity: 0; visibility: hidden; transform: translate(-50%, 18px); transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.hero.hero-scrolled .hero-detail-cue { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.stats-strip { position: relative; z-index: 2; color: var(--conny-white); background: var(--conny-charcoal); }
.stat-item { min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem .75rem; border-right: 1px solid rgba(255, 255, 255, .1); }
.stat-item:last-child { border-right: 0; }
.stat-item strong { color: var(--conny-green); font-size: clamp(2rem, 4vw, 3rem); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-item span { margin-top: .65rem; color: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.about-section { padding: 105px 0 115px; background: var(--conny-white); }
.about-container { max-width: 1540px; padding-right: clamp(1.5rem, 3vw, 3rem); padding-left: clamp(1.5rem, 3vw, 3rem); }
.about-layout { align-items: stretch; }
.about-media-wrap { display: flex; }
.about-media { position: relative; width: 100%; min-height: 0; overflow: hidden; background: var(--conny-charcoal); border-radius: 6px; box-shadow: 0 18px 45px rgba(20, 35, 27, .14); }
.about-media img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.about-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.75rem, 5vw, 5.75rem); padding-right: 0; }
.about-copy .section-title { margin-bottom: 0; }
.about-title-rule { display: block; width: 76px; height: 3px; margin: 2rem 0 2.1rem; background: var(--conny-green); }
.about-copy .section-lead { max-width: 700px; margin-bottom: 1.2rem; }
.about-copy > p:last-of-type { max-width: 700px; margin-bottom: 0; color: #444a46; }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--conny-line); }
.about-stat { min-width: 0; padding: 0 1rem; text-align: center; border-left: 1px solid var(--conny-line); }
.about-stat:first-child { padding-left: 0; border-left: 0; }
.about-stat:last-child { padding-right: 0; }
.about-stat-icon { display: block; margin-bottom: 1rem; color: var(--conny-green); font-size: 2.15rem; font-weight: 400; line-height: 1; }
.about-stat strong { display: block; color: var(--conny-green); font-size: clamp(1.65rem, 2.4vw, 2.3rem); font-variant-numeric: tabular-nums; line-height: 1; }
.about-stat span { display: block; margin-top: .65rem; color: #5d645f; font-size: .65rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase; }
.section-pad { padding: 110px 0; }
.section-title { max-width: 760px; margin-bottom: 1.3rem; font-size: clamp(2.35rem, 5vw, 4.15rem); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.section-lead { color: #5d645f; font-size: 1.2rem; line-height: 1.6; }
.image-frame { position: relative; overflow: hidden; background: var(--conny-charcoal); }
.image-frame-tall { width: 100%; min-height: 0; aspect-ratio: 3 / 4; }
.image-frame > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.milestones { margin-top: 90px; padding-top: 65px; border-top: 1px solid var(--conny-line); }
.milestones h3 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.15rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.milestone-hint { color: #717873; font-size: .9rem; font-weight: 600; letter-spacing: .03em; }
.milestone-scroller { position: relative; overflow: visible; }
.milestone-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(235px, 1fr); gap: 0; margin: 0; padding: 1.5rem 2% 1.35rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); scrollbar-color: transparent transparent; scrollbar-width: thin; list-style: none; }
.milestones:hover .milestone-track, .milestones:focus-within .milestone-track { scrollbar-color: var(--conny-green) var(--conny-line); }
/* Keep scrollbar space reserved so revealing it does not move the timeline. */
@supports not (scrollbar-color: transparent transparent) {
    .milestone-track::-webkit-scrollbar { height: 6px; }
    .milestone-track::-webkit-scrollbar-track, .milestone-track::-webkit-scrollbar-thumb { background: transparent; }
    .milestones:hover .milestone-track::-webkit-scrollbar-track, .milestones:focus-within .milestone-track::-webkit-scrollbar-track { background: var(--conny-line); }
    .milestones:hover .milestone-track::-webkit-scrollbar-thumb, .milestones:focus-within .milestone-track::-webkit-scrollbar-thumb { background: var(--conny-green); border-radius: 3px; }
}
.milestone-scroll-control { position: absolute; z-index: 3; top: calc(1.5rem + 2px); transform: none; width: 42px; height: 42px; padding: 0; color: var(--conny-white); background: var(--conny-green); border: 0; border-radius: 50%; box-shadow: 0 8px 22px rgba(18, 86, 135, .28); font-size: 1.15rem; line-height: 1; opacity: .92; transition: opacity .25s ease, transform .25s ease, background .25s ease; cursor: pointer; }
.milestone-scroll-control:hover, .milestone-scroll-control:focus-visible { opacity: 1; background: var(--conny-green-dark); transform: scale(1.06); }
.milestone-scroll-control:focus-visible { outline: 2px solid var(--conny-green); outline-offset: 3px; }
.milestone-scroll-control.is-at-edge { opacity: 0; pointer-events: none; }
.milestone-scroll-left { left: 0; }
.milestone-scroll-right { right: 0; }
.milestone-track li { position: relative; min-height: 190px; padding: 3rem 2.2rem 1.4rem 0; border-top: 2px solid var(--conny-line); scroll-snap-align: start; }
.milestone-track li::before { content: ""; position: absolute; z-index: 2; top: -8px; left: 0; width: 13px; height: 13px; background: var(--conny-green); border: 3px solid var(--conny-white); border-radius: 50%; box-shadow: 0 0 0 2px var(--conny-green); transform-origin: center; transition: transform .3s ease, box-shadow .3s ease; }
.milestone-track li::after { content: ""; position: absolute; z-index: 0; top: -18px; left: -28px; width: 220px; height: 210px; background: radial-gradient(circle at 34px 18px, rgba(18, 86, 135, .28) 0%, rgba(18, 86, 135, .12) 32%, rgba(18, 86, 135, .05) 52%, transparent 74%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.milestone-track time { position: relative; z-index: 1; display: block; width: fit-content; margin-bottom: .75rem; color: var(--conny-green); font-size: 1.45rem; font-weight: 700; line-height: 1; transition: transform .3s ease, color .3s ease; }
.milestone-track p { position: relative; z-index: 1; max-width: 215px; margin: 0; color: #5f6661; font-size: .93rem; line-height: 1.5; }
.milestone-track li:hover::before { transform: scale(1.45); box-shadow: 0 0 0 6px rgba(18, 86, 135, .16); }
.milestone-track li:hover::after { opacity: 1; }
.milestone-track li:hover time { transform: translateX(6px); }
.milestones.is-animated .milestone-track li { opacity: 0; transform: translateY(22px); transition: opacity .55s ease var(--milestone-delay, 0ms), transform .55s ease var(--milestone-delay, 0ms); }
.milestones.is-animated .milestone-track li.is-visible { opacity: 1; transform: translateY(0); }

.quote-section { position: relative; overflow: hidden; padding: 110px 0; color: var(--conny-white); background: #000; }
/* Keep the portrait and quote in one centered composition on wide screens. */
.quote-section::before { content: ""; position: absolute; inset: 0 max(0px, calc((100% - 1440px) / 2)) 0 auto; height: 100%; aspect-ratio: 1672 / 941; background: url('../assets/img/quote-team.png') right center / auto 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 32%, #000 90%, transparent); opacity: .78; }
.quote-section::after { content: ""; position: absolute; inset: 0 max(0px, calc((100% - 1440px) / 2)); background: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, .98) 42%, rgba(0, 0, 0, .88) 48%, rgba(0, 0, 0, .58) 58%, rgba(0, 0, 0, .28) 70%, rgba(0, 0, 0, .08) 84%, transparent 100%); pointer-events: none; }
.quote-section .container { position: relative; z-index: 1; }
.quote-mark { height: 55px; color: var(--conny-green); font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; }
.quote-section blockquote { margin: 0; font-size: clamp(1.8rem, 4vw, 3.35rem); font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
.quote-copy { font-size: .9em; }
.quote-section blockquote img { height: 34px; width: auto; vertical-align: baseline; }
.quote-credit { margin: 2rem 0 0; color: rgba(255, 255, 255, .65); font-size: .92rem; letter-spacing: .08em; text-transform: none; }

.business-section { background: var(--conny-mist); }
.business-card { position: relative; padding: 2rem 1.6rem 1.75rem; overflow: hidden; background: var(--conny-white); border-bottom: 3px solid transparent; box-shadow: 0 12px 35px rgba(20, 35, 27, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.business-card:hover { z-index: 2; border-color: var(--conny-green); box-shadow: 0 20px 46px rgba(20, 35, 27, .16); transform: translateY(-7px) scale(1.025); }
.business-card img { display: block; width: calc(100% + 3.2rem); height: 150px; margin: -2rem -1.6rem 1.55rem; object-fit: cover; object-position: center; transition: transform .35s ease; }
.business-card:hover img { transform: scale(1.06); }
.business-card > span { position: absolute; top: .8rem; right: .9rem; padding: .22rem .45rem; color: var(--conny-white); background: rgba(26, 26, 26, .68); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.business-card h3 { min-height: 2.4em; margin-bottom: .8rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.business-card p { margin: 0; color: #666d69; font-size: .94rem; line-height: 1.5; }
.business-card-trigger { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; cursor: pointer; background: transparent; border: 0; }
.business-card-trigger:focus-visible { outline: 3px solid var(--conny-green); outline-offset: -5px; }

.industry-modal .modal-dialog { max-width: 920px; }
.industry-modal .modal-content { overflow: hidden; background: var(--conny-white); border: 0; border-radius: 0; box-shadow: 0 28px 80px rgba(0, 0, 0, .3); }
.industry-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 4; padding: .7rem; background-color: rgba(255, 255, 255, .92); border-radius: 50%; box-shadow: 0 4px 18px rgba(0, 0, 0, .14); opacity: 1; }
.industry-modal-media { min-height: 470px; overflow: hidden; background: var(--conny-charcoal); }
.industry-modal-media img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; }
/* Trim the control-room header signage in the detail view. */
.industry-modal-media img[src$="building-control-room.jpg"] { transform: scale(1.12); transform-origin: center bottom; }
.industry-modal .modal-body { padding: 3.25rem 3rem; }
.industry-modal h2 { margin-bottom: 1.2rem; font-size: clamp(2.25rem, 5vw, 3.7rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.industry-modal-summary { color: #5d645f; font-size: 1.05rem; line-height: 1.65; }
.industry-modal h3 { margin: 2rem 0 .9rem; font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.industry-modal-list { margin: 0; padding: 0; list-style: none; }
.industry-modal-list li { position: relative; padding: .65rem 0 .65rem 1.35rem; border-top: 1px solid var(--conny-line); color: #444a46; }
.industry-modal-list li::before { content: ""; position: absolute; top: 1.22rem; left: 0; width: 7px; height: 7px; background: var(--conny-green); }

.platform-section { position: relative; overflow: hidden; padding: 120px 0 135px; color: var(--conny-white); background: radial-gradient(circle at 82% 18%, rgba(18, 86, 135, .24), transparent 32%), linear-gradient(135deg, #0b1015 0%, #14202b 58%, #0d1720 100%); }
.platform-section::before { content: ""; position: absolute; inset: 0; opacity: .36; 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: 46px 46px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000); mask-image: linear-gradient(90deg, transparent, #000 45%, #000); pointer-events: none; }
.platform-section .container { position: relative; z-index: 1; }
.platform-section .section-title { max-width: 680px; margin-bottom: 1.4rem; font-size: 2.4rem; }
.platform-title { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.platform-wordmark { display: block; width: min(100%, 500px); height: auto; filter: brightness(1.45) saturate(1.12) drop-shadow(0 10px 18px rgba(0, 0, 0, .26)); }
.platform-lead { max-width: 680px; margin-bottom: 1.75rem; color: rgba(255, 255, 255, .72); font-size: 1.1rem; line-height: 1.6; }
.platform-benefits { max-width: 620px; margin: 0 0 2.25rem; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .13); list-style: none; }
.platform-benefits li { display: grid; grid-template-columns: 42px 1fr; gap: .8rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, .13); }
.platform-benefits li > span { color: var(--conny-blue-light); font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.platform-benefits strong { display: block; margin-bottom: .15rem; font-size: 1.05rem; }
.platform-benefits p { margin: 0; color: rgba(255, 255, 255, .62); font-size: .94rem; line-height: 1.5; }
.platform-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.platform-visual { position: relative; max-width: 680px; margin: 0 auto; padding: 1rem 0; }
.platform-preview { position: relative; display: block; }
.platform-product-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 35px rgba(0, 0, 0, .38)); transition: transform .35s ease, filter .35s ease; }
.platform-preview:hover .platform-product-image { filter: drop-shadow(0 36px 42px rgba(0, 0, 0, .46)); transform: translateY(-8px); }

.projects-section { padding: 110px 0 115px; overflow: hidden; background: var(--conny-white); border-bottom: 1px solid var(--conny-line); }
.projects-heading { margin-bottom: 3.5rem; }
.projects-heading .section-title { max-width: 850px; margin-bottom: 0; }
.projects-marquee { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); scrollbar-color: transparent transparent; scrollbar-width: thin; }
.projects-marquee:hover, .projects-marquee:focus-visible, .projects-marquee:focus-within { scrollbar-color: var(--conny-green) var(--conny-line); }
.projects-marquee:focus-visible { outline: 2px solid var(--conny-green); outline-offset: 5px; }
.projects-marquee::-webkit-scrollbar { height: 10px; }
.projects-marquee::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
.projects-marquee::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.projects-marquee:hover::-webkit-scrollbar-track, .projects-marquee:focus-visible::-webkit-scrollbar-track, .projects-marquee:focus-within::-webkit-scrollbar-track { background: var(--conny-line); }
.projects-marquee:hover::-webkit-scrollbar-thumb, .projects-marquee:focus-visible::-webkit-scrollbar-thumb, .projects-marquee:focus-within::-webkit-scrollbar-thumb { background: var(--conny-green); }
.projects-marquee:hover::-webkit-scrollbar-thumb:hover, .projects-marquee:focus-visible::-webkit-scrollbar-thumb:hover, .projects-marquee:focus-within::-webkit-scrollbar-thumb:hover { background: var(--conny-green-dark); }
.projects-marquee-track { display: flex; width: max-content; }
.projects-marquee-group { display: flex; flex-shrink: 0; gap: 1.5rem; padding-right: 1.5rem; }
.project-card { position: relative; flex: 0 0 clamp(420px, 48vw, 640px); height: clamp(300px, 27vw, 390px); margin: 0; overflow: hidden; color: var(--conny-white); background: var(--conny-charcoal); box-shadow: 0 18px 45px rgba(20, 35, 27, .14); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .65, .25, 1); }
.project-card:hover img { transform: scale(1.04); }
.project-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .88) 100%); }
.project-card-copy { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: end; padding: 2rem 2.25rem 2.25rem; }
.project-card-copy p { margin: 0 0 .35rem; color: rgba(255, 255, 255, .68); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.project-card-copy h3 { margin: 0 0 .45rem; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.project-system { display: block; color: rgba(255, 255, 255, .82); font-size: 1rem; }
.project-system abbr { color: var(--conny-white); font-weight: 700; text-decoration: none; }

/* Mission, vision and core values */
.capability-section { color: var(--conny-white); background: var(--conny-charcoal); }
.capability-section .section-kicker, .purpose-card > i, .value-card > i { color: var(--conny-blue-light); }
.purpose-heading { max-width: 760px; margin-bottom: 3rem; }
.purpose-heading .section-title { margin-bottom: 0; }
.purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.purpose-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2.5rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-top: 3px solid var(--conny-green); }
.purpose-card > i { color: var(--conny-blue-light); font-size: 2.2rem; line-height: 1.2; }
.purpose-card h3 { margin: 0 0 1rem; font-size: 1.65rem; font-weight: 600; }
.purpose-card p, .value-card p { margin: 0; color: rgba(255, 255, 255, .76); line-height: 1.7; }
.core-values { margin-top: 3.5rem; }
.core-values > h3 { margin-bottom: 1.5rem; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.value-card { padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.value-card > i { display: block; margin-bottom: 1.25rem; color: var(--conny-blue-light); font-size: 1.7rem; line-height: 1; }
.value-card h4 { margin: 0 0 .75rem; font-size: 1.35rem; font-weight: 600; }
.value-card p { font-size: 1rem; }

.credential-card { padding: 2.5rem 2rem; text-align: center; background: var(--conny-white); border: 1px solid var(--conny-line); }
.credentials-section .section-title, .credentials-section .section-lead { margin-right: auto; margin-left: auto; }
.credentials-section .section-title { max-width: none; font-size: clamp(2.35rem, 4.5vw, 4.15rem); }
.credentials-section .section-lead { max-width: 760px; }
.credential-card img { width: 100%; height: 200px; margin-bottom: 1.4rem; object-fit: contain; }
.credential-logo { transform-origin: center; }
.credential-logo--iso { transform: scale(.88); }
.credential-logo--iso45001 { transform: scale(.72); }
.credential-logo--iso27001 { transform: scale(.63); }
.credential-card2 img { width: 100%; height: 200px; margin-bottom: 1.4rem; object-fit: contain; }
.credential-card h3 { font-size: 1.25rem; font-weight: 700; }
.credential-card p { margin: 0; color: #727874; }
.partners-section { background: var(--conny-mist); }
/* Frame each logo by its visible artwork, not the source image's empty margins. */
.partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--conny-line); gap: 1px; border: 1px solid var(--conny-line); }
.partner-grid > div { min-width: 0; min-height: 155px; display: grid; place-items: center; padding: 1.75rem; background: var(--conny-white); }
.partner-logo { position: relative; display: block; width: min(100%, 220px); height: 80px; overflow: hidden; transition: transform .2s ease; }
.partner-grid .partner-logo img { position: absolute; top: 50%; left: var(--art-left); width: var(--art-width); height: auto; max-width: none; max-height: none; transform: translateY(var(--art-shift)); }
.partner-grid > div:hover .partner-logo { transform: scale(1.04); }
.partner-logo--honeywell { --art-width: 92.6216%; --art-left: 3.7012%; --art-shift: -50.0000%; }
.partner-logo--mitsubishi_electric { --art-width: 90.3301%; --art-left: 4.8350%; --art-shift: -49.8721%; }
.partner-logo--schneider_electric { --art-width: 88.2246%; --art-left: 5.9911%; --art-shift: -49.8708%; }
.partner-logo--weidmuller { --art-width: 111.9235%; --art-left: -5.9617%; --art-shift: -50.2347%; }
.partner-logo--himel { --art-width: 87.2592%; --art-left: 6.3879%; --art-shift: -50.0000%; }
.partner-logo--trend_021c { --art-width: 89.5694%; --art-left: 5.6818%; --art-shift: -49.5327%; }
.partner-logo--atop { --art-width: 82.2394%; --art-left: 8.8803%; --art-shift: -54.2969%; }
.partner-logo--faraday { --art-width: 98.9760%; --art-left: 0.6198%; --art-shift: -53.6532%; }

.contact-section { position: relative; padding: 120px 0; color: var(--conny-white); background: url('../assets/img/mbs.jpg') center/cover no-repeat; }
.contact-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 26, 26, .96), rgba(26, 26, 26, .73)); }
.contact-lead { max-width: 660px; margin-bottom: 2rem; color: rgba(255, 255, 255, .72); font-size: 1.25rem; }
.contact-card { margin: 0; padding: 2.2rem; background: rgba(26, 26, 26, .88); border-top: 4px solid var(--conny-green); backdrop-filter: blur(8px); }
.contact-card h3 { margin-bottom: 1.2rem; font-size: 1.35rem; }
.contact-card p { color: rgba(255, 255, 255, .72); }
.contact-card a { display: block; width: fit-content; margin-top: .7rem; color: var(--conny-white); font-style: normal; text-decoration-color: var(--conny-green); text-underline-offset: 4px; }
.regional-presence { margin-top: 80px; padding-top: 55px; border-top: 1px solid rgba(255, 255, 255, .18); }
.regional-presence h3 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.025em; }
.regional-presence .row > div > p:not(.section-kicker) { color: rgba(255, 255, 255, .65); }
.regional-card { position: relative; min-height: 330px; overflow: hidden; background: rgba(26, 26, 26, .82); border: 1px solid rgba(255, 255, 255, .13); border-top: 3px solid var(--conny-green); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .35s ease, transform .35s ease, box-shadow .35s ease; }
.regional-card:hover { background: rgba(36, 36, 36, .94); box-shadow: 0 18px 35px rgba(0, 0, 0, .28); transform: translateY(-6px); }
.regional-card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 1.45rem; background: rgba(26, 26, 26, .16); transition: opacity .4s ease, transform .4s ease; }
.regional-map { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--conny-grey); opacity: 0; transform: scale(1.08); transition: opacity .5s ease, transform .7s ease; }
.regional-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .16)); }
.regional-map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(.85) contrast(1.05); }
.regional-map-link { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; text-decoration: none; transition: opacity .35s ease; }
.regional-map-link span { padding: .6rem .9rem; color: var(--conny-white); background: rgba(18, 86, 135, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
.regional-map-link:focus-visible { opacity: 1; pointer-events: auto; outline: 3px solid var(--conny-white); outline-offset: -5px; }
@media (hover: hover) and (pointer: fine) {
    .regional-card:hover .regional-map { opacity: 1; transform: scale(1); }
    .regional-card:hover .regional-card-content { opacity: 0; transform: translateY(12px); }
    .regional-card:hover .regional-map-link { opacity: 1; pointer-events: auto; }
}
.regional-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.regional-card-heading img { width: 52px; height: 52px; object-fit: contain; }
.regional-card-heading > span { color: var(--conny-blue-light); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.regional-card h4 { min-height: 3.2em; margin-bottom: .85rem; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.regional-card p { flex-grow: 1; margin-bottom: 1.1rem; color: rgba(255, 255, 255, .62); font-size: .87rem; line-height: 1.5; }
.regional-card-content > a { width: fit-content; color: var(--conny-white); font-size: .87rem; font-weight: 600; text-decoration-color: var(--conny-green); text-underline-offset: 4px; }
.associate-card { border-top-color: rgba(255, 255, 255, .48); }
.associate-card .regional-card-heading > span { color: rgba(255, 255, 255, .7); }
.site-footer { padding: 55px 0 25px; color: rgba(255, 255, 255, .62); background: #111; font-size: .9rem; }
.footer-logo { width: 140px; }
.site-footer a { margin-left: 1rem; color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-footer a:hover { color: var(--conny-green); }
.footer-bottom { margin-top: 35px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; }

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
    .navbar-collapse { padding: 1rem 0 1.25rem; }
    .navbar .btn { margin-top: .6rem; }
    .hero { height: 100vh; min-height: 100vh; }
    .hero-detail-state { margin-left: 0; }
    .scroll-cue { display: none; }
    .about-section { padding: 85px 0 95px; }
    .about-media { min-height: 0; aspect-ratio: auto; }
    .about-copy { padding: 4rem 0 0; }
    .section-pad { padding: 85px 0; }
    .platform-section { padding: 90px 0 105px; }
    .platform-visual { max-width: 780px; margin: 1.5rem auto 0; }
    .projects-section { padding: 85px 0 90px; }
    .projects-heading { margin-bottom: 2.75rem; }
    .project-card { flex-basis: min(76vw, 580px); height: clamp(290px, 46vw, 360px); }
    .purpose-card { padding: 1.75rem; gap: 1rem; }
    .values-grid { gap: 1.5rem; }
    .partner-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2n) { border-right: 0; }
}

@media (max-width: 575.98px) {
    body { font-size: 1rem; }
    .navbar { min-height: 70px; }
    .navbar-brand img { width: 128px; }
    .hero { height: 100vh; min-height: 100vh; }
    .hero-copy { padding-top: 50px; }
    .hero-detail-state { padding-top: 0; }
    .hero-typing { font-size: 32px; }
    .hero h1 { font-size: clamp(3rem, 16vw, 4.4rem); }
    .hero .btn { width: 100%; }
    .about-section { padding: 70px 0 75px; }
    .about-container { padding-right: 1.25rem; padding-left: 1.25rem; }
    .about-media { aspect-ratio: auto; }
    .about-copy { padding-top: 3rem; }
    .about-title-rule { margin: 1.5rem 0 1.6rem; }
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.25rem; padding-top: 0; border-top: 0; }
    .about-stat { padding: 1.25rem .75rem; border-top: 1px solid var(--conny-line); }
    .about-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
    .about-stat:nth-child(even) { padding-right: 0; }
    .about-stat strong { font-size: 1.9rem; }
    .stat-item { min-height: 130px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .stat-item strong { font-size: 2rem; }
    .stat-item span { font-size: .68rem; }
    .section-pad { padding: 70px 0; }
    .platform-section { padding: 75px 0 85px; }
    .platform-lead { font-size: 1.05rem; }
    .platform-wordmark { width: min(100%, 330px); }
    .platform-actions .btn { width: 100%; }
    .platform-visual { margin-top: .75rem; padding: .5rem 0; }
    .projects-section { padding: 70px 0 75px; }
    .projects-heading { margin-bottom: 2.25rem; }
    .projects-marquee { overscroll-behavior-x: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: auto; }
    .projects-marquee-group { gap: 1rem; padding-right: 0; }
    .projects-marquee-group[aria-hidden="true"] { display: none; }
    .project-card { flex-basis: 86vw; height: clamp(280px, 76vw, 330px); scroll-snap-align: start; scroll-snap-stop: always; }
    .project-card:last-child { scroll-snap-align: end; }
    .project-card-copy { grid-template-columns: 34px 1fr; gap: .75rem; padding: 1.5rem; }
    .project-card-copy h3 { font-size: clamp(1.8rem, 9vw, 2.15rem); }
    .project-system { font-size: .9rem; }
    .industry-modal .modal-dialog { margin: .75rem; }
    .industry-modal-media { min-height: 220px; }
    .industry-modal-media img { min-height: 220px; max-height: 260px; }
    .industry-modal .modal-body { padding: 2.25rem 1.5rem; }
    .milestones { margin-top: 65px; padding-top: 45px; }
    .milestone-hint { display: none; }
    .milestone-scroll-control { display: none; }
    .milestone-track { display: block; overflow: visible; padding: .25rem 0 0 1.5rem; -webkit-mask-image: none; mask-image: none; }
    .milestone-track li { min-height: 0; padding: 0 0 2.2rem 1.5rem; border-top: 0; border-left: 2px solid var(--conny-line); }
    .milestone-track li:last-child { padding-bottom: 0; }
    .milestone-track li::before { top: .2rem; left: -7px; }
    .milestone-track li::after { display: none; }
    .milestone-track p { max-width: none; }
    .quote-section { padding: 0 0 56px; }
    .quote-section::before { position: relative; display: block; inset: auto; width: 100%; height: clamp(260px, 80vw, 380px); aspect-ratio: auto; background-position: right center; opacity: 1; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
    .quote-section::after { display: none; }
    .quote-section .container { padding-right: 24px; padding-left: 24px; }
    .quote-section blockquote { position: relative; }
    .quote-mark { height: auto; }
    .quote-mark-open { display: block; margin-bottom: .1rem; }
    .quote-copy { display: block; padding-right: 1.5rem; }
    .quote-mark-close { position: absolute; right: 0; bottom: -.15rem; font-size: 3.4rem; line-height: .7; }
    .purpose-heading { margin-bottom: 2rem; }
    .purpose-grid, .values-grid { grid-template-columns: 1fr; }
    .purpose-card { padding: 1.5rem; }
    .core-values { margin-top: 2.5rem; }
    .contact-section { padding: 85px 0; }
    .regional-presence { margin-top: 60px; padding-top: 45px; }
    .partner-grid > div { min-height: 120px; padding: 1.2rem; }
    .partner-logo { height: 64px; }
    .site-footer a { display: block; margin: .5rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
    .hero-video { display: none; }
    .hero { background: var(--conny-black) url('../assets/img/videoWallpaper.png') center/cover no-repeat; }
    .projects-marquee { -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
}