/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero-sticky-wrap {
    position: relative;
    height: 100vh;
    z-index: 0;
}
.hero {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 100vh; display: flex; align-items: flex-end;
    justify-content: flex-start; padding: var(--space-2xl) var(--gutter) var(--space-xl);
    overflow: hidden; background: var(--se-black);
    will-change: opacity, transform;
    z-index: -1;
}
.hero-scroll-content {
    position: relative;
    z-index: 2;
    background: var(--se-black);
}
.hero__bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    background: var(--se-black);
}
/* <picture> is an inline box with auto height. Without this, the image's
   `height: 100%` has no resolvable containing block and silently falls back to
   auto — which letterboxes the hero instead of covering it. */
.hero__bg picture {
    display: block; width: 100%; height: 100%;
}
.hero__bg img {
    width: 100% !important; height: 100% !important;
    max-width: none;
    object-fit: cover; object-position: center;
    display: block; background: var(--se-black);
}
.hero__overlay {
    display: none;
}
.hero__content {
    position: relative; z-index: 2; text-align: left;
    width: 100%; max-width: var(--container-max);
    padding-inline: var(--gutter);
    display: flex; flex-direction: column; align-items: flex-start;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* ── Hero headline ───────────────────────────────────────── */

/*
 * The brand line, as the page's real h1 — it replaced a looping marquee that
 * cut across the campaign image at waist height and left the visible page with
 * no heading at all (the old h1 was sr-only). Both lines are always in the DOM;
 * see the template for why nothing is swapped.
 */
.hero__heading {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.2rem + 4.6vw, 5.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--se-white);
    /* Without this the second line breaks after "ONE" and orphans "EVE" — the
       marked word, alone on a third line. Balancing spreads the break instead,
       and it does so whichever face actually loads. */
    text-wrap: balance;
    /* Over a photograph, so the type carries its own separation rather than
       relying on whichever part of the image happens to sit behind it. */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero__heading-line {
    display: block;
}

/* The stroke is absolutely positioned behind the word, so the word keeps its
   place in the line and the line keeps its normal wrapping. */
.hero__heading-mark {
    position: relative;
    display: inline-block;
    /* Match the word's own box. Left to the inline default the mark box came
       out 14px shorter than the word it wraps, which centred the stroke 7px
       low and left the tops of the black letters on the dark photograph. */
    line-height: 1;
    isolation: isolate;
}

.hero__heading-mark-word {
    display: inline-block;
    line-height: 1;
}

.hero__heading-stroke {
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-start: -12%;
    width: 124%;
    /* Taller than the cap height, so the ink never overhangs the pink. */
    height: 1.18em;
    transform: translateY(-50%);
    max-width: none;
    /*
     * Cover, not stretch. The asset is a 1200×220 brushstroke — about 5.5:1 —
     * and forcing it into the ~2:1 box a three-letter word needs turned it into
     * a squashed blob. Cropping to the centre keeps the stroke's own thickness
     * and its organic top and bottom edges.
     */
    object-fit: cover;
    object-position: center;
}

/* Black on the pink stroke — white would be 3.5:1 on #FF04BC. */
.hero__heading-mark-word {
    position: relative;
    color: var(--se-black);
    text-shadow: none;
}

/* The fallback face is far wider than Bebas Neue, so the measure is left to
   the clamp rather than pinned with a max-width that would wrap the line
   early on any machine where the Typekit kit has not loaded. */
.hero__heading {
    max-width: none;
}

/* ── Hero headline entrance ──────────────────────────────── */

/*
 * The hidden start state is gated on `.se-js`, which consent.js sets in <head>
 * before first paint, so a no-JS visitor never gets a blank hero. The media
 * query spares a reduced-motion visitor the blank window between paint and the
 * moment JS gets round to adding `se-motion-off`.
 */
.se-js .hero__heading-line,
.se-js .hero__cta {
    opacity: 0;
}

.se-js .hero__heading-stroke {
    clip-path: inset(0 100% 0 0);
}

body.se-motion-off .hero__heading-line,
body.se-motion-off .hero__cta {
    opacity: 1;
}

body.se-motion-off .hero__heading-stroke {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .se-js .hero__heading-line,
    .se-js .hero__cta {
        opacity: 1;
    }
    .se-js .hero__heading-stroke {
        clip-path: inset(0 0 0 0);
    }
}

 /* Base button styles live in 05-components.css; the hero's own hover is
    gold rather than black, so only the override is here. */
.hero__cta:hover,
.hero__cta:focus-visible {
    background: var(--se-gold);
    border-color: var(--se-gold);
    color: var(--se-black);
}

/* ═══════════════════════════════════════════
   FORBIDDEN COLLECTION
   ═══════════════════════════════════════════ */
.forbidden-collection {
    position: relative; overflow: hidden;
    width: 100%; aspect-ratio: 1440 / 764;
}
.forbidden-collection__bg {
    position: absolute; inset: 0; z-index: 1;
}
.forbidden-collection__bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.forbidden-collection__overlay {
    position: absolute; inset: 0; z-index: 2;
    background: rgba(0,0,0,0.15);
}
.forbidden-collection__content {
    position: absolute; z-index: 3;
    left: var(--gutter); bottom: 15%;
}
.forbidden-collection__title {
    display: flex; flex-direction: column; align-items: flex-start;
    text-transform: none;
}
.forbidden-collection__line-the,
.forbidden-collection__forbidden-text,
.forbidden-collection__line-collection { display: block; }
.forbidden-collection__line-forbidden { display: inline-block; }
.forbidden-collection__line-the {
    font-family: var(--font-telaviv); font-size: 77px; font-weight: 700;
    line-height: 100px; letter-spacing: 0; color: var(--se-white);
    text-transform: uppercase;
}
.forbidden-collection__line-forbidden {
    position: relative; display: inline-block;
}
.forbidden-collection__brushstroke {
    position: absolute; z-index: 0;
    top: 50%; left: -6%;
    transform: translateY(-50%);
    width: 112%; height: auto;
    clip-path: inset(0 100% 0 0);
}
.forbidden-collection__forbidden-text {
    position: relative; z-index: 1;
    font-family: var(--font-telaviv); font-size: 77px; font-weight: 700;
    line-height: 70px; letter-spacing: 0; color: var(--se-black);
    text-transform: uppercase;
}
.forbidden-collection__line-collection {
    font-family: var(--font-campus); font-size: 107px; font-weight: 400;
    line-height: 140px; letter-spacing: 0; color: var(--se-white);
    text-transform: uppercase;
}
.forbidden-collection__badge {
    position: absolute; right: 5%; bottom: 12%;
    width: clamp(140px, 18vw, 240px); z-index: 4;
}
.forbidden-collection__badge img { width: 100%; height: auto; }
/* Responsive */
@media (max-width: 768px) {
    .forbidden-collection { aspect-ratio: auto; min-height: 60vh; }
    .forbidden-collection__content { bottom: 10%; left: var(--gutter); }
    .forbidden-collection__line-the { font-size: 40px; line-height: 52px; }
    .forbidden-collection__forbidden-text { font-size: 40px; line-height: 40px; }
    .forbidden-collection__line-collection { font-size: 55px; line-height: 72px; }
    .forbidden-collection__badge {
        top: 5%; bottom: auto; left: 5%; right: auto;
        width: 120px;
    }
}

/* ═══════════════════════════════════════════
   BORN TO BE WILD
   ═══════════════════════════════════════════ */
.born-wild {
    position: relative;
    width: 100%;
    height: 780px;
    background: var(--se-pink);
    overflow: hidden;
}
/* ── Parallax layers ── */
.born-wild__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}
.born-wild__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}
.born-wild__layer--1 { z-index: 1; } /* apples + VHS */
.born-wild__layer--2 { z-index: 2; } /* monstera leaves */
.born-wild__layer--3 { z-index: 3; } /* heels */
.born-wild__layer--4 { z-index: 4; } /* male models */
.born-wild__layer--5 { z-index: 5; } /* woman center */
.born-wild__layer--6 { z-index: 1; } /* snakes — behind everything */
/* ── Title overlay — HIGHEST z-index ── */
.born-wild__title-wrap {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
}
.born-wild__title {
    font-family: var(--font-telaviv);
    font-size: clamp(60px, 7.4vw, 107px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--type-letter-spacing);
    text-transform: uppercase;
    color: var(--se-black);
    margin: 0;
    white-space: nowrap;
    transform: rotate(-3deg);
    text-align: center;
}
.born-wild__title-wild {
    font-family: var(--font-lasalle);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(100px, 13.7vw, 197px);
    line-height: 1.4;
    color: var(--se-white);
    text-transform: none;
    letter-spacing: normal;
    vertical-align: baseline;
    position: relative;
    top: -0.05em;
}
/* ── Badge ── */
.born-wild__badge {
    position: absolute;
    top: 40px;
    right: 60px;
    width: 160px;
    height: 160px;
    z-index: 8;
}
.born-wild__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes spin-flat { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ── Responsive ── */
@media (max-width: 768px) {
    .born-wild { height: 420px; }
    .born-wild__layer { will-change: auto; transform: none !important; }
    .born-wild__title-wrap { padding-bottom: 20px; }
    .born-wild__title {
        white-space: nowrap; line-height: 1;
        font-size: clamp(36px, 10vw, 60px);
    }
    .born-wild__title-wild {
        display: block;
        font-size: clamp(80px, 24vw, 180px);
        line-height: 0.85;
    }
    .born-wild__badge { width: 70px; height: 70px; top: 15px; right: 15px; }
}

/* ═══════════════════════════════════════════
   SERPENT SOCIETY
   ═══════════════════════════════════════════ */
.serpent-society {
    position: relative; width: 100%; height: 100vh;
    background: var(--se-black); overflow: hidden;
}
/* ── Legs ── */
.serpent-society__legs {
    position: absolute; inset: 0; z-index: 2;
    display: flex; justify-content: center; align-items: stretch;
    pointer-events: none;
}
/*
 * Sized by WIDTH, with the height left to follow the artwork's own ratio
 * (391:765). That makes the leg taller than the section, so the thigh runs off
 * the bottom edge and is clipped by the section's overflow — which is the
 * composition. The previous version fitted the whole leg inside the section,
 * so its cut-off bottom edge was visible.
 */
/*
 * Anchored to the BOTTOM and sized by HEIGHT. Sizing by width meant the leg's
 * height came from the artwork's ratio, so on a tall viewport it ended
 * part-way up the section and floated. Bottom-anchored, the thigh always meets
 * the section floor and is cut by it, whatever the window height.
 * The clamp keeps the legs from ballooning on very tall screens.
 */
.serpent-society__leg {
    position: absolute;
    /* Pushed below the floor: rotating about the bottom centre tilts the cut
       edge, so a flush bottom:0 would leave a diagonal sliver of background. */
    bottom: -6%;
    height: clamp(320px, 96%, 1040px);
    width: auto;
    aspect-ratio: 391 / 765;
    transform-origin: bottom center;
}
.serpent-society__leg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
}
/*
 * The CSS default is the SPREAD position — what the section is supposed to
 * look like when it has finished. GSAP animates from "together" to this, and
 * because it writes inline transforms it wins whenever it runs. Getting this
 * the right way round matters: with reduced motion (or no JS) the animation
 * never runs, and the legs must still land in the composition, not in the
 * bunched start state.
 * Left and right are separate artwork, so neither is mirrored.
 */
