/* ==========================================================================
   KB Couture Mariage Section 10 — Votre Robe (Final CTA)
   Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-couture-mariage-finalcta. All values
   driven by tokens.css.

   Composition (locked, mirrored from the supplied reference CTA):

     CONTAINED EDITORIAL PANEL on the Porcelain page background.
     NOT a full-bleed breakout. The section root sits on the
     canonical 1140px content frame. INSIDE the section root
     lives ONE rounded CTA panel (24px desktop / 20px tablet /
     18px mobile) that carries:
       - ONE single full-panel background image (a real <img>
         from a MEDIA content control). NOT a CSS background-
         image, NOT a collage, NOT multiple <img> elements.
         object-fit: cover; object-position right-biased so the
         mannequin / dress form / atelier subject on the right
         remains visible after the rounded crop and the
         Bordeaux overlay fade.
       - A restrained Bordeaux / Ink-Bordeaux overlay. Stronger
         on the LEFT so the editorial copy always has a calm
         brand-aligned readable field, easing out smoothly
         toward the center-right so the dimensional highlights
         on the ivory fabric + atelier details are preserved.
         NO flat black veil across the whole image. NO SaaS
         gradient.

     The editorial copy block is LEFT aligned and occupies
     ~560px of the inner panel width (≈ 49% of 1140px) so the
     right side of the photograph (mannequin + atelier) stays
     free for the subject. Top-weighted placement (NOT
     vertically centered as a single block).

     NO contact strip. NO phone / email / location. NO
     WhatsApp. The panel ends after the two existing outline
     buttons. NO floating card, NO shadow.

   Type rules:
     - Eyebrow: canonical .kb-section-eyebrow primitive
       (Montserrat / Gold / 12px desktop / 11.5px tablet /
       11px mobile / 500 / uppercase / 0.18em). NO line, NO
       underline, NO ornament.
     - Title: Raleway, Porcelain, non-italic, uniform color
       across the ENTIRE title, 44px desktop / 40px tablet /
       36px mobile. NO divider directly under the title.
     - Body: Montserrat, Porcelain muted, 15px, non-italic.
     - NO serif. NO italic. NO filled gold button.

   Buttons:
     - Reuses the site-wide .kb-button primitive (54px height,
       28px padding, Montserrat 13px / 500, 0.12em, radius 0,
       --kb-transition-button). Only color tokens are overridden
       on top of the primitive — height / padding / font /
       radius / transition are never touched here.
     - Primary: transparent ground, Porcelain text + border.
       Fine-pointer hover inverts to Porcelain ground + Ink
       label.
     - Secondary: transparent ground, Gold text + border.
       Fine-pointer hover inverts to Gold ground + Ink label.

   Spacing:
     - Incoming top spacing (Porcelain breathing room BEFORE
       the panel): 100px desktop / 80px tablet / 64px mobile.
     - NO matching bottom padding — the Footer follows
       directly.

   Reveal:
     One restrained reveal group
     (.kb-couture-mariage-finalcta__copy) is marked with
     data-kb-reveal="fade-up". The background image, the
     overlay, the panel and the section root are NEVER
     animated — they are present from the first paint so the
     cinematic Final CTA canvas is already calm and editorial
     when the copy lands.
   ========================================================================== */

/* ==========================================================================
   Section root — 1140px centered, owns incoming top spacing.
   ------------------------------------------------------------
   The section root is the OUTER wrapper on the Porcelain page
   background. It owns the canonical 1140px content frame and
   the incoming 100 / 80 / 64px section gap (top-only). The
   actual rounded panel (24/20/18px) lives inside as a child
   and carries the photographic background + overlay + content.
   The .kb-hero class is intentionally NOT applied — this
   section is NOT a full-bleed breakout.
   ========================================================================== */
