/* Generated by `npm run build` from packages/brand/css/system.css
 * and sites/group/styles/site.css. Do not edit this file. */

/* ═══════════════════════════════════════════════════════════════════
   Swiss Global — shared design system

   The single source of truth for the group's visual language: type,
   colour, spacing, and every component the sites have in common.
   Do not edit a generated sites/<site>/assets/site.css — edit this
   file, or the site's own styles/site.css, then run `npm run build`.

   Two hooks let a site differ without forking the system:
     --hero-image   the hero photograph, set per site
     the tokens in :root, which a site may override in styles/site.css
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'SwissEdges';
    src: url('/fonts/SwissEdges-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}

:root {
    --red: #E60005;
    --rd: #C40004;
    --blk: #0A0A0A;
    --d1: #080808;
    --d2: #0F0F0F;
    --d3: #161616;
    --wht: #FFF;
    --off: #F6F5F2;
    --off2: #ECEAE6;
    --stone: #E2E0DB;
    --g1: #5A5A5A;
    --g2: #3D3D3D;
    --g3: #999;
    --display: 'SwissEdges', 'Inter', sans-serif;
    --body: 'Inter', -apple-system, system-ui, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --sec: clamp(100px, 12vw, 180px);
    --pad: clamp(24px, 5vw, 80px);
    --wrap: 1080px;
    --wrap-w: 1260px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 80px }
body {
    font-family: var(--body); background: var(--off); color: var(--blk);
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}
::selection { background: var(--red); color: var(--wht) }
img { display: block; max-width: 100%; height: auto }
.pad { padding-left: var(--pad); padding-right: var(--pad) }
.mx { max-width: var(--wrap); margin: 0 auto }
.mx-w { max-width: var(--wrap-w); margin: 0 auto }

/* ═══════════════ NAV ═══════════════ */
nav#nv {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: 72px; display: flex; align-items: center; justify-content: space-between;
    transition: all .6s var(--ease)
}
nav#nv.on {
    background: rgba(255,255,255,.78); backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border-bottom: 1px solid rgba(0,0,0,.06)
}
nav#nv.on .n-logo-text { color: var(--blk) }
nav#nv.on .n-links a { color: rgba(10,10,10,.65) }
nav#nv.on .n-links a:hover { color: var(--blk) }
nav#nv.on .n-links .n-cta { color: var(--wht) !important }
.n-logo {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; transition: opacity .3s
}
.n-logo:hover { opacity: .8 }
.n-logo img {
    height: 24px; width: auto; max-width: 140px;
    object-fit: contain; border-radius: 2px; opacity: .9
}
.n-logo-text {
    font-family: var(--display); font-weight: 400; font-size: 13px;
    letter-spacing: 3px; text-transform: uppercase; color: var(--wht);
    transition: color .4s var(--ease)
}
.n-links { display: flex; align-items: center; gap: 36px }
.n-links a {
    font-family: var(--body); font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,.6); text-decoration: none;
    transition: color .3s; letter-spacing: .8px; text-transform: uppercase
}
.n-links a:hover { color: var(--wht) }
.n-links .n-cta {
    color: var(--wht) !important; background: var(--red);
    padding: 10px 24px; font-weight: 600; letter-spacing: 1.5px;
    font-family: var(--display);
    transition: all .3s var(--ease) !important
}
.n-links .n-cta:hover { background: var(--rd) !important; transform: translateY(-1px) }
.n-tog {
    display: none; background: 0; border: 0; cursor: pointer;
    flex-direction: column; gap: 5px; padding: 8px
}
.n-tog span { width: 18px; height: 1.5px; background: #fff; transition: all .3s }

/* ═══════════════ HERO ═══════════════ */
.hero {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; overflow: hidden;
    padding-bottom: clamp(72px, 10vw, 140px)
}
.hero-bg {
    position: absolute; inset: 0;
    background: var(--hero-image, none) center 25% / cover no-repeat;
    animation: heroZoom 20s ease-in-out infinite alternate
}
@keyframes heroZoom {
    0% { transform: scale(1) }
    100% { transform: scale(1.05) }
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(10,10,10,.7) 0%, rgba(10,10,10,.3) 55%, rgba(10,10,10,.5) 100%),
        linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,.4) 25%, rgba(10,10,10,.05) 60%, rgba(10,10,10,.15) 100%)
}
.hc { position: relative; z-index: 2 }
.h-eyebrow {
    font-family: var(--display); font-size: 11px; font-weight: 400;
    letter-spacing: 6px; text-transform: uppercase; color: var(--red);
    margin-bottom: clamp(24px, 3vw, 40px);
    opacity: 0; animation: up .9s var(--ease) .15s forwards
}
.h1 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(40px, 6.5vw, 96px);
    line-height: .9; letter-spacing: clamp(-0.5px, -.02em, -2.5px);
    max-width: 820px; color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.15);
    opacity: 0; animation: up .9s var(--ease) .3s forwards
}
.h1 em { font-style: normal; color: var(--red) }
.h1 br.lg { display: block }
.h-lower {
    display: flex; align-items: flex-end; gap: clamp(40px, 5vw, 80px);
    margin-top: clamp(36px, 4.5vw, 64px);
    opacity: 0; animation: up .9s var(--ease) .5s forwards
}
.h-sub {
    font-family: var(--body); font-weight: 400;
    font-size: clamp(13px, .9vw, 15px);
    line-height: 1.8; color: rgba(255,255,255,.5); max-width: 360px
}
.h-actions { display: flex; gap: 16px; flex-shrink: 0; flex-wrap: wrap }
.hero-scroll {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
    opacity: 0; animation: up .9s var(--ease) .8s forwards
}
.hero-scroll-line {
    width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
    animation: scrollPulse 2s ease-in-out infinite
}
@keyframes scrollPulse {
    0%, 100% { opacity: .3; transform: scaleY(1) }
    50% { opacity: .7; transform: scaleY(1.2) }
}
@keyframes up {
    from { opacity: 0; transform: translateY(24px) }
    to { opacity: 1; transform: translateY(0) }
}

/* ── Buttons ── */
.btn-primary {
    display: inline-block;
    font-family: var(--display); font-size: 11px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase;
    text-decoration: none; color: var(--wht); background: var(--red);
    padding: 16px 40px; transition: all .4s var(--ease)
}
.btn-primary:hover {
    background: var(--rd); transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(230,0,5,.18)
}
.btn-secondary {
    display: inline-block;
    font-family: var(--display); font-size: 11px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase;
    text-decoration: none; color: var(--wht);
    padding: 16px 40px; border: 1px solid rgba(255,255,255,.2);
    transition: all .4s var(--ease)
}
.btn-secondary:hover {
    border-color: rgba(255,255,255,.5); transform: translateY(-2px);
    background: rgba(255,255,255,.04)
}