/* Spread values are duplicated in assets/js/home.js — the GSAP timeline has to
   land on exactly these, or the section shifts the moment the animation ends. */
.serpent-society__leg--left {
    right: 50%;
    transform: translateX(-36px) rotate(-11deg);
}
.serpent-society__leg--right {
    left: 50%;
    transform: translateX(36px) rotate(11deg);
}
/* ── Decorative background (snakes + apples composite image) ── */
.serpent-society__decor {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.serpent-society__decor img {
    width: 100%; height: 100%; object-fit: cover;
}
/* ── Content overlay (text + badge + CTA) ── */
.serpent-society__content {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; pointer-events: none;
}
.serpent-society__logo {
    width: 165px; height: 165px;
    margin-bottom: 20px;
}
.serpent-society__logo img {
    width: 100%; height: 100%;
    filter: brightness(0) invert(1);
}
.serpent-society__title {
    transform: rotate(-7.3deg);
    line-height: 0; margin: 0;
}
.serpent-society__title-join {
    display: block;
    font-family: var(--font-telaviv); font-weight: 400;
    font-size: clamp(40px, 5.3vw, 77px);
    color: var(--se-white); text-transform: uppercase;
    line-height: 1.1; letter-spacing: var(--type-letter-spacing);
}
.serpent-society__title-serpent {
    display: block;
    font-family: var(--font-metalista); font-weight: 400; font-style: normal;
    font-size: clamp(120px, 18.5vw, 266px);
    color: var(--se-gold); text-transform: none;
    line-height: 0.8; letter-spacing: normal;
}
.serpent-society__title-society {
    display: block;
    font-family: var(--font-nexa-rust); font-weight: 900; font-style: normal;
    font-size: clamp(56px, 7.5vw, 108px);
    color: var(--se-pink); text-transform: uppercase;
    line-height: 1; letter-spacing: normal;
}
.serpent-society__cta-wrap {
    margin-top: 40px; pointer-events: auto;
}
/* No `display` here. 05-components.css makes these inline-flex with the label
   centred both ways; re-declaring inline-block silently undid that, which is
   why the label sat high in the box. */
.serpent-society__cta {
    position: relative;
    font-family: var(--font-heading); font-size: 20px;
    font-weight: 400; line-height: 1; letter-spacing: var(--type-letter-spacing);
    text-transform: none; color: var(--se-white);
    border: 1px solid var(--se-white);
    padding: 5px 24px 5px 20px; /* italic slant needs a little more room on the right */
    text-decoration: none; transition: background var(--transition-base), color var(--transition-base);
    font-style: italic;
}
.serpent-society__cta:hover,
.serpent-society__cta:focus-visible {
    background: var(--se-white); color: var(--se-black); border-color: var(--se-white);
}
.serpent-society__cta-bite {
    position: absolute; top: -1px; right: -1px;
    width: 20px; height: 21px; pointer-events: none; z-index: 2;
    opacity: 0; transition: opacity var(--transition-base);
}
.serpent-society__cta-bite { color: var(--se-black); }
.serpent-society__cta:hover .serpent-society__cta-bite,
.serpent-society__cta:focus-visible .serpent-society__cta-bite { opacity: 1; }
/* Tablet needs no leg override — the base rule is a clamp on viewport width. */
/* ── Mobile ── */
@media (max-width: 768px) {
    .serpent-society { height: 60vh; min-height: 380px; overflow: hidden; }
    /* Legs: bottom half, clipped by section overflow:hidden */
    .serpent-society__legs {
        top: auto; bottom: 0; height: 50%;
        overflow: hidden;
    }
    .serpent-society__leg {
        width: 46vw; top: auto; bottom: -8%; height: auto;
        transform-origin: bottom center;
    }
    .serpent-society__leg--left  { right: 50%; transform: translateX(-18px) rotate(-13deg); }
    .serpent-society__leg--right { left: 50%; transform: translateX(18px) rotate(13deg); }
    .serpent-society__leg img { width: 100%; height: auto; }
    /* Decor bg: rotate 90deg for portrait */
    .serpent-society__decor {
        overflow: hidden;
    }
    .serpent-society__decor img {
        transform: rotate(90deg) scale(1.4);
        object-fit: cover;
        width: 100%; height: 100%;
    }
    /* Content: push to upper area */
    .serpent-society__content {
        justify-content: flex-start;
        padding-top: 6vh;
    }
    .serpent-society__logo { width: 60px; height: 60px; margin-bottom: 8px; }
    .serpent-society__title { transform: rotate(-7.3deg); }
    .serpent-society__title-join { font-size: clamp(28px, 8vw, 50px); }
    .serpent-society__title-serpent { font-size: clamp(70px, 24vw, 160px); line-height: 0.75; }
    .serpent-society__title-society { font-size: clamp(36px, 12vw, 70px); }
    .serpent-society__cta-wrap { margin-top: 15px; }
    .serpent-society__cta { font-size: 14px; padding: 4px 16px; }
}

/* ═══════════════════════════════════════════
   CONFESSIONAL
   ═══════════════════════════════════════════ */
.confessional {
    position: relative; width: 100%; height: 100vh; min-height: 600px;
    background: var(--se-pink); overflow: hidden;
}
/* Cinematic letterbox bars */
.confessional__bar {
    position: absolute; left: 0; right: 0; height: 60px;
    background: var(--se-black); z-index: 10;
}
.confessional__bar--top { top: 0; }
.confessional__bar--bottom { bottom: 0; }
/* Zoomable composition wrapper */
.confessional__scene {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    will-change: transform;
}
/* Snake layer — large, fills background, slightly rotated */
.confessional__snake {
    position: absolute; z-index: 1; pointer-events: none;
    width: 160%; height: 290%;
    top: -95%; left: -42%;
}
.confessional__snake img {
    width: 100%; height: 100%; object-fit: contain;
    transform: rotate(-15deg);
}
/* VHS tape — upper area, slight tilt */
.confessional__vhs {
    position: absolute; z-index: 3; pointer-events: none;
    width: clamp(560px, 84vw, 1300px);
    left: 50%; top: 30%;
    transform: translate(-45%, -50%) rotate(-6deg);
}
.confessional__vhs img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 8px 30px rgba(0,0,0,0.25));
}
/* Lips cutout — left side, upper area */
.confessional__lips {
    position: absolute; z-index: 4; pointer-events: none;
    width: clamp(300px, 46vw, 760px);
    left: -4%; top: 35%; transform: translateY(-50%);
}
.confessional__lips img {
    width: 100%; height: auto; display: block;
}
/* Logo badge — right side, large, black */
.confessional__badge {
    position: absolute; z-index: 2; pointer-events: none;
    width: clamp(280px, 36vw, 520px);
    right: -4%; top: 50%; transform: translateY(-50%);
}
.confessional__badge img {
    width: 100%; height: auto; display: block;
    filter: brightness(0);
    opacity: 0.8;
}
/* Title text — neon style */
.confessional__title {
    position: absolute; z-index: 5; pointer-events: none;
    max-width: calc(100% - 2rem);
    left: 50%; top: 55%; transform: translate(-50%, -50%);
    font-family: var(--font-lasalle); font-weight: 400; font-style: normal;
    font-size: clamp(80px, 15.3vw, 220px);
    color: var(--se-gold); text-transform: none;
    line-height: 1; letter-spacing: normal; white-space: nowrap;
    margin: 0; opacity: 0;
    text-shadow:
        0 0 7px rgba(246,191,2,0.7),
        0 0 20px rgba(246,191,2,0.5),
        0 0 42px rgba(246,191,2,0.35),
        0 0 82px rgba(246,191,2,0.2),
        0 0 120px rgba(246,191,2,0.1);
}
/* Neon flicker keyframes */
@keyframes neonFlicker {
    0%   { opacity: 0; text-shadow: none; }
    18%  { opacity: 0.85; text-shadow: 0 0 7px rgba(246,191,2,0.7), 0 0 20px rgba(246,191,2,0.5), 0 0 42px rgba(246,191,2,0.35); }
    32%  { opacity: 0.25; text-shadow: none; }
    52%  { opacity: 0.95; text-shadow: 0 0 7px rgba(246,191,2,0.7), 0 0 20px rgba(246,191,2,0.5), 0 0 42px rgba(246,191,2,0.35), 0 0 82px rgba(246,191,2,0.2); }
    66%  { opacity: 0.4; text-shadow: 0 0 7px rgba(246,191,2,0.3); }
    100% { opacity: 1; text-shadow: 0 0 7px rgba(246,191,2,0.7), 0 0 20px rgba(246,191,2,0.5), 0 0 42px rgba(246,191,2,0.35), 0 0 82px rgba(246,191,2,0.2), 0 0 120px rgba(246,191,2,0.1); }
}
/*
 * Gold #F6BF02 on this pink measures 2.1:1 and fails AA even at the 3:1
 * threshold for display-size text, so the ground under the headline has to
 * come down. Doing that as a patch behind the text read as a box stuck on the
 * artwork; this is one soft pool of shadow across the whole frame instead —
 * closer to how a lit sign actually sits in a room, and with no visible edge.
 */
