/* ============================================================
   BEINC — Intro White Section (IWS)
   Sits above MVP section in document flow.
   160px tall, full width, cream background.
   ============================================================ */

.iws-section {
    width: 100%;
    height: 160px;
    position: relative;
    z-index: var(--z-base);
    background: var(--color-white);
    overflow: clip; /* clip — no BFC, iOS momentum scroll safe */
}

/* Dashed line — global style, greyish colour, vertically centred */
.iws-line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
    height: 2px;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
    box-sizing: border-box;
    pointer-events: none;
}

/* Word container — full section, flex-centred */
.iws-word-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* clip-path controlled by JS */
}

/* Word text — global heading style */
.iws-word {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    white-space: nowrap;
    display: block;
    /* x transform controlled by JS */
}

/* Asterisk track — positioned absolutely, x controlled by JS via transform */
.iws-asterisk-track {
    position: absolute;
    top: calc(50% - 48px);
    left: 0;
    width: 96px;
    height: 96px;
    pointer-events: none;
    user-select: none;
}

/* Asterisk image — fills track, rotation driven by GSAP ticker in JS */
.iws-asterisk {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .iws-section {
        height: 120px;
    }

    .iws-asterisk-track {
        width: 64px;
        height: 64px;
        top: calc(50% - 32px);
    }

    .iws-word {
        white-space: normal;
        text-align: center;
        padding: 0 var(--pad-x);
        font-size: clamp(1.4rem, 5vw, 2rem);
    }
}