.kb-couture-mariage-finalcta {
    position: relative;
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    background-color: transparent;
    color: var(--kb-ink);
    overflow: visible;
    /* Incoming top spacing from Section 09 (L'Intérieur).
       100px desktop / 80px tablet / 64px mobile. Top-only. */
    padding-top: var(--kb-section-space-desktop);
    /* No padding-bottom — the Footer follows this section. */
    padding-bottom: 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta {
        padding-top: var(--kb-section-space-tablet);
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta {
        padding-top: var(--kb-section-space-mobile);
    }
}

/* ==========================================================================
   Rounded CTA panel (the only radius surface in the section)
   ------------------------------------------------------------
   24px desktop / 20px tablet / 18px mobile (the canonical
   Final CTA radius exception — the project-wide --kb-radius
   stays 0). The panel contains the photographic background
   image, the Bordeaux / Ink overlay, and the editorial
   inner. overflow: hidden + border-radius together clip the
   image AND the overlay to the rounded shape.
   ========================================================================== */
.kb-couture-mariage-finalcta__panel {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--kb-ink);
    color: var(--kb-porcelain);
    isolation: isolate;
    /* Desktop panel height is now content-driven. The
       previous forced min-height was creating a large empty
       bottom band below the button row. With min-height: 0
       and height: auto, the panel hugs the actual content
       (eyebrow / title / body / buttons) plus the inner's
       intentional padding (64 top + 36 bottom). The panel
       ends naturally shortly after the button row.

       Layout: display: flex; flex-direction: column. The
       .__media and .__overlay are position: absolute + inset:
       0 so they cover the panel regardless of its now-natural
       height. The .__inner is the only flex item; it sizes to
       its own content (the copy group) so no extra vertical
       space is reserved. Tablet and mobile media queries keep
       their own min-heights (540 / 600) and are unchanged. */
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__panel {
        border-radius: 20px;
        min-height: 540px;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__panel {
        border-radius: 18px;
        min-height: 600px;
    }
}

/* ==========================================================================
   Full-panel photographic background image
   ------------------------------------------------------------
   Real <img> rendered from the MEDIA content control.
   position: absolute + inset: 0 makes it cover the entire
   rounded panel. z-index 0 keeps it BEHIND the overlay
   (z-index 1) and the editorial inner (z-index 2). object-fit:
   cover; object-position right-biased so the mannequin /
   dress form / atelier subject on the right stays visible
   after the rounded crop and the Bordeaux overlay fade. The
   fallback Bordeaux → Ink gradient keeps the panel calm if
   the media is ever empty.
   ========================================================================== */
.kb-couture-mariage-finalcta__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-couture-mariage-finalcta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Desktop focal point: mannequin / atelier subject on the
       right stays visible. The left ~50% of the panel is
       covered by the Bordeaux / Ink overlay so the editorial
       copy always has a calm readable field. */
    object-position: 72% center;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__media img {
        object-position: 74% center;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__media img {
        /* Mobile focal point: shift the visible window further
           right so the mannequin / atelier subject stays
           visible and the left side (covered by the overlay)
           carries the dark fade. */
        object-position: 78% center;
    }
}

/* ==========================================================================
   Restrained Bordeaux / Ink-Bordeaux overlay
   ------------------------------------------------------------
   Lives between the image (z-index 0) and the editorial inner
   (z-index 2) so the left-aligned copy always has a calm
   brand-aligned readable field while the right side of the
   photograph (mannequin + ivory fabric + atelier details)
   keeps its dimensional highlights. Multi-stop horizontal
   gradient anchored on the left, easing into transparent by
   ~80% so the subject on the right is never tinted.

   Uses color-mix() against the existing --kb-ink / --kb-bordeaux
   brand tokens so the overlay tint tracks the design system
   exactly — no hardcoded rgba literals, no muddy full-image
   veil.
   ========================================================================== */
.kb-couture-mariage-finalcta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-ink) 90%, transparent) 0%,
        color-mix(in srgb, var(--kb-ink) 80%, var(--kb-bordeaux)) 10%,
        color-mix(in srgb, var(--kb-ink) 62%, var(--kb-bordeaux)) 22%,
        color-mix(in srgb, var(--kb-bordeaux) 72%, transparent) 36%,
        color-mix(in srgb, var(--kb-bordeaux) 50%, transparent) 52%,
        color-mix(in srgb, var(--kb-bordeaux) 28%, transparent) 66%,
        color-mix(in srgb, var(--kb-bordeaux) 12%, transparent) 78%,
        color-mix(in srgb, var(--kb-bordeaux) 3%, transparent) 88%,
        transparent 94%
    );
}

/* ==========================================================================
   Boxed inner editorial frame
   ------------------------------------------------------------
   Holds the entire visible content (eyebrow / title / body /
   CTAs). The .__panel is a flex column container, so this
   .__inner is the only flex item and stretches to fill the
   panel's main axis (matching the panel's 580px min-height).
   The inner is itself a column flex container with
   justify-content: center, so the .__copy group is vertically
   centered inside the panel. Horizontal position, left
   alignment, content width, and padding are all unchanged.
   ========================================================================== */