.confessional__scene::after {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 58% at 50% 52%,
        rgba(0,0,0,0.56) 0%,
        rgba(0,0,0,0.50) 26%,
        rgba(0,0,0,0.34) 48%,
        rgba(0,0,0,0.14) 68%,
        rgba(0,0,0,0) 84%);
}
.confessional__title--neon-on {
    animation: neonFlicker 1.8s ease-out forwards;
}
/* CTA button */
.confessional__cta-wrap {
    position: absolute; z-index: 6;
    left: 50%; bottom: 80px; transform: translateX(-50%);
    opacity: 0; pointer-events: auto;
}
.confessional__cta-wrap--visible { opacity: 1; }
.confessional__cta {
    position: relative;
    font-family: var(--font-heading); font-size: 20px;
    font-weight: 400; line-height: 1; letter-spacing: var(--type-letter-spacing);
    color: var(--se-black); background: var(--se-white);
    border: 1px solid var(--se-white); padding: 5px 20px;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.confessional__cta:hover,
.confessional__cta:focus-visible {
    background: transparent; color: var(--se-white);
}
.confessional__cta-bite {
    position: absolute; top: -1px; right: -1px;
    width: 20px; height: 21px; pointer-events: none; z-index: 2;
    opacity: 0; transition: opacity var(--transition-base);
}
.confessional__cta-bite { color: var(--se-pink); }
.confessional__cta:hover .confessional__cta-bite,
.confessional__cta:focus-visible .confessional__cta-bite { opacity: 1; }
/* ── Confessional Mobile ── */
@media (max-width: 768px) {
    .confessional { height: 70vh; min-height: 400px; max-height: 600px; overflow: hidden; }
    .confessional__bar { height: 20px; }
    .confessional__scene { position: absolute; inset: 0; }
    .confessional__snake {
        width: 140%; height: 140%; top: -20%; left: -20%;
    }
    .confessional__snake img { transform: rotate(-10deg); }
    .confessional__vhs {
        width: 92vw; left: 50%; top: 35%;
        transform: translate(-45%, -50%) rotate(-4deg);
    }
    .confessional__lips {
        width: 48vw; left: -3%; top: 38%;
        transform: translateY(-50%);
    }
    .confessional__badge { display: none; }
    .confessional__title {
        font-size: clamp(44px, 14vw, 100px);
        top: 52%; opacity: 0;
    }
    .confessional__title--neon-on { animation: neonFlicker 1.8s ease-out forwards; }
    .confessional__cta-wrap { bottom: 40px; opacity: 0; }
    .confessional__cta { font-size: 16px; padding: 4px 16px; }
}

/* ═══════════════════════════════════════════
   TAGLINE BANNER
   ═══════════════════════════════════════════ */
.tagline-banner {
    position: relative; width: 100%;
    padding: clamp(3rem, 2.2rem + 4vw, 6.25rem) var(--gutter);
    background: #f5f5f5;
    display: flex; align-items: center; gap: 60px;
    overflow: hidden;
    transition: background 0.1s ease;
}
.tagline-banner__logo {
    flex-shrink: 0; width: 220px; height: 220px;
}
.tagline-banner__logo img {
    width: 100%; height: 100%;
    filter: brightness(0);
}
/* Text reveal: each word masked and slides up */
.tagline-banner__text {
    font-family: var(--font-telaviv); font-weight: 700;
    font-size: clamp(28px, 3.1vw, 44px);
    color: var(--se-black); text-transform: uppercase;
    line-height: 1.1; letter-spacing: var(--type-letter-spacing);
    margin: 0;
    display: flex; flex-wrap: wrap; gap: 0 0.3em;
}
.tagline-banner__word {
    display: inline-block; overflow: hidden;
}
/* The words start off-screen only when JS is present to bring them back;
   without it (or with it broken) the tagline must still be readable. */
.tagline-banner__word-inner {
    display: inline-block;
}
.se-js .tagline-banner__word-inner {
    transform: translateY(110%);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .se-js .tagline-banner__word-inner { transform: none; transition: none; }
}
.se-js .tagline-banner--revealed .tagline-banner__word-inner {
    transform: translateY(0);
}
/* Stagger delays via nth-child */
.se-js .tagline-banner--revealed .tagline-banner__word:nth-child(1) .tagline-banner__word-inner { transition-delay: 0s; }
.se-js .tagline-banner--revealed .tagline-banner__word:nth-child(2) .tagline-banner__word-inner { transition-delay: 0.08s; }
.se-js .tagline-banner--revealed .tagline-banner__word:nth-child(3) .tagline-banner__word-inner { transition-delay: 0.16s; }
.se-js .tagline-banner--revealed .tagline-banner__word:nth-child(4) .tagline-banner__word-inner { transition-delay: 0.24s; }
.se-js .tagline-banner--revealed .tagline-banner__word:nth-child(5) .tagline-banner__word-inner { transition-delay: 0.32s; }
/* ── Tagline Mobile ── */
@media (max-width: 768px) {
    .tagline-banner {
        flex-direction: column; padding: 50px 30px;
        gap: 24px; text-align: center;
    }
    .tagline-banner__logo { width: 120px; height: 120px; }
    .tagline-banner__text { font-size: clamp(22px, 7vw, 36px); justify-content: center; }
}



/* ═══════════════════════════════════════════
   THE CONFESSIONAL — booth and wall
   ═══════════════════════════════════════════ */

/* ── The Confessional page ───────────────────────────────── */

/*
 * Dark, like the panel it comes from. The booth and wall were built on the
 * black ground of the homepage section; keeping the page dark means the whole
 * treatment carries over unchanged, and a confession booth painted white would
 * read as a contact form.
 */
.se-confessional-page {
    background: var(--se-black);
    color: var(--se-white);
}

/* The scene is the page's hero, so it sits under the fixed header rather than
   below a stack of page padding. */
.se-confessional-page .confessional {
    margin-top: 0;
}

.se-confessional-page__body {
    padding-block: clamp(2.5rem, 7vw, 5rem);
}

.se-confessional-page .se-prose {
    color: var(--se-muted-on-dark);
}

.se-confessional-page__intro {
    max-width: 60ch;
    margin-top: 1rem;
}

.confession-booth {
    max-width: 46rem;
    margin: clamp(2rem, 5vw, 3.5rem) 0 0;
}

.confession-booth__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.confession-booth__label {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    text-transform: uppercase;
    color: var(--se-white);
}

.confession-booth__input {
    width: 100%;
    min-height: 8rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--se-white);
    color: var(--se-white);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}

