/* ==========================================================================
   KB Daywear Sur Mesure Section 03 / La Silhouette — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-daywear-sur-mesure-silhouette. All values driven by
   tokens.css. Elementor = content only — every visual treatment
   lives here.

   Reference image controls the COMPOSITION:
     - Desktop: a 3-column composition inside the 1140px frame,
       on a Porcelain ground:
         LEFT    — editorial text block (eyebrow -> 4-line
                   title -> two body paragraphs -> small Gold
                   rule -> bottom tracked microcopy)
         CENTER  — ONE dominant vertical transparent PNG of the
                   silhouette (no shadow, no background, no box,
                   no floor shadow). The visual anchor of the
                   row.
         RIGHT   — three annotation blocks (L'ÉPAULE / LA TAILLE
                   / LA LONGUEUR) distributed along the height
                   of the image. Each annotation has a tracked
                   eyebrow, a short body description, and a thin
                   Gold horizontal connector line extending from
                   the annotation leftward to the image, with a
                   small open Gold circle at the image end.
       A bottom-right microcopy column (VOTRE SILHOUETTE /
       NOTRE MESURE / VOTRE ALLURE) sits flush to the right
       edge of the 1140px frame, separated from the annotations
       by a thin vertical Gold rule.
     - Mobile: single column. Order: eyebrow -> title -> body
       -> central image -> three annotations -> bottom microcopy.
       Connector lines are simplified to short static Gold rules
       above each annotation eyebrow. No absolute horizontal
       reach, no messy overlaps.

   Project design system controls the STYLE: Porcelain ground,
   Raleway display title in Ink, Montserrat body in Ink, Gold
   eyebrow + Gold rules + Gold connector lines + thin Gold
   vertical rule, Bordeaux microcopy, no cards, no boxes, no
   icons, no radius, no border, no shadow, no filled CTA.

   Section spacing (locked):
     100px desktop / 80px tablet / 64px mobile. TOP-ONLY.
     No bottom padding — the next section owns its own top
     spacing.

   Typography (locked):
     Desktop — title 44px / body 15px / eyebrow 12px
     Tablet  — title 40px / body 15px / eyebrow 11.5px
     Mobile  — title 36px / body 15px / eyebrow 11px
     Title   = Raleway.
     Body / eyebrow / microcopy / annotation eyebrow / annotation body = Montserrat.

   No serif. No italic. No decorative eyebrow line. No title
   underline. No cards. No boxes. No icons. No filled CTA.
   No image border. No image radius. No image shadow. No
   generated floor shadow on the central PNG.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 03 Daywear Sur Mesure / La Silhouette
   ------------------------------------------------------------
   The Elementor container that holds this section is reset to
   padding 0 / width 100% so our own section root is the single
   source of truth for the outer dimensions. Mirrors the same
   escape used by the other KB sections.
   ========================================================================== */
.e-con:has(.kb-daywear-sur-mesure-silhouette) {
    --container-default-width: 100% !important;
    --container-max-width: 100% !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

.e-con:has(.kb-daywear-sur-mesure-silhouette) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ==========================================================================
   Section root — full-bleed Porcelain canvas, single centered
   1140px composition inside.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    padding-bottom: 0;
    overflow: hidden;
}

/* ==========================================================================
   INNER EDITORIAL LAYER — LOCKED 1140px CONTENT FRAME.
   The inner content frame is the 1140px site content width
   (centered on viewports > 1140px; takes the full viewport
   with 32px gutter on tablet and 20px gutter on mobile).
   3-column grid: LEFT (content) | CENTER (image) | RIGHT (annotations).
   The bottom-right microcopy is absolutely positioned at the
   bottom-right corner of this 1140px frame.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__inner {
    position: relative;
    width: 100%;
    max-width: 1140px; /* LOCKED 1140px content frame — boxing rule */
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 40px);
    align-items: stretch;
    padding-bottom: 0;
}