.kb-couture-mariage-finalcta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Left inset ~56px desktop / ~32px tablet / ~24px mobile
       via padding-inline-start. Top and bottom equalised so
       the content block sits visually centred between equal
       top/bottom breathing rooms. Desktop 64/56, tablet
       56/32, mobile 40/24. */
    padding: 64px 56px 64px 56px;
    width: 100%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__inner {
        padding: 56px 32px 56px 32px;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__inner {
        padding: 40px 24px 40px 24px;
    }
}

/* ==========================================================================
   Top row — standard Final CTA header (logo upper-left + ear label
   upper-right). Mirrors the Home / Services Final CTA implementation
   exactly so the Couture Mariage closing panel shares the same calm
   editorial closing rhythm as every other page. Scoped strictly to
   .kb-couture-mariage-finalcta.
   ----------------------------------------------------------------------
   The top row is a flex row with space-between, so the logo sits on
   the left edge of the panel inner and the "À VOTRE ÉCOUTE" label
   sits on the right edge. The row itself is NEVER animated — it
   rides the same first-paint presence as the background image, the
   overlay, and the panel. The .__copy reveal group below remains
   the only animated element.

   Spacing: 28px bottom margin to the editorial copy below (matches
   --kb-space-xl used by the Home Final CTA). On mobile, the gap
   tightens and the logo / ear sizes scale down exactly as the
   Home Final CTA does.
   ========================================================================== */
.kb-couture-mariage-finalcta__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 44px;
    margin: 0 0 var(--kb-space-xl) 0;
    width: 100%;
    flex: 0 0 auto;
}

/* Logo — real <img> from the MEDIA control. Capped at 88px so it
   never dominates the editorial block. width: auto + height: auto
   + object-fit: contain preserve the supplied artwork's aspect
   ratio (monogram or full wordmark) without affecting section
   height. */
.kb-couture-mariage-finalcta__logo {
    flex: 0 0 auto;
    max-height: 88px;
    line-height: 0;
}

.kb-couture-mariage-finalcta__logo img {
    display: block;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* "À VOTRE ÉCOUTE" upper-right label.
   Montserrat / 12px desktop / 500 / uppercase / 0.22em / Porcelain
   muted. Matches the standard Home / Services Final CTA ear label
   exactly. No ornament, no rule, no border — the typography
   alone carries the editorial closing cue. */
.kb-couture-mariage-finalcta__ear {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--kb-porcelain-muted);
    font-style: normal;
}

.kb-couture-mariage-finalcta__ear-text {
    display: inline-block;
}

/* ==========================================================================
   Copy group
   ------------------------------------------------------------
   Lives in the LEFT portion of the panel. Left-aligned, top-
   weighted. The whole group moves as ONE reveal (fade-up).
   flex removed (was 1 1 auto) so the copy shrinks to its
   actual content height and never grows to fill the panel.

   Single source of truth for the max-width: ~560px desktop
   (~49% of 1140px) / ~68% tablet / ~100% mobile. The right
   side of the photograph stays free for the mannequin /
   atelier subject.
   ========================================================================== */
.kb-couture-mariage-finalcta__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 560px;
    margin: 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__copy {
        max-width: 68%;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__copy {
        max-width: 100%;
    }
}

/* ==========================================================================
   Eyebrow — uses the canonical .kb-section-eyebrow primitive
   (Montserrat / Gold / 12px desktop / 11.5px tablet / 11px
   mobile / 500 / uppercase / 0.18em). NO line, NO underline,
   NO ornament. Local class only owns the bottom margin so
   the gap to the top Gold rule is a single source.
   ========================================================================== */
.kb-couture-mariage-finalcta__eyebrow {
    margin: 0 0 24px 0;
    text-align: left;
    align-self: flex-start;
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__eyebrow {
        margin-bottom: 14px;
    }
}

/* ==========================================================================
   Small Gold rule
   ------------------------------------------------------------
   REMOVED — the 36px Gold rules between the eyebrow / title and
   the title / body have been deleted from the widget markup.
   The eyebrow and title now own a single, natural editorial
   margin-bottom so the rhythm reads clean without any
   decorative ornament.
   ========================================================================== */