/* ═══════════════ SHARED ═══════════════ */
.label {
    font-family: var(--display); font-size: 10px; font-weight: 400;
    letter-spacing: 5px; text-transform: uppercase;
    color: var(--red); margin-bottom: 24px
}
.heading {
    font-family: var(--display); font-weight: 400;
    line-height: .92; letter-spacing: -1px
}
.heading em { font-style: normal; color: var(--red) }
.lt { color: var(--blk) }
.lt .heading { color: var(--blk) }
.lt .heading em { color: var(--red) }

/* ═══════════════ PROOF STRIP ═══════════════ */
.proof {
    background: var(--off2); border-top: 1px solid rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
    padding: 0; overflow: hidden
}
.proof-inner {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0
}
.proof-item {
    padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
    border-right: 1px solid rgba(0,0,0,.05);
    transition: background .4s var(--ease)
}
.proof-item:last-child { border-right: 0 }
.proof-item:hover { background: rgba(0,0,0,.015) }
.proof-val {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(18px, 1.8vw, 28px); color: var(--blk);
    line-height: 1; margin-bottom: 8px
}
.proof-val span { color: var(--red) }
.proof-desc {
    font-family: var(--body); font-size: 10px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--g3)
}

/* ═══════════════ DELIVER ═══════════════ */
.deliver {
    padding: var(--sec) 0; background: var(--wht)
}
.del-header { max-width: 600px; margin-bottom: clamp(48px, 5vw, 80px) }
.del-header .heading { font-size: clamp(32px, 4vw, 56px); margin-bottom: 20px }
.del-intro { font-size: 15px; line-height: 1.85; color: var(--g1); font-weight: 400 }
.del-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(0,0,0,.06)
}
.del-card {
    background: var(--off); padding: clamp(28px, 3vw, 44px);
    display: flex; flex-direction: column; min-height: 260px;
    transition: all .5s var(--ease); position: relative;
    border-top: 2px solid transparent
}
.del-card:hover { background: var(--off2); border-top-color: var(--red) }
.del-card-label {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--red); margin-bottom: auto
}
.del-card-h {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--blk); margin-bottom: 12px; letter-spacing: -.2px; line-height: 1.25
}
.del-card-p { font-size: 13px; line-height: 1.85; color: var(--g1); font-weight: 400 }
.del-card-badge {
    display: inline-block; margin-top: 16px;
    font-family: var(--body); font-size: 9px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--red); padding: 5px 10px;
    border: 1px solid rgba(230,0,5,.15); border-radius: 2px
}

/* ═══════════════ SOLUTIONS ═══════════════ */
.solutions { padding: var(--sec) 0; background: var(--off) }
.sol-header {
    display: grid; grid-template-columns: 1fr 1fr; align-items: end;
    gap: 48px; margin-bottom: clamp(48px, 5vw, 72px)
}
.sol-header .heading { font-size: clamp(32px, 4vw, 56px) }
.sol-intro {
    font-size: 14px; line-height: 1.85; color: var(--g1);
    font-weight: 400; max-width: 360px
}
.sol-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 3px }
.sol-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; transition: transform .6s var(--ease), box-shadow .6s var(--ease) }
.sol-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease)
}
.sol-img:nth-child(2) { transform: translateY(12px) }
.sol-img:nth-child(3) { transform: translateY(24px) }
.sol-img:hover { box-shadow: 0 24px 64px rgba(0,0,0,.1) }
.sol-img:nth-child(1):hover { transform: translateY(-4px) }
.sol-img:nth-child(2):hover { transform: translateY(8px) }
.sol-img:nth-child(3):hover { transform: translateY(20px) }
.sol-img:hover img { transform: scale(1.03) }
.sol-img-ov {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.02) 55%, transparent 100%)
}
.sol-img-info { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(16px, 2vw, 28px); z-index: 1 }
.sol-img-tag {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase; color: var(--red); margin-bottom: 6px
}
.sol-img-name {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(13px, 1.1vw, 17px); color: var(--wht)
}
.sol-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(0,0,0,.06) }
.sol-card {
    background: var(--wht); padding: clamp(24px, 2.5vw, 40px);
    display: flex; flex-direction: column; min-height: clamp(200px, 14vw, 240px);
    transition: all .5s var(--ease)
}
.sol-card:hover { background: var(--off); transform: translateY(-2px) }
.sol-card-tag {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--red); margin-bottom: 18px
}
.sol-card-h {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--blk); margin-bottom: 12px; letter-spacing: -.2px; line-height: 1.25;
    min-height: 2.5em
}
.sol-card-p { font-size: 12.5px; line-height: 1.85; color: var(--g1); font-weight: 400 }

/* ═══════════════ TECHNOLOGY ═══════════════ */
.tech { padding: var(--sec) 0; background: var(--wht); color: var(--blk) }
.tech .heading { color: var(--blk) }
.tech .heading em { color: var(--red) }
.tech-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px); align-items: start;
    margin-bottom: clamp(40px, 4vw, 64px)
}
.tech-header { position: sticky; top: 120px }
.tech-header .heading { font-size: clamp(32px, 4vw, 56px); margin-bottom: 24px }
.tech-desc {
    font-size: 15px; line-height: 1.85; color: var(--g1);
    font-weight: 400; margin-bottom: 20px
}
.tech-authority {
    font-family: var(--body); font-size: 13px; line-height: 1.7;
    color: var(--g2); font-weight: 500; font-style: italic;
    padding: 18px 0; margin-bottom: 36px;
    border-top: 1px solid rgba(0,0,0,.07);
    border-bottom: 1px solid rgba(0,0,0,.07)
}
.tech-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.06)
}
.spec {
    padding: clamp(18px, 2vw, 28px); text-align: center;
    background: var(--off); transition: background .3s; position: relative; overflow: hidden
}
.spec:hover { background: var(--off2) }
.spec-v {
    font-family: var(--body); font-weight: 650;
    font-size: clamp(22px, 2vw, 32px); color: var(--blk); line-height: 1;
    letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums;
    display: flex; align-items: baseline; justify-content: center
}
.spec-v span { color: inherit }
.spec-v .spec-unit {
    color: var(--red); font-size: .56em; font-weight: 700;
    letter-spacing: -.02em; margin-left: .28em
}
.spec-v .spec-accent { color: var(--red) }
.spec-l {
    font-family: var(--body); font-size: 9px; font-weight: 500;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--g3); margin-top: 8px
}
.spec::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background: var(--red);
    transition: width 1.2s var(--ease)
}
.spec.counted::after { width: 100% }
.tech-visual { position: relative; overflow: hidden }
.tech-visual img {
    width: 100%; display: block; border: 1px solid rgba(0,0,0,.06);
    transition: transform 1s var(--ease);
    box-shadow: 0 30px 80px rgba(20,20,20,.08), 0 12px 32px rgba(20,20,20,.05)
}
.tech-visual:hover img { transform: scale(1.02) }
.tech-visual-label {
    margin-top: 18px; display: flex; align-items: center; gap: 14px
}
.tech-visual-flag {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 3.5px; text-transform: uppercase; color: var(--red)
}
.tech-visual-title {
    font-family: var(--body); font-weight: 400;
    font-size: 13px; color: var(--g3)
}
.prod {
    background: var(--off); border: 1px solid rgba(0,0,0,.06);
    padding: clamp(32px, 3.5vw, 52px);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px); align-items: start
}
.prod-flag {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--red); margin-bottom: 16px
}
.prod-title {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.2; letter-spacing: -.3px; margin-bottom: 14px; color: var(--blk)
}
.prod-text {
    font-size: 13.5px; line-height: 1.85; color: var(--g1); font-weight: 400
}
.features {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1px;
    background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.06); border-top: 0
}
.feature {
    background: var(--off); padding: clamp(20px, 2.2vw, 32px);
    transition: all .4s var(--ease);
    border-top: 2px solid transparent
}
.feature:hover { border-top-color: var(--red); background: var(--off2) }
.feature-h {
    font-family: var(--body); font-weight: 600;
    font-size: 13px; color: var(--blk); margin-bottom: 8px; line-height: 1.3
}
.feature-p { font-size: 12px; line-height: 1.8; color: var(--g1); font-weight: 400 }