/* ==========================================================================
   LEFT — content block (eyebrow -> title -> body -> bottom).
   Left-aligned, vertically anchored to the top so the eyebrow
   reads first.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: 100%;
}

/* ==========================================================================
   EYEBROW — reuses the canonical .kb-section-eyebrow primitive
   from base.css. Local class only owns the gap to the title.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__eyebrow {
    text-align: left;
    margin: 0 0 28px 0;
    color: var(--kb-gold);
}

/* ==========================================================================
   TITLE — LOCKED 44px (Services typography rule).
   Raleway, Ink, non-italic, light weight. Each line is a
   structural <span>.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__title {
    margin: 0 0 36px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--kb-font-display);
    font-size: 44px; /* LOCKED */
    font-weight: 300;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    text-decoration: none;
    max-width: 100%;
}

.kb-daywear-sur-mesure-silhouette__title em,
.kb-daywear-sur-mesure-silhouette__title i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-daywear-sur-mesure-silhouette__title-line {
    display: block;
}

/* ==========================================================================
   BODY paragraphs — LOCKED 15px.
   Two short paragraphs rendered as structural <span> lines.
   Montserrat / Ink / 1.7 line-height.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__body {
    margin: 0 0 22px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 15px; /* LOCKED */
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    max-width: 36ch;
    width: 100%;
}

.kb-daywear-sur-mesure-silhouette__body--second {
    margin-bottom: 36px;
}

.kb-daywear-sur-mesure-silhouette__body em,
.kb-daywear-sur-mesure-silhouette__body i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-daywear-sur-mesure-silhouette__body-line {
    display: block;
}

/* ==========================================================================
   BOTTOM — small Gold horizontal rule + tracked microcopy.
   The rule is the only graphic ornament before the bottom
   microcopy. The microcopy itself is Bordeaux, tracked,
   uppercase, small.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-top: 8px;
    max-width: 100%;
}

.kb-daywear-sur-mesure-silhouette__rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    margin: 0 0 18px 0;
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}

.kb-daywear-sur-mesure-silhouette__bottom-microcopy {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 12px; /* LOCKED */
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.22em;
    color: var(--kb-bordeaux);
    text-transform: uppercase;
    text-align: left;
    max-width: 100%;
}

.kb-daywear-sur-mesure-silhouette__bottom-microcopy-line {
    display: block;
}

/* ==========================================================================
   CENTER — transparent silhouette PNG.
   Real <img> element with object-fit: contain so the
   transparent PNG can overlap naturally within the
   composition without distortion. No border, no radius, no
   shadow, no background, no floor shadow. The figure sits
   in the center column and defines the row's visual height.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__image {
    position: relative;
    width: 130%;
    max-width: none;
    height: auto;
    margin: 0 0 0 -15%;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    aspect-ratio: 3 / 4;
    align-self: center;
    z-index: 0;
    /* Real sizing (NOT transform) so the PNG keeps the
       SAME size before, during and after the reveal
       animation. The reveal system uses `transform` to
       animate the entrance; any `transform` on this
       element would be overridden by reveal.js. Growing
       the PNG via `width: 130%` + `margin-left: -15%`
       centers it horizontally in the column while lifting
       the head + shoulders upward toward the L'ÉPAULE
       callout line. `align-self: center` keeps the
       vertical anchor stable. No shadow, no background,
       no box — the PNG stays clean and transparent. */
}

.kb-daywear-sur-mesure-silhouette__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

/* ==========================================================================
   RIGHT — annotations column.
   3 annotation blocks distributed vertically along the
   height of the central image. Each annotation owns:
     - a thin Gold connector line extending leftward to the
       image (with a small open Gold circle at the image end)
     - a tracked uppercase eyebrow
     - a short body description
   The column stretches to match the image height so the 3
   annotations are distributed along the visual anchor.
   `padding-bottom` reserves room for the bottom-right
   microcopy block.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__annotations {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    padding: 4% 0 88px 0;
    gap: 0;
    z-index: 1;
}

.kb-daywear-sur-mesure-silhouette__annotation {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/* Local vertical offset on the FIRST annotation only
   (L'ÉPAULE) so its Gold connector line aligns with the
   woman's actual shoulder. The annotations container
   (padding, gap, space-between) is untouched — LA TAILLE
   and LA LONGUEUR keep their original positions. Adjust
   the `top` value as needed to fine-tune the alignment. */