.kb-couture-mariage-finalcta__rule,
.kb-couture-mariage-finalcta__rule--top,
.kb-couture-mariage-finalcta__rule--bottom {
    /* Safety net in case the span is ever re-added in markup.
       Keeps the section ornament-free by default. */
    display: none !important;
}

/* ==========================================================================
   Title
   ------------------------------------------------------------
   Raleway, Porcelain, non-italic. SAME color across the ENTIRE
   title. Each line break from the Elementor control becomes a
   real DOM line (<span class="__title-line">) so the three-
   line title renders exactly as authored ("Imaginons celle /
   dans laquelle vous / vous marierez."). text-wrap: balance
   keeps the block editorial. font-weight 300 / line-height
   1.02 / size 44px desktop, 40px tablet, 36px mobile. The
   copy block is wide enough (~560px) that the title never
   feels squeezed.
   ========================================================================== */
.kb-couture-mariage-finalcta__title {
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--kb-porcelain);
    font-style: normal;
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    text-decoration: none;
    width: 100%;
}

.kb-couture-mariage-finalcta__title em,
.kb-couture-mariage-finalcta__title i {
    font-style: normal;
    color: var(--kb-porcelain);
}

.kb-couture-mariage-finalcta__title-line {
    display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__title {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__title {
        font-size: 36px;
        line-height: 1.04;
    }
}

/* ==========================================================================
   Body copy
   ------------------------------------------------------------
   Restrained body column. Porcelain muted, small body face,
   no italic. Desktop size 15px (locked). Line-height 1.7 for
   editorial readability. 48ch reading column caps the line
   length so the body never crowds the mannequin on the
   right. Line breaks honored via the structural <span>
   children so the editorial copy never wraps into accidental
   orphan / widow patterns.
   ========================================================================== */
.kb-couture-mariage-finalcta__body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-porcelain-muted);
    max-width: 48ch;
    text-wrap: pretty;
    font-style: normal;
    text-align: left;
    width: 100%;
}

.kb-couture-mariage-finalcta__body em,
.kb-couture-mariage-finalcta__body i {
    font-style: normal;
    color: var(--kb-porcelain-muted);
}

.kb-couture-mariage-finalcta__body-line {
    display: block;
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__body {
        max-width: 100%;
    }
}

/* ==========================================================================
   CTA group
   ------------------------------------------------------------
   Two canonical outline buttons side-by-side at desktop.
   Reuses the site-wide .kb-button primitive (54px height,
   28px padding, Montserrat 13px / 500, 0.12em, radius 0,
   --kb-transition-button). Only color tokens are overridden
   on top of the primitive — height / padding / font /
   radius / transition are never touched here.

   Primary (Porcelain) and Secondary (Gold) follow the same
   Final CTA hover inversion pattern: fine-pointer hover
   fills the frame and inverts the label color to Ink.
   :active is kept outside the pointer media query for touch
   press feedback. :focus-visible uses a restrained Bordeaux
   outline so keyboard focus is independent of pointer type.
   ========================================================================== */
.kb-couture-mariage-finalcta__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__ctas {
        margin-top: 32px;
        gap: 14px;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
        margin-top: 28px;
    }
}

.kb-couture-mariage-finalcta__cta {
    /* Promote the base 300ms transition to --kb-transition-button
       (500ms cubic-bezier(.22, 1, .36, 1)). background-color,
       color, border-color only — no transform, no scale. */
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__cta {
        width: 100%;
    }
}

/* PRIMARY / PORCELAIN */
.kb-couture-mariage-finalcta__cta--primary,
.kb-couture-mariage-finalcta__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}

.kb-couture-mariage-finalcta__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}

.kb-couture-mariage-finalcta__cta--primary:focus-visible {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-couture-mariage-finalcta__cta--primary:hover {
        background-color: var(--kb-porcelain);
        color: var(--kb-ink);
        border-color: var(--kb-porcelain);
    }
}

