/* Homepage art direction — the campaign interlude.
   The hero is composed by atelier.css. Rules below that began as the old
   Maison Noir hero are kept for reference under the retired .hero-maison-noir
   class so they can never collide with the live composition. */

/* ---------- Retired Maison Noir hero (superseded by atelier.css) ---------- */
.hero-section.hero-maison-noir { padding: 0; background: #141210; }
.hero-section.hero-maison-noir > .container { width: 100%; max-width: none; }
.hero-section.hero-maison-noir .hero-banner-card{
    --maison-gold: #c6a16a;
    display: block; min-height: 780px; padding: 104px max(6vw, calc((100vw - 1260px) / 2)) 130px;
    border: 0; border-radius: 0; box-shadow: none; isolation: isolate;
    background: #171411; color: #f7f0e5; overflow: hidden;
}
[data-theme="dark"] .hero-section.hero-maison-noir .hero-banner-card { background: #100f0d; border: 0; }
.hero-maison-noir .maison-edition{
    position: absolute; inset: 28px max(6vw, calc((100vw - 1260px) / 2)) auto;
    display: flex; justify-content: space-between; gap: 20px; align-items: center;
    font: 400 10px/1.5 var(--sans); letter-spacing: .23em; color: #b4a38a; text-transform: uppercase;
}
.hero-maison-noir .maison-edition span:first-child::before { content: ''; display: inline-block; width: 30px; height: 1px; background: #9b7d51; vertical-align: middle; margin-right: 14px; }
.hero-maison-noir .maison-monogram{
    position: absolute; left: 37%; top: -125px; font: 500 clamp(620px, 65vw, 1020px)/1 var(--cormorant);
    color: #c0a276; opacity: .045; pointer-events: none; user-select: none; z-index: -1;
    transform: translate3d(var(--monogram-x, 0px), 0, 0);
}
.hero-maison-noir .hero-section .hero-copy { width: 58%; max-width: 710px; z-index: 3; }
.hero-maison-noir .hero-copy a { pointer-events: auto; }
.hero-maison-noir .hero-section .hero-copy > .eyebrow { color: #c5a473; font-size: .65rem; letter-spacing: .23em; margin-bottom: 27px; }
.hero-maison-noir .hero-copy h1{
    font-family: var(--cormorant); font-weight: 400; font-size: clamp(66px, 6.8vw, 104px);
    line-height: .98; letter-spacing: -.038em; max-width: none; margin-bottom: 29px;
}
.hero-maison-noir .hero-section .hero-copy h1 em { color: #c9a771; font-family: var(--cormorant); font-weight: 400; }
.hero-maison-noir .hero-phrase { display: block; }
.hero-maison-noir .hero-phrase.editorial-accent { padding-left: .8em; }
.hero-maison-noir .hero-phrase.editorial-close { font-size: .68em; letter-spacing: -.025em; margin-top: .18em; }
.hero-maison-noir .hero-section .hero-copy > p { color: #bcb3a5; max-width: 350px; font-size: .9rem; line-height: 1.85; margin-bottom: 28px; }
.hero-maison-noir .hero-section .hero-cta { gap: 26px; align-items: center; margin-bottom: 0; }
.hero-maison-noir .hero-cta .btn-dark{
    background: #d0b17b; color: #16120e; border: 1px solid #d0b17b; border-radius: 1px;
    padding: 13px 23px; font-size: .65rem; letter-spacing: .14em; box-shadow: none;
}
.maison-text-link { display: inline-flex; gap: 16px; align-items: center; color: #eee5d6; padding: 10px 0; font-size: .68rem; letter-spacing: .07em; border-bottom: 1px solid #75654e; }
.maison-text-link::after { content: '↗'; font-size: 1rem; transition: transform 300ms var(--ease-luxury); }
.maison-text-link:hover::after { transform: translate(3px, -3px); }
.hero-maison-noir .hero-section .hero-cta .btn-dark:hover { background: #dcc394; box-shadow: 0 4px 24px #b48a3520; }
.hero-maison-noir .hero-section .hero-visual { position: absolute; right: 2%; top: 36px; width: 54%; height: calc(100% - 100px); min-height: 0; z-index: 2; }
.hero-maison-noir .hero-relief-wrapper{
    width: 100%; max-width: none; height: 100%; min-height: 0; border: 0; border-radius: 0;
    overflow: visible; background: transparent; box-shadow: none;
}
.hero-maison-noir .hero-section .hero-relief-wrapper::before { background: radial-gradient(ellipse at var(--light-x) var(--light-y), #7c5a2826, transparent 64%); }
.hero-maison-noir .hero-section .hero-relief-wrapper::after { background: radial-gradient(ellipse at var(--light-x) var(--light-y), #765c3035, transparent 67%); }
.hero-maison-noir .hero-section .hero-relief-model { height: 100%; min-height: 0; }
.hero-maison-noir .hero-section .crest-poster { padding: 55px 75px 90px; }
.hero-maison-noir .hero-section .crest-poster img { filter: drop-shadow(0 20px 30px #0006); }
.hero-maison-noir .model-badge{
    top: auto; bottom: 18px; left: auto; right: 9%; border: 0; border-radius: 0; padding: 0;
    background: none; box-shadow: none; backdrop-filter: none; color: #a99a81; font-size: .56rem; letter-spacing: .15em;
}
.hero-maison-noir .hero-section .model-badge svg { width: 9px; height: 9px; color: #c6a16a; }
.hero-maison-noir .hero-floating-card{
    right: auto; left: 4%; bottom: 0; width: 270px; padding: 15px 17px; gap: 15px;
    background: #eee6d6; border: 0; border-radius: 0; box-shadow: 0 16px 40px #0003;
    backdrop-filter: none; transform: rotate(-3deg); color: #211c16;
}
.hero-maison-noir .hero-section .hero-floating-card::before { content: ''; position: absolute; top: -36px; left: 27px; height: 36px; width: 1px; background: #c9ab78; }
.hero-maison-noir .hero-section .hero-floating-card::after { content: ''; position: absolute; top: 7px; left: 26px; width: 4px; height: 4px; border: 1px solid #a38a64; border-radius: 50%; }
.hero-maison-noir .hero-section .hero-floating-card:hover { transform: rotate(-1deg) translateY(-4px); }
.hero-maison-noir .hero-section .hero-floating-card .hfc-thumb { width: 49px; height: 64px; border-radius: 0; background: #ded5c4; }
.hero-maison-noir .hero-section .hero-floating-card .hfc-tag { font-size: .5rem; letter-spacing: .16em; color: #7a623d; }
.hero-maison-noir .hero-section .hero-floating-card .hfc-title { color: #282015; font-family: var(--cormorant); font-size: 1.2rem; line-height: 1.1; margin: 5px 0 9px; }
.hero-maison-noir .hero-section .hero-floating-card .hfc-price { color: #625645; font-size: .7rem; font-weight: 400; }
.hero-maison-noir .hero-section .hero-floating-card .hfc-link, .hero-maison-noir .hero-section .hero-floating-card:hover .hfc-link { color: #806539; font-size: .6rem; letter-spacing: .06em; }
.hero-maison-noir .hero-benefits{
    position: absolute; bottom: 27px; left: max(6vw, calc((100vw - 1260px) / 2)); right: 6%;
    z-index: 3; margin: 0; border-top: 1px solid #c4aa792b; padding-top: 18px; gap: 28px;
}
.hero-maison-noir .hero-section .benefit-item { flex: none; gap: 8px; min-width: 0; }
.hero-maison-noir .hero-section .benefit-item svg { width: 14px; height: 14px; stroke: #9e8965; }
.hero-maison-noir .hero-section .benefit-item strong { color: #b6a68d; font-weight: 400; font-size: .57rem; letter-spacing: .08em; }
.hero-maison-noir .hero-section .benefit-item span { display: none; }
.hero-maison-noir .hero-silk { position: absolute; bottom: -30px; left: -2%; width: 105%; height: 210px; pointer-events: none; z-index: 1; transform: translate3d(var(--silk-x, 0px), var(--silk-y, 0px), 0); }
.hero-maison-noir .maison-scroll { display: flex; gap: 15px; align-items: center; position: absolute; z-index: 4; right: 6%; bottom: 27px; color: #b6a68d; font-size: .56rem; text-transform: uppercase; letter-spacing: .17em; }
.hero-maison-noir .maison-scroll span:last-child { font-size: 1rem; }
.hero-motion .hero-cta .maison-text-link { animation: motion-rise 650ms var(--ease-luxury) 900ms both; }
.hero-maison-noir .hero-motion .maison-edition { animation: motion-rise 850ms var(--ease-luxury) both; }
.hero-maison-noir .hero-section .hero-motion .hero-copy > .eyebrow { animation-delay: 150ms; }
.hero-maison-noir .hero-section .hero-motion .hero-copy > p { animation-delay: 700ms; }
.hero-maison-noir .hero-section .hero-motion .hero-cta .btn-dark { animation-delay: 850ms; }
.hero-maison-noir .hero-silk, .hero-maison-noir .maison-monogram { transition: transform 700ms var(--ease-luxury); }

/* A full-bleed campaign photograph, framed by quiet editorial captions.
   The container is always dark, so it pairs with bannerdark.webp; the light-theme
   treatment below swaps in bannerlight.webp and retunes the frame around it. */
.campaign-section { color: #f4ead7; background: #0e0d0b; position: relative; }
.campaign-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 6%; border-bottom: 1px solid #ac8a4a30; font-size: .61rem; letter-spacing: .2em; text-transform: uppercase; color: #bba680; }
.campaign-heading h2 { font: inherit; }
.campaign-scene { position: relative; height: clamp(500px, min(78vh, 38vw), 850px); overflow: hidden; isolation: isolate; }
.campaign-image-motion { position: absolute; inset: -10% 0; transform: translate3d(0, 0, 0) scale(1.075); }
.campaign-image-reveal { width: 100%; height: 100%; }
.campaign-image { width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%; }
/* bannerlight.webp is the same 1672x941 frame as the dark artwork, so it needs
   the same two overrides: a lower object-position to keep the 'D' lockup inside
   the desktop window, and a left-biased one on phones where only ~30% of the
   width survives the crop. */
[data-theme="light"] .campaign-image { object-position: 42% 46%; }
.campaign-section.campaign-enhanced:not(.campaign-entered) .campaign-image-reveal { opacity: 0; scale: 1.04; }
.campaign-image-reveal { transition: opacity 1100ms ease, scale 1100ms var(--ease-luxury); }
.campaign-section.campaign-entered .campaign-image-reveal { opacity: 1; scale: 1; }
.campaign-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #080705ee, #08070566 24%, transparent 50%, transparent 85%, #08070522), radial-gradient(ellipse, transparent 45%, #0004); }
/* The light artwork is near-white. Rather than lighten the veil (which leaves the
   cream caption and column text unreadable on marble), anchor a scrim behind the
   caption band only, and warm the studio light instead of multiplying it away. */
[data-theme="light"] .campaign-vignette { background: linear-gradient(0deg, #14100acc 0%, #14100a73 20%, transparent 46%, transparent 88%, #14100a1a), radial-gradient(ellipse, transparent 58%, #241c1010); }
[data-theme="light"] .campaign-caption { text-shadow: 0 2px 18px #100c07a6, 0 1px 3px #100c0773; }
[data-theme="light"] .campaign-heading,
[data-theme="light"] .campaign-colophon { text-shadow: 0 1px 10px #100c0780; }
/* The dark artwork already carries its own near-black field, so the full-strength
   veil only buries it; a lighter scrim preserves the crest's gold and the marble. */
[data-theme="dark"] .campaign-vignette { background: linear-gradient(0deg, #080705d9 0%, #08070559 22%, transparent 48%, transparent 86%, #08070514), radial-gradient(ellipse, transparent 55%, #0003); }
.campaign-light { position: absolute; inset: -8%; pointer-events: none; background: radial-gradient(ellipse at var(--banner-light-x, 50%) var(--banner-light-y, 45%), #e0b45f24, transparent 38%); mix-blend-mode: screen; }
.campaign-caption { position: absolute; bottom: 34px; left: 6%; right: 6%; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; z-index: 2; }
.campaign-caption p { font: 400 clamp(36px, 4vw, 62px)/1 var(--cormorant); letter-spacing: -.025em; }
.campaign-caption p em { color: #d3af74; font-weight: 400; }
.campaign-caption .maison-text-link { flex-shrink: 0; }
.campaign-colophon { display: flex; justify-content: space-between; gap: 20px; padding: 20px 6%; color: #9f9481; font-size: .6rem; letter-spacing: .11em; }
[data-theme="dark"] .capsules-section { background: var(--cream); }

@media (min-width: 1600px) {
.hero-maison-noir .hero-section .hero-visual { right: max(3%, calc((100vw - 1450px) / 2)); width: 720px; }
}
@media (max-width: 1100px) and (min-width: 769px) {
.hero-maison-noir .hero-section .hero-banner-card { min-height: 740px; padding-inline: 5%; }
.hero-maison-noir .hero-section .hero-copy { width: 61%; }
.hero-maison-noir .hero-section .hero-copy h1 { font-size: 76px; }
.hero-maison-noir .hero-section .hero-visual { width: 53%; right: -3%; top: 65px; height: 570px; }
.hero-maison-noir .hero-section .hero-floating-card { left: 12%; bottom: -14px; width: 240px; }
.hero-maison-noir .hero-section .model-badge { bottom: 104px; }
.hero-maison-noir .hero-section .hero-cta { gap: 17px; }
}
@media (max-width: 768px) {
.hero-maison-noir .hero-section .hero-banner-card { min-height: 0; padding: 95px 7% 115px; }
.hero-maison-noir .maison-edition { top: 24px; inset-inline: 7%; font-size: .5rem; letter-spacing: .12em; }
.hero-maison-noir .maison-edition span:first-child::before { width: 16px; margin-right: 8px; }
.hero-maison-noir .hero-section .hero-copy { width: 100%; max-width: none; }
.hero-maison-noir .hero-section .hero-copy h1 { font-size: clamp(58px, 10.7vw, 86px); margin-bottom: 24px; }
.hero-maison-noir .hero-section .hero-copy > .eyebrow { font-size: .58rem; margin-bottom: 22px; }
.hero-maison-noir .hero-section .hero-copy > p { max-width: 330px; font-size: .84rem; }
.hero-maison-noir .hero-section .hero-cta { gap: 22px; }
.hero-maison-noir .hero-section .hero-cta .btn-dark { padding: 12px 17px; font-size: .58rem; }
    .maison-text-link { font-size: .62rem; gap: 10px; }
.hero-maison-noir .hero-section .hero-visual { position: relative; width: 114%; right: 7%; top: auto; height: 510px; margin-top: -12px; }
.hero-maison-noir .hero-section .hero-relief-wrapper { min-height: 0; }
.hero-maison-noir .hero-section .hero-floating-card { left: auto; right: 10%; bottom: 15px; width: 248px; }
.hero-maison-noir .hero-section .model-badge { right: auto; left: 8%; bottom: 130px; writing-mode: vertical-rl; font-size: .49rem; }
.hero-maison-noir .hero-section .hero-benefits { left: 7%; right: 7%; bottom: 32px; flex-direction: row; flex-wrap: wrap; gap: 15px 23px; }
.hero-maison-noir .hero-section .benefit-item strong { font-size: .52rem; }
.hero-maison-noir .hero-section .benefit-item svg { width: 12px; height: 12px; }
.hero-maison-noir .maison-scroll { display: none; }
.hero-maison-noir .maison-monogram { left: 13%; top: 190px; font-size: 760px; opacity: .04; }
.hero-maison-noir .hero-silk { height: 260px; bottom: 0; }
    .campaign-scene { height: clamp(460px, 72svh, 650px); }
    .campaign-image { object-position: 87% center; }
    [data-theme="light"] .campaign-image { object-position: 34% center; }
    .campaign-heading { padding-block: 20px; font-size: .5rem; letter-spacing: .12em; }
    .campaign-caption { align-items: flex-start; flex-direction: column; bottom: 28px; gap: 18px; }
    .campaign-caption p { font-size: 48px; }
    .campaign-colophon { font-size: .52rem; }
}
@media (max-width: 380px) {
.hero-maison-noir .hero-section .hero-copy h1 { font-size: 52px; }
.hero-maison-noir .hero-section .hero-cta { gap: 14px; }
.hero-maison-noir .hero-section .hero-visual { height: 430px; }
}
@media (prefers-reduced-motion: reduce) {
    .campaign-section.campaign-enhanced .campaign-image-reveal { opacity: 1; scale: 1; }
.hero-maison-noir .hero-silk, .hero-maison-noir .maison-monogram { transform: none; }
}