.kb-daywear-sur-mesure-silhouette__annotation:first-child {
    position: relative;
    top: 110px;
}

/* Thin Gold connector line — 1px tall, extends leftward
   from the LEFT edge of the annotation block to the central
   image. Aligned to the eyebrow line of each annotation.
   The `::before` is a small open Gold circle that marks
   the image-side end of the connector. The connector
   length is `clamp(40px, 6vw, 72px)` so it always reaches
   the image column gap without overflowing the
   composition on smaller desktops. */
.kb-daywear-sur-mesure-silhouette__connector {
    position: absolute;
    top: 7px; /* aligned with the eyebrow baseline */
    right: 100%;
    margin-right: clamp(20px, 3vw, 32px);
    width: clamp(40px, 6vw, 72px);
    height: 1px;
    background-color: var(--kb-gold);
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}

.kb-daywear-sur-mesure-silhouette__connector::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border: 1px solid var(--kb-gold);
    border-radius: 50%;
    background-color: var(--kb-porcelain);
    box-sizing: border-box;
}

/* Tracked uppercase eyebrow of each annotation.
   Same visual primitive as the LEFT block eyebrows
   (Montserrat / 12px / 500 / 0.22em / Bordeaux). */
.kb-daywear-sur-mesure-silhouette__annotation-eyebrow {
    display: block;
    margin: 0 0 12px 0;
    font-family: var(--kb-font-body);
    font-size: 12px; /* LOCKED */
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.22em;
    color: var(--kb-bordeaux);
    text-transform: uppercase;
    text-align: left;
}

.kb-daywear-sur-mesure-silhouette__annotation-body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 15px; /* LOCKED */
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    max-width: 30ch;
    width: 100%;
}

.kb-daywear-sur-mesure-silhouette__annotation-body em,
.kb-daywear-sur-mesure-silhouette__annotation-body i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-daywear-sur-mesure-silhouette__annotation-body-line {
    display: block;
}

/* ==========================================================================
   BOTTOM-RIGHT MICROCOPY — positioned absolutely at the
   bottom-right of the 1140px inner frame. Separated from
   the annotations column by a thin vertical Gold rule.
   Three tracked uppercase Bordeaux lines stacked.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__microcopy {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
    max-width: 100%;
    z-index: 2;
}

.kb-daywear-sur-mesure-silhouette__vrule {
    display: block;
    width: 1px;
    height: 56px;
    background-color: var(--kb-gold);
    border: 0;
    padding: 0;
    flex: 0 0 auto;
    margin-top: 2px;
}

.kb-daywear-sur-mesure-silhouette__microcopy-text {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-family: var(--kb-font-body);
    font-size: 12px; /* LOCKED */
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.22em;
    color: var(--kb-bordeaux);
    text-transform: uppercase;
    text-align: left;
    max-width: 100%;
}

