html:root body>header .autumn-promo{position:relative;align-self:flex-start;flex:1 1 260px;min-width:170px;max-width:360px;margin-top:-6px;display:flex;align-items:center;background:#ffc845;color:#292929;border-radius:0 0 14px 14px;font-family:Manrope,Arial,sans-serif;pointer-events:auto;box-sizing:border-box}
.autumn-promo details{flex:1;min-width:0}.autumn-promo summary{list-style:none;cursor:pointer;padding:7px 8px 7px 12px}.autumn-promo summary::-webkit-details-marker{display:none}.promo-slides{display:grid;align-items:center;min-height:42px;font-size:clamp(13px,1.1vw,18px);font-weight:700;line-height:1.25}.promo-slides>span{grid-area:1/1;opacity:0;animation:promo-slogan 42s infinite;pointer-events:none}.promo-slides>span:nth-child(2){animation-delay:6s}.promo-slides>span:nth-child(3){animation-delay:12s}.promo-slides>span:nth-child(4){animation-delay:18s}.promo-slides>span:nth-child(5){animation-delay:24s}.promo-slides>span:nth-child(6){animation-delay:30s}
@keyframes promo-slogan{0%{opacity:1;transform:translateY(-100vh)}1.714%,7.44%{opacity:1;transform:translateY(0)}14.28%{opacity:1;transform:translateY(calc(-100% - var(--promo-screen-top,0px) - 8px))}14.286%,100%{opacity:0;transform:translateY(calc(-100% - var(--promo-screen-top,0px) - 8px))}}
.autumn-promo .promo-pause{flex:0 0 28px;width:28px;height:32px;padding:0;margin:0 5px 0 0;border:0;background:transparent;color:inherit;font:16px Arial;cursor:pointer}.autumn-promo.paused .promo-slides>span,.autumn-promo:has(details[open]) .promo-slides>span{animation-play-state:paused}.promo-terms{position:absolute;top:100%;right:0;width:min(360px,85vw);padding:14px;background:#fff9e9;color:#292929;border:1px solid #d6b35c;border-radius:10px;box-shadow:0 5px 20px #0002;font:13px/1.5 Manrope,Arial,sans-serif}.promo-terms p{margin:8px 0}.promo-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html:root[data-design=bureau] body>header .autumn-promo{background:#e8e2d6;color:#302d27;font-family:"Courier New",monospace}
@media(min-width:761px) and (max-width:1350px){html:root body>header{gap:8px}html:root body>header .configurator-title{font-size:22px;white-space:normal;max-width:235px}html:root body>header .header-tools{width:auto}html:root body>header .autumn-promo{flex-basis:220px}}
@media(max-width:760px){html:root body>header .autumn-promo{order:4;flex:1 0 100%;max-width:none;min-width:0;margin:0;border-radius:0 0 14px 14px}.promo-slides{font-size:13px;min-height:32px}.autumn-promo summary{padding:4px 10px}.promo-terms{left:0;right:auto}}
@media(prefers-reduced-motion:reduce){.promo-slides>span{animation:none;opacity:0;transform:none}.promo-slides>span:nth-child(5){opacity:1}.autumn-promo .promo-pause{display:none}}

/* Match section 8 primary action in both site themes. */
html:root body>header .autumn-promo{background:#ffa852;color:#000}
html:root[data-design=bureau] body>header .autumn-promo{background:#575047;color:#faf8f3}
html:root body>header :is(.configurator-title,.autumn-promo,.promo-divider){transition:transform .6s ease-in-out}
html:root.header-model-overlap body>header :is(.configurator-title,.autumn-promo,.promo-divider){transform:translateY(calc(-100% - 20px))}
@media(prefers-reduced-motion:reduce){html:root body>header :is(.configurator-title,.autumn-promo,.promo-divider){transition:none}}

@media(min-width:761px){html:root body>header .autumn-promo{flex:1 1 420px;max-width:520px;min-width:250px;height:var(--promo-header-height,42px)}.autumn-promo details{height:100%}.autumn-promo summary{height:100%;box-sizing:border-box;padding:3px 10px 3px 14px}.promo-slides{height:100%;min-height:0;font-size:clamp(12px,1.05vw,16px);line-height:1.15}html:root body>header .header-tools{width:auto}}

html:root body>header .promo-divider{display:block;width:3px;min-width:3px;flex:0 0 3px;height:24px;background:#009c57!important;margin-top:3px;align-self:flex-start}
@media(max-width:760px){html:root body>header .promo-divider{display:none}}

html:root[data-design] body>header .header-line.promo-divider{background:#009c57!important}

/* Keep header actions across the settings column, independently of scene badges. */
@media(min-width:761px){html:root body>header .header-tools{width:calc(var(--header-panel-width,500px) - 48px);flex:0 0 calc(var(--header-panel-width,500px) - 48px);margin-left:auto;justify-content:space-between;gap:0}html:root body>header .autumn-promo{min-width:180px}}
html:root body>header .header-tools .help-actions{display:contents}

.promo-slides>span:nth-child(7){animation-delay:36s}

.autumn-promo .promo-slides{text-align:center}

/* On phones the promo is the first row directly below the fixed action bar. */
@media(max-width:760px){html:root body>header{padding-top:0}html:root body>header .autumn-promo{order:-1;margin:0;transform:none!important}html:root body>header .logo-image,html:root body>header .configurator-title{margin-top:0}}

@media(max-width:760px){html:root body>header .configurator-title{display:none}}

/* Promo palette from the supplied PROZAMM reference. */
html:root body>header .autumn-promo,html:root[data-design=bureau] body>header .autumn-promo{background:#333333;color:#ffc845}
.autumn-promo .promo-slides{color:#ffc845}.autumn-promo .promo-pause{color:#ffffff}.autumn-promo .promo-terms{background:#333333;color:#ffffff;border-color:#555}.autumn-promo .promo-terms strong{color:#ffc845}

/* The arrow appears only after the slogan has landed, before its upward exit. */
html:root body>header .autumn-promo summary{position:relative;padding-left:32px;padding-right:12px}
.autumn-promo summary::before{content:"";position:absolute;left:9px;top:50%;width:17px;height:13px;background:#fff;clip-path:polygon(0 35%,58% 35%,45% 0,100% 50%,45% 100%,58% 65%,0 65%);opacity:0;transform:translate(-5px,-50%);animation:promo-arrow 6s infinite;pointer-events:none}
@keyframes promo-arrow{0%,13%{opacity:0;transform:translate(-5px,-50%)}18%,48%{opacity:1;transform:translate(0,-50%)}52%,100%{opacity:0;transform:translate(0,-50%)}}
.autumn-promo.paused summary::before,.autumn-promo details[open] summary::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.autumn-promo summary::before{animation:none;opacity:1;transform:translate(0,-50%)}}

.autumn-promo .promo-word.promo-white{color:#fff}.autumn-promo .promo-word.promo-yellow{color:#ffc845}

/* Inline triangle follows the centred slogan instead of the banner edge. */
html:root body>header .autumn-promo summary{padding-left:12px;padding-right:12px}
.autumn-promo summary::before{display:none}
.autumn-promo .promo-slides>span::before{content:"";display:inline-block;width:12px;height:11px;margin-right:7px;vertical-align:-1px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;animation:promo-triangle 42s infinite;animation-delay:inherit}
@keyframes promo-triangle{0%,1.857%{opacity:0}2.571%,6.857%{opacity:1}7.428%,100%{opacity:0}}
.autumn-promo.paused .promo-slides>span::before,.autumn-promo:has(details[open]) .promo-slides>span::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.autumn-promo .promo-slides>span::before{animation:none;opacity:1}}

/* Sepia palette matching the configurator heading reference. */
html:root body>header .autumn-promo,html:root[data-design=bureau] body>header .autumn-promo{background:#e8e2d6;color:#302d27}
.autumn-promo .promo-slides,.autumn-promo .promo-pause,.autumn-promo .promo-word.promo-white{color:#302d27}
.autumn-promo .promo-word.promo-yellow,.autumn-promo .promo-terms strong{color:#775719}
.autumn-promo .promo-slides>span::before{background:#302d27}
.autumn-promo .promo-terms{background:#e8e2d6;color:#302d27;border-color:#b6a68d}

/* ZAMM: transparent studio backdrop and a quiet graphite outline. */
html:root[data-design=zamm] body>header .autumn-promo{background:transparent;color:#303638;border:1px solid #8b929680;box-shadow:none}
html:root[data-design=zamm] .autumn-promo .promo-slides,html:root[data-design=zamm] .autumn-promo .promo-pause,html:root[data-design=zamm] .autumn-promo .promo-word.promo-white{color:#303638}
html:root[data-design=zamm] .autumn-promo .promo-word.promo-yellow,html:root[data-design=zamm] .autumn-promo .promo-terms strong{color:#555d61}
html:root[data-design=zamm] .autumn-promo .promo-slides>span::before{background:#555d61}
html:root[data-design=zamm] .autumn-promo .promo-terms{background:#f2f3f3;color:#303638;border-color:#b9bec1}

/* ZAMM slogans use the studio's green and yellow accents. */
html:root[data-design=zamm] .autumn-promo .promo-slides,html:root[data-design=zamm] .autumn-promo .promo-pause,html:root[data-design=zamm] .autumn-promo .promo-word.promo-white{color:#009c57}
html:root[data-design=zamm] .autumn-promo .promo-word.promo-yellow{color:#ffc845}
html:root[data-design=zamm] .autumn-promo .promo-slides>span::before{background:#009c57}

/* Orange triangle approaches the slogan from the left after it lands. */
.autumn-promo .promo-slides>span::before{content:"";display:inline-block;width:12px;height:11px;margin-right:7px;vertical-align:-1px;background:#ffa852;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;transform:translateX(-40px);animation:promo-triangle-approach 42s infinite;animation-delay:inherit;pointer-events:none}
@keyframes promo-triangle-approach{0%,1.857%{opacity:0;transform:translateX(-40px)}2.143%{opacity:1;transform:translateX(-40px)}4%,6.857%{opacity:1;transform:translateX(0)}7.428%,100%{opacity:0;transform:translateX(0)}}
.autumn-promo.paused .promo-slides>span::before,.autumn-promo:has(details[open]) .promo-slides>span::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.autumn-promo .promo-slides>span::before{animation:none;opacity:1;transform:none}}

html:root[data-design] body>header .autumn-promo .promo-slides>span::before{background:#ffa852}

/* Red replaces yellow for better visibility on the grey studio. */
html:root[data-design=zamm] .autumn-promo .promo-word.promo-yellow{color:#e02020}

/* Navy text paired with green in the ZAMM banner. */
html:root[data-design=zamm] .autumn-promo .promo-word.promo-yellow{color:#173f73}

/* Triangle follows each theme's slogan accent. */
html:root[data-design=zamm] body>header .autumn-promo .promo-slides>span::before{background:#009c57}
html:root[data-design=bureau] body>header .autumn-promo .promo-slides>span::before{background:#775719}

/* Dark brown paired with green in the ZAMM banner. */
html:root[data-design=zamm] .autumn-promo .promo-word.promo-yellow{color:#543a28}

/* The ZAMM banner shares the Bureau typography and sepia palette. */
html:root[data-design=zamm] body>header .autumn-promo{background:#e8e2d6;color:#302d27;border:0;font-family:"Courier New",monospace}
html:root[data-design=zamm] .autumn-promo .promo-slides,html:root[data-design=zamm] .autumn-promo .promo-pause,html:root[data-design=zamm] .autumn-promo .promo-word.promo-white{color:#302d27}
html:root[data-design=zamm] .autumn-promo .promo-word.promo-yellow,html:root[data-design=zamm] .autumn-promo .promo-terms strong{color:#775719}
html:root[data-design=zamm] body>header .autumn-promo .promo-slides>span::before{background:#775719}
html:root[data-design=zamm] .autumn-promo .promo-terms{background:#e8e2d6;color:#302d27;border-color:#b6a68d}

/* Match Bureau heading typography while retaining ZAMM colours. */
html:root[data-design=zamm] body>header .configurator-title{font-family:"Courier New",monospace;font-weight:700}

/* Match the Bureau heading colours, preserving scene overlap behaviour. */
html:root[data-design=zamm] body>header .configurator-title{color:#302d27;border-color:transparent}
html:root[data-design=zamm]:not(.title-scene-backdrop) body>header .configurator-title{background:#e8e2d6}

/* Keep the requested sepia heading in every ZAMM scene state. */
html:root[data-design=zamm] body>header .configurator-title{background:#e8e2d6!important;color:#302d27!important;border-color:transparent}

/* Shared darker sepia sampled from the Bureau heading reference. */
html:root[data-design] body>header .configurator-title,html:root[data-design] body>header .autumn-promo{background:#e2d7c3!important}