/* ═══════════════ OUTCOMES ═══════════════ */
.outcomes {
    padding: var(--sec) 0; background: var(--wht); color: var(--blk)
}
.oc-header { max-width: 560px; margin-bottom: clamp(48px, 5vw, 80px) }
.oc-header .heading { font-size: clamp(32px, 4vw, 56px); margin-bottom: 20px }
.oc-intro { font-size: 15px; line-height: 1.8; color: var(--g1); font-weight: 400 }
.oc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative }
.oc-card {
    padding: clamp(32px, 3vw, 48px); position: relative;
    transition: background .4s; counter-increment: outcome;
    border-right: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06)
}
.oc-card:nth-child(3), .oc-card:nth-child(6) { border-right: 0 }
.oc-card:nth-child(n+4) { border-bottom: 0 }
.oc-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 0; height: 2px; background: var(--red);
    transition: width .6s var(--ease)
}
.oc-card:hover { background: rgba(0,0,0,.01) }
.oc-card:hover::before { width: 100% }
.oc-card-h {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(15px, 1.2vw, 18px);
    margin-bottom: 12px; color: var(--blk); line-height: 1.3; letter-spacing: -.2px
}
.oc-card-p { font-size: 13px; line-height: 1.85; color: var(--g1); font-weight: 400 }

/* ═══════════════ APPLICATIONS ═══════════════ */
.apps { padding: var(--sec) 0; background: var(--off2) }
.apps-header { max-width: 600px; margin-bottom: clamp(44px, 4.5vw, 68px) }
.apps-header .heading { font-size: clamp(32px, 4vw, 56px); margin-bottom: 18px }
.apps-desc { font-size: 14px; line-height: 1.85; color: var(--g1); font-weight: 400 }
.apps-panorama { position: relative; overflow: hidden; margin-bottom: 16px; aspect-ratio: 3.2 / 1 }
.apps-panorama img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 80%;
    transition: transform 1.2s var(--ease)
}
.apps-panorama:hover img { transform: scale(1.02) }
.apps-panorama-ov {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(236,234,230,1) 0%, rgba(236,234,230,.8) 15%, rgba(236,234,230,.15) 50%, rgba(236,234,230,.9) 100%),
        linear-gradient(to right, rgba(236,234,230,.4) 0%, transparent 30%, transparent 70%, rgba(236,234,230,.4) 100%)
}
.apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px }
.app-card {
    background: var(--wht); padding: clamp(24px, 2.5vw, 36px);
    transition: background .4s var(--ease), border-color .4s var(--ease);
    border-left: 2px solid transparent
}
.app-card:hover { border-left-color: var(--red); background: var(--off) }
.app-card-label {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--red); margin-bottom: 12px
}
.app-card-h {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(13px, 1vw, 16px); margin-bottom: 8px; color: var(--blk)
}
.app-card-p { font-size: 12.5px; line-height: 1.8; color: var(--g1); font-weight: 400 }

/* ═══════════════ WIND INNOVATION ═══════════════ */
.wind {
    padding: clamp(120px, 14vw, 220px) 0; background: var(--blk);
    position: relative; overflow: hidden
}
.wind::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.008) 0%, transparent 70%),
        linear-gradient(to bottom, var(--blk) 0%, var(--d1) 50%, var(--blk) 100%)
}
.wind-header {
    max-width: 720px; margin-bottom: clamp(56px, 6vw, 88px);
    position: relative
}
.wind-header .heading {
    font-size: clamp(34px, 4.2vw, 60px); margin-bottom: 28px; color: var(--wht)
}
.wind-header .heading em { color: var(--red) }
.wind-body {
    font-size: 15px; line-height: 1.95; color: rgba(255,255,255,.38);
    font-weight: 400; max-width: 600px
}
.wind-body p + p { margin-top: 20px }
.wind-feature {
    position: relative; margin-bottom: clamp(56px, 6vw, 88px)
}
.wind-feature-frame {
    position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    background: var(--d1);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.04),
        0 40px 100px rgba(0,0,0,.45),
        0 16px 40px rgba(0,0,0,.25),
        inset 0 0 0 1px rgba(255,255,255,.02);
    padding: clamp(10px, 1.2vw, 18px);
    transition: box-shadow .8s var(--ease)
}
.wind-feature-frame:hover {
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.06),
        0 50px 120px rgba(0,0,0,.5),
        0 20px 50px rgba(0,0,0,.3),
        inset 0 0 0 1px rgba(255,255,255,.03)
}
.wind-feature-inner {
    overflow: hidden; position: relative
}
.wind-feature-frame img {
    width: 100%; display: block;
    transition: transform 1.6s var(--ease)
}
.wind-feature-frame:hover img { transform: scale(1.012) }
.wind-feature-caption {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: clamp(20px, 2vw, 28px); padding-top: clamp(16px, 1.5vw, 22px);
    border-top: 1px solid rgba(255,255,255,.05)
}
.wind-feature-caption-left {
    display: flex; align-items: center; gap: 14px
}
.wind-feature-flag {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 3.5px; text-transform: uppercase; color: var(--red)
}
.wind-feature-title {
    font-family: var(--body); font-weight: 400;
    font-size: 13px; color: rgba(255,255,255,.22)
}
.wind-feature-status {
    font-family: var(--body); font-size: 9px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,.15); padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.06); border-radius: 1px
}
.wind-concepts {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(255,255,255,.04);
    position: relative
}
.wind-concept {
    background: var(--d1); padding: clamp(30px, 3.2vw, 48px);
    transition: all .5s var(--ease);
    border-top: 2px solid transparent; position: relative
}
.wind-concept::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    width: 0; height: 1px; background: rgba(230,0,5,.2);
    transition: all .6s var(--ease); transform: translateX(-50%)
}
.wind-concept:hover {
    border-top-color: var(--red); background: var(--d2)
}
.wind-concept:hover::after { width: 60% }
.wind-concept-label {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase;
    color: rgba(230,0,5,.5); margin-bottom: 16px;
    transition: color .4s var(--ease)
}
.wind-concept:hover .wind-concept-label { color: var(--red) }
.wind-concept-h {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--wht); margin-bottom: 12px; line-height: 1.3; letter-spacing: -.2px
}
.wind-concept-p {
    font-size: 12.5px; line-height: 1.85;
    color: rgba(255,255,255,.22); font-weight: 400
}

/* ═══════════════ PROCESS ═══════════════ */
.process { padding: var(--sec) 0; background: var(--off); color: var(--blk) }
.proc-header {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    align-items: end; margin-bottom: clamp(48px, 5vw, 72px)
}
.proc-header .heading { font-size: clamp(32px, 4vw, 56px) }
.proc-sub {
    font-size: 14px; line-height: 1.85; color: var(--g1);
    font-weight: 400; max-width: 360px
}
.proc-steps {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1px; background: rgba(0,0,0,.06)
}
.proc-step {
    background: var(--wht); padding: clamp(28px, 2.5vw, 40px);
    position: relative; counter-increment: step;
    transition: all .4s var(--ease); border-top: 2px solid transparent
}
.proc-step:hover { border-top-color: var(--red); background: var(--off2) }
.proc-step::before {
    content: '0' counter(step);
    font-family: var(--display); font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 400; color: rgba(0,0,0,.04); line-height: 1;
    margin-bottom: 20px; display: block
}
.proc-step:hover::before { color: rgba(230,0,5,.08) }
.proc-step-h {
    font-family: var(--body); font-weight: 600;
    font-size: clamp(14px, 1vw, 16px); color: var(--blk); margin-bottom: 10px
}
.proc-step-p { font-size: 12.5px; line-height: 1.8; color: var(--g1); font-weight: 400 }

/* ═══════════════ CTA + FORM ═══════════════ */
.cta-section { padding: var(--sec) 0; background: var(--d1) }
.cta-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px); align-items: start
}
.cta-content .heading { font-size: clamp(32px, 4vw, 56px); margin-bottom: 24px; color: var(--wht) }
.cta-content .heading em { color: var(--red) }
.cta-desc {
    font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.35);
    font-weight: 400; margin-bottom: 32px
}
.cta-trust {
    display: flex; flex-direction: column; gap: 12px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.06)
}
.cta-trust-item {
    font-size: 12px; color: rgba(255,255,255,.25); font-weight: 400;
    display: flex; gap: 10px; align-items: center
}
.cta-trust-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--red); flex-shrink: 0
}
.form-card {
    background: var(--d2); border: 1px solid rgba(255,255,255,.05);
    padding: clamp(32px, 3.5vw, 48px)
}
.form-card label {
    display: block; font-family: var(--body); font-size: 10px;
    font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.25); margin-bottom: 8px
}
.form-card input, .form-card select, .form-card textarea {
    width: 100%; background: var(--d3); border: 1px solid rgba(255,255,255,.06);
    color: var(--wht); font-family: var(--body); font-size: 14px;
    padding: 14px 16px; margin-bottom: 20px; font-weight: 400;
    transition: border-color .3s; outline: none
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
    border-color: rgba(230,0,5,.4)
}
.form-card select { appearance: none; cursor: pointer }
.form-card textarea { resize: vertical; min-height: 100px }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-submit {
    width: 100%; background: var(--red); color: var(--wht); border: 0;
    font-family: var(--display); font-size: 11px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase;
    padding: 18px; cursor: pointer; transition: all .4s var(--ease); margin-top: 4px
}
.form-submit:hover { background: var(--rd); transform: translateY(-1px) }

/* ═══════════════ FOOTER ═══════════════ */
footer {
    background: var(--blk);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 80px var(--pad) 48px
}
.f-grid {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr auto; gap: 48px; align-items: start
}
.f-brand { max-width: 300px }
.f-brand-name {
    font-family: var(--display); font-weight: 400;
    font-size: 12px; letter-spacing: 3.5px;
    text-transform: uppercase; color: var(--wht); margin-bottom: 14px
}
.f-brand-desc {
    font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.25);
    font-weight: 400; margin-bottom: 20px
}
.f-brand-legal {
    font-size: 11.5px; line-height: 1.7; color: rgba(255,255,255,.12); font-weight: 400
}
.f-cols { display: flex; gap: 48px }
.f-col-title {
    font-family: var(--display); font-size: 9px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,.15); margin-bottom: 14px
}
.f-col a {
    display: block; font-size: 13px; color: rgba(255,255,255,.28);
    text-decoration: none; margin-bottom: 9px; transition: color .3s; font-weight: 400
}
.f-col a:hover { color: var(--wht) }
.f-bottom {
    max-width: var(--wrap); margin: 36px auto 0; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex; justify-content: space-between; align-items: center
}
.f-copy { font-size: 11px; color: rgba(255,255,255,.1); font-weight: 400 }
.f-legal { display: flex; gap: 24px }
.f-legal a {
    font-size: 11px; color: rgba(255,255,255,.1);
    text-decoration: none; transition: color .3s; font-weight: 400
}
.f-legal a:hover { color: rgba(255,255,255,.3) }

