/* Generated by `npm run build` from packages/brand/css/system.css
 * and sites/engineparts/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
   ═══════════════════════════════════════════════════════════════════ */

/* Both faces are self-hosted. Inter used to come from Google's CDN, which
   handed every visitor's IP to Google on five sites carrying German- and
   Czech-language pages: a transfer with no consent and no disclosure
   (LG Munchen I, 20 Jan 2022, Az. 3 O 17493/20).

   The two Inter files are subsets, cut to the characters these five sites
   actually set - 133 KB of Google's cuts down to 27 KB. `npm test` fails if a
   page uses a character the files do not carry, so the copy cannot outgrow
   them silently. Regenerate with packages/build/tools/subset-fonts.mjs.

   The split follows Google's own unicode-range boundary, so a visitor reading
   English or German fetches only the 22 KB latin file; latin-ext is pulled by
   the Czech pages, and by the group's own Prague address in every footer. */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-latin-ext.woff2?v=38b24946') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-latin.woff2?v=cdac705c') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'SwissEdges';
    src: url('/fonts/SwissEdges-Regular.woff2?v=52877b80') format('woff2');
    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;
    /* ── Type scale ──────────────────────────────────────────────────
       Before this there were 44 distinct type sizes across the system and
       the five site stylesheets: 17 static values including 7px, 8px, 11.5px
       and 12.5px, plus 27 clamp() expressions. Values like 11.5 and 12.5 are
       not decisions, they are the residue of successive nudges, and 7px set
       in bold on a phone is not a size anyone chose either.

       Seven steps now, and 12px is a hard floor. The audit proposed six; the
       seventh exists because the hero runs past the largest of them and
       cramming it into --t-2xl would have shrunk it by a third, which is a
       redesign rather than a tidy-up.

       A size is picked by the role of the text, not by which step is nearest
       the old number: card paragraphs went up from 12.5px to --t-sm rather
       than down to the label floor. */
    --t-xs: 12px;                      /* labels, eyebrows, legal — the floor */
    --t-sm: 14px;                      /* captions, small body, form fields */
    --t-base: 16px;                    /* body */
    --t-lg: 19px;                      /* lead paragraphs, card headings */
    --t-xl: clamp(24px, 3vw, 34px);    /* figures, sub-headings */
    --t-2xl: clamp(34px, 5vw, 56px);   /* section headings */
    --t-3xl: clamp(50px, 4.5vw, 66px); /* the hero, and only the hero */
    --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: var(--t-xs);
    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: var(--t-xs); 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: var(--t-xs); 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: var(--t-3xl);
    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: var(--t-base);
    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: var(--t-xs); 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: var(--t-xs); 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: var(--t-xs); font-weight: 400;
    letter-spacing: 5px; text-transform: uppercase;
    color: var(--red-text); 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: var(--t-xl); color: var(--blk);
    line-height: 1; margin-bottom: 8px
}
.proof-val span { color: var(--red) }
.proof-desc {
    font-family: var(--body); font-size: var(--t-xs); 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: var(--t-2xl); margin-bottom: 20px }
.del-intro { font-size: var(--t-base); 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: var(--t-xs); 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: var(--t-lg);
    color: var(--blk); margin-bottom: 12px; letter-spacing: -.2px; line-height: 1.25
}
.del-card-p { font-size: var(--t-sm); 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: var(--t-xs); 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: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
    gap: 48px; margin-bottom: clamp(48px, 5vw, 72px)
}
.sol-header .heading { font-size: var(--t-2xl)}
.sol-intro {
    font-size: var(--t-sm); 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: var(--t-xs); 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: var(--t-lg); 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: var(--t-xs); 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: var(--t-lg);
    color: var(--blk); margin-bottom: 12px; letter-spacing: -.2px; line-height: 1.25;
    min-height: 2.5em
}
.sol-card-p { font-size: var(--t-sm); 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: var(--t-2xl); margin-bottom: 24px }
.tech-desc {
    font-size: var(--t-base); line-height: 1.85; color: var(--g1);
    font-weight: 400; margin-bottom: 20px
}
.tech-authority {
    font-family: var(--body); font-size: var(--t-sm); 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: var(--t-xl); 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: var(--t-xs); 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: var(--t-xs); 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: var(--t-xs); 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: var(--t-xs); font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--red-text); margin-bottom: 16px
}
.prod-title {
    font-family: var(--body); font-weight: 600;
    font-size: var(--t-xl);
    line-height: 1.2; letter-spacing: -.3px; margin-bottom: 14px; color: var(--blk)
}
.prod-text {
    font-size: var(--t-base); 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: var(--t-base); color: var(--blk); margin-bottom: 8px; line-height: 1.3
}
.feature-p { font-size: var(--t-sm); 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: var(--t-2xl); margin-bottom: 20px }
.oc-intro { font-size: var(--t-base); 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: var(--t-lg);
    margin-bottom: 12px; color: var(--blk); line-height: 1.3; letter-spacing: -.2px
}
.oc-card-p { font-size: var(--t-sm); 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: var(--t-2xl); margin-bottom: 18px }
.apps-desc { font-size: var(--t-sm); 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: var(--t-xs); 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: var(--t-lg); margin-bottom: 8px; color: var(--blk)
}
.app-card-p { font-size: var(--t-sm); line-height: 1.8; color: var(--g1); 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: var(--t-2xl)}
.proc-sub {
    font-size: var(--t-sm); 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: var(--t-xl);
    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: var(--t-lg); color: var(--blk); margin-bottom: 10px
}
.proc-step-p { font-size: var(--t-sm); 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: var(--t-2xl); margin-bottom: 24px; color: var(--wht) }
.cta-content .heading em { color: var(--red) }
.cta-desc {
    font-size: var(--t-base); 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: var(--t-sm); 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: var(--t-xs);
    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: var(--t-sm);
    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: var(--t-xs); 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 }
/* The company's own logo, where there is room for the full lockup. The
   navigation and the favicons keep the bare symbol: at 24px the three lines
   are a red smudge, which is what the guidelines define the symbol for. */
.f-brand-mark {
    display: block; width: clamp(96px, 9vw, 124px); height: auto;
    border-radius: 3px; margin-bottom: 20px
}
.f-brand-name {
    font-family: var(--display); font-weight: 400;
    font-size: var(--t-sm); letter-spacing: 3.5px;
    text-transform: uppercase; color: var(--wht); margin-bottom: 14px
}
.f-brand-desc {
    font-size: var(--t-sm); line-height: 1.85; color: rgba(255,255,255,.25);
    font-weight: 400; margin-bottom: 20px
}
.f-brand-legal {
    font-size: var(--t-sm); 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: var(--t-xs); 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: var(--t-sm); 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: var(--t-sm); color: rgba(255,255,255,.1); font-weight: 400 }
.f-legal { display: flex; gap: 24px }
.f-legal a {
    font-size: var(--t-sm); 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) }

/* ═══════════════ EQUAL CARD COLUMNS ═══════════════
   A grid item's automatic minimum size is its longest unbreakable word, so one
   long word widens its own column and squeezes the rest: on the German pages
   "Verfügbarkeitsanforderungen" left the fourth card of a four-card row setting
   one word per line. Equal columns are the whole point of these rows, so let an
   item be narrower than its longest word and wrap the word instead.
   ═══════════════════════════════════════════════════════════════ */
.del-card, .sol-card, .feature, .app-card, .oc-card {
    min-width: 0
}
/* Equal columns are narrow, and a German or Czech compound can be wider than
   one. Where the browser has a hyphenation dictionary for the page's language
   it may break such a word properly; no dictionary means no break, so the copy
   itself has to stay inside the column — overflow-wrap is deliberately not set,
   because without a dictionary it splits "Lastspitzenkappung" anywhere, as
   "Lastspitzenkap-pung". */
:is(:lang(de), :lang(cs)) :is(.del-card, .sol-card, .feature, .app-card, .oc-card) {
    hyphens: auto
}

/* ═══════════════ 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) {
    /* the hero panel narrows to 57% here, so the heading follows it. */
    :root { --t-3xl: clamp(46px, 5.6vw, 58px) }
    :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: minmax(0, 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 }
    .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 }
}
/* The footer stacks in the same band as the navigation, and for the same
   reason. `1.2fr auto` hands the link columns whatever they ask for and the
   brand column what is left, which at 800px was 98px holding a 182px address
   block — clipped, not wrapped, because the address is mostly unbreakable.

   Ahead of the 768px and 480px blocks on purpose: those narrow the columns
   further as the screen shrinks, and they can only do that if they come
   after this. */