.confession-booth__input:focus-visible {
    outline: var(--se-focus-width) solid var(--se-gold);
    outline-offset: 2px;
}

.confession-booth__help {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--se-muted-on-dark);
}

.confession-booth__count {
    font-variant-numeric: tabular-nums;
}

/*
 * The honeypot. Off-screen rather than display:none — some bots skip anything
 * that is not rendered, and the point is that they DO fill it in.
 */
.confession-booth__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.confession-booth__status {
    min-height: 1.5em;
    font-size: 0.9375rem;
    color: var(--se-gold);
}

.confession-booth__status.is-error {
    /* Gold on black is 9.5:1; the error colour has to clear AA on this ground
       too, so it is a light red rather than the usual dark one. */
    color: #FF9A9A;
}

.confession-booth__done {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--se-gold);
}

/* ── The wall ────────────────────────────── */

.confession-wall {
    padding-block: clamp(2rem, 5vw, 3.5rem);
}

.confession-wall__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
    text-transform: uppercase;
    color: var(--se-white);
    margin-bottom: 1.5rem;
}

/*
 * A drag rail, not a grid — the same behaviour as the product carousels, driven
 * by the same carousel.js. It also stops a growing queue of confessions from
 * turning the page into an endless column.
 */
.confession-wall__list {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    overscroll-behavior-x: contain;
}

.confession-wall__list::-webkit-scrollbar { display: none; }
.confession-wall__list:active { cursor: grabbing; }

.confession-wall__list:focus-visible {
    outline: var(--se-focus-width) solid var(--se-gold);
    outline-offset: -2px;
}

.confession-wall__item {
    flex: 0 0 clamp(16rem, 78vw, 21rem);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 1.5rem;
    border: 1px solid var(--se-line-on-dark);
    background: rgba(255, 255, 255, 0.03);
}

.confession-wall__quote {
    margin: 0;
    color: var(--se-white);
    font-size: 1rem;
    line-height: 1.55;
}

.confession-wall__quote p {
    margin: 0;
}

.confession-wall__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--se-muted-on-dark);
}