/* ═══════════════ REVEAL ═══════════════ */
.rv {
    opacity: 0; transform: translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease)
}
.rv.v { opacity: 1; transform: translateY(0) }
.d1 { transition-delay: .06s } .d2 { transition-delay: .12s }
.d3 { transition-delay: .18s } .d4 { transition-delay: .24s }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1200px) {
    .features { grid-template-columns: repeat(2, 1fr) }
    .del-grid { grid-template-columns: repeat(2, 1fr) }
    .apps-grid { grid-template-columns: repeat(2, 1fr) }
    .sol-cards { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 1024px) {
    :root { --sec: clamp(80px, 10vw, 140px) }
    .oc-grid { grid-template-columns: repeat(2, 1fr) }
    .oc-card:nth-child(even) { border-right: 0 }
    .oc-card { border-bottom: 1px solid rgba(0,0,0,.06) !important }
    .oc-card:last-child, .oc-card:nth-last-child(2):nth-child(odd) ~ .oc-card { border-bottom: 0 !important }
    .sol-header { grid-template-columns: 1fr; gap: 20px }
    .sol-images { grid-template-columns: repeat(2, 1fr) }
    .sol-images .sol-img:last-child { grid-column: 1 / -1 }
    .sol-cards { grid-template-columns: 1fr }
    .tech-layout { grid-template-columns: 1fr }
    .tech-header { position: static }
    .prod { grid-template-columns: 1fr }
    .tech-specs { grid-template-columns: repeat(4, 1fr) }
    .proc-header { grid-template-columns: 1fr; gap: 20px }
    .proc-steps { grid-template-columns: repeat(3, 1fr) }
    .apps-grid { grid-template-columns: repeat(2, 1fr) }
    .apps-panorama { aspect-ratio: 3 / 1 }
    .wind-concepts { grid-template-columns: repeat(2, 1fr) }
    .cta-layout { grid-template-columns: 1fr }
    .proof-inner { grid-template-columns: repeat(2, 1fr) }
    .proof-item:nth-child(2) { border-right: 0 }
    .trust-inner { gap: 24px }
}
@media (max-width: 768px) {
    :root { --sec: clamp(60px, 8vw, 100px); --pad: clamp(20px, 5vw, 32px) }
    .n-links { display: none }
    .n-tog { display: flex }
    .h1 { font-size: clamp(32px, 8vw, 48px) }
    .h1 br.lg { display: none }
    .h-lower { flex-direction: column; align-items: flex-start; gap: 24px }
    .h-sub { max-width: 100% }
    .h-eyebrow { font-size: 10px; letter-spacing: 4px }
    .h-actions { flex-direction: column; width: 100% }
    .btn-primary, .btn-secondary { text-align: center }
    .sol-images { grid-template-columns: 1fr }
    .sol-images .sol-img:last-child { grid-column: auto }
    .sol-images .sol-img { aspect-ratio: 16 / 10 }
    .tech-specs { grid-template-columns: repeat(2, 1fr) }
    .features { grid-template-columns: repeat(2, 1fr) }
    .del-grid { grid-template-columns: 1fr }
    .apps-grid { grid-template-columns: 1fr }
    .apps-panorama { aspect-ratio: 2.5 / 1 }
    .f-grid { grid-template-columns: 1fr }
    .f-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
    .f-bottom { flex-direction: column; gap: 10px; text-align: center }
    .heading { font-size: clamp(26px, 7vw, 40px) !important }
    .wind-concepts { grid-template-columns: 1fr }
    .wind-header .heading { font-size: clamp(24px, 6vw, 36px) !important }
    .wind-feature-caption { flex-direction: column; align-items: flex-start; gap: 12px }
    .wind-feature-status { align-self: flex-start }
    .wind-feature-frame { padding: clamp(6px, 1.5vw, 10px) }
    .cta-content .heading { font-size: clamp(26px, 7vw, 40px) !important }
    .hero-scroll { display: none }
    .proof-inner { grid-template-columns: 1fr }
    .proof-item { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.04) }
    .proof-item:last-child { border-bottom: 0 }
    .proc-steps { grid-template-columns: 1fr }
    .form-row { grid-template-columns: 1fr }
    .oc-grid { grid-template-columns: 1fr }
    .oc-card { border-right: 0 !important }
}
@media (max-width: 480px) {
    .tech-specs { grid-template-columns: 1fr }
    .features { grid-template-columns: 1fr }
    .f-cols { grid-template-columns: 1fr; gap: 24px }
    .sol-cards { grid-template-columns: 1fr }
}

/* ═══════════════ 2026 LIGHT SYSTEM REFRESH ═══════════════ */
:root {
    --red: #E60005;
    --rd: #C40004;
    --blk: #000;
    --d1: #F7F7F7;
    --d2: #F0F0F0;
    --d3: #E8E8E8;
    --off: #FAFAFA;
    --off2: #F2F2F2;
    --stone: #E2E2E2;
    --g1: #5A5A5A;
    --g2: #2F2F2F;
    --g3: #8A8A8A;
    --sec: clamp(88px, 10vw, 144px);
    --wrap: 1120px;
    --wrap-w: 1320px
}
body {
    background:
        radial-gradient(circle at 90% 4%, rgba(226,226,226,.48), transparent 26rem),
        #fff;
    color: var(--blk)
}
.skip-link {
    position: fixed; left: 20px; top: -60px; z-index: 1000;
    padding: 12px 18px; background: var(--blk); color: #fff;
    font-size: 13px; text-decoration: none; border-radius: 8px;
    transition: top .2s
}
.skip-link:focus { top: 12px }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(230,0,5,.28); outline-offset: 3px
}

/* Navigation */
nav#nv {
    height: 80px; background: rgba(255,255,255,.88);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-bottom: 1px solid rgba(0,0,0,.08)
}
nav#nv.on {
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 40px rgba(0,0,0,.07)
}
.n-logo { gap: 12px }
.n-logo img {
    width: 34px; height: 34px; max-width: none; object-fit: cover;
    border-radius: 0; box-shadow: none;
    opacity: 1
}
.n-logo-text, nav.on .n-logo-text { color: var(--blk); letter-spacing: 2.4px }
.n-links a, nav.on .n-links a { color: #53697a; font-weight: 600 }
.n-links a:hover, nav.on .n-links a:hover { color: var(--blk) }
.n-links .n-cta {
    border-radius: 999px; padding: 12px 24px;
    box-shadow: 0 8px 22px rgba(230,0,5,.17)
}

/* Hero */
.hero {
    min-height: clamp(760px, 100svh, 920px);
    justify-content: center; padding-top: 130px; padding-bottom: 96px;
    background: linear-gradient(145deg, #fff 0%, #F8F8F8 72%, #F1F1F1 100%)
}
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to right, #000, transparent 64%)
}
.hero-bg {
    inset: 110px var(--pad) 56px 49.5%;
    border-radius: 28px; animation: none;
    box-shadow: 0 34px 90px rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.9)
}
.hero-bg::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(15,39,56,.14))
}
.hero-overlay {
    background: linear-gradient(90deg, #FAFAFA 0%, #FAFAFA 36%, rgba(250,250,250,.94) 42%, rgba(250,250,250,.18) 61%, transparent 76%)
}
.hc { width: 100%; max-width: var(--wrap-w); margin: 0 auto }
.h-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 30px; color: #646464; letter-spacing: 3px;
    background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.08);
    padding: 10px 14px; border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.05)
}
.h-eyebrow span { width: 7px; height: 7px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 5px rgba(230,0,5,.1) }
.h1 {
    width: 49%; max-width: 620px; color: var(--blk); text-shadow: none;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(50px, 4.5vw, 66px); line-height: .98;
    letter-spacing: -.02em
}
.h-lower {
    display: block; width: 40%; max-width: 500px;
    margin-top: 36px
}
.h-sub { max-width: 470px; color: var(--g1); font-size: 15px; line-height: 1.75 }
.h-actions { margin-top: 28px; gap: 12px }
.btn-primary, .btn-secondary {
    border-radius: 999px; padding: 15px 28px; letter-spacing: 2px;
    font-family: var(--body); font-weight: 700
}
.btn-primary { box-shadow: 0 12px 28px rgba(230,0,5,.2) }
.btn-secondary { color: var(--blk); border-color: rgba(0,0,0,.18); background: rgba(255,255,255,.7) }
.btn-secondary:hover { border-color: rgba(0,0,0,.34); background: #fff }
.hero-scroll { display: none }
.hero-signal {
    position: absolute; z-index: 4; right: calc(var(--pad) + 28px); bottom: 82px;
    display: flex; align-items: center; gap: 22px;
    padding: 18px 22px; border: 1px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.82); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.15)
}
.hero-signal div { display: flex; flex-direction: column; gap: 4px }
.hero-signal strong { font-size: 16px; color: var(--blk); letter-spacing: -.02em }
.hero-signal span { font-size: 8px; font-weight: 700; color: var(--g3); letter-spacing: 1.5px; text-transform: uppercase }
.hero-signal i { width: 1px; height: 28px; background: rgba(0,0,0,.1) }