@media (max-width: 960px) {
    .f-grid { grid-template-columns: 1fr }
    .f-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
}
@media (max-width: 768px) {
    /* and goes full width here, where it can be steeper. */
    :root { --t-3xl: clamp(34px, 9vw, 42px) }
    :root { --sec: clamp(60px, 8vw, 100px); --pad: clamp(20px, 5vw, 32px) }
    .h1 br.lg { display: none }
    .h-lower { flex-direction: column; align-items: flex-start; gap: 24px }
    .h-sub { max-width: 100% }
    .h-eyebrow { 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-bottom { flex-direction: column; gap: 10px; text-align: center }
    .heading { font-size: var(--t-2xl) !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;
    /* 4.5:1 or better on every surface this token is set against: #fff 5.33,
       --off #FAFAFA 5.10, --off2 #F2F2F2 4.76, --d2 #F0F0F0 4.68. The #8A8A8A
       it originally replaced measured 3.45:1 on white, and the #6E6E6E that
       followed still measured 4.47:1 on --d2 — which is where .note and
       .eng-state actually sit, so axe flagged it on the live site. Three
       hundredths of a point is not a rounding error when the audit proposed
       this exact value and it never landed. */
    --g3: #6B6B6B;
    /* The brand red is for large type, fills and rules. At 12-14px on the
       tinted panels it measures 4.21:1 on --d2, 4.33:1 on #F3F3F3 and 4.48:1
       on --d1 — all below the 4.5:1 SC 1.4.3 asks of small text, and all
       flagged by axe on all five live sites. Small red text takes this
       instead: the same darker red the buttons already hover to, which clears
       4.5:1 on every surface in the system (5.50:1 on --d2, 6.27:1 on white).
       Anything at or above 24px, or 18.66px bold, may keep --red. */
    --red-text: #C40004;
    --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: var(--t-sm); text-decoration: none; border-radius: 8px;
    transition: top .2s
}
.skip-link:focus { top: 12px }
/* The brand red at 28% opacity measured 1.67:1 against white and 1.00:1
   against the red CTA — on the primary call to action the focus ring was the
   same colour as the button, so a keyboard user tabbing through the page lost
   their place entirely. WCAG 2.2 SC 1.4.11 asks 3:1 of a focus indicator.

   The outline now carries the contrast (19.8:1 on white, 4.12:1 on the red
   button) and a red halo keeps the brand. Black would disappear on the two
   black elements, so those get a white outline instead. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--blk); outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(230,0,5,.25)
}
.skip-link:focus-visible,
.lang a[aria-current]:focus-visible {
    outline-color: #fff; box-shadow: 0 0 0 6px rgba(230,0,5,.45)
}

/* 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: 46px; height: 46px; max-width: none; object-fit: contain;
    border-radius: 3px; 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; 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); 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: var(--t-base); color: var(--blk); letter-spacing: -.02em }
/* Was 8px. Nothing that is meant to be read belongs below 11px, and these are
   the product families — the one thing a buyer scans the hero for. */
.hero-signal span { font-size: var(--t-xs); 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, .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. */

/* 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: var(--t-sm); line-height: 1.5 }
.form-required { margin: 0 0 24px; color: var(--g3); font-size: var(--t-sm); line-height: 1.6 }
.form-noscript { display: none; margin-bottom: 24px; font-size: var(--t-sm); line-height: 1.6 }
/* "optional" beside a label, so a required field is the default reading and
   the one field that is not says so in its own name rather than by absence. */
.form-optional {
    /* .85em of the label was 10.2px — under the floor, in the one place a
       visitor is being asked to type. It carries its meaning by weight and
       colour instead, which costs nothing. */
    font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--g3); font-size: var(--t-xs)
}

/* 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: var(--t-sm)}
.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
}
/* The deliver grid was hidden here while no page used it. The Solutions site
   uses it for the software operation, so it is visible again and takes the
   same section rhythm as everything else below. */
.rv { opacity: 1; transform: none; transition: none }
.deliver, .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: var(--t-sm); font-weight: 700;
    letter-spacing: 1.3px; text-transform: uppercase; text-decoration: none
}
.text-link span { color: var(--red); font-size: var(--t-lg); transition: transform .25s var(--ease) }
.text-link:hover span { transform: translateX(4px) }
.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: var(--t-sm); 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: var(--t-2xl); margin: 14px 0 24px
}
.innovation-copy p {
    max-width: 540px; color: var(--g1); font-size: var(--t-sm); 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: var(--t-xs); 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: var(--t-xs); 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: var(--t-xs); 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 }
    .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%;}
    .h-lower { width: 46% }
    .hero-signal { right: calc(var(--pad) + 16px) }
}
@media (max-width: 768px) {
    .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 { letter-spacing: 2px; padding: 9px 12px; margin-bottom: 24px }
    .h1 { width: 100%; max-width: 620px; 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;
        /* Three product families in a row fitted a phone only while their
           descriptors were 7px. At a legible size they need 356px in a 322px
           box, and the third one — Valve Lifters — was simply cut off. They
           wrap now: two lines of readable text beats one line with a product
           family missing. */
        flex-wrap: wrap; row-gap: 14px
    }
    /* The dividers are vertical rules between items on one line; across a
       wrap they would sit at the start of a row, pointing at nothing. */
    .hero-signal i { display: none }
    .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) }
    .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 span { font-size: var(--t-xs)}
    .hero-signal i { height: 24px }
}

/* ═══════════════ 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: var(--t-xs); 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 }

/* ═══════════════ 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: var(--t-sm); 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: var(--t-xs); font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase; color: var(--red);
    margin-bottom: 14px
}
.contact-email {
    display: inline-block; font-size: var(--t-lg);
    color: var(--blk); text-decoration: none;
    border-bottom: 1px solid var(--red); padding-bottom: 3px;
    /* An email address is one unbreakable word, so it sets the minimum width of
       everything around it: info@swissglobalholding.com is 280px at this size,
       and with the card's padding that is wider than a 360px phone. It pushed
       the whole page sideways. Letting it break is the fix that holds whatever
       the size or the address — the group's longest is 27 characters today. */
    overflow-wrap: anywhere
}
.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: var(--t-sm); 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: var(--t-xs); 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] { 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 }
    /* 9px text in 6px of padding is a 23px target, just under the 24px WCAG
       2.2 SC 2.5.8 asks — and this is the control a German or Czech visitor
       needs first, on the narrow screen where it is hardest to hit. */
    .lang a {
        padding: 6px 8px; font-size: var(--t-xs);
        min-height: 24px; min-width: 24px;
        display: inline-flex; align-items: center; justify-content: center
    }
}

/* ═══════════════ LONG WORDS ═══════════════

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

   This used to be inside `@media (max-width: 768px)`, on the assumption that
   a narrow screen was the only place it bit. It is not. The hero column is a
   percentage of the viewport with a fixed `max-width`, so it is *narrowest
   relative to its text* on a large screen: `Gebäudeenergie.` needs 650px of
   the Energy German hero's 620px at 1440px wide, and `OE-Referenz.` clips the
   Engine Parts German hero at 1024px. Neither was ever seen, because the
   render check opened `index.html` only and never once looked at a
   translation — the exact thing it exists for.

   `hyphens: auto` uses the page's own <html lang>, so German hyphenates as
   German and Czech as Czech; overflow-wrap is the guarantee for a word the
   browser has no rules for.  */
.h1, .heading, .sol-card-h, .oc-card-h, .proc-step-h, .app-card-h, .prod-title {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* A flex or grid child defaults to `min-width: auto`, which means it refuses
   to shrink below its own longest word. With German in it, that is how a
   two-column header and a label row came to be wider than the phone they
   were on: `Motorkomponenten` and `Systemarchitektur` set the floor, and the
   column could not go under it.

   Letting a box shrink only helps if the text inside it may then wrap, so
   the two go together: without the second rule the column stops overflowing
   and starts clipping instead, which is worse because it is silent.

   `min-width: 0` on the item is not enough for a grid, and that is the part
   worth writing down. A `1fr` track is `minmax(auto, 1fr)`, and its `auto`
   floor is the *content's* min-content width — so the track itself grows to
   fit the longest German compound however much the item is allowed to
   shrink. `minmax(0, 1fr)` is what actually lets the column be narrower than
   its longest word, so the tracks that hold prose are declared that way where
   they are defined rather than being overridden here. */
.sol-header > *, .tech-visual-label > *, .f-grid > * { min-width: 0 }
.tech-visual-label { flex-wrap: wrap }
.f-col-title, .f-col a, .sol-header > * { overflow-wrap: break-word }

/* The navigation is the one row that cannot wrap: a lockup and a name on the
   left, the language switch and the menu button on the right. At 320px the
   Engine Parts name needed 327px of the 272px it had, on every language.
   The tracking is what costs the room — 22 characters at 2.4px is 53px of
   At 320px there is no tightening that helps: 272px of content cannot hold a
   mark, a 22-character wordmark, a three-language switch and a menu button.
   The wordmark goes — but visually only. `display: none` would take it out of
   the accessibility tree, and it *is* the home link's accessible name, since
   the mark beside it is `alt=""`; removing it would undo H3 and H4 on the one
   screen size where a visitor is most likely to be lost. Clipped instead, so
   a screen reader still announces "Swiss Global Solutions, link".

   At 1024px the German navigation is 10px too wide for the row. The labels
   are the content and the gap is the slack, so the gap gives. */
@media (max-width: 1100px) {
    .n-links { gap: 22px }
    .n-links a { letter-spacing: .2px }
    .n-links .n-cta { padding: 10px 18px; letter-spacing: .8px }
}
/* ═══════════════ THE TABLET BAND ═══════════════

   Everything here used to live at `max-width: 768px`, on the assumption that
   a layout wide enough for a phone-sized menu was wide enough for the desktop
   row above it. Measured, that was wrong by up to 140px.

   The navigation row cannot wrap — it is a lockup, a name, a language switcher
   and five or six links — so when it runs out of room the links are clipped
   rather than moved, and nothing reports it: the row overflows inside `nav#nv`
   while the document's own width is unchanged. At 769px the row needed 41px
   more than it had on Energy and 140px more on Engine Parts, whose labels are
   longer and whose German is longer again. It was still 15px short at 900px.

   The footer had the mirror of the same problem, and is stacked earlier for
   the same reason; that rule sits further up, where the cascade needs it.

   960px is where the longest of the five navigations fits with room to spare,
   not where the shortest one starts to fail, because a label added later
   should not silently reopen this. Below it the hamburger and the stacked
   footer take over — the layout that was always there, now reached before the
   one above it breaks rather than after.

   This sits after the 1100px block deliberately: that block tightens `gap` on
   the desktop row, and an equally specific later rule is what stops it
   applying to the dropdown, where the gap is vertical and 18px. */
@media (max-width: 960px) {
    nav#nv { height: 72px }
    .n-logo-text { letter-spacing: 1.7px }
    .n-tog { display: flex }
    .n-tog span { background: var(--blk) }
    .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);}
    .n-links .n-cta { text-align: center }
}
@media (max-width: 400px) {
    .n-logo { gap: 0 }
    .n-logo img { width: 38px; height: 38px; flex: 0 0 auto }
    .n-logo-text {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        overflow: hidden; white-space: nowrap; clip-path: inset(50%);
    }
}

/* September 2026 / one editorial family, distinct business imagery.
   Scoped to redesigned homepages: standalone legal pages keep their layout. */