.kb-daywear-sur-mesure-silhouette__microcopy-line {
    display: block;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   ------------------------------------------------------------
   The 3-column composition is preserved on tablet so the
   editorial pairing stays locked. The column gap tightens
   to 32px (project gutter). Typography scales down one
   step. The image keeps its portrait aspect ratio. The
   connector lines keep their horizontal reach but with a
   shorter length.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-daywear-sur-mesure-silhouette {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-daywear-sur-mesure-silhouette__inner {
        width: calc(100% - 2 * var(--kb-gutter-tablet));
        column-gap: 32px;
    }

    .kb-daywear-sur-mesure-silhouette__eyebrow {
        margin-bottom: 24px;
    }

    .kb-daywear-sur-mesure-silhouette__title {
        font-size: 40px;
        margin-bottom: 32px;
    }

    .kb-daywear-sur-mesure-silhouette__body {
        font-size: 15px;
        max-width: 100%;
    }

    .kb-daywear-sur-mesure-silhouette__body--second {
        margin-bottom: 32px;
    }

    .kb-daywear-sur-mesure-silhouette__connector {
        width: clamp(32px, 5vw, 56px);
        margin-right: 20px;
    }

    .kb-daywear-sur-mesure-silhouette__annotation-eyebrow {
        font-size: 11.5px;
        margin-bottom: 10px;
    }

    .kb-daywear-sur-mesure-silhouette__annotation-body {
        font-size: 15px;
        max-width: 26ch;
    }

    .kb-daywear-sur-mesure-silhouette__vrule {
        height: 48px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   ------------------------------------------------------------
   The section is recomposed to a single column following
   the LOCKED mobile visual order:
     1. eyebrow
     2. title
     3. body (paragraph 1 + paragraph 2)
     4. central silhouette PNG
     5. three annotations (L'ÉPAULE, LA TAILLE, LA LONGUEUR)
     6. bottom-right microcopy

   The DOM places the LEFT content first, then the CENTER
   image, then the RIGHT annotations, then the bottom-right
   microcopy. The 3-column grid is flattened to a single
   flex column on mobile. The microcopy is pulled to the
   very bottom of the stack via `order: 99` so it always
   sits AFTER the three annotations.

   The 20px mobile gutter frames the composition.
   Typography is locked: title 36px / body 15px / eyebrow
   11px. Connector lines are simplified to short static
   Gold rules above each annotation eyebrow (no absolute
   horizontal reach, no overlapping lines).
   ========================================================================== */
@media (max-width: 767px) {
    .kb-daywear-sur-mesure-silhouette {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: 0;
        padding-inline: 0;
        overflow: hidden;
    }

    .kb-daywear-sur-mesure-silhouette__inner {
        display: grid;
        grid-template-columns: 44% 1fr;
        grid-template-areas:
            "eyebrow eyebrow"
            "title title"
            "image annotations"
            "body1 body1"
            "body2 body2"
            "bottom bottom";
        width: calc(100% - 2 * var(--kb-gutter-mobile));
        max-width: 100%;
        padding-inline: 0;
        column-gap: 14px;
        row-gap: 0;
    }

    /* `display: contents` dissolves the content wrapper so
       its children (eyebrow, title, body paragraphs, bottom
       microcopy) participate directly in the parent grid and
       can be placed in the exact row order:
         eyebrow → title → image+annotations → body → bottom.
       Keeps the media block directly under the title. */
    .kb-daywear-sur-mesure-silhouette__content {
        display: contents;
    }

    .kb-daywear-sur-mesure-silhouette__eyebrow {
        grid-area: eyebrow;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .kb-daywear-sur-mesure-silhouette__title {
        grid-area: title;
        font-size: 36px; /* LOCKED */
        line-height: 1.1;
        margin-bottom: 28px;
    }

    .kb-daywear-sur-mesure-silhouette__body {
        grid-area: body1;
        font-size: 15px;
        max-width: 100%;
    }

    .kb-daywear-sur-mesure-silhouette__body--second {
        grid-area: body2;
        margin-bottom: 32px;
    }

    .kb-daywear-sur-mesure-silhouette__bottom {
        grid-area: bottom;
        margin-top: 0;
        width: 100%;
    }

    .kb-daywear-sur-mesure-silhouette__bottom-microcopy {
        font-size: 11px;
    }

    /* Mobile 2-column composition: PNG on the LEFT,
       annotation blocks on the RIGHT. Sits directly under
       the title (grid row 3). Mirrors the desktop 3-column
       logic in a compact form. */
    .kb-daywear-sur-mesure-silhouette__image {
        grid-area: image;
        width: 100%;
        max-width: 210px;
        margin: 0 0 32px 0;
        align-self: stretch;
    }

    /* Annotations: right column of the media row.
       `space-between` distributes the 3 blocks to align
       with the woman's shoulder / waist / lower leg, same
       logic as desktop. `gap: 40px` guarantees a minimum
       40px vertical separation between every block, so
       L'ÉPAULE / LA TAILLE / LA LONGUEUR can never collide
       regardless of row height. The top padding gives the
       first block its own clean vertical slot. */
    .kb-daywear-sur-mesure-silhouette__annotations {
        grid-area: annotations;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        position: static;
        padding: 8px 0 0 0;
        width: 100%;
        max-width: 100%;
        gap: 40px;
        margin-bottom: 32px;
    }

    /* Each annotation: 2-column sub-grid placing the short
       Gold connector on the LEFT (pointing toward the
       PNG) and the text on the RIGHT. The eyebrow and body
       stack in the right column. */
    .kb-daywear-sur-mesure-silhouette__annotation {
        display: grid;
        grid-template-columns: 22px 1fr;
        column-gap: 10px;
        align-items: start;
        position: static;
        width: 100%;
        max-width: 100%;
    }

    /* Reset the desktop `top: 110px` offset on the first
       annotation (L'ÉPAULE) on mobile. That offset was
       added to align the desktop connector with the
       woman's shoulder; on mobile the 2-column layout
       re-distributes the blocks via `space-between`, so
       the offset would push L'ÉPAULE down into LA TAILLE
       and break the equal-gap rhythm. */
    .kb-daywear-sur-mesure-silhouette__annotation:first-child {
        position: static;
        top: auto;
    }

    /* Mobile connector: short horizontal Gold rule to the
       LEFT of each annotation, pointing toward the PNG.
       Aligned to the eyebrow line of the annotation. */
    .kb-daywear-sur-mesure-silhouette__connector {
        grid-column: 1;
        grid-row: 1;
        position: static;
        top: auto;
        right: auto;
        margin: 0.7em 0 0 0;
        width: 22px;
        height: 1px;
        background-color: var(--kb-gold);
        align-self: start;
    }

    .kb-daywear-sur-mesure-silhouette__connector::before {
        display: none;
    }

    .kb-daywear-sur-mesure-silhouette__annotation-eyebrow {
        grid-column: 2;
        grid-row: 1;
        font-size: 11px;
        margin-bottom: 10px;
    }

    .kb-daywear-sur-mesure-silhouette__annotation-body {
        grid-column: 2;
        grid-row: 2;
        font-size: 11px;
        line-height: 1.45;
        max-width: 100%;
    }

    /* Bottom-right microcopy becomes a static block at
       the very bottom of the mobile stack, full width,
       left-aligned, with the vertical Gold rule on its
       left. */
    .kb-daywear-sur-mesure-silhouette__microcopy {
        position: static;
        order: 99;
        width: 100%;
        max-width: 100%;
        align-items: flex-start;
        gap: 14px;
    }

    .kb-daywear-sur-mesure-silhouette__vrule {
        height: 40px;
    }

    .kb-daywear-sur-mesure-silhouette__microcopy-text {
        font-size: 11px;
        gap: 2px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 03 Daywear Sur Mesure / La Silhouette
   ------------------------------------------------------------
   The page-load reveal may happen ONCE on the left content,
   the central image, the annotations column, and the
   bottom-right microcopy. Internal text and connector
   lines are NOT revealed independently.
   ========================================================================== */
.kb-daywear-sur-mesure-silhouette__content[data-kb-reveal="fade-up"],
.kb-daywear-sur-mesure-silhouette__image[data-kb-reveal="fade-up"],
.kb-daywear-sur-mesure-silhouette__annotations[data-kb-reveal="fade-up"],
.kb-daywear-sur-mesure-silhouette__microcopy[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-duration: 900ms;
}

.kb-daywear-sur-mesure-silhouette__image[data-kb-reveal="fade-up"] {
    transition-delay: 80ms;
}

.kb-daywear-sur-mesure-silhouette__annotations[data-kb-reveal="fade-up"] {
    transition-delay: 140ms;
}

.kb-daywear-sur-mesure-silhouette__microcopy[data-kb-reveal="fade-up"] {
    transition-delay: 220ms;
}

@media (max-width: 767px) {
    .kb-daywear-sur-mesure-silhouette__content[data-kb-reveal="fade-up"],
    .kb-daywear-sur-mesure-silhouette__image[data-kb-reveal="fade-up"],
    .kb-daywear-sur-mesure-silhouette__annotations[data-kb-reveal="fade-up"],
    .kb-daywear-sur-mesure-silhouette__microcopy[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
        transition-delay: 0ms;
    }
}

/* ==========================================================================
   REDUCED MOTION — no entrance offset, opacity locked to 1.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-daywear-sur-mesure-silhouette [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}