/* Shared light surfaces */
.heading, .h1 { text-wrap: balance }
.heading {
    font-family: var(--display); font-weight: 400;
    line-height: .98; letter-spacing: -.015em
}
.label { letter-spacing: 3.5px; font-weight: 600 }
.proof {
    padding: 22px var(--pad); background: #fff;
    border-color: rgba(0,0,0,.08)
}
.proof-inner {
    gap: 10px; padding: 0; border: 1px solid rgba(0,0,0,.08);
    background: #F7F7F7; border-radius: 18px; overflow: hidden
}
.proof-item { border-right-color: rgba(0,0,0,.07); background: rgba(255,255,255,.74) }
.proof-item:hover { background: #fff }
.proof-val { font-family: var(--body); font-weight: 650; letter-spacing: -.03em }
.proof-desc { letter-spacing: 1.5px }
.deliver, .tech, .outcomes { background: #fff }
.solutions, .process { background: #F7F7F7 }
.apps { background: #F0F0F0 }
.deliver, .solutions, .tech, .outcomes, .apps, .process, .wind, .cta-section {
    border-top: 1px solid rgba(0,0,0,.06)
}
.del-card, .sol-card, .feature, .proc-step, .app-card {
    border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
    background: rgba(255,255,255,.88); box-shadow: 0 10px 32px rgba(0,0,0,.04)
}
.del-grid, .sol-cards, .features, .proc-steps, .apps-grid {
    gap: 12px; background: transparent
}
.del-card:hover, .sol-card:hover, .feature:hover, .proc-step:hover, .app-card:hover {
    background: #fff; transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(0,0,0,.09); border-color: rgba(230,0,5,.18)
}
.del-card { min-height: 280px }
.del-card-badge { border-radius: 999px; align-self: flex-start }
.sol-images { gap: 16px; margin-bottom: 16px }
.sol-img { border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.09) }
.sol-img:nth-child(2), .sol-img:nth-child(3) { transform: none }
.sol-images .sol-img:hover { transform: translateY(-4px) }
.sol-img-ov { background: linear-gradient(to top, rgba(8,28,42,.68), rgba(8,28,42,0) 66%) }
.sol-cards { gap: 16px }
.sol-card { padding: clamp(28px, 2.25vw, 36px); min-height: 240px }
.tech-specs { gap: 10px; background: transparent; border: 0 }
.spec {
    border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #F7F7F7;
    min-height: 112px; display: flex; flex-direction: column; justify-content: center
}
.tech-visual img { border-radius: 20px; border-color: rgba(0,0,0,.08) }
.prod { border-radius: 18px; background: #F3F3F3; border-color: rgba(0,0,0,.08) }
.oc-grid { gap: 12px }
.oc-card {
    border: 1px solid rgba(0,0,0,.08) !important; border-radius: 14px;
    background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.035)
}
.oc-card:hover { background: #FAFAFA; box-shadow: 0 18px 42px rgba(0,0,0,.07) }
.apps-panorama { border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.11) }
.apps-grid { gap: 16px }
.app-card { min-height: 192px; padding: clamp(28px, 2.1vw, 34px) }
.apps-panorama-ov {
    background: linear-gradient(to bottom, rgba(236,243,247,.78) 0%, transparent 32%, transparent 70%, rgba(236,243,247,.58) 100%)
}

/* Innovation is now a luminous R&D section, not a black interruption. */
.wind {
    background:
        radial-gradient(circle at 88% 14%, rgba(230,0,5,.055), transparent 30rem),
        linear-gradient(145deg, #FAFAFA, #EEEEEE);
    color: var(--blk)
}
.wind::before {
    background-image:
        linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
    background-size: 52px 52px
}
.wind-header .heading { color: var(--blk) }
.wind-body { color: var(--g1) }
.wind-feature-frame {
    padding: 12px; border-radius: 22px; background: rgba(255,255,255,.78);
    border-color: rgba(0,0,0,.09);
    box-shadow: 0 30px 80px rgba(0,0,0,.12)
}
.wind-feature-inner, .wind-feature-frame img { border-radius: 14px }
.wind-feature-caption { border-top-color: rgba(0,0,0,.09) }
.wind-feature-title { color: var(--g1) }
.wind-feature-status { color: var(--red); border-color: rgba(230,0,5,.18); background: rgba(255,255,255,.65); border-radius: 999px }
.wind-concepts { gap: 12px; background: transparent }
.wind-concept {
    background: rgba(255,255,255,.74); border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px; box-shadow: 0 10px 32px rgba(0,0,0,.04)
}
.wind-concept:hover { background: #fff; border-color: rgba(230,0,5,.2); transform: translateY(-4px) }
.wind-concept-label, .wind-concept:hover .wind-concept-label { color: var(--red) }
.wind-concept-h { color: var(--blk) }
.wind-concept-p { color: var(--g1) }

/* Contact */
.cta-section {
    background:
        radial-gradient(circle at 10% 10%, rgba(230,0,5,.06), transparent 24rem),
        #F5F5F5
}
.cta-content .heading { color: var(--blk) }
.cta-desc { color: var(--g1) }
.cta-trust { border-top-color: rgba(0,0,0,.09) }
.cta-trust-item { color: #5C7283 }
.form-card {
    background: #fff; border-color: rgba(0,0,0,.09); border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0,0,0,.11)
}
.form-card label { color: #5E7384; font-weight: 700; letter-spacing: 1.4px }
.form-card input, .form-card select, .form-card textarea {
    background: #F7F7F7; border-color: rgba(0,0,0,.1); color: var(--blk);
    border-radius: 9px
}
.form-card input::placeholder, .form-card textarea::placeholder { color: #91A2AF }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
    border-color: rgba(230,0,5,.55); box-shadow: 0 0 0 4px rgba(230,0,5,.07)
}
.form-submit { border-radius: 999px; box-shadow: 0 12px 28px rgba(230,0,5,.2) }
.form-note { margin-top: 14px; text-align: center; color: var(--g3); font-size: 11px; line-height: 1.5 }

/* Footer */
footer { background: #fff; border-top-color: rgba(0,0,0,.09) }
.f-brand-name { color: var(--blk) }
.f-brand-desc, .f-col a { color: var(--g1) }
.f-brand-legal, .f-copy, .f-legal span { color: var(--g3); font-size: 11.5px }
.f-brand-legal a { color: var(--g2); text-decoration: none }
.f-brand-legal a:hover { color: var(--red) }
.f-col-title { color: var(--red) }
.f-col a:hover { color: var(--blk) }
.f-bottom { border-top-color: rgba(0,0,0,.08) }

/* ═══════════════ COMMERCIAL FOCUS REFINEMENT ═══════════════ */
h1, h2, h3 { margin: 0 }
.heading {
    font-family: var(--body); font-weight: 600;
    letter-spacing: -.055em; line-height: 1.02
}
.deliver { display: none }
.rv { opacity: 1; transform: none; transition: none }
.solutions, .tech, .outcomes, .apps, .process, .innovation-strip, .cta-section {
    padding-top: clamp(72px, 8vw, 112px);
    padding-bottom: clamp(72px, 8vw, 112px)
}
.section-actions {
    display: flex; align-items: center; gap: 26px;
    margin-top: 30px
}
.text-link {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--blk); font-size: 12px; font-weight: 700;
    letter-spacing: 1.3px; text-transform: uppercase; text-decoration: none
}
.text-link span { color: var(--red); font-size: 18px; transition: transform .25s var(--ease) }
.text-link:hover span { transform: translateX(4px) }
.proof-val { font-size: clamp(17px, 1.45vw, 23px) }
.proof-item { padding-top: 30px; padding-bottom: 30px }
.sol-card:hover, .feature:hover, .oc-card:hover, .app-card:hover, .proc-step:hover {
    transform: none; box-shadow: 0 10px 32px rgba(0,0,0,.04)
}
.spec::after { width: 100% }
.oc-grid { grid-template-columns: repeat(4, 1fr); gap: 16px }
.oc-card {
    border: 1px solid rgba(0,0,0,.08) !important;
    min-height: 205px
}
.outcome-note {
    max-width: 760px; margin-top: 24px;
    color: var(--g3); font-size: 11px; line-height: 1.7
}
.apps-grid { grid-template-columns: repeat(4, 1fr) }
.app-card { min-height: 205px }
.innovation-strip {
    position: relative; overflow: hidden; border-top: 1px solid rgba(0,0,0,.06);
    background:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px),
        radial-gradient(circle at 85% 15%, rgba(230,0,5,.06), transparent 28rem),
        #F5F5F5;
    background-size: 52px 52px, 52px 52px, auto, auto
}
.innovation-layout {
    display: grid; grid-template-columns: .9fr 1.1fr;
    align-items: center; gap: clamp(44px, 6vw, 88px)
}
.innovation-copy .heading {
    font-size: clamp(31px, 3.7vw, 52px); margin: 14px 0 24px
}
.innovation-copy p {
    max-width: 540px; color: var(--g1); font-size: 14px; line-height: 1.85
}
.innovation-status {
    display: inline-flex; margin-top: 24px; padding: 9px 13px;
    border: 1px solid rgba(230,0,5,.2); border-radius: 999px;
    color: var(--red); background: rgba(255,255,255,.7);
    font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase
}
.innovation-visual { position: relative }
.innovation-visual img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border: 1px solid rgba(0,0,0,.08); border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.1)
}
.innovation-visual span {
    position: absolute; right: 14px; bottom: 14px;
    padding: 8px 11px; border-radius: 999px;
    background: rgba(255,255,255,.9); color: var(--g2);
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase
}
.process { counter-reset: step }
.proc-steps { gap: 12px; background: transparent }
.proc-step {
    border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
    min-height: 230px; box-shadow: 0 8px 28px rgba(0,0,0,.035)
}
.form-card { position: relative }
.form-hp {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap
}
.form-submit:disabled { cursor: wait; opacity: .65; transform: none }
.form-status {
    min-height: 20px; margin-top: 14px; text-align: center;
    color: var(--g2); font-size: 12px; line-height: 1.55
}
.form-status.is-success { color: #1E6A43 }
.form-status.is-error { color: #A40003 }
.form-status a, .form-note a { color: var(--red); font-weight: 600 }
.form-note { margin-top: 8px }

@media (max-width: 1024px) {
    .oc-grid, .apps-grid { grid-template-columns: repeat(2, 1fr) }
    .innovation-layout { grid-template-columns: 1fr }
    .innovation-copy p { max-width: 680px }
}
@media (max-width: 768px) {
    .section-actions { align-items: stretch; flex-direction: column; gap: 18px }
    .section-actions .btn-primary { text-align: center }
    .proof-val { font-size: 17px }
    .oc-grid, .apps-grid { grid-template-columns: 1fr }
    .oc-card, .app-card, .proc-step { min-height: auto }
    .innovation-status { line-height: 1.5 }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}
@media (max-width: 1024px) {
    .hero-bg { left: 52% }
    .h1 { width: 57%; font-size: clamp(46px, 5.6vw, 58px) }
    .h-lower { width: 46% }
    .hero-signal { right: calc(var(--pad) + 16px) }
}
@media (max-width: 768px) {
    nav#nv { height: 72px }
    .n-logo-text { font-size: 10px; letter-spacing: 1.7px }
    .n-links {
        display: none; position: absolute; top: 72px; left: 14px; right: 14px;
        padding: 22px; gap: 18px; flex-direction: column; align-items: stretch;
        background: rgba(255,255,255,.98); border: 1px solid rgba(0,0,0,.09);
        border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.14)
    }
    .n-links.open { display: flex }
    .n-links a { color: var(--blk); font-size: 12px }
    .n-links .n-cta { text-align: center }
    .n-tog span { background: var(--blk) }
    .hero {
        min-height: 940px; justify-content: flex-start;
        padding-top: 128px; padding-bottom: 380px
    }
    .hero-bg {
        inset: auto 20px 32px; height: 330px; border-radius: 20px;
        background-position: 55% center
    }
    .hero-overlay { display: none }
    .hero::before { mask-image: linear-gradient(to bottom, #000, transparent 64%) }
    .h-eyebrow { font-size: 8px; letter-spacing: 2px; padding: 9px 12px; margin-bottom: 24px }
    .h1 { width: 100%; max-width: 620px; font-size: clamp(34px, 9vw, 42px); letter-spacing: -.015em }
    .h1 br.lg { display: block }
    .h-lower { width: 100%; max-width: 540px; margin-top: 26px }
    .h-actions { width: 100% }
    .hero-signal {
        right: 34px; left: 34px; bottom: 50px; justify-content: space-between;
        gap: 10px; padding: 15px 16px
    }
    .proof { padding-top: 16px; padding-bottom: 16px }
    .proof-inner { grid-template-columns: repeat(2, 1fr) }
    .proof-item { border-bottom-color: rgba(0,0,0,.08) }
    .wind-concepts { grid-template-columns: 1fr }
    .sol-card { min-height: auto }
    .sol-card-h { min-height: 0 }
    .apps-panorama { margin-bottom: 12px }
    .apps-grid { gap: 12px }
    .app-card { min-height: auto }
}
@media (max-width: 480px) {
    .hero { min-height: 900px; padding-bottom: 350px }
    .hero-bg { height: 300px }
    .hero-signal strong { font-size: 13px }
    .hero-signal span { font-size: 7px }
    .hero-signal i { height: 24px }
    .proof-val { font-size: 17px }
}

/* ═══════════════ GROUP BAR ═══════════════

   The line every site carries in its footer, linking to its sister
   companies. Generated from packages/brand/group.mjs — see
   packages/build/lib/entity.mjs — so adding a company updates all of them.  */
.group-bar {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 8px 18px; padding-top: 18px; margin-top: 18px;
    border-top: 1px solid var(--stone);
    font-size: 12px; letter-spacing: .2px
}
.group-bar-label { color: var(--g3) }
.group-bar-links { display: flex; flex-wrap: wrap; gap: 8px 18px }
.group-bar-links a {
    color: var(--g1); text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease)
}
.group-bar-links a:hover { color: var(--blk); border-bottom-color: var(--red) }
.group-bar-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }

/* ═══════════════ BRANDMARK ═══════════════

   The group's mark, drawn in markup rather than shipped as a raster per
   company: a red field, the Swiss cross, and the company name set in the
   display face. Energy and Engine Parts keep their existing logo files;
   this is what the sites built since use, and it scales to a new company
   without anyone opening a drawing tool.  */
.brandmark {
    position: relative; display: block;
    aspect-ratio: 1; background: var(--red);
    container-type: inline-size;
}
.brandmark::before {
    /* The cross, as one element: a horizontal bar with a vertical bar
       painted over it by the same gradient. */
    content: ''; position: absolute; top: 8%; right: 8%;
    width: 22%; aspect-ratio: 1;
    background:
        linear-gradient(var(--wht), var(--wht)) center / 100% 34% no-repeat,
        linear-gradient(var(--wht), var(--wht)) center / 34% 100% no-repeat;
}
.brandmark-name {
    position: absolute; left: 10%; right: 8%; bottom: 16%;
    font-family: var(--display); color: var(--wht);
    font-size: 21cqw; line-height: 1.06; letter-spacing: -.01em;
    text-transform: uppercase; word-spacing: 100vw; /* one word per line */
}
.brandmark::after {
    content: ''; position: absolute; left: 10%; bottom: 8%;
    width: 11%; height: 2.5%; background: var(--wht);
}
/* In the navigation the mark is small, so the wordmark would be unreadable:
   there it is the field and the cross alone, with the name set beside it. */
.n-logo .brandmark { width: 44px }
.n-logo .brandmark .brandmark-name, .n-logo .brandmark::after { display: none }
.n-logo .brandmark::before { top: 18%; right: 18%; width: 64% }

/* ═══════════════ CARD LINK ═══════════════

   A link at the foot of a card, for the sites that send people somewhere
   rather than into a form.  */
.card-link {
    display: inline-block; margin-top: 14px;
    font-size: 13px; font-weight: 600; letter-spacing: .2px;
    color: var(--blk); text-decoration: none;
    border-bottom: 1px solid var(--red); padding-bottom: 2px;
    transition: color .2s var(--ease), border-color .2s var(--ease)
}
.card-link + .card-link { margin-top: 8px }
.sol-card .card-link, .oc-card .card-link { display: block; width: fit-content }
.card-link:hover { color: var(--red) }
.card-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }

/* ═══════════════ CONTACT BLOCK ═══════════════

   What sits where the enquiry form sits on the sites that have one. The
   holding and Capital take enquiries by email, so the same card carries an
   address instead of a form.  */
.contact-block + .contact-block {
    margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--stone)
}
.contact-label {
    font-family: var(--display); font-size: 10px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase; color: var(--red);
    margin-bottom: 14px
}
.contact-email {
    display: inline-block; font-size: clamp(17px, 2vw, 21px);
    color: var(--blk); text-decoration: none;
    border-bottom: 1px solid var(--red); padding-bottom: 3px
}
.contact-email:hover { color: var(--red) }
.contact-email:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }
.contact-address { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--g1) }

/* ═══════════════ LANGUAGE SWITCH ═══════════════

   The navigation's right-hand cluster, and the three links between a
   site's language pages. Nothing is translated in the browser: these are
   links to real pages, so a search engine can index each language.  */
.n-right { display: flex; align-items: center; gap: 20px }
.lang {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border: 1px solid rgba(0,0,0,.12); border-radius: 999px;
    background: rgba(255,255,255,.82); flex-shrink: 0
}
.lang a {
    border: 0; background: transparent; cursor: pointer; text-decoration: none;
    font-family: var(--body); font-size: 10px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; color: #53697a;
    padding: 7px 10px; border-radius: 999px; transition: all .25s var(--ease)
}
.lang a:hover { color: var(--blk) }
.lang a[aria-current="page"] { background: var(--blk); color: #fff }
.lang a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px }
@media (max-width: 768px) {
    .n-right { gap: 10px }
    .lang a { padding: 6px 8px; font-size: 9px }
}

/* ═══════════════ NARROW-SCREEN WORD BREAKING ═══════════════

   German and Czech compound words are long enough to push a headline past
   the screen: "Entwicklungsunterstützung" is 25 characters and overflowed
   the Engine Parts German page by 16px at 390px wide.

   Headlines are the only place this bites, because they are set large and
   the layout gives them a fixed column. `hyphens: auto` uses the page's
   own <html lang>, so German hyphenates as German and Czech as Czech;
   overflow-wrap is the fallback for a word the browser has no rules for.  */
@media (max-width: 768px) {
    .h1, .heading, .sol-card-h, .oc-card-h, .proc-step-h, .app-card-h, .prod-title {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ═══════════════ SWISS GLOBAL HOLDING ═══════════════
   What this site adds to the shared system in packages/brand.
   ════════════════════════════════════════════════════ */

:root {
    /* The shared hero expects a photograph in the panel on the right. The
       holding has no product to photograph, so the panel carries the group's
       own mark instead. Set --hero-image and delete the .hero-bg rule below
       to go back to a picture. */
    --hero-image: none;
}

/* The hero panel as the mark: the red field and the Swiss cross, drawn at
   the size the photograph would have occupied. */
.hero-bg {
    background: var(--red);
    box-shadow: 0 34px 90px rgba(230, 0, 5, .22);
    border-color: rgba(255, 255, 255, .5);
}
.hero-bg::after {
    background:
        linear-gradient(#fff, #fff) center / 34% 11% no-repeat,
        linear-gradient(#fff, #fff) center / 11% 34% no-repeat,
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
}

/* The corporate page carries no photography, so its cards need to hold the
   page on their own: a little more room, and a rule under the tag. */
.sol-card-p { min-height: 0 }