/* SECONDARY / GOLD */
.kb-couture-mariage-finalcta__cta--secondary,
.kb-couture-mariage-finalcta__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    /* Subtle drop shadow under the Gold label so it stays
       legible over the photographic background. Removed on
       hover when the button flips to Gold background + Ink
       text. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.kb-couture-mariage-finalcta__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
    text-shadow: none;
}

.kb-couture-mariage-finalcta__cta--secondary:focus-visible {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-couture-mariage-finalcta__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
        text-shadow: none;
    }
}

/* ==========================================================================
   Contact row
   ------------------------------------------------------------
   Sits inside the panel's __inner, UNDER the CTA buttons. A
   thin horizontal Gold divider above and thin Gold vertical
   separators between items, matching the Tenues d'Occasion
   Final CTA contact row exactly so the two pages share the
   same restrained closing rhythm. Montserrat 13px, Porcelain
   muted. Icons are inline SVGs, Gold, 14px. On mobile the
   items wrap cleanly and the vertical separators are hidden
   so the stack reads as a calm list.
   ========================================================================== */
.kb-couture-mariage-finalcta__contact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--kb-gold) 40%, transparent);
    width: 100%;
    max-width: 560px;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kb-porcelain-muted);
}

.kb-couture-mariage-finalcta__contact-item {
    white-space: nowrap;
}

.kb-couture-mariage-finalcta__contact-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    color: var(--kb-gold);
    vertical-align: -2px;
    flex-shrink: 0;
}

.kb-couture-mariage-finalcta__contact-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: var(--kb-gold);
    opacity: 0.7;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__contact {
        max-width: 68%;
        gap: 16px;
        margin-top: 32px;
    }
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__contact {
        max-width: 100%;
        gap: 12px;
        margin-top: 28px;
        padding-top: 20px;
        font-size: 12.5px;
    }

    .kb-couture-mariage-finalcta__contact-sep {
        display: none;
    }
}

/* ==========================================================================
   TABLET MIDDLE POINT (768–1024px) — eyebrow refinement.
   ------------------------------------------------------------
   The .kb-section-eyebrow primitive already targets this range
   with 11.5px in base.css. The local __eyebrow class only
   needs to keep the bottom margin.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-finalcta__eyebrow {
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   Top row — responsive overrides
   ----------------------------------------------------------------------
   Mirrors the standard Home / Services Final CTA top-row responsive
   behavior exactly. Tablet keeps the desktop sizing (the panel
   already has its own tablet min-height). Mobile tightens the gap
   and scales the logo / ear label down so the row never overflows
   on narrow viewports (390 / 375 / 360).
   ========================================================================== */
@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__top-row {
        gap: 12px;
        margin-bottom: var(--kb-space-l);
        min-height: 0;
    }

    .kb-couture-mariage-finalcta__logo {
        max-height: 72px;
    }

    .kb-couture-mariage-finalcta__logo img {
        max-height: 72px;
    }

    .kb-couture-mariage-finalcta__ear {
        font-size: 10px;
        letter-spacing: 0.18em;
        gap: 10px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Couture Mariage Section 10 / Final CTA
   ------------------------------------------------------------
   One restrained reveal group
   (.kb-couture-mariage-finalcta__copy) — eyebrow / Gold rules /
   title / body / CTAs. Fade-up, ~22px desktop / ~14px mobile,
   ~950ms / ~800ms, ~120ms delay. The background image, the
   overlay, the panel and the section root are NEVER animated
   individually — they ride the parent group.

   Mobile: shorter distance / duration. Reduced-motion safety
   net is already in base.css — no per-section override needed.
   ========================================================================== */
.kb-couture-mariage-finalcta__copy[data-kb-reveal="fade-up"] {
    transition-delay: 120ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 22px;
}

@media (max-width: 767px) {
    .kb-couture-mariage-finalcta__copy[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
    }
}

/* ==========================================================================
   REDUCED MOTION — no entrance offset, opacity locked to 1.
   Mirrors the convention used by the other KB sections.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-couture-mariage-finalcta [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   ELEMENTOR EDITOR SAFETY NET
   ------------------------------------------------------------
   The data-kb-reveal system is already disabled inside the
   Elementor editor canvas (reveal.js checks isElementorEditMode
   and never adds the kb-reveal-ready class). The CSS initial
   "hidden" state is gated behind that class so the editor
   always renders the section in its final visible state. This
   explicit per-section rule is a deliberate second-line safety
   net matching the project-wide pattern.
   ========================================================================== */
body.elementor-editor-active .kb-couture-mariage-finalcta [data-kb-reveal],
body.elementor-editor-preview .kb-couture-mariage-finalcta [data-kb-reveal],
body.elementor-editor-canvas .kb-couture-mariage-finalcta [data-kb-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}