.atelier-site {
    --display: 'Inter', -apple-system, system-ui, sans-serif;
    --off: #faf9f6; --off2: #eeede8; --pad: clamp(22px, 5vw, 88px);
    --wrap: 1440px; --wrap-w: 1440px;
    --t-atelier-hero: clamp(56px, 6.4vw, 100px);
    --t-atelier-heading: clamp(36px, 4.5vw, 66px);
    --t-atelier-row: clamp(23px, 2.2vw, 34px);
    --t-atelier-dark: clamp(50px, 5.5vw, 86px);
    background: var(--off); color: #161815;
}
.atelier-site nav#nv, .atelier-site nav#nv.on {
    height: 76px; background: rgba(250,249,246,.97); border-bottom: 1px solid #ddddd5;
    box-shadow: none; backdrop-filter: blur(12px); transition: none;
}
.atelier-site .n-logo { gap: 12px; flex-shrink: 0; }
.atelier-site .n-logo img { width: 42px; height: 42px; border-radius: 0; }
.atelier-site .n-logo-text, .atelier-site nav#nv.on .n-logo-text {
    font-family: var(--body); font-size: var(--t-base); font-weight: 650;
    letter-spacing: -.045em; text-transform: none; color: #171916; max-width: none;
}
.atelier-site .n-links { gap: 24px; }
.atelier-site .n-links a, .atelier-site nav#nv.on .n-links a {
    font-family: var(--body); font-size: var(--t-sm); letter-spacing: -.025em;
    font-weight: 500; text-transform: none; color: #454741; min-height: 44px;
    display: inline-flex; align-items: center;
}
.atelier-site .n-links a:hover { color: var(--red-text); }
.atelier-site .n-links .n-cta, .atelier-site nav#nv.on .n-links .n-cta {
    color: white; border-radius: 0; box-shadow: none; padding: 13px 19px;
    background: var(--red); letter-spacing: 0; font-family: var(--body);
}
.atelier-site .n-links .n-cta:hover { transform: none; }
.atelier-site .n-tog { min-height: 44px; min-width: 44px; justify-content: center; align-items: center; }
.atelier-site .n-tog span { background: #171916; }
.atelier-site .n-right { gap: 20px; }
.atelier-site .lang { background: none; border: 0; border-radius: 0; padding: 0; gap: 0; }
.atelier-site .lang a { border-radius: 0; color: #55584f; letter-spacing: 0; min-height: 36px; min-width: 32px; padding: 10px 7px; }
.atelier-site .lang a[aria-current] { background: transparent; color: #171916; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--red); }
.atelier-site .lang a[aria-current]:focus-visible { outline-color: #171916; }
.atelier-site .hero {
    min-height: 730px; padding: 142px var(--pad) 125px; justify-content: center;
    background: var(--off); isolation: isolate;
}
.atelier-site .hero::before, .atelier-site .hero-bg::after { display: none; }
.atelier-site .hero-bg {
    inset: 76px 0 0; height: auto; border: 0; border-radius: 0; box-shadow: none;
    background: none; animation: none; z-index: -2; overflow: hidden;
}
.atelier-site .hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.atelier-site .hero-overlay { display: none; }
.atelier-site .h-eyebrow {
    background: none; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    font-family: var(--body); font-size: var(--t-xs); font-weight: 550;
    line-height: 1.6; letter-spacing: .10em; color: #55584f; margin: 0 0 28px;
}
.atelier-site .h-eyebrow span { width: 24px; height: 2px; border-radius: 0; box-shadow: none; flex-shrink: 0; }
.atelier-site .h1 {
    font-family: var(--body); font-size: var(--t-atelier-hero); line-height: 1.02;
    letter-spacing: -.065em; font-weight: 600; max-width: 820px; width: 69%;
    text-wrap: initial; color: #171916; margin: 0; hyphens: auto;
}
.atelier-site .h1 em { font-style: normal; color: inherit; }
.atelier-site .red-dot { color: var(--red); }
.atelier-site .h-lower { width: 48%; max-width: 590px; margin-top: 27px; }
.atelier-site .h-sub { color: #4b4f47; font-size: var(--t-base); line-height: 1.65; max-width: 500px; }
.atelier-site .h-actions { display: flex; flex-wrap: wrap; flex-direction: row; gap: 16px; margin-top: 26px; }
.atelier-site .btn-primary, .atelier-site .btn-secondary {
    display: inline-flex; justify-content: space-between; align-items: center; gap: 30px;
    font-family: var(--body); font-size: var(--t-sm); font-weight: 550;
    letter-spacing: 0; text-transform: none; border-radius: 0; padding: 17px 22px;
    min-height: 54px; box-shadow: none; transform: none; line-height: 1.4;
}
.atelier-site .btn-primary { background: var(--red); border: 1px solid var(--red); color: white; }
.atelier-site .btn-secondary { background: transparent; border: 0; border-bottom: 1px solid #94968e; color: #252822; padding-left: 0; padding-right: 0; }
.atelier-site .btn-primary:hover { background: #bd0004; }
.atelier-site .btn-secondary:hover { background: transparent; border-color: currentColor; }
.atelier-site .hero-signal {
    left: auto; right: var(--pad); bottom: 36px; padding: 0; gap: 26px;
    border: 0; border-top: 1px solid #555951; border-radius: 0; padding-top: 18px;
    background: transparent; box-shadow: none; backdrop-filter: none;
}
.atelier-site .hero-signal strong { color: #f4f4ee; font-weight: 550; }
.atelier-site .hero-signal span { color: #c0c4ba; letter-spacing: .05em; font-weight: 400; text-transform: none; }
.atelier-site .hero-signal i { background: #555951; }
.atelier-site .art-caption { position: absolute; bottom: 28px; left: var(--pad); color: #c0c4ba; font-size: var(--t-xs); line-height: 1.5; max-width: 30%; }
.atelier-energy .hero, .atelier-engineparts .hero { background: #101411; }
.atelier-energy .h1, .atelier-engineparts .h1 { color: #faf9f6; font-size: var(--t-atelier-dark); width: 61%; }
.atelier-energy .h-sub, .atelier-engineparts .h-sub { color: #d3d7cf; }
.atelier-energy .h-eyebrow, .atelier-engineparts .h-eyebrow { color: #d3d7cf; }
.atelier-energy .btn-secondary, .atelier-engineparts .btn-secondary { color: #faf9f6; border-color: #72776d; }
.atelier-engineparts .hero { padding-top: 163px; }
.atelier-engineparts .h1 { max-width: 720px; }
.atelier-site .heading { font-family: var(--body); font-size: var(--t-atelier-heading); font-weight: 550; letter-spacing: -.06em; line-height: 1.08; }
.atelier-site .heading em { font-style: normal; color: inherit; }
.atelier-site .label { font-family: var(--body); font-size: var(--t-xs); letter-spacing: .12em; color: #575b52; font-weight: 550; }
.atelier-site .proof { background: #111511; border: 0; padding-top: 0; padding-bottom: 0; }
.atelier-site .proof-inner { border: 0; border-radius: 0; background: none; gap: 0; }
.atelier-site .proof-item { background: none; border-color: #3d4439; padding: 28px 18px; }
.atelier-site .proof-val { color: #faf9f6; font-size: var(--t-xl); font-weight: 500; }
.atelier-site .proof-desc { color: #b9c0b3; letter-spacing: .06em; font-weight: 400; }
.atelier-site .solutions, .atelier-site .process, .atelier-site .apps { background: #eeede7; }
.atelier-site .tech, .atelier-site .outcomes, .atelier-site .deliver { background: var(--off); }
.atelier-site .sol-header, .atelier-site .proc-header { gap: 8%; margin-bottom: 54px; }
.atelier-site .sol-intro, .atelier-site .proc-sub, .atelier-site .oc-intro { font-size: var(--t-base); line-height: 1.75; color: #55594f; }
.atelier-site .sol-img, .atelier-site .tech-visual img, .atelier-site .apps-panorama, .atelier-site .innovation-visual img, .atelier-site .img-frame { border-radius: 0; box-shadow: none; }
.atelier-site .sol-img:hover, .atelier-site .sol-images .sol-img:hover { transform: none; }
.atelier-site .sol-card, .atelier-site .del-card, .atelier-site .feature, .atelier-site .proc-step, .atelier-site .app-card, .atelier-site .oc-card {
    border: 0 !important; border-top: 1px solid #bfc3b6 !important; border-radius: 0;
    background: transparent; box-shadow: none; padding: 27px 20px 20px 0; min-height: 0;
}
.atelier-site .sol-card:hover, .atelier-site .del-card:hover, .atelier-site .feature:hover, .atelier-site .proc-step:hover, .atelier-site .app-card:hover, .atelier-site .oc-card:hover { transform: none; box-shadow: none; background: transparent; }
.atelier-site .sol-card-h, .atelier-site .proc-step-h, .atelier-site .oc-card-h, .atelier-site .app-card-h { font-family: var(--body); font-weight: 550; letter-spacing: -.035em; line-height: 1.25; }
.atelier-site .sol-card-p, .atelier-site .oc-card-p, .atelier-site .proc-step-p, .atelier-site .app-card-p { color: #55594f; font-size: var(--t-sm); line-height: 1.8; }
.atelier-site .sol-card-p { min-height: 0; }
.atelier-site .sol-card-tag { color: #575b52; font-family: var(--body); letter-spacing: .10em; }
.atelier-site .card-link, .atelier-site .text-link { text-transform: none; letter-spacing: 0; min-height: 44px; line-height: 1.5; white-space: normal; }
.atelier-site .tech-specs { gap: 0; background: none; }
.atelier-site .spec { border-radius: 0; border: 0; border-top: 1px solid #c4c7bc; background: transparent; padding-left: 0; }
.atelier-site .prod, .atelier-site .europe, .atelier-site .oe, .atelier-site .eng-list, .atelier-site .prep-callout, .atelier-site .supply-box { border-radius: 0; box-shadow: none; }
.atelier-site .innovation-strip { background: #e9e9e1; }
.atelier-site .innovation-status, .atelier-site .innovation-visual span { border-radius: 0; }
.atelier-site .cta-section { background: #eaeae2; border-top: 1px solid #d1d3c8; }
.atelier-site .cta-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9%; }
.atelier-site .cta-content .heading { font-size: var(--t-atelier-heading); }
.atelier-site .cta-desc, .atelier-site .cta-trust-item { color: #55594f; line-height: 1.75; }
.atelier-site .cta-content .contact-block { border-radius: 0; background: none; border: 0; border-top: 1px solid #bfc3b6; padding: 24px 0 0; }
.atelier-site .contact-email { font-family: var(--body); font-size: var(--t-lg); letter-spacing: -.03em; overflow-wrap: anywhere; }
.atelier-site .form-card { border: 1px solid #cfd2c6; border-radius: 0; box-shadow: none; background: #faf9f6; padding: clamp(22px, 3vw, 44px); }
.atelier-site .form-card label { color: #35392f; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: var(--t-sm); }
.atelier-site .form-card input, .atelier-site .form-card select, .atelier-site .form-card textarea { background: #fff; border: 1px solid #b9bdb0; border-radius: 0; min-height: 52px; color: #171916; font-size: var(--t-base); box-shadow: none; }
.atelier-site .form-card input::placeholder, .atelier-site .form-card textarea::placeholder { color: #70766a; }
.atelier-site .form-card textarea { min-height: 150px; }
.atelier-site .form-card input:focus, .atelier-site .form-card select:focus, .atelier-site .form-card textarea:focus { outline: 2px solid #171916; outline-offset: 2px; box-shadow: none; }
.atelier-site .form-submit { border-radius: 0; box-shadow: none; min-height: 56px; letter-spacing: 0; text-transform: none; font-family: var(--body); font-size: var(--t-base); }
.atelier-site .form-submit:hover { transform: none; }
.atelier-site .form-note { text-align: left; color: #55594f; line-height: 1.7; }
.atelier-site footer { background: #111511; }
.atelier-site .f-brand-name { color: #f4f5ef; font-family: var(--body); font-weight: 550; letter-spacing: -.035em; }
.atelier-site .f-brand-mark { width: 72px; height: 72px; }
.atelier-site .f-brand-legal, .atelier-site .f-brand-desc, .atelier-site .f-col a, .atelier-site .f-copy, .atelier-site .f-legal a, .atelier-site .f-legal span, .atelier-site .group-bar-label { color: #bec5b7; }
.atelier-site .f-brand-legal a, .atelier-site .group-bar a { color: #e6eadf; }
.atelier-site .f-col a { min-height: 36px; display: inline-flex; align-items: center; }
.atelier-site .f-col-title { color: #e6eadf; font-family: var(--body); letter-spacing: .07em; }
.atelier-site .group-bar, .atelier-site .f-bottom { border-color: #37402f; }
.atelier-site .group-bar a { min-height: 44px; display: inline-flex; align-items: center; }
.atelier-site footer a:hover { color: white; }
.atelier-site a:focus-visible, .atelier-site button:focus-visible, .atelier-site summary:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; box-shadow: none; }
.atelier-site .btn-primary:focus-visible, .atelier-site .n-cta:focus-visible, .atelier-site .editorial-button:focus-visible, .atelier-site .form-submit:focus-visible { outline-color: #171916; box-shadow: 0 0 0 6px #faf9f6; }
@media (max-width: 1120px) {
    .atelier-site .n-links { display: none; position: absolute; top: 76px; left: 0; right: 0; background: #faf9f6; padding: 20px var(--pad) 28px; flex-direction: column; align-items: stretch; gap: 4px; border: 0; border-bottom: 1px solid #bfc3b6; border-radius: 0; box-shadow: none; }
    .atelier-site .n-links.open { display: flex; }
    .atelier-site .n-links a { min-height: 48px; padding: 12px 0; }
    .atelier-site .n-links .n-cta { justify-content: space-between; padding: 15px 20px; margin-top: 8px; }
    .atelier-site .n-tog { display: flex; }
    .atelier-site .hero { min-height: 710px; }
    .atelier-site .h1 { width: 75%; }
    .atelier-site .h-lower { width: 55%; }
    .atelier-site .cta-layout { gap: 5%; }
    .atelier-site .form-row { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 768px) {
    .atelier-site { --t-atelier-hero: clamp(44px, 10vw, 76px); --t-atelier-heading: clamp(36px, 7.5vw, 52px); }
    .atelier-site .hero { min-height: 0; padding: 123px var(--pad) 260px; justify-content: flex-start; }
    .atelier-site .hero-bg { inset: auto 0 0; height: 290px; }
    .atelier-site .hero-photo { object-position: right bottom; }
    .atelier-site .h1 { width: 100%; max-width: 680px; font-size: var(--t-atelier-hero); }
    .atelier-site .h-lower { width: 100%; max-width: 580px; margin-top: 24px; }
    .atelier-site .h-eyebrow { font-size: var(--t-xs); letter-spacing: .07em; margin-bottom: 25px; }
    .atelier-site .h-sub { font-size: var(--t-base); }
    .atelier-site .h-actions { gap: 16px 24px; }
    .atelier-site .hero-signal { display: none; }
    .atelier-site .art-caption { left: var(--pad); max-width: 70%; bottom: 20px; color: white; background: #151b13; padding: 5px 8px; }
    .atelier-site .proof-item { padding: 22px 14px; }
    .atelier-site .proof-val { font-size: var(--t-xl); }
    .atelier-site .proof-desc { line-height: 1.6; letter-spacing: .02em; }
    .atelier-site .cta-layout { grid-template-columns: 1fr; gap: 38px; }
    .atelier-site .sol-header, .atelier-site .proc-header { gap: 25px; }
    .atelier-site .heading br { display: none; }
    .atelier-site .sol-images { grid-template-columns: minmax(0,1fr); }
    .atelier-site .sol-img { min-height: 0; min-width: 0; }
    .atelier-site .f-col a { display: block; padding: 8px 0; overflow-wrap: anywhere; }
    .atelier-site .n-right { gap: 5px; }
    .atelier-site .n-logo-text { font-size: var(--t-sm); max-width: 110px; line-height: 1.15; }
    .atelier-site .n-logo { gap: 9px; }
    .atelier-site .lang a { min-height: 36px; min-width: 28px; padding: 10px 6px; }
}
@media (max-width: 400px) {
    .atelier-site .n-logo img { width: 38px; height: 38px; }
    .atelier-site .n-logo-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
    .atelier-site .hero { padding-bottom: 240px; }
    .atelier-site .h-actions .btn-primary { width: 100%; justify-content: center; }
}

/* Essential content is visible immediately, without entrance delays. */
.atelier-site .h-eyebrow, .atelier-site .h1, .atelier-site .h-lower { opacity: 1; animation: none; transform: none; }
@media (max-width: 400px) {
    .atelier-site .n-logo-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; white-space: normal; clip-path: none; max-width: 90px; font-size: var(--t-xs); }
    .atelier-solutions .n-logo-text, .atelier-group .n-logo-text, .atelier-capital .n-logo-text { max-width: 150px; font-size: var(--t-sm); }
}
.atelier-site .f-col a { display: block; min-height: 40px; padding: 8px 0; overflow-wrap: anywhere; }
.atelier-site .prow, .atelier-site .chip, .atelier-site .co-card, .atelier-site .cap, .atelier-site .cta-direct, .atelier-site .co-diagram img, .atelier-site .img-frame img { border-radius: 0; box-shadow: none; }
/* Specifications and product families already appear in the strip and copy.
   Keep small text off the reflective artwork, where contrast varies. */
.atelier-site .hero-signal { display: none; }

/* Proposal 03: compact editorial composition, shared across the five brands.
   The genuine brand marks, Swiss red and type-size floor remain unchanged. */
.proposal-site {
    --off: #fafafa; --off2: #f1f1ef; --pad: clamp(22px, 4.4vw, 84px);
    --t-proposal-hero: clamp(58px, 6.35vw, 104px);
    --t-proposal-heading: clamp(34px, 3.6vw, 58px);
    --t-proposal-band: clamp(30px, 3.3vw, 52px);
    --t-proposal-mobile: clamp(40px, 10.5vw, 64px);
    --t-proposal-note: 12px;
    background: var(--off); color: #111;
}
.proposal-site nav#nv, .proposal-site nav#nv.on { height: 68px; background: rgba(255,255,255,.97); border-color: #e2e2df; }
.proposal-site .n-logo img { width: 40px; height: 40px; }
.proposal-site .n-logo-text { letter-spacing: -.025em; }
.proposal-site .n-links .n-cta, .proposal-site nav#nv.on .n-links .n-cta { min-height: 40px; padding: 10px 18px; }
.proposal-site .hero { min-height: 610px; padding: 132px var(--pad) 108px; justify-content: flex-start; overflow: hidden; background: #fafafa; }
.proposal-site .hero-bg { inset: 68px 0 0; height: auto; }
.proposal-site .hero-photo { object-position: center; }
.proposal-site .hc { width: 100%; }
.proposal-site .h1 { width: 70%; max-width: 960px; font-size: var(--t-proposal-hero); line-height: .99; letter-spacing: -.068em; font-weight: 700; hyphens: none; }
.proposal-site .h-eyebrow { font-weight: 500; letter-spacing: .2em; font-size: var(--t-xs); margin-bottom: 24px; }
.proposal-site .h-lower { width: 46%; max-width: 570px; margin-top: 22px; }
.proposal-site .h-sub { font-size: var(--t-lg); line-height: 1.45; color: #222; }
.proposal-site .h-actions { margin-top: 22px; gap: 18px; }
.proposal-site .btn-primary, .proposal-site .btn-secondary { min-height: 46px; padding: 13px 18px; font-weight: 550; }
.proposal-site .btn-secondary { padding-left: 0; padding-right: 0; }
.proposal-site .art-caption { bottom: 23px; color: #d5d5d5; font-size: var(--t-xs); }
.proposal-site .signature-corner { position: absolute; right: 22px; bottom: 24px; width: 45px; height: 80px; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); pointer-events: none; z-index: 1; }
.proposal-site .signature-corner::before { content: ''; position: absolute; top: 0; right: 0; width: 22px; border-top: 1px solid var(--red); }
.proposal-site .hero-scroll { display: none; }
.proposal-site .heading { font-weight: 650; font-size: var(--t-proposal-heading); line-height: 1.04; letter-spacing: -.055em; }
.proposal-site .solutions, .proposal-site .process, .proposal-site .apps, .proposal-site .tech, .proposal-site .outcomes, .proposal-site .deliver { padding-top: 76px; padding-bottom: 76px; background: #fafafa; }
.proposal-site .process, .proposal-site .apps { background: #f0f0ed; }
.proposal-site .sol-header, .proposal-site .proc-header { margin-bottom: 38px; }
.proposal-site .label { color: #535353; font-weight: 500; letter-spacing: .18em; }
.proposal-site .sol-intro, .proposal-site .proc-sub, .proposal-site .oc-intro { color: #515151; }
.proposal-site .proof { background: #fafafa; border-bottom: 1px solid #dededb; }
.proposal-site .proof-val { color: #111; font-size: var(--t-xl); letter-spacing: -.045em; font-weight: 600; }
.proposal-site .proof-val span { color: inherit; }
.proposal-site .proof-desc { color: #555; text-transform: none; letter-spacing: 0; }
.proposal-site .proof-item { border-color: #dededb; padding: 25px 20px; }
.proposal-site .sol-card, .proposal-site .del-card, .proposal-site .feature, .proposal-site .proc-step, .proposal-site .app-card, .proposal-site .oc-card { border-top-color: #ccc !important; }
.proposal-site .sol-card-tag { color: #535353; }
.proposal-site .sol-card-p, .proposal-site .oc-card-p, .proposal-site .proc-step-p, .proposal-site .app-card-p { color: #515151; }
.proposal-site .image-interlude { position: relative; height: clamp(230px, 29vw, 440px); overflow: hidden; background: #111; }
.proposal-site .image-interlude img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proposal-site .architecture-interlude img { object-position: center 86%; filter: brightness(.7); transform: scale(1.15); }
.proposal-site .stone-interlude img { object-position: center 80%; transform: scale(1.16); }
.proposal-site .glass-interlude img { object-position: center 72%; transform: scale(1.3); }
.proposal-site .cta-section { background: #f0f0ed; padding-top: 82px; padding-bottom: 82px; }
.proposal-site footer { background: #111; }
.proposal-site .f-brand-name { letter-spacing: -.04em; }
.proposal-site .f-col-title, .proposal-site .f-brand-legal a, .proposal-site .group-bar a { color: #eee; }
.proposal-site .f-brand-legal, .proposal-site .f-brand-desc, .proposal-site .f-col a, .proposal-site .f-copy, .proposal-site .f-legal a, .proposal-site .f-legal span, .proposal-site .group-bar-label { color: #bdbdbd; }
.proposal-site .f-bottom, .proposal-site .group-bar { border-color: #333; }
.proposal-site.atelier-energy .hero, .proposal-site.atelier-engineparts .hero { background: #08090a; }
.proposal-site.atelier-energy .h1, .proposal-site.atelier-engineparts .h1 { color: #fff; }
.proposal-site.atelier-energy .h-sub, .proposal-site.atelier-engineparts .h-sub, .proposal-site.atelier-energy .h-eyebrow, .proposal-site.atelier-engineparts .h-eyebrow { color: #eee; }
.proposal-site.atelier-energy .h-lower, .proposal-site.atelier-engineparts .h-lower { width: 44%; }
.proposal-site.atelier-engineparts .hero-photo { object-fit: contain; object-position: right center; }
.proposal-site.atelier-engineparts .hero-bg { left: 30%; }
.proposal-site.atelier-engineparts .hero-bg::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#08090a,transparent 22%); }
.proposal-site.atelier-engineparts .h1 { width: 75%; }
.proposal-site.atelier-group .hero-overlay, .proposal-site.atelier-capital .hero-overlay { display: block; position: absolute; inset: 68px 0 0; z-index: -1; background: linear-gradient(90deg,rgba(250,250,250,.96),rgba(250,250,250,.85) 25%,transparent 64%); }
.proposal-site.atelier-capital .hero { min-height: 660px; }
.proposal-site.atelier-capital .h1 { font-weight: 700; }
.proposal-site.atelier-capital .h-sub { max-width: 420px; }
.proposal-site.atelier-capital .signature-corner { height: 210px; width: 72px; right: 5%; }
.proposal-site.atelier-energy .solutions .sol-images { margin-bottom: 30px; }
.proposal-site.atelier-energy .sol-img { min-height: 220px; }
@media (min-width: 1700px) { .proposal-site .hero { min-height: 700px; } }
@media (max-width: 1120px) {
    .proposal-site nav#nv .n-links { top: 68px; background: white; }
    .proposal-site .hero { padding-top: 120px; min-height: 590px; }
    .proposal-site .h1 { width: 80%; }
    .proposal-site .h-lower { width: 50%; }
    .proposal-site .h-sub { font-size: var(--t-base); }
}
@media (max-width: 768px) {
    .proposal-site { --pad: 24px; }
    .proposal-site nav#nv, .proposal-site nav#nv.on { height: 64px; }
    .proposal-site nav#nv .n-links { top: 64px; }
    .proposal-site .n-logo-text { font-size: var(--t-sm); }
    .proposal-site .hero { min-height: 640px; padding: 102px var(--pad) 210px; }
    .proposal-site .hero-bg { inset: 64px 0 0; height: auto; }
    .proposal-site .hero-photo { object-position: 64% bottom; }
    .proposal-site .h1 { width: 100%; font-size: var(--t-proposal-mobile); line-height: 1.01; letter-spacing: -.06em; }
    .proposal-site .h-eyebrow { margin-bottom: 20px; letter-spacing: .12em; }
    .proposal-site .h-lower { width: 100%; max-width: 320px; margin-top: 18px; }
    .proposal-site .h-sub { font-size: var(--t-base); line-height: 1.45; }
    .proposal-site .h-actions { margin-top: 20px; gap: 8px 18px; }
    .proposal-site .h-actions .btn-primary { width: auto; }
    .proposal-site .btn-primary, .proposal-site .btn-secondary { min-height: 46px; }
    .proposal-site .signature-corner { right: 20px; bottom: 22px; height: 64px; width: 30px; }
    .proposal-site .art-caption { max-width: 72%; background: #111; padding: 3px 6px; bottom: 14px; }
    .proposal-site.atelier-energy .hero, .proposal-site.atelier-engineparts .hero { min-height: 540px; padding-bottom: 145px; }
    .proposal-site.atelier-energy .h1, .proposal-site.atelier-engineparts .h1 { width: 100%; }
    .proposal-site.atelier-energy .h-lower, .proposal-site.atelier-engineparts .h-lower { width: 82%; max-width: 300px; }
    .proposal-site.atelier-energy .hero-photo { object-position: 57% center; }
    .proposal-site.atelier-energy .hero-overlay, .proposal-site.atelier-engineparts .hero-overlay { display: block; position: absolute; inset: 64px 0 0; z-index: -1; background: linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.5) 50%,transparent 90%); }
    .proposal-site.atelier-engineparts .hero-bg { inset: 175px -45px 18px 0; }
    .proposal-site.atelier-engineparts .hero-photo { object-fit: cover; object-position: 73% center; }
    .proposal-site.atelier-engineparts .h-actions { max-width: 210px; }
    .proposal-site.atelier-engineparts .hero-overlay { background: linear-gradient(180deg,#08090a 0%,rgba(8,9,10,.85) 18%,transparent 57%); }
    .proposal-site.atelier-group .hero-overlay, .proposal-site.atelier-capital .hero-overlay { inset: 64px 0 0; background: linear-gradient(180deg,#fafafa 0%,rgba(250,250,250,.96) 30%,rgba(250,250,250,.72) 47%,transparent 70%); }
    .proposal-site.atelier-group .hero-photo, .proposal-site.atelier-capital .hero-photo { object-position: 70% bottom; }
    .proposal-site.atelier-capital .hero { min-height: 640px; }
    .proposal-site.atelier-capital .signature-corner { height: 150px; width: 50px; }
    .proposal-site .solutions, .proposal-site .process, .proposal-site .apps, .proposal-site .tech, .proposal-site .outcomes, .proposal-site .deliver { padding-top: 52px; padding-bottom: 52px; }
    .proposal-site .sol-header, .proposal-site .proc-header { margin-bottom: 28px; }
    .proposal-site .proof-item { padding: 20px 12px; }
    .proposal-site .proof-val { font-size: var(--t-lg); }
    .proposal-site .proof-desc { font-size: var(--t-xs); }
    .proposal-site .heading br { display: initial; }
    .proposal-site .cta-section { padding-top: 58px; padding-bottom: 58px; }
    .proposal-site .sol-images { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .proposal-site .sol-images .sol-img { aspect-ratio: auto; width: 100%; min-width: 0; min-height: 0; height: 190px; }
    .proposal-site .sol-images .sol-img:last-child { grid-column: auto; }
    .proposal-site .sol-img-info { padding: 12px 8px; }
    .proposal-site .sol-img-name { font-size: var(--t-sm); }
    .proposal-site .sol-img-tag { font-size: var(--t-xs); letter-spacing: 0; }
}
@media (max-width: 400px) {
    .proposal-site { --pad: 20px; }
    .proposal-site .hero { padding-top: 98px; }
    .proposal-site .h-eyebrow { letter-spacing: .08em; }
    .proposal-site .n-logo-text { max-width: 88px; }
    .proposal-site.atelier-solutions .n-logo-text, .proposal-site.atelier-group .n-logo-text, .proposal-site.atelier-capital .n-logo-text { max-width: 142px; }
    .proposal-site .lang a { padding: 10px 5px; }
    .proposal-site .sol-images { grid-template-columns: 1fr; }
    .proposal-site .sol-images .sol-img { height: 220px; }
}

/* ═══════════════ SGS ENGINE PARTS ═══════════════
   What this site adds to the shared system in packages/brand.
   ═════════════════════════════════════════════════ */

:root {
    /* The hero panel below paints its own field, so the shared
       full-bleed hero photograph is not used here. */
    --hero-image: none;
    /* Fine print runs a shade darker than the group default. */
    --g3: #6E6E6E;
}

/* The requested brand line stays legible and wraps on narrow screens. */
.proposal-site.atelier-engineparts .h-eyebrow {
    font-size: var(--t-lg);
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.5;
    max-width: 100%;
}
@media (max-width: 600px) {
    .atelier-engineparts .n-logo-text { display: none; }
}

/* Hero panel: the truck sits on the presentation's navy field.
   The photograph is an <img>, not a background. As a background it was one
   1400px file for every device -- a phone downloaded 113 KB to paint about
   400 CSS pixels -- and a background cannot carry srcset. It is also the LCP
   element, so it is the one picture worth giving the browser a choice about.
   The panel behind it continues the picture's own sky and ground colours, so
   `contain` crops nothing and the bands read as part of the image. */
.hero-bg {
    background: linear-gradient(180deg, #C99B67 0%, #C99B67 26%, #6B563C 50%, #362A1E 74%, #362A1E 100%);
    border: 1px solid rgba(255,255,255,.35)
}
.hero-photo {
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center center
}
.hero-bg::after { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(54,42,30,.12)) }
.hero-signal strong { font-size: var(--t-base)}

/* The eyebrow badge holds a dot plus its own text span. */
.h-eyebrow span { width: auto; height: auto; background: none; border-radius: 0; box-shadow: none }
.h-eyebrow .dot {
    width: 7px; height: 7px; margin-right: 10px; background: var(--red);
    border-radius: 50%; box-shadow: 0 0 0 5px rgba(230,0,5,.1)
}

/* Headlines carry longer German and Czech wording, so they run a step smaller. */
.sol-header .heading, .tech-header .heading, .oc-header .heading,
.apps-header .heading, .cta-content .heading {
    font-size: var(--t-2xl)
}
/* Only widen the two-column header where there is room; below 1024px the
   base stylesheet stacks it, and this must not override that. */
@media (min-width: 1025px) { .sol-header { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) } }
.oc-header, .apps-header { max-width: 680px }

/* Bullet lists inside cards */
.bullets { margin-top: 14px; display: grid; gap: 9px; padding: 0; list-style: none }
.bullets li {
    position: relative; padding-left: 17px;
    font-size: var(--t-sm); line-height: 1.7; color: var(--g1)
}
.bullets li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--red)
}

/* Europe banner */
.europe {
    margin-top: 26px; display: flex; align-items: center; gap: 16px;
    padding: 18px 24px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.8)
}
.europe-mark {
    font-family: var(--body); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 2.6px; text-transform: uppercase; color: var(--red)
}
.europe-text { font-size: var(--t-sm); line-height: 1.7; color: var(--g1) }

/* Lists that are lists semantically but not visually */
.eng-list, .chips { list-style: none; padding: 0; margin: 0 }
.prow-h { font-family: var(--body) }

/* Product rows */
.prows { display: grid; gap: 14px; margin-top: 4px }
.prow {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 22px 24px; background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.08); border-bottom: 2px solid rgba(0,0,0,.12);
    border-radius: 14px; box-shadow: 0 10px 32px rgba(0,0,0,.04);
    transition: border-color .35s var(--ease), background .35s var(--ease)
}
.prow:hover { background: #fff; border-bottom-color: var(--red) }
.prow-h {
    font-family: var(--body); font-weight: 600; letter-spacing: -.03em;
    font-size: var(--t-lg); color: var(--blk)
}
.prow-m { font-size: var(--t-sm); color: var(--g1); text-align: right; flex-shrink: 0 }

/* Framed technical imagery */
.img-frame {
    border: 1px solid rgba(0,0,0,.08); border-radius: 18px;
    background: #fff; padding: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.07)
}
.img-frame img { width: 100%; border-radius: 10px }
.img-frame figcaption {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding: 0 4px 2px
}
.img-frame-flag {
    font-family: var(--display); font-size: var(--t-xs); font-weight: 400;
    letter-spacing: 3.5px; text-transform: uppercase; color: var(--red)
}
.img-frame-title { font-size: var(--t-xs); color: var(--g3) }

/* Callout */
.callout {
    margin-top: 24px; display: flex; align-items: center; justify-content: space-between;
    gap: clamp(20px, 3vw, 44px); padding: clamp(26px, 2.8vw, 38px);
    border-radius: 18px; border: 1px solid rgba(0,0,0,.08); background: #F3F3F3
}
.callout p {
    font-size: var(--t-lg); font-weight: 600;
    letter-spacing: -.025em; line-height: 1.4; color: var(--blk); max-width: 620px
}
.callout .btn-primary { flex-shrink: 0 }

/* Engine listings */
.eng-layout {
    display: grid; grid-template-columns: 1.5fr .85fr;
    gap: clamp(32px, 4vw, 64px); align-items: start
}
/* A flat list: no cards, every platform set the same, rows divided by a rule. */
.eng-list { display: grid; gap: 0; counter-reset: eng }
.eng-row {
    display: flex; align-items: center; gap: 18px;
    padding: 15px 2px;
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(0,0,0,.09);
    counter-increment: eng
}
.eng-row:last-child { border-bottom: 0 }
.eng-name { flex: 1 1 0; min-width: 0 }
/* Which platforms are stock, which are being tooled, which are a quotation.
   The site listed all seven as one programme; only the first is one. */
.eng-state {
    flex: 0 0 auto; font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .4px; color: var(--g3); white-space: nowrap
}
.eng-state.is-now { color: var(--red-text) }
.eng-state.is-prep { color: var(--g2) }
.eng-row::before {
    content: '0' counter(eng);
    font-family: var(--body); font-size: var(--t-xs); font-weight: 700;
    color: var(--red); letter-spacing: 1px; flex-shrink: 0
}
.eng-name { font-size: var(--t-sm); line-height: 1.5; font-weight: 700; color: var(--blk) }
.note {
    margin-top: 22px; max-width: 780px;
    font-size: var(--t-sm); font-style: italic; line-height: 1.75; color: var(--g3)
}

/* ── Blocks that hang below the engine list: OE references, then markets ──
   Both are a sub-head and a body, so they share one rule. */
.oe, .markets {
    margin-top: clamp(48px, 5vw, 76px); padding-top: clamp(36px, 4vw, 56px);
    border-top: 1px solid rgba(0,0,0,.09)
}
.oe-head, .markets-head { max-width: 720px; margin-bottom: 26px }
.oe-head .heading, .markets-head .heading { font-size: var(--t-2xl); margin-bottom: 16px }
.oe-head p, .markets-head p { font-size: var(--t-sm); line-height: 1.85; color: var(--g1) }

/* The part numbers. A buyer arrives with one number and scans for it, so they
   are set in a monospaced face at one weight: nothing is highlighted, because
   the list itself is the answer. */
.oe-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden
}
.oe-fam { padding: 22px 24px; background: #fff }
.oe-fam-h {
    font-family: var(--body); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--red);
    margin-bottom: 14px
}
.oe-nums { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.oe-nums li {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--t-sm); font-weight: 500; color: var(--blk);
    letter-spacing: -.01em
}
.oe-nums li span {
    font-family: var(--body); font-size: var(--t-xs); font-weight: 400;
    color: var(--g3); margin-left: 6px
}

/* Separate programmes share the reference finder without implying fitment. */
.catalogue-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block: 28px; }
.catalogue-nav a { font-size: var(--t-sm); color: var(--g1); text-decoration: underline; text-underline-offset: 5px; }
.catalogue-nav a:hover { color: var(--red); }
.catalogue-section { padding: var(--sec) 0; color: var(--blk); }
.catalogue-section .heading { color: var(--blk); }
.catalogue-section .oe-fam { min-width: 0; }
.catalogue-section .oe-nums li { overflow-wrap: anywhere; }
.catalogue-section .oe-nums li span { display: block; margin: 3px 0 0; }
.catalogue-example, .catalogue-note { font-size: var(--t-xs); line-height: 1.75; color: var(--g1); }
.catalogue-example { margin-bottom: 16px; }
.catalogue-note { margin-top: 18px; }
.catalogue-section .note, .catalogue-section .callout { margin-top: 28px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px }
.chip {
    padding: 12px 18px; border-radius: 999px; background: #fff;
    border: 1px solid rgba(0,0,0,.1); font-size: var(--t-xs); font-weight: 600;
    color: var(--g2); transition: all .3s var(--ease)
}
.chip:hover { border-color: rgba(230,0,5,.25); color: var(--blk) }

/* ═══════════════ IN PREPARATION ═══════════════
   GM, Cummins and Cat: published as references, not as stock. White, so it
   reads as its own section between the two light ones around it. */
.prep { padding: var(--sec) 0; background: var(--wht); color: var(--blk) }
.prep .heading { color: var(--blk) }
.prep .heading em { color: var(--red) }
.prep-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 34px)
}
.prep-brand {
    padding: 26px 26px 22px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,.09); background: var(--off)
}
.prep-brand-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.09) }
.prep-brand-h {
    font-family: var(--body); font-size: var(--t-lg); font-weight: 650;
    letter-spacing: -.03em; color: var(--blk)
}
.prep-brand-m { margin-top: 5px; font-size: var(--t-xs); color: var(--g3) }
.prep-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px }
.prep-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px }
.prep-no {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--t-sm); font-weight: 500; color: var(--blk)
}
.prep-d { font-size: var(--t-xs); color: var(--g1); text-align: right }
.prep .callout { margin-top: clamp(32px, 3.5vw, 48px) }

/* What the engineering answers are, and are not, published as: the
   specification lives under NDA, the commercial terms live in the quotation. */
.terms {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.5vw, 36px); margin-top: clamp(28px, 3vw, 40px)
}
.terms-item {
    padding: 24px 26px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08); background: var(--off)
}
.terms-h {
    font-family: var(--body); font-size: var(--t-base); font-weight: 650;
    letter-spacing: -.02em; color: var(--blk); margin-bottom: 10px
}
.terms-item p { font-size: var(--t-sm); line-height: 1.8; color: var(--g1) }

/* Company capability grid */
.co-layout { display: grid; gap: clamp(32px, 4vw, 56px) }
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.co-diagram { margin: 0 }
.co-diagram a { display: block }
.co-diagram img { width: 100%; border-radius: 12px }
.cap {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
    background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.035);
    font-size: var(--t-sm); font-weight: 500; line-height: 1.45; color: var(--g2);
    transition: border-color .3s var(--ease)
}
.cap:hover { border-color: rgba(230,0,5,.2) }
.cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: 0 0 auto }
.qtl {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    margin-top: 22px; padding: 18px 24px; border-radius: 14px;
    border: 1px solid rgba(230,0,5,.16); background: rgba(255,255,255,.75);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--red)
}

/* Footer legal block */
.f-brand-group { display: block; margin-top: 10px }
.f-brand-legal a { display: inline-block; margin-top: 10px }

/* ── Footer: four even columns, register details as fine print ── */
.f-grid {
    max-width: var(--wrap-w);
    display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: start
}
.f-brand { max-width: 340px }
.f-brand-desc { margin-bottom: 0 }
.f-brand-mail {
    display: inline-block; margin-top: 18px;
    font-size: var(--t-sm); font-weight: 600; letter-spacing: -.01em;
    color: var(--blk); text-decoration: none
}
.f-brand-mail:hover { color: var(--red) }
.f-col-title { margin-bottom: 16px }
.f-col a { margin-bottom: 11px }
.f-ext { color: var(--red); font-size: var(--t-xs)}
.f-bottom {
    display: block; max-width: var(--wrap-w);
    margin-top: clamp(44px, 5vw, 64px); padding-top: 22px
}
.f-fine { font-size: var(--t-xs); line-height: 1.75; color: var(--g3) }
/* The inherited rule only coloured .f-legal span, leaving this link white on white. */
.f-legal a { color: var(--g3) }
.f-legal a:hover { color: var(--blk) }
.f-fine + .f-fine { margin-top: 6px }
.f-base {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.07)
}

@media (max-width: 900px) {
    .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px }
    .f-brand { grid-column: 1 / -1; max-width: 560px }
}
@media (max-width: 560px) {
    .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px }
    .f-base { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left }
    .f-bottom { text-align: left }
}

/* Contact details block */
.cta-contact {
    display: grid; gap: 6px; margin-bottom: 30px;
    padding: 22px 24px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,.09); background: rgba(255,255,255,.8)
}
.cta-contact a {
    font-size: var(--t-base); font-weight: 600; color: var(--blk);
    text-decoration: none; letter-spacing: -.02em
}
.cta-contact a:hover { color: var(--red) }

@media (max-width: 1024px) {
    .eng-layout { grid-template-columns: 1fr }
    .caps { grid-template-columns: repeat(2, 1fr) }
    .callout { flex-direction: column; align-items: flex-start }
    .oe-grid { grid-template-columns: repeat(2, 1fr) }
    .prep-grid { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
    .prow { flex-direction: column; gap: 8px }
    .prow-m { text-align: left }
    .caps { grid-template-columns: 1fr }
    .europe { flex-direction: column; align-items: flex-start; gap: 10px }
    .callout .btn-primary { width: 100%; text-align: center }
    .oe-grid { grid-template-columns: 1fr }
    .terms { grid-template-columns: 1fr }
    /* The status and the platform name stop fighting for one line. */
    .eng-row { flex-wrap: wrap }
    .eng-state { width: 100%; padding-left: 36px }
}

/* ═══════════════ LANGUAGE OFFER ═══════════════
   The bar that replaced the automatic redirect. Fixed to the bottom so it
   displaces nothing and costs no layout shift, and out of the way of the
   fixed navigation at the top. */
.lang-offer {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    z-index: 200; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    max-width: min(640px, calc(100vw - 32px));
    padding: 14px 18px; border-radius: 14px;
    background: rgba(255,255,255,.97); color: var(--blk);
    border: 1px solid var(--stone);
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    backdrop-filter: blur(12px);
}
.lang-offer p { font-family: var(--body); font-size: var(--t-sm); line-height: 1.5; margin: 0; flex: 1 1 220px }
.lang-offer-go {
    font-family: var(--body); font-size: var(--t-xs); font-weight: 650; text-decoration: none;
    color: #fff; background: var(--red); padding: 9px 16px; border-radius: 999px;
    min-height: 24px; display: inline-flex; align-items: center;
}
.lang-offer-go:hover { background: var(--rd) }
.lang-offer-no {
    font-family: var(--body); font-size: var(--t-xs); font-weight: 500;
    color: var(--g1); background: none; border: 0; cursor: pointer;
    padding: 9px 8px; min-height: 24px;
}
.lang-offer-no:hover { color: var(--blk) }
@media (max-width: 480px) {
    .lang-offer { bottom: 12px; padding: 12px 14px; gap: 10px }
}
/* Keep the technical catalogue and contact details in the group vocabulary. */
.atelier-engineparts .prep-brand, .atelier-engineparts .terms-item, .atelier-engineparts .qtl, .atelier-engineparts .cta-contact, .atelier-engineparts .lang-offer, .atelier-engineparts .lang-offer-go { border-radius: 0; box-shadow: none; }
.atelier-engineparts .cta-contact { background: none; border: 0; border-top: 1px solid #bfc3b6; padding: 22px 0 0; }

/* Reference discovery is useful before the full technical catalogue. */
.proposal-site .reference-finder { padding-top: 34px; padding-bottom: 34px; background: #fafafa; scroll-margin-top: 85px; }
.proposal-site .finder-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 9%; align-items: center; }
.proposal-site .finder-top .heading { font-size: var(--t-proposal-heading); }
.proposal-site .reference-search label { display: block; margin-bottom: 8px; font-size: var(--t-xs); color: #555; }
.proposal-site .finder-controls { min-width: 0; }
.proposal-site .reference-input { min-width: 0; display: flex; border: 1px solid #c9c9c6; background: white; }
.proposal-site .reference-input input { border: 0; min-width: 0; flex: 1; padding: 12px 15px; min-height: 48px; font: inherit; font-size: var(--t-base); color: #111; background: white; border-radius: 0; }
.proposal-site .reference-input input:focus { outline: 2px solid #111; outline-offset: -2px; }
.proposal-site .reference-input button { width: 52px; flex-shrink: 0; background: var(--red); color: white; border: 0; cursor: pointer; font-size: var(--t-xl); }
.proposal-site #finder-note { color: #666; font-size: var(--t-xs); line-height: 1.5; margin: 8px 0 0; }
.proposal-site .finder-controls .text-link { font-size: var(--t-xs); min-height: 36px; }
.proposal-site .component-browse { margin-top: 20px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.proposal-site .component-browse a { background: #f0f0ed; color: #111; min-height: 114px; padding: 8px 14px 8px 8px; display: grid; grid-template-columns: 42% minmax(0,1fr) 14px; align-items: center; gap: 10px; font-size: var(--t-sm); line-height: 1.3; border-bottom: 1px solid transparent; }
.proposal-site .component-browse a:hover { border-bottom-color: var(--red); background: #e9e9e5; }
.proposal-site .component-browse img { width: 100%; height: 100px; object-fit: contain; mix-blend-mode: multiply; }
.proposal-site .valve-symbol { display: block; width: 100%; color: #3c3c3c; }
.proposal-site .valve-symbol svg { display: block; width: 100%; max-height: 100px; }
.proposal-site .finder-results { padding-top: 20px; }
.proposal-site #reference-status { font-size: var(--t-sm); color: #555; line-height: 1.6; }
.proposal-site #reference-matches { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 12px 0; margin: 0; }
.proposal-site #reference-matches .reference-match { display: block; background: white; border: 1px solid #ccc; padding: 12px; text-align: left; font: inherit; font-size: var(--t-sm); color: #111; cursor: pointer; line-height: 1.5; }
.proposal-site #reference-matches .reference-match:hover { border-color: #111; }
.proposal-site #reference-matches .reference-match span { display: block; color: #666; font-size: var(--t-xs); }
.proposal-site .oe-fam:target { outline: 2px solid var(--red); outline-offset: 12px; }
.proposal-site .oe-fam { scroll-margin-top: 110px; }
@media (max-width: 900px) {
    .proposal-site .component-browse a { grid-template-columns: 1fr 14px; gap: 4px; padding: 8px 10px 12px; }
    .proposal-site .component-browse img, .proposal-site .valve-symbol { grid-column: 1 / -1; height: 100px; }
}
@media (max-width: 600px) {
    .proposal-site .reference-finder { padding-top: 25px; padding-bottom: 28px; }
    .proposal-site .finder-top { grid-template-columns: minmax(0,1fr); gap: 19px; }
    .proposal-site .finder-top .heading { font-size: var(--t-xl); line-height: 1.1; }
    .proposal-site .component-browse { gap: 7px; margin-top: 14px; }
    .proposal-site .component-browse a { font-size: var(--t-xs); grid-template-columns: 1fr; gap: 6px; padding: 4px 5px 9px; align-content: start; }
    .proposal-site .component-browse img, .proposal-site .valve-symbol { height: 68px; }
    .proposal-site .component-browse a > span:last-child { display: none; }
}

@media (max-width: 360px) {
    .proposal-site .component-browse { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Ford platform context, separate from SGS supply coverage. */
.global-availability { margin-top: 56px; padding-top: 36px; border-top: 1px solid #ccc; scroll-margin-top: 100px; }
.global-availability > p { max-width: 88ch; line-height: 1.65; }
.availability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.availability-card { padding: 22px; background: #f5f5f2; border-top: 2px solid var(--red); }
.availability-card .availability-count { font-size: var(--t-2xl); line-height: 1; font-weight: 600; margin: 0 0 18px; }
.availability-card h4 { font-size: var(--t-base); margin: 0 0 12px; }
.availability-card p { font-size: var(--t-sm); line-height: 1.65; margin: 0; }
.availability-downloads { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 20px; }
.availability-downloads a { max-width: 100%; }
@media (max-width: 1000px) { .availability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .availability-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── The catalogue pages (packages/build/lib/pages.mjs) ──
   One programme or the full reference index on a page of its own. They borrow
   the homepage's chrome and its catalogue blocks; these rules cover only what
   the homepage has no equivalent of: a plain page head under the fixed
   navigation, the breadcrumb trail, the reference tables, the numbered steps and the
   questions. */
.page-head { padding: clamp(120px, 13vw, 168px) 0 clamp(8px, 2vw, 24px); }
.page-head .heading { font-size: var(--t-2xl); line-height: 1.05; margin: 10px 0 20px; max-width: 22ch; }
.page-intro { max-width: 72ch; font-size: var(--t-lg); line-height: 1.6; color: var(--g1); margin: 0; }
.crumbs { font-size: var(--t-xs); color: var(--g1); margin-bottom: 28px; }
.crumbs a { color: var(--g1); text-decoration: underline; text-underline-offset: 4px; }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--blk); }

.ref-index { padding: clamp(36px, 4vw, 56px) 0 0; }
.ref-index .heading { font-size: var(--t-xl); margin: 0 0 18px; }
.ref-index .heading a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ref-index .heading a:hover { color: var(--red); }
.ref-table-wrap { overflow-x: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; }
.ref-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ref-table th, .ref-table td { text-align: left; vertical-align: top; padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ref-table thead th { font-size: var(--t-xs); font-weight: 600; color: var(--g1); text-transform: uppercase; letter-spacing: .06em; }
.ref-table tbody tr:last-child > * { border-bottom: 0; }
.ref-table tbody th { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 500; white-space: nowrap; }
.ref-table tbody th a { color: var(--blk); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.ref-table td:nth-child(2) { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--g1); }
.ref-table td { color: var(--g1); }
.ref-table tr[id] { scroll-margin-top: 100px; }
.ref-table caption { caption-side: top; text-align: left; padding: 12px 16px; font-size: var(--t-sm); color: var(--g1); border-bottom: 1px solid rgba(0,0,0,.06); }
.data-table tbody th, .data-table td:nth-child(2) { font-family: inherit; }
.data-table tbody th { font-weight: 600; white-space: normal; color: var(--blk); }

.page-steps { padding: clamp(40px, 5vw, 72px) 0 0; }
.page-steps .heading { font-size: var(--t-xl); margin: 0 0 18px; }
.steps-list { counter-reset: step; list-style: none; padding: 0; margin: 0; max-width: 880px; border-top: 1px solid rgba(0,0,0,.09); }
.steps-list li { counter-increment: step; position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid rgba(0,0,0,.09); font-size: var(--t-sm); line-height: 1.7; color: var(--g1); }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--blk); color: #fff; font-size: var(--t-xs); font-weight: 600; line-height: 28px; text-align: center; }
.page-cta { padding: clamp(40px, 5vw, 72px) 0 0; }
.page-faq { padding: clamp(48px, 6vw, 88px) 0 0; }
.page-faq .heading { font-size: var(--t-xl); margin: 0 0 24px; }
.faq { display: grid; gap: 0; border-top: 1px solid rgba(0,0,0,.09); max-width: 880px; }
.faq-item { padding: 22px 0; border-bottom: 1px solid rgba(0,0,0,.09); }
.faq-item h3 { font-size: var(--t-base); font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: var(--blk); }
.faq-item p { font-size: var(--t-sm); line-height: 1.75; color: var(--g1); margin: 0; }
.page-links { padding: clamp(40px, 5vw, 64px) 0 var(--sec); }
.page-link-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.page-link-list a { max-width: 100%; }
/* The cloned programme block keeps its homepage section, whose padding is
   sized to sit between other sections; here it follows a page head. */
.page-head ~ .catalogue-section, .page-head ~ .prep, .page-head ~ .apps {
    padding-top: clamp(24px, 3vw, 48px); padding-bottom: 0
}
.page-head ~ .apps .oe { margin-top: 0; padding-top: 0; border-top: 0 }
.page-head ~ .apps .global-availability { margin-top: 0; padding-top: 0; border-top: 0 }
.page-related { padding: clamp(28px, 3vw, 40px) 0 0; }

/* ── The guides (packages/build/lib/guides.mjs) ──
   An article under the catalogue pages' page head: one readable column, its
   tables in the reference tables' frame, its lists numbered like the
   catalogue pages' steps but lighter, since they are prose. */
.guide { padding: clamp(32px, 4vw, 56px) 0 0; }
.guide-body { max-width: 72ch; }
.guide-body h2 { font-size: var(--t-xl); line-height: 1.2; margin: 48px 0 14px; color: var(--blk); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { font-size: var(--t-base); font-weight: 600; margin: 28px 0 8px; color: var(--blk); }
.guide-body p, .guide-body li { font-size: var(--t-base); line-height: 1.75; color: var(--g1); }
.guide-body p { margin: 0 0 16px; }
.guide-body ol, .guide-body ul { margin: 0 0 16px; padding-left: 1.4em; }
.guide-body li { margin: 0 0 8px; padding-left: 4px; }
.guide-body strong { color: var(--blk); font-weight: 600; }
.guide-body code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
.guide-body .ref-table-wrap { margin: 8px 0 24px; }
.guide-body .ref-table th, .guide-body .ref-table td { font-size: var(--t-sm); line-height: 1.6; }
.guide-list { padding: clamp(32px, 4vw, 56px) 0 0; }
.guide-index { list-style: none; padding: 0; margin: 0; max-width: 880px; border-top: 1px solid rgba(0,0,0,.09); }
.guide-index li { padding: 22px 0; border-bottom: 1px solid rgba(0,0,0,.09); }
.guide-index h2 { font-size: var(--t-lg); line-height: 1.3; margin: 0 0 8px; }
.guide-index h2 a { color: var(--blk); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.guide-index h2 a:hover { color: var(--red); }
.guide-index p { font-size: var(--t-sm); line-height: 1.7; color: var(--g1); margin: 0; }
/* A link inside a sentence stays inside it: underlined text, not the
   stand-alone .text-link. */
.guide-body a, .page-head .page-intro a { color: var(--blk); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-body a:hover, .page-head .page-intro a:hover { color: var(--red); }
/* A part number in a table heading keeps itself on one line; the table
   scrolls rather than splitting it. */
.guide-body thead code { white-space: nowrap; overflow-wrap: normal; }

/* Buyer journey: concise entry points, complete lists available on demand. */
.atelier-engineparts { --g3: #626262; }
.proposal-site.atelier-engineparts .hero-audience { color: #ddd; font-size: var(--t-sm); max-width: 42ch; margin: 12px 0; }
.proposal-site.atelier-engineparts .hero-development { color: #ddd; font-size: var(--t-xs); max-width: 55ch; margin-top: 18px; }
.proposal-site.atelier-engineparts .hero { min-height: 0; }
.programme-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.programme-card { border: 1px solid #ccc; padding: 22px; background: #fff; display: flex; flex-direction: column; gap: 14px; }
.programme-card h3 { font-size: var(--t-lg); line-height: 1.35; }
.programme-card h3 a { color: inherit; }
.programme-card p { font-size: var(--t-sm); line-height: 1.65; color: #555; }
.programme-card > a { margin-top: auto; }
.finder-controls > .text-link { display: inline-block; margin: 8px 18px 0 0; }
.reference-development { display: block; font-weight: 600; color: #555; }
.home-detail { background: #fafafa; border-top: 1px solid #ccc; }
.home-detail > summary { cursor: pointer; padding: 24px max(20px,calc((100% - 1280px)/2)); font-size: var(--t-lg); font-weight: 700; scroll-margin-top: 120px; }
.detail-hint { margin-left: 18px; font-size: var(--t-xs); font-weight: 400; color: #555; }
.home-detail > summary:focus-visible, .form-extra > summary:focus-visible, .ref-table-wrap:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.home-detail[open] { border-bottom: 1px solid #ccc; }
.downloads { padding-top: 48px; padding-bottom: 48px; }
.downloads .heading { margin: 12px 0 20px; }
.downloads p { max-width: 90ch; line-height: 1.7; font-size: var(--t-sm); }
.download-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 24px 0; }
.download-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid #aaa; color: #111; background: #fff; }
.download-card span { color: #555; font-size: var(--t-sm); }
.download-languages a { display: inline-block; padding: 8px 4px; }
.form-extra { margin: 20px 0; border-block: 1px solid #ccc; padding: 16px 0; }
.form-extra summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; }
.form-extra[open] summary { margin-bottom: 18px; }
.proposal-site.atelier-engineparts footer .f-brand-mail { color: #eee; text-decoration: underline; text-underline-offset: 4px; }
.proposal-site.atelier-engineparts footer .f-brand-mail:hover { color: #fff; }
.proposal-site.atelier-engineparts footer .f-fine, .proposal-site.atelier-engineparts footer .f-legal a { color: #aaa; }
.proposal-site.atelier-engineparts .markets h4 { color: #b60004; }
@media(max-width:1024px) { .programme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .atelier-engineparts #nv { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 4px; }
  .atelier-engineparts .n-logo-text { display: inline; font-size: var(--t-sm); }
  .atelier-engineparts .n-logo { gap: 8px; }
  .atelier-engineparts .n-right { margin-left: auto; }
  .atelier-engineparts #nv .lang a { min-width: 28px; }
  .programme-grid, .download-grid { grid-template-columns: 1fr; }
  .programme-card { padding: 18px; }
  .home-detail > summary { padding: 22px 20px; }
  .detail-hint { display: block; margin: 6px 0 0 18px; }
}