/* =========================================================
   THE WISHINK WELL
   FINAL HERO CSS
========================================================= */

:root {
    --paper: #f7f4ef;
    --ink: #111111;
    --form: #e2e0dc;

    --pink: #ff315a;
    --blue: #bfeaf5;
    --warm: #8c5e43;

    --media-radius: 28px;
    --form-radius: 24px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
video {
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    pointer-events: none;
}


/* MENU BUTTON */

.menu-toggle {
    position: absolute;

    top: 32px;
    right: 44px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 8px 0;

    border: 0;

    background: transparent;
    color: var(--ink);

    cursor: pointer;

    pointer-events: auto;
}

.menu-toggle__text {
    font-size: 13px;
    font-weight: 800;

    letter-spacing: .16em;
}

.menu-toggle__icon {
    width: 34px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.menu-toggle__icon i {
    display: block;

    width: 100%;
    height: 2px;

    background: currentColor;

    transition:
        width .2s ease,
        transform .2s ease;
}

.menu-toggle:hover .menu-toggle__icon i:first-child {
    width: 24px;
}


/* =========================================================
   MENU OVERLAY
========================================================= */

.menu-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    background: #111111;
    color: #ffffff;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.menu-close {
    position: absolute;

    top: 32px;
    right: 44px;

    border: 0;

    background: transparent;
    color: white;

    cursor: pointer;

    font-size: 13px;

    letter-spacing: .15em;
}

.main-menu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.main-menu li {
    margin: 4px 0;
}

.main-menu a {
    display: inline-block;

    color: white;

    text-decoration: none;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 78px);

    line-height: 1.04;

    letter-spacing: -.045em;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.main-menu a:hover {
    opacity: .5;

    transform: translateX(8px);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    --hero-pt: clamp(54px, 6vh, 78px);

    min-height: 100svh;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    /* padding bawah 0: kartu 3 "tenggelam" tepat di tepi bawah layar */
    padding:
        var(--hero-pt)
        clamp(30px, 4vw, 76px)
        0;
}

.hero__shell {
    position: relative;

    width: min(94vw, 1540px);

    align-self: stretch;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.07fr)
        minmax(430px, .93fr);

    gap:
        clamp(40px, 3.4vw, 64px);

    align-items: center;
}


/* hide old centre X */
.hero-divider {
    display: none;
}


/* =========================================================
   LEFT VISUAL
   Semua ukuran diturunkan dari --h (tinggi area visual).
   Area visual menempel ke tepi bawah hero, jadi kartu 3 terpotong
   di tepi bawah layar = efek "tenggelam / muncul dari bawah".
========================================================= */

.hero-visual {
    --h: clamp(
        520px,
        min(calc(100svh - var(--hero-pt)), 56vw),
        880px
    );

    --card-w: calc(var(--h) * .34);
    --x0: calc(100% - var(--h) * .70);

    position: relative;

    width: 100%;
    height: var(--h);

    align-self: end;

    /* potong hanya sisi bawah (bayangan di sisi lain tetap aman) */
    clip-path: inset(-80px -80px 0 -80px);
}


/* =========================================================
   SPARKLE DECOR (pengganti lingkaran)
   Bintang 4 sudut, tanda +, cincin kecil & titik tinta berwarna
   cokelat hangat, tersebar di sekitar kartu. Semuanya digambar
   dengan CSS (tanpa file gambar) dan mengikuti ukuran --h.
========================================================= */

.hero-visual__brush {
    --sp-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-filled:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238c5e43'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-plus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 3V21M3 12H21'/%3E%3C/svg%3E");
    --sp-ring:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
    --sp-dot:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238c5e43'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");

    /* kotak dekorasi = area gugus kartu + margin di sekelilingnya */
    position: absolute;

    top: 0;
    left: calc(var(--x0) - var(--h) * .12);

    width: calc(var(--h) * .94);
    height: 100%;

    pointer-events: none;
}

.hero-visual__brush::before,
.hero-visual__brush::after {
    content: "";

    position: absolute;
    inset: 0;

    background-repeat: no-repeat;

    opacity: .55;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

/* lapisan A: bintang outline besar + cincin */
.hero-visual__brush::before {
    background-image:
        var(--sp-outline),
        var(--sp-outline),
        var(--sp-outline),
        var(--sp-outline),
        var(--sp-outline),
        var(--sp-ring),
        var(--sp-ring);

    background-size:
        calc(var(--h) * .075) calc(var(--h) * .075),
        calc(var(--h) * .050) calc(var(--h) * .050),
        calc(var(--h) * .085) calc(var(--h) * .085),
        calc(var(--h) * .060) calc(var(--h) * .060),
        calc(var(--h) * .045) calc(var(--h) * .045),
        calc(var(--h) * .018) calc(var(--h) * .018),
        calc(var(--h) * .020) calc(var(--h) * .020);

    background-position:
        71% 8%,
        6% 18%,
        4% 82%,
        94% 40%,
        66% 90%,
        83% 17%,
        3% 55%;
}

/* lapisan B: bintang isi kecil, tanda +, titik (kedip bergantian) */
.hero-visual__brush::after {
    background-image:
        var(--sp-filled),
        var(--sp-filled),
        var(--sp-filled),
        var(--sp-plus),
        var(--sp-plus),
        var(--sp-dot),
        var(--sp-dot),
        var(--sp-dot);

    background-size:
        calc(var(--h) * .028) calc(var(--h) * .028),
        calc(var(--h) * .030) calc(var(--h) * .030),
        calc(var(--h) * .026) calc(var(--h) * .026),
        calc(var(--h) * .025) calc(var(--h) * .025),
        calc(var(--h) * .030) calc(var(--h) * .030),
        calc(var(--h) * .010) calc(var(--h) * .010),
        calc(var(--h) * .012) calc(var(--h) * .012),
        calc(var(--h) * .010) calc(var(--h) * .010);

    background-position:
        79% 15%,
        10% 70%,
        62% 4%,
        13% 42%,
        92% 70%,
        9% 30%,
        74% 93%,
        58% 20%;

    animation-delay: -3.5s;
}

@keyframes wishink-twinkle {
    0%, 100% { opacity: .3; }
    50%      { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual__brush::before,
    .hero-visual__brush::after {
        animation: none;
        opacity: .5;
    }
}


/* =========================================================
   MEDIA CARDS

        [ 1 ]
        [   ][ 2 ]
   [ 3 ][___][   ]
   [   ]     [___]
   [___]  <- kartu 3 terpotong tepi bawah
========================================================= */

.hero-card {
    position: absolute;

    width: var(--card-w);

    margin: 0;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    border-radius: var(--media-radius);

    background: #ddd9d3;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, .075);

    transform: translateZ(0);
}

.hero-card img,
.hero-card video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hero-card video {
    pointer-events: none;
}


/* KARTU 1 - atas */

.hero-card--one {
    top: 0;
    left: calc(var(--x0) + var(--h) * .05);

    z-index: 2;
}


/* KARTU 2 - video, tengah kanan */

.hero-card--two {
    top: 22%;
    left: calc(var(--x0) + var(--h) * .36);

    z-index: 4;

    box-shadow:
        0 26px 65px
        rgba(0, 0, 0, .11);
}


/* KARTU 3 - kiri bawah, sebagian tenggelam di bawah layar.
   Ubah top (62%) untuk mengatur seberapa dalam tenggelamnya:
   makin besar = makin banyak yang terpotong. */

.hero-card--three {
    top: 62%;
    left: var(--x0);

    z-index: 3;
}


/* PLACEHOLDER */

.hero-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background: #ddd9d3;

    color:
        rgba(0,0,0,.25);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .1em;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.hero-content {
    width: 100%;

    max-width:
        clamp(440px, 32vw, 580px);

    justify-self: center;

    /* geser konten sedikit ke atas agar terasa seimbang secara visual */
    padding-bottom: clamp(0px, 5vh, 52px);
}


/* =========================================================
   LOGO
========================================================= */

.hero-logo {
    min-height: 84px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.hero-logo .custom-logo-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;
}

.hero-logo .custom-logo {
    display: block;

    width:
        clamp(260px, 19vw, 340px);

    max-height: 104px;

    object-fit: contain;

    margin: 0 auto;
}

.hero-logo__fallback {
    font-family:
        Georgia,
        serif;

    font-size: 38px;

    font-weight: 700;
}


/* =========================================================
   HEADLINE
========================================================= */

.hero-heading {
    margin:
        22px
        0
        32px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(32px, 2.75vw, 52px);

    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -.045em;
}

.hero-heading span {
    display: block;
}

.hero-heading span:last-child {
    color: var(--warm);
}


/* =========================================================
   FORM
========================================================= */

.wishink-form {
    width: 100%;

    padding:
        30px
        30px
        30px;

    background:
        rgba(226, 224, 220, .92);

    border:
        1px solid
        rgba(0,0,0,.14);

    border-radius: var(--form-radius);

    box-shadow:
        0 16px 42px
        rgba(0,0,0,.035);
}


/* FORM TITLE */

.wishink-form__eyebrow {
    margin:
        0
        0
        22px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .13em;
}


/* GRID */

.wishink-form__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px
        14px;
}


/* LABELS */

.wishink-form label {
    display: block;
}

.wishink-form label > span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .09em;
}


/* INPUTS */

.wishink-form input,
.wishink-form textarea {
    width: 100%;

    border:
        1px solid
        rgba(0,0,0,.10);

    outline: none;

    background:
        rgba(255,255,255,.78);

    color: #111;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.wishink-form input {
    height: clamp(44px, 5.2vh, 50px);

    padding:
        0
        14px;

    border-radius: 12px;

    font-size: 13px;
}

.wishink-form textarea {
    min-height: clamp(96px, 12vh, 124px);

    padding: 14px;

    border-radius: 12px;

    resize: vertical;

    font-size: 13px;

    line-height: 1.5;
}

.wishink-form input::placeholder,
.wishink-form textarea::placeholder {
    color:
        rgba(0,0,0,.42);
}

.wishink-form input:hover,
.wishink-form textarea:hover {
    background: white;
}

.wishink-form input:focus,
.wishink-form textarea:focus {
    background: white;

    border-color:
        rgba(0,0,0,.42);

    box-shadow:
        0 0 0 3px
        rgba(191,234,245,.72);
}

.wishink-form__idea {
    margin-top: 18px;
}


/* =========================================================
   CTA
========================================================= */

.wishink-form__submit {
    width: 100%;

    min-height: 54px;

    margin-top: 24px;

    padding:
        0
        22px;

    border: 0;

    border-radius: 11px;

    background: var(--pink);

    color: white;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 22px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .12em;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.wishink-form__submit:hover {
    transform:
        translateY(-2px);

    background:
        #ed204c;

    box-shadow:
        0 10px 26px
        rgba(255,49,90,.22);
}

.wishink-form__arrow {
    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   MEDIUM DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1280px) {

    .hero__shell {
        width: min(95vw, 1180px);

        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, .95fr);

        gap: 44px;
    }

    .hero-content {
        max-width: 520px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .hero {
        min-height: auto;

        overflow-x: clip;
        overflow-y: visible;

        padding-top: 100px;
        padding-bottom: 56px;
    }

    .hero__shell {
        width:
            min(680px, 100%);

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .hero-visual {
        --h: 600px;
        --x0: calc(50% - var(--h) * .35);
    }

    .hero-content {
        max-width: 580px;

        padding-bottom: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .menu-toggle {
        top: 18px;
        right: 20px;
    }

    .hero {
        padding:
            78px
            18px
            40px;
    }

    .hero__shell {
        gap: 36px;
    }

    .hero-visual {
        --h: 470px;
    }

    .hero-card {
        border-radius: 21px;
    }

    .hero-logo {
        min-height: 70px;
    }

    .hero-logo .custom-logo {
        width:
            min(235px, 72vw);

        max-height: 78px;
    }

    .hero-heading {
        margin:
            12px
            0
            20px;

        font-size: 31px;
    }

    .wishink-form {
        padding: 22px;

        border-radius: 21px;
    }

    .wishink-form__grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .wishink-form input {
        height: 48px;

        border-radius: 12px;

        font-size: 16px; /* cegah auto-zoom iOS */
    }

    .wishink-form textarea {
        min-height: 110px;

        border-radius: 12px;

        font-size: 16px;
    }

    .wishink-form__submit {
        width: 100%;

        min-height: 54px;

        border-radius: 12px;

        justify-content:
            space-between;
    }

}


/* =========================================================
   LAPTOP / LAYAR PENDEK (tinggi <= 940px)
   Sisi kanan dipadatkan supaya form muat dalam satu layar
   dan komposisi kiri-kanan tetap sejajar.
========================================================= */

@media (min-width: 981px) and (max-height: 940px) {

    .hero-content {
        padding-bottom: 0;
    }

    .hero-logo {
        min-height: 64px;
    }

    .hero-logo .custom-logo {
        width: clamp(220px, 15vw, 280px);

        max-height: 80px;
    }

    .hero-heading {
        margin:
            16px
            0
            22px;

        font-size: clamp(30px, 2.5vw, 46px);
    }

    .wishink-form {
        padding:
            24px
            26px
            26px;
    }

    .wishink-form__eyebrow {
        margin-bottom: 16px;
    }

    .wishink-form__grid {
        gap:
            14px
            12px;
    }

    .wishink-form label > span {
        margin-bottom: 6px;
    }

    .wishink-form input {
        height: 42px;
    }

    .wishink-form textarea {
        min-height: 84px;
    }

    .wishink-form__idea {
        margin-top: 14px;
    }

    .wishink-form__submit {
        min-height: 48px;

        margin-top: 18px;
    }

}


/* =========================================================
   WHY SECTION  -  foto lengkung + poin editorial (tanpa kotak)
========================================================= */

.why {
    --sp-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-filled-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff315a'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");

    position: relative;

    overflow: hidden;

    padding:
        clamp(84px, 10.5vw, 156px)
        clamp(20px, 4vw, 76px)
        clamp(96px, 11.5vw, 168px);
}

.why::before {
    content: "";

    position: absolute;

    top: clamp(56px, 7vw, 110px);
    left: clamp(16px, 5vw, 90px);

    width: clamp(40px, 4.5vw, 72px);
    aspect-ratio: 1;

    background:
        var(--sp-outline)
        center / contain
        no-repeat;

    opacity: .45;

    pointer-events: none;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.why__inner {
    position: relative;

    width: min(100%, 1320px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(40px, 6vw, 110px);

    align-items: start;
}


/* ---------- LEFT: FOTO LENGKUNG ---------- */

.why-visual {
    position: sticky;

    top: 96px;

    align-self: start;
}

.why-visual__frame {
    position: relative;

    aspect-ratio: 4 / 5;

    max-height:
        calc(100svh - 140px);

    margin-right: 18px;
}

/* garis tipis bayangan lengkung (seperti sketsa) */
.why-visual__frame::before {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1.5px solid
        rgba(140, 94, 67, .55);

    border-radius:
        999px
        999px
        var(--media-radius)
        var(--media-radius);

    transform: translate(18px, 18px);

    pointer-events: none;
}

.why-visual__arch {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    border-radius:
        999px
        999px
        var(--media-radius)
        var(--media-radius);

    background: #ddd9d3;

    box-shadow:
        0 26px 65px
        rgba(0, 0, 0, .10);
}

.why-visual__arch img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.why-visual__placeholder {
    position: absolute;

    inset: 0;

    display: grid;
    place-items: center;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;

    color: rgba(0, 0, 0, .25);
}


/* lencana berputar */

.why-badge {
    position: absolute;

    right: -6%;
    bottom: 9%;

    z-index: 2;

    width: clamp(104px, 10vw, 148px);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--paper);

    box-shadow:
        0 14px 36px
        rgba(0, 0, 0, .12);
}

.why-badge__ring {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    animation: why-spin 22s linear infinite;
}

.why-badge__ring text {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8.4px;
    font-weight: 800;

    fill: var(--ink);
}

.why-badge__star {
    width: 26%;
    aspect-ratio: 1;

    background:
        var(--sp-filled-pink)
        center / contain
        no-repeat;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

@keyframes why-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ---------- RIGHT: HEAD ---------- */

.why__head {
    margin-bottom:
        clamp(34px, 4vw, 56px);
}

.why__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.why__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.why__title {
    margin: 0 0 24px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(36px, 4.3vw, 70px);

    line-height: 1.04;

    font-weight: 700;

    letter-spacing: -.045em;
}

.why__title span {
    display: block;
}

/* nama studio: cokelat saja, tanpa latar */
.why__mark {
    padding: 0;

    margin: 0;

    color: var(--warm);

    background: none;
}

.why__lead {
    margin: 0;

    max-width: 520px;

    font-size:
        clamp(16px, 1.25vw, 19px);

    line-height: 1.65;

    color: rgba(17, 17, 17, .72);
}

.why__lead strong {
    color: var(--ink);

    border-bottom:
        2px solid
        var(--pink);
}


/* ---------- POIN (tanpa kotak, dua kolom bergeser) ---------- */

.why-cols {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap:
        clamp(40px, 5vw, 84px);

    row-gap:
        clamp(30px, 3vw, 44px);
}

/* garis tegak tipis di tengah */
.why-cols::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    width: 1px;

    background:
        rgba(17, 17, 17, .16);
}

.why-point {
    padding-top: 26px;

    border-top:
        1px solid
        rgba(17, 17, 17, .16);
}

.why-point:nth-child(even) {
    margin-top:
        clamp(36px, 4vw, 64px);
}

.why-point__icon {
    width: 30px;
    height: 30px;

    display: block;

    fill: none;
    stroke: var(--warm);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .35s ease;
}

.why-point__bar {
    display: block;

    width: 26px;
    height: 2px;

    margin:
        12px
        0
        18px;

    border-radius: 2px;

    background: var(--pink);

    transition:
        width .4s
        cubic-bezier(.2, .7, .2, 1);
}

.why-point:hover .why-point__bar {
    width: 64px;
}

.why-point:hover .why-point__icon {
    transform: translateY(-3px);
}

.why-point h3 {
    margin: 0 0 10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(22px, 1.9vw, 28px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.035em;
}

.why-point p {
    margin: 0;

    max-width: 30em;

    font-size: 15px;
    line-height: 1.65;

    color: rgba(17, 17, 17, .68);
}


/* ---------- PENUTUP ---------- */

.why-final {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap:
        clamp(18px, 2vw, 30px);

    margin-top:
        clamp(40px, 4.4vw, 68px);

    padding-top:
        clamp(26px, 3vw, 38px);

    border-top:
        1.5px solid
        var(--ink);
}

.why-final__icon {
    width: 44px;
    height: 44px;

    fill: none;
    stroke: var(--pink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.why-final h3 {
    margin: 0 0 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.2vw, 50px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;
}

.why-final h3::after {
    content: "";

    display: inline-block;

    width: .5em;
    aspect-ratio: 1;

    margin-left: .25em;

    vertical-align: .55em;

    background:
        var(--sp-filled-pink)
        center / contain
        no-repeat;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.why-final p {
    margin: 0;

    max-width: 36em;

    font-size: 16px;
    line-height: 1.65;

    color: rgba(17, 17, 17, .7);
}

.why__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 24px;

    margin-top:
        clamp(34px, 3.8vw, 52px);
}

.why__cta-text {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(24px, 2.4vw, 36px);

    font-weight: 700;

    letter-spacing: -.04em;
}

/* tombol pink (dipakai juga oleh section Styles) */
.why__button {
    min-height: 54px;

    padding: 0 26px;

    display: inline-flex;
    align-items: center;

    gap: 22px;

    border-radius: 12px;

    background: var(--pink);
    color: #fff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.why__button:hover {
    transform: translateY(-2px);

    background: #ed204c;

    box-shadow:
        0 10px 26px
        rgba(255, 49, 90, .22);
}

.why__button-arrow {
    font-size: 20px;

    line-height: 1;
}


/* ---------- REVEAL ON SCROLL ---------- */

.why.is-ready [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.why [data-reveal].is-visible {
    animation:
        why-rise .8s
        cubic-bezier(.2, .7, .2, 1)
        backwards;

    animation-delay:
        calc(var(--i, 0) * 90ms);
}

@keyframes why-rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .why::before,
    .why-badge__ring,
    .why-badge__star,
    .why-final h3::after {
        animation: none;
    }

    .why [data-reveal].is-visible {
        animation: none;
    }
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 980px) {

    .why::before {
        left: auto;
        right: 20px;

        top: 40px;

        width: 36px;
    }

    .why__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .why-visual {
        position: static;

        width: min(100%, 440px);

        margin: 0 auto;
    }

    .why-visual__frame {
        max-height: none;
    }

    .why-cols {
        grid-template-columns: 1fr;
    }

    .why-cols::before {
        display: none;
    }

    .why-point:nth-child(even) {
        margin-top: 0;
    }

}

@media (max-width: 600px) {

    .why {
        padding:
            72px
            18px
            84px;
    }

    .why-visual__frame {
        margin-right: 12px;
    }

    .why-visual__frame::before {
        transform: translate(12px, 12px);
    }

    .why-badge {
        right: -4%;
    }

    .why-final {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .why__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .why__button {
        justify-content: space-between;

        min-height: 56px;
    }

}


/* =========================================================
   TOMBOL SUBMIT - STATE LOADING ("Opening WhatsApp...")
========================================================= */

.wishink-form__submit:disabled {
    cursor: progress;
}

.wishink-form__submit.is-loading {
    pointer-events: none;

    transform: none;

    background: #ed204c;
}

.wishink-form__submit.is-loading .wishink-form__arrow {
    width: 18px;
    height: 18px;

    font-size: 0;

    border:
        2px solid
        rgba(255, 255, 255, .35);

    border-top-color: #fff;

    border-radius: 50%;

    animation: wishink-spin .7s linear infinite;
}

@keyframes wishink-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   STYLES SECTION  -  daftar bernomor + preview foto
   (latar terang, kiri: daftar, kanan: foto yang berganti)
========================================================= */

.styles {
    --sp-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-filled-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff315a'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");

    position: relative;

    overflow-x: clip;

    background: #ece6dc;

    border-radius:
        clamp(28px, 4vw, 56px)
        clamp(28px, 4vw, 56px)
        0
        0;

    --styles-pad: clamp(20px, 4vw, 76px);

    padding:
        clamp(80px, 9vw, 140px)
        var(--styles-pad)
        clamp(90px, 10vw, 150px);
}

.styles__inner {
    position: relative;

    width: min(100%, 1320px);

    margin: 0 auto;
}

.styles-layout > * {
    min-width: 0;
}

.styles-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    gap:
        clamp(40px, 6vw, 110px);

    align-items: start;
}


/* ---------- HEAD ---------- */

.styles__head {
    margin-bottom:
        clamp(34px, 4vw, 56px);
}

.styles__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.styles__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.styles__title {
    margin: 0 0 22px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(36px, 4.2vw, 68px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -.045em;
}

.styles__title span {
    display: block;
}

.styles__title span:last-child {
    color: var(--warm);
}

.styles__lead {
    margin: 0;

    max-width: 520px;

    font-size:
        clamp(16px, 1.25vw, 19px);

    line-height: 1.65;

    color: rgba(17, 17, 17, .68);
}


/* ---------- LIST ---------- */

.style-row {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(16px, 2vw, 32px);

    padding:
        clamp(20px, 2vw, 28px)
        0;

    border-top:
        1px solid
        rgba(17, 17, 17, .16);

    color: var(--ink);

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    transition: opacity .3s ease;
}

.style-row:focus-visible {
    outline:
        2px solid
        var(--warm);

    outline-offset: 4px;
}

.style-row__num {
    min-width: 2.2em;

    font-family:
        Georgia,
        serif;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: .08em;

    color: rgba(17, 17, 17, .4);

    transition: color .3s ease;
}

.style-row__name {
    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.6vw, 56px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -.045em;

    transition:
        transform .45s
        cubic-bezier(.2, .7, .2, 1);
}

/* deskripsi: terbuka halus pada baris aktif */
.style-row__desc {
    display: block;

    max-width: 34em;

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    font-size: 15px;
    line-height: 1.5;

    color: rgba(17, 17, 17, .62);

    opacity: 0;

    transition:
        max-height .45s ease,
        margin-top .45s ease,
        opacity .35s ease;
}

.style-row.is-active .style-row__desc {
    max-height: 64px;

    margin-top: 12px;

    opacity: 1;
}

.style-row.is-active .style-row__num {
    color: var(--pink);
}

.style-row.is-active .style-row__name {
    transform: translateX(10px);
}

.style-row__thumb {
    display: none;
}

.style-row__arrow {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(17, 17, 17, .22);

    border-radius: 50%;

    font-size: 18px;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.style-row.is-active .style-row__arrow {
    background: var(--pink);

    border-color: var(--pink);

    color: #fff;

    transform: rotate(45deg);
}

@media (hover: hover) and (min-width: 981px) {

    .styles-list:hover .style-row:not(:hover) {
        opacity: .38;
    }

}


/* ---------- CTA ROW ---------- */

.styles-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 20px;

    padding-top:
        clamp(26px, 2.8vw, 36px);

    border-top:
        1px solid
        rgba(17, 17, 17, .16);
}

.styles-cta h3 {
    margin: 0 0 6px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(24px, 2.4vw, 34px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -.04em;
}

.styles-cta p {
    margin: 0;

    font-size: 15px;
    line-height: 1.5;

    color: rgba(17, 17, 17, .62);
}


/* ---------- PREVIEW (sticky) ---------- */

.styles-preview {
    position: sticky;

    top: 96px;

    align-self: start;
}

.styles-preview__stage {
    position: relative;

    aspect-ratio: 4 / 5;

    max-height:
        calc(100svh - 140px);

    margin-left: auto;
}

/* pelat miring di belakang foto */
.styles-preview__stage::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: var(--media-radius);

    background:
        rgba(140, 94, 67, .16);

    transform:
        rotate(5deg)
        translate(16px, 8px);
}

/* kilau pink di sudut */
.styles-preview__stage::after {
    content: "";

    position: absolute;

    top: -16px;
    right: -14px;

    width: 44px;
    aspect-ratio: 1;

    background:
        var(--sp-filled-pink)
        center / contain
        no-repeat;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.styles-preview__frame {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: var(--media-radius);

    background: #ddd9d3;

    box-shadow:
        0 26px 65px
        rgba(0, 0, 0, .14);
}

.styles-preview__slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    transform: scale(1.06);

    transition:
        opacity .6s ease,
        transform 1.1s
        cubic-bezier(.2, .7, .2, 1);
}

.styles-preview__slide.is-active {
    opacity: 1;

    transform: none;
}

.styles-preview__slide img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.styles-preview__placeholder {
    position: absolute;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 24px;

    text-align: center;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(28px, 3vw, 44px);

    font-weight: 700;

    letter-spacing: -.04em;

    color: rgba(0, 0, 0, .18);
}

.styles-preview__tag {
    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 16px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px 16px;

    border-radius: 14px;

    background:
        rgba(247, 244, 239, .82);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.styles-preview__count {
    color: rgba(17, 17, 17, .5);
}


/* ---------- REVEAL & MOTION ---------- */

.styles.is-ready [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.styles [data-reveal].is-visible {
    animation:
        why-rise .8s
        cubic-bezier(.2, .7, .2, 1)
        backwards;

    animation-delay:
        calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .styles-preview__stage::after {
        animation: none;
    }

    .styles [data-reveal].is-visible {
        animation: none;
    }

    .styles-preview__slide,
    .style-row__name,
    .style-row__desc {
        transition: none;
    }
}


/* ---------- KOLOM "TATTOO STYLE" TERISI OTOMATIS ---------- */

.wishink-form input.is-prefilled {
    animation:
        wishink-flash 1.7s ease;
}

@keyframes wishink-flash {
    0%, 55% {
        background: #fff;

        border-color: rgba(0, 0, 0, .42);

        box-shadow:
            0 0 0 4px
            rgba(191, 234, 245, .9);
    }
}


/* ---------- INDIKATOR GESER (default disembunyikan) ---------- */

.styles-progress {
    display: none;
}

.styles-progress__track {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    border-radius: 2px;

    background:
        rgba(17, 17, 17, .14);
}

.styles-progress__bar {
    position: absolute;

    top: 0;
    left: 0;

    width: var(--w, 14%);
    height: 100%;

    border-radius: 2px;

    background: var(--pink);

    transition:
        transform .12s linear;
}

.styles-progress__count {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;

    color:
        rgba(17, 17, 17, .5);
}


/* ---------- TABLET / MOBILE / LAYAR SENTUH: CAROUSEL GESER ---------- */

@media (max-width: 980px), (hover: none) {

    .styles-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .styles-preview {
        display: none;
    }

    /* daftar -> baris yang bisa digeser kiri/kanan */
    .styles-list {
        display: flex;

        gap: 14px;

        margin:
            0
            calc(var(--styles-pad) * -1);

        padding:
            0
            var(--styles-pad)
            4px;

        overflow-x: auto;

        overscroll-behavior-x: contain;

        scroll-snap-type: x mandatory;

        scroll-padding-inline: var(--styles-pad);

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .styles-list::-webkit-scrollbar {
        display: none;
    }

    /* tiap baris menjadi satu slide */
    .style-row {
        position: relative;

        flex: 0 0 min(74vw, 320px);

        scroll-snap-align: start;

        display: flex;
        flex-direction: column;

        gap: 16px;

        padding: 0;

        border-top: 0;
    }

    /* animasi muncul tidak dipakai di dalam carousel */
    .styles .style-row[data-reveal] {
        opacity: 1 !important;

        animation: none !important;
    }

    .style-row__thumb {
        display: block;

        order: 0;

        width: 100%;

        aspect-ratio: 4 / 5;

        overflow: hidden;

        border-radius: var(--media-radius);

        background: #ddd9d3;

        box-shadow:
            0 16px 40px
            rgba(0, 0, 0, .10);
    }

    .style-row__thumb img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
    }

    .style-row__body {
        order: 1;

        padding: 0 4px;
    }

    .style-row__name {
        font-size: 30px;
    }

    .style-row__desc {
        max-height: none;

        margin-top: 8px;

        font-size: 14px;

        opacity: 1;
    }

    /* nomor & panah melayang di atas foto */
    .style-row__num,
    .style-row__arrow {
        position: absolute;

        top: 14px;

        z-index: 2;

        background:
            rgba(247, 244, 239, .88);

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        color: var(--ink);
    }

    .style-row__num {
        left: 14px;

        min-width: 0;

        padding: 6px 12px;

        border-radius: 999px;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 11px;
        font-weight: 800;

        letter-spacing: .1em;
    }

    .style-row__arrow {
        right: 14px;

        width: 40px;
        height: 40px;

        border-color: transparent;

        font-size: 16px;
    }

    .style-row.is-active .style-row__num {
        color: var(--ink);
    }

    .style-row.is-active .style-row__name {
        transform: none;
    }

    .style-row.is-active .style-row__arrow {
        background:
            rgba(247, 244, 239, .88);

        border-color: transparent;

        color: var(--ink);

        transform: none;
    }

    .styles-progress {
        display: flex;
        align-items: center;

        gap: 16px;

        margin-top: 22px;
    }

    .styles-cta {
        margin-top: 34px;
    }

}

@media (max-width: 600px) {

    .styles {
        --styles-pad: 18px;

        padding:
            72px
            var(--styles-pad)
            84px;
    }

    .styles-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .styles-cta .why__button {
        justify-content: space-between;

        min-height: 56px;
    }

}


/* ---------- THUMB KOSONG (belum ada foto di Customizer) ---------- */

.style-row__thumb.is-empty {
    position: relative;

    background:
        linear-gradient(160deg, #e6e0d5, #d6cec1);
}

.style-row__thumb.is-empty::after {
    content: "";

    position: absolute;

    inset: 0;

    width: 34%;
    aspect-ratio: 1;

    margin: auto;

    background:
        var(--sp-outline)
        center / contain
        no-repeat;

    opacity: .6;
}


/* =========================================================
   TOMBOL MENU - jadi "pill" saat halaman di-scroll
   supaya teks MENU tidak bertabrakan dengan konten
========================================================= */

.menu-toggle {
    transition:
        background .25s ease,
        padding .25s ease,
        box-shadow .25s ease;
}

.site-header.is-scrolled .menu-toggle {
    padding: 10px 16px;

    border-radius: 999px;

    background:
        rgba(247, 244, 239, .9);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    box-shadow:
        0 8px 26px
        rgba(0, 0, 0, .10);
}


/* =========================================================
   STUDIO SECTION  -  "Step inside the Well."
   Latar kertas seperti hero, kartu foto seragam (radius sama dengan
   hero) yang bergeser naik-turun, angka tanpa kotak, baris kunjungan.
========================================================= */

.studio {
    --studio-pad: clamp(20px, 4vw, 76px);
    --studio-r: clamp(28px, 4vw, 56px);
    --studio-row: clamp(150px, 15.5vw, 232px);

    --sp-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-filled-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff315a'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");

    position: relative;

    z-index: 1;

    overflow-x: clip;

    /* menimpa sedikit section Styles agar sudut atas membulat rapi */
    margin-top: calc(var(--studio-r) * -1);

    background: var(--paper);

    border-radius:
        var(--studio-r)
        var(--studio-r)
        0
        0;

    padding:
        calc(var(--studio-r) + clamp(72px, 8vw, 120px))
        var(--studio-pad)
        clamp(90px, 10vw, 150px);
}

.studio::before,
.studio::after {
    content: "";

    position: absolute;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.studio::before {
    top: calc(var(--studio-r) + clamp(40px, 5vw, 80px));
    right: clamp(24px, 9vw, 170px);

    width: clamp(40px, 4.5vw, 72px);
    aspect-ratio: 1;

    background-image: var(--sp-outline);

    opacity: .5;
}

.studio::after {
    top: calc(var(--studio-r) + clamp(120px, 12vw, 190px));
    right: clamp(60px, 15vw, 280px);

    width: clamp(16px, 1.8vw, 28px);
    aspect-ratio: 1;

    background-image: var(--sp-filled-pink);

    animation-delay: -3.5s;
}

.studio__inner {
    position: relative;

    width: min(100%, 1320px);

    margin: 0 auto;
}


/* ---------- HEAD ---------- */

.studio__head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    gap:
        clamp(32px, 6vw, 100px);

    align-items: end;

    margin-bottom:
        clamp(40px, 5vw, 70px);
}

.studio__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.studio__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.studio__title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5.6vw, 92px);

    line-height: .96;

    font-weight: 700;

    letter-spacing: -.05em;
}

.studio__title span {
    display: block;
}

.studio__title em {
    font-style: normal;

    color: var(--warm);
}

.studio__lead {
    margin: 0;

    max-width: 440px;

    font-size:
        clamp(16px, 1.25vw, 19px);

    line-height: 1.65;

    color: rgba(17, 17, 17, .72);
}


/* ---------- BARIS FOTO (kartu seragam seperti hero, bergeser naik-turun) ---------- */

.studio-collage {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        clamp(12px, 1.4vw, 20px);

    align-items: start;
}

.studio-tile {
    position: relative;

    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: var(--media-radius);

    background: #ddd9d3;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, .075);

    transform: translateZ(0);
}

/* kartu genap turun sedikit -> irama naik-turun */
.studio-tile:nth-child(even) {
    margin-top:
        clamp(28px, 4vw, 60px);
}

.studio-tile img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}

.studio-tile:hover img {
    transform: scale(1.06);
}

.studio-tile__placeholder {
    position: absolute;

    inset: 0;

    display: grid;
    place-items: center;

    background: #ddd9d3;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .1em;

    color: rgba(0, 0, 0, .25);
}

.studio-tile__cap {
    position: absolute;

    left: 14px;
    bottom: 14px;

    z-index: 2;

    max-width: calc(100% - 28px);

    padding: 8px 14px;

    border-radius: 999px;

    background:
        rgba(247, 244, 239, .92);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------- INDIKATOR GESER (default disembunyikan) ---------- */

.studio-progress {
    display: none;
}

.studio-progress__track {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    border-radius: 2px;

    background:
        rgba(17, 17, 17, .14);
}

.studio-progress__bar {
    position: absolute;

    top: 0;
    left: 0;

    width: var(--w, 20%);
    height: 100%;

    border-radius: 2px;

    background: var(--pink);

    transition:
        transform .12s linear;
}

.studio-progress__count {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;

    color:
        rgba(17, 17, 17, .5);
}


/* ---------- ANGKA (tanpa kotak) ---------- */

.studio-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-top:
        clamp(48px, 5.5vw, 84px);
}

.studio-stat {
    padding:
        0
        clamp(24px, 4.5vw, 72px);

    text-align: center;
}

.studio-stat + .studio-stat {
    border-left:
        1px solid
        rgba(17, 17, 17, .18);
}

.studio-stat strong {
    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(40px, 5vw, 76px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -.05em;

    color: var(--warm);
}

.studio-stat span {
    display: block;

    margin-top: 12px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:
        rgba(17, 17, 17, .65);
}


/* ---------- BARIS KUNJUNGAN ---------- */

.studio-foot {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        32px
        clamp(32px, 6vw, 100px);

    align-items: end;

    margin-top:
        clamp(48px, 5.5vw, 84px);

    padding-top:
        clamp(26px, 3vw, 38px);

    border-top:
        1.5px solid
        var(--ink);
}

.studio-foot h3 {
    margin: 0 0 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.2vw, 50px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;
}

.studio-foot p {
    margin: 0;

    max-width: 34em;

    font-size: 16px;
    line-height: 1.65;

    color:
        rgba(17, 17, 17, .72);
}

.studio-info {
    display: flex;
    flex-wrap: wrap;

    gap:
        20px
        clamp(28px, 4vw, 56px);

    margin: 26px 0 0;
}

.studio-info dt {
    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--warm);
}

.studio-info dd {
    margin: 0;

    font-size: 15px;
    line-height: 1.55;
}

.studio-foot__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 18px;
}

.studio-maps {
    padding-bottom: 4px;

    border-bottom:
        1.5px solid
        var(--pink);

    color: var(--ink);

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;
}


/* ---------- REVEAL & MOTION ---------- */

.studio.is-ready [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.studio [data-reveal].is-visible {
    animation:
        why-rise .8s
        cubic-bezier(.2, .7, .2, 1)
        backwards;

    animation-delay:
        calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .studio::before,
    .studio::after {
        animation: none;
    }

    .studio [data-reveal].is-visible {
        animation: none;
    }

    .studio-tile img {
        transition: none;
    }
}


/* ---------- TABLET / MOBILE / LAYAR SENTUH: KOLASE JADI GESER ---------- */

@media (max-width: 980px), (hover: none) {

    .studio__head {
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
    }

    .studio-collage {
        display: flex;

        gap: 14px;

        margin:
            0
            calc(var(--studio-pad) * -1);

        padding:
            0
            var(--studio-pad)
            4px;

        overflow-x: auto;

        overscroll-behavior-x: contain;

        scroll-snap-type: x mandatory;

        scroll-padding-inline: var(--studio-pad);

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .studio-collage::-webkit-scrollbar {
        display: none;
    }

    .studio-tile,
    .studio-tile:nth-child(even) {
        flex: 0 0 min(72vw, 300px);

        margin-top: 0;

        aspect-ratio: 4 / 5;

        scroll-snap-align: start;
    }

    /* animasi muncul tidak dipakai di dalam carousel */
    .studio .studio-tile[data-reveal] {
        opacity: 1 !important;

        animation: none !important;
    }

    .studio-progress {
        display: flex;
        align-items: center;

        gap: 16px;

        margin-top: 22px;
    }

    .studio-stats {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 36px 0;
    }

    .studio-stat {
        padding: 0 12px;
    }

    .studio-stat + .studio-stat {
        border-left: 0;
    }

    .studio-foot {
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
    }

    .studio-foot__actions {
        align-items: flex-start;
    }

}

@media (max-width: 600px) {

    .studio {
        --studio-pad: 18px;

        padding:
            calc(var(--studio-r) + 56px)
            var(--studio-pad)
            84px;
    }

    .studio::before {
        right: 20px;

        width: 36px;
    }

    .studio::after {
        display: none;
    }

    .studio-foot__actions {
        align-items: stretch;
    }

    .studio-foot .why__button {
        justify-content: space-between;

        min-height: 56px;
    }

    .studio-maps {
        align-self: flex-start;
    }

}


/* =========================================================
   HOW IT WORKS  -  "From wish to ink."
   Latar pasir (seperti Styles), 4 langkah dihubungkan garis
   putus-putus. Di layar kecil menjadi garis tegak.
========================================================= */

.how {
    --how-pad: clamp(20px, 4vw, 76px);
    --how-r: clamp(28px, 4vw, 56px);
    --how-gap: clamp(28px, 3vw, 48px);

    --sp-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");

    position: relative;

    z-index: 2;

    overflow-x: clip;

    /* menimpa sedikit section Studio agar sudut atas membulat rapi */
    margin-top: calc(var(--how-r) * -1);

    background: #ece6dc;

    border-radius:
        var(--how-r)
        var(--how-r)
        0
        0;

    padding:
        calc(var(--how-r) + clamp(72px, 8vw, 120px))
        var(--how-pad)
        clamp(90px, 10vw, 150px);
}

.how::before {
    content: "";

    position: absolute;

    top: calc(var(--how-r) + clamp(40px, 5vw, 80px));
    right: clamp(24px, 9vw, 170px);

    width: clamp(40px, 4.5vw, 72px);
    aspect-ratio: 1;

    background:
        var(--sp-outline)
        center / contain
        no-repeat;

    opacity: .45;

    pointer-events: none;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.how__inner {
    position: relative;

    width: min(100%, 1320px);

    margin: 0 auto;
}


/* ---------- HEAD ---------- */

.how__head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    gap:
        clamp(32px, 6vw, 100px);

    align-items: end;

    margin-bottom:
        clamp(48px, 5.5vw, 84px);
}

.how__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.how__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.how__title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5.6vw, 92px);

    line-height: .96;

    font-weight: 700;

    letter-spacing: -.05em;
}

.how__title span {
    display: block;
}

.how__title span:last-child {
    color: var(--warm);
}

.how__lead {
    margin: 0;

    max-width: 440px;

    font-size:
        clamp(16px, 1.25vw, 19px);

    line-height: 1.65;

    color:
        rgba(17, 17, 17, .72);
}


/* ---------- LANGKAH ---------- */

.how-steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: var(--how-gap);

    margin: 0;
    padding: 0;

    list-style: none;
}

.how-step {
    position: relative;
}

/* garis putus-putus ke langkah berikutnya */
.how-step:not(:last-child)::before {
    content: "";

    position: absolute;

    top: 31px;
    left: 80px;

    width:
        calc(100% + var(--how-gap) - 92px);

    border-top:
        2px dashed
        rgba(17, 17, 17, .28);
}

.how-step__node {
    position: relative;

    z-index: 1;

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border:
        1.5px solid
        var(--ink);

    border-radius: 50%;

    background: var(--paper);
    color: var(--ink);

    font-family:
        Georgia,
        serif;

    font-size: 20px;
    font-weight: 700;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* awal = pink, akhir = hitam */
.how-step:first-child .how-step__node {
    background: var(--pink);

    border-color: var(--pink);

    color: #fff;
}

.how-step:last-child .how-step__node {
    background: var(--ink);

    color: #fff;
}

.how-step:hover .how-step__node {
    transform:
        translateY(-4px)
        rotate(-6deg);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, .12);
}

.how-step h3 {
    margin:
        28px
        0
        10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(22px, 2vw, 30px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.035em;
}

.how-step p {
    margin: 0;

    max-width: 26em;

    font-size: 15px;
    line-height: 1.65;

    color:
        rgba(17, 17, 17, .68);
}


/* ---------- BARIS AJAKAN ---------- */

.how__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 24px;

    margin-top:
        clamp(48px, 5.5vw, 84px);

    padding-top:
        clamp(26px, 3vw, 38px);

    border-top:
        1.5px solid
        var(--ink);
}

.how__cta-text {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.2vw, 50px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;
}


/* ---------- REVEAL & MOTION ---------- */

.how.is-ready [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.how [data-reveal].is-visible {
    animation:
        why-rise .8s
        cubic-bezier(.2, .7, .2, 1)
        backwards;

    animation-delay:
        calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .how::before {
        animation: none;
    }

    .how [data-reveal].is-visible {
        animation: none;
    }

    .how-step__node {
        transition: none;
    }
}


/* ---------- LAYAR KECIL: LANGKAH MENJADI GARIS TEGAK ---------- */

@media (max-width: 1100px) {

    .how__head {
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
    }

    .how-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .how-step {
        padding-left: 88px;

        min-height: 64px;
    }

    .how-step__node {
        position: absolute;

        top: 0;
        left: 0;
    }

    .how-step h3 {
        margin-top: 4px;
    }

    /* garis tegak ke langkah berikutnya */
    .how-step:not(:last-child)::before {
        top: 76px;
        left: 31px;

        width: 0;
        height:
            calc(100% + var(--how-gap) - 88px);

        border-top: 0;

        border-left:
            2px dashed
            rgba(17, 17, 17, .28);
    }

}

@media (max-width: 600px) {

    .how {
        --how-pad: 18px;

        padding:
            calc(var(--how-r) + 56px)
            var(--how-pad)
            84px;
    }

    .how::before {
        right: 20px;

        width: 36px;
    }

    .how-step {
        padding-left: 76px;
    }

    .how-step__node {
        width: 56px;
        height: 56px;

        font-size: 18px;
    }

    .how-step:not(:last-child)::before {
        top: 68px;
        left: 27px;

        height:
            calc(100% + var(--how-gap) - 80px);
    }

    .how__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .how__cta .why__button {
        justify-content: space-between;

        min-height: 56px;
    }

}


/* =========================================================
   GUEST ARTISTS  -  "Guest artists, hand-picked for you."
   Teks di kiri, tiga foto artist bekerja (tanpa wajah/nama) di kanan,
   disusun bergelombang. Di layar kecil menjadi carousel geser.
========================================================= */

.artists {
    --artists-pad: clamp(20px, 4vw, 76px);
    --artists-r: clamp(28px, 4vw, 56px);

    --sp-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5e43' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-filled-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff315a'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");

    position: relative;

    z-index: 3;

    overflow-x: clip;

    /* menimpa sedikit section How agar sudut atas membulat rapi */
    margin-top: calc(var(--artists-r) * -1);

    background: var(--paper);

    border-radius:
        var(--artists-r)
        var(--artists-r)
        0
        0;

    padding:
        calc(var(--artists-r) + clamp(72px, 8vw, 120px))
        var(--artists-pad)
        clamp(90px, 10vw, 150px);
}

.artists::before {
    content: "";

    position: absolute;

    top: calc(var(--artists-r) + clamp(40px, 5vw, 80px));
    right: clamp(24px, 9vw, 170px);

    width: clamp(40px, 4.5vw, 72px);
    aspect-ratio: 1;

    background:
        var(--sp-outline)
        center / contain
        no-repeat;

    opacity: .45;

    pointer-events: none;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.artists__inner {
    position: relative;

    width: min(100%, 1320px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(40px, 6vw, 110px);

    align-items: center;
}

.artists__inner > * {
    min-width: 0;
}


/* ---------- TEKS ---------- */

.artists__head {
    margin-bottom:
        clamp(30px, 3.5vw, 48px);
}

.artists__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.artists__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.artists__title {
    margin: 0 0 24px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(36px, 4.3vw, 70px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;
}

.artists__title span {
    display: block;
}

.artists__title span:last-child {
    color: var(--warm);
}

.artists__lead {
    margin: 0;

    max-width: 500px;

    font-size:
        clamp(16px, 1.25vw, 19px);

    line-height: 1.65;

    color:
        rgba(17, 17, 17, .72);
}

.artists-points {
    margin: 0;
    padding: 0;

    list-style: none;
}

.artists-points li {
    position: relative;

    padding:
        22px
        0
        22px
        34px;

    border-top:
        1px solid
        rgba(17, 17, 17, .16);
}

/* kilau pink kecil sebagai penanda */
.artists-points li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 27px;

    width: 16px;
    aspect-ratio: 1;

    background:
        var(--sp-filled-pink)
        center / contain
        no-repeat;
}

.artists-points h3 {
    margin: 0 0 6px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(20px, 1.7vw, 25px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.03em;
}

.artists-points p {
    margin: 0;

    max-width: 30em;

    font-size: 15px;
    line-height: 1.6;

    color:
        rgba(17, 17, 17, .68);
}

.artists__cta {
    padding-top:
        clamp(26px, 3vw, 36px);

    border-top:
        1px solid
        rgba(17, 17, 17, .16);
}


/* ---------- FOTO (3 kartu bergelombang) ---------- */

.artists-visual {
    position: relative;
}

/* kilau pink di sudut atas */
.artists-visual::before {
    content: "";

    position: absolute;

    top: -18px;
    right: -6px;

    z-index: 2;

    width: clamp(28px, 3vw, 44px);
    aspect-ratio: 1;

    background:
        var(--sp-filled-pink)
        center / contain
        no-repeat;

    pointer-events: none;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.artists-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(12px, 1.4vw, 20px);

    align-items: start;
}

.artist-card {
    position: relative;

    margin: 0;

    aspect-ratio: 5 / 7;

    overflow: hidden;

    border-radius: var(--media-radius);

    background: #ddd9d3;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, .075);

    transform: translateZ(0);
}

/* kartu 1 dan 3 turun, kartu tengah naik -> gelombang */
.artist-card:nth-child(odd) {
    margin-top:
        clamp(36px, 5vw, 76px);
}

.artist-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}

.artist-card:hover img {
    transform: scale(1.06);
}

.artist-card__placeholder {
    position: absolute;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 12px;

    text-align: center;

    background: #ddd9d3;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .1em;

    color: rgba(0, 0, 0, .25);
}

.artist-card__cap {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 12px;

    z-index: 2;

    padding:
        10px
        14px;

    border-radius: 16px;

    background:
        rgba(247, 244, 239, .92);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.artist-card__cap small {
    display: block;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--warm);
}

.artist-card__cap strong {
    display: block;

    margin-top: 3px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(16px, 1.4vw, 20px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.02em;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ---------- INDIKATOR GESER (default disembunyikan) ---------- */

.artists-progress {
    display: none;
}

.artists-progress__track {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    border-radius: 2px;

    background:
        rgba(17, 17, 17, .14);
}

.artists-progress__bar {
    position: absolute;

    top: 0;
    left: 0;

    width: var(--w, 33%);
    height: 100%;

    border-radius: 2px;

    background: var(--pink);

    transition:
        transform .12s linear;
}

.artists-progress__count {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;

    color:
        rgba(17, 17, 17, .5);
}


/* ---------- REVEAL & MOTION ---------- */

.artists.is-ready [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.artists [data-reveal].is-visible {
    animation:
        why-rise .8s
        cubic-bezier(.2, .7, .2, 1)
        backwards;

    animation-delay:
        calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .artists::before,
    .artists-visual::before {
        animation: none;
    }

    .artists [data-reveal].is-visible {
        animation: none;
    }

    .artist-card img {
        transition: none;
    }
}


/* ---------- TABLET / MOBILE / LAYAR SENTUH: CAROUSEL GESER ---------- */

@media (max-width: 980px), (hover: none) {

    .artists__inner {
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
    }

    .artists-visual::before {
        display: none;
    }

    .artists-cards {
        display: flex;

        gap: 14px;

        margin:
            0
            calc(var(--artists-pad) * -1);

        padding:
            0
            var(--artists-pad)
            4px;

        overflow-x: auto;

        overscroll-behavior-x: contain;

        scroll-snap-type: x mandatory;

        scroll-padding-inline: var(--artists-pad);

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .artists-cards::-webkit-scrollbar {
        display: none;
    }

    .artist-card,
    .artist-card:nth-child(odd) {
        flex: 0 0 min(66vw, 280px);

        margin-top: 0;

        scroll-snap-align: start;
    }

    /* animasi muncul tidak dipakai di dalam carousel */
    .artists .artist-card[data-reveal] {
        opacity: 1 !important;

        animation: none !important;
    }

    .artists-progress {
        display: flex;
        align-items: center;

        gap: 16px;

        margin-top: 22px;
    }

}

@media (max-width: 600px) {

    .artists {
        --artists-pad: 18px;

        padding:
            calc(var(--artists-r) + 56px)
            var(--artists-pad)
            84px;
    }

    .artists::before {
        right: 20px;

        width: 36px;
    }

    .artists__cta .why__button {
        width: 100%;

        justify-content: space-between;

        min-height: 56px;
    }

}


/* =========================================================
   REVIEWS  -  "Stories from our guests."
========================================================= */

.reviews {
    --rv-pad: clamp(20px, 4vw, 76px);
    --rv-r: clamp(28px, 4vw, 56px);

    position: relative;

    z-index: 4;

    overflow-x: clip;

    margin-top: calc(var(--rv-r) * -1);

    background: #ece6dc;

    border-radius:
        var(--rv-r)
        var(--rv-r)
        0
        0;

    padding:
        calc(var(--rv-r) + clamp(72px, 8vw, 120px))
        var(--rv-pad)
        clamp(90px, 10vw, 150px);
}

.reviews__inner {
    width: min(100%, 1320px);

    margin: 0 auto;
}

.reviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 24px;

    margin-bottom:
        clamp(40px, 5vw, 70px);
}

.reviews__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.reviews__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.reviews__title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(40px, 5vw, 80px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -.05em;
}

.reviews__title span {
    display: block;
}

.reviews__title span:last-child {
    color: var(--warm);
}

.reviews__rating {
    margin: 0;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.reviews__rating a {
    color: var(--ink);

    text-decoration: none;

    padding-bottom: 4px;

    border-bottom:
        1.5px solid
        var(--pink);
}

.reviews-grid {
    display: grid;

    grid-template-columns:
        repeat(var(--cols, 3), minmax(0, 1fr));

    gap:
        clamp(36px, 4vw, 60px)
        clamp(32px, 4vw, 64px);
}

.review {
    margin: 0;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(17, 17, 17, .22);
}

.review__mark {
    display: block;

    height: .5em;

    font-family:
        Georgia,
        serif;

    font-size: 84px;
    line-height: .9;

    color: var(--pink);
}

.review blockquote {
    margin: 22px 0 26px;
}

.review blockquote p {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(19px, 1.7vw, 24px);

    line-height: 1.45;

    letter-spacing: -.02em;
}

.review figcaption strong {
    display: block;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.review figcaption span {
    display: block;

    margin-top: 5px;

    font-size: 13px;

    color:
        rgba(17, 17, 17, .6);
}


/* =========================================================
   FAQ  -  "Questions, answered."
========================================================= */

.faq {
    --faq-pad: clamp(20px, 4vw, 76px);
    --faq-r: clamp(28px, 4vw, 56px);

    position: relative;

    z-index: 5;

    overflow-x: clip;

    margin-top: calc(var(--faq-r) * -1);

    background: var(--paper);

    border-radius:
        var(--faq-r)
        var(--faq-r)
        0
        0;

    padding:
        calc(var(--faq-r) + clamp(72px, 8vw, 120px))
        var(--faq-pad)
        clamp(90px, 10vw, 150px);
}

.faq__inner {
    width: min(100%, 1320px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(40px, 6vw, 110px);

    align-items: start;
}

.faq__inner > * {
    min-width: 0;
}

.faq__aside {
    position: sticky;

    top: 96px;
}

.faq__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.faq__eyebrow::before {
    content: "";

    width: 34px;
    height: 1.5px;

    background: var(--pink);
}

.faq__title {
    margin: 0 0 24px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(38px, 4.6vw, 74px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -.05em;
}

.faq__title span {
    display: block;
}

.faq__title span:last-child {
    color: var(--warm);
}

.faq__lead {
    margin: 0 0 30px;

    max-width: 360px;

    font-size:
        clamp(16px, 1.25vw, 18px);

    line-height: 1.65;

    color:
        rgba(17, 17, 17, .72);
}

.faq-list details {
    border-top:
        1px solid
        rgba(17, 17, 17, .18);
}

.faq-list details:last-child {
    border-bottom:
        1px solid
        rgba(17, 17, 17, .18);
}

.faq-list summary {
    --plus: var(--ink);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 26px 0;

    cursor: pointer;

    list-style: none;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(20px, 1.9vw, 28px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.03em;

    -webkit-tap-highlight-color: transparent;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary:focus-visible {
    outline:
        2px solid
        var(--warm);

    outline-offset: 4px;
}

.faq-list summary::after {
    content: "";

    flex: none;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(17, 17, 17, .25);

    border-radius: 50%;

    background:
        linear-gradient(var(--plus), var(--plus)) center / 14px 1.5px no-repeat,
        linear-gradient(var(--plus), var(--plus)) center / 1.5px 14px no-repeat;

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

.faq-list summary:hover::after {
    border-color: var(--ink);
}

.faq-list details[open] summary {
    --plus: #fff;
}

.faq-list details[open] summary::after {
    transform: rotate(45deg);

    background-color: var(--pink);

    border-color: var(--pink);
}

.faq-answer {
    padding:
        0
        64px
        28px
        0;

    animation:
        faq-open .35s ease;
}

.faq-answer p {
    margin: 0;

    max-width: 38em;

    font-size: 16px;
    line-height: 1.7;

    color:
        rgba(17, 17, 17, .72);
}

@keyframes faq-open {
    from {
        opacity: 0;

        transform: translateY(-6px);
    }
}


/* =========================================================
   CLOSING CTA  -  "You bring the wish. We ink it well."
========================================================= */

.closing {
    --cl-pad: clamp(20px, 4vw, 76px);
    --cl-r: clamp(28px, 4vw, 56px);

    --sp-outline-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99a78' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");
    --sp-filled-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff315a'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E");

    position: relative;

    z-index: 6;

    overflow: hidden;

    margin-top: calc(var(--cl-r) * -1);

    background: var(--ink);
    color: var(--paper);

    border-radius:
        var(--cl-r)
        var(--cl-r)
        0
        0;

    padding:
        calc(var(--cl-r) + clamp(80px, 10vw, 150px))
        var(--cl-pad)
        clamp(80px, 9vw, 130px);

    text-align: center;
}

.closing::before,
.closing::after {
    content: "";

    position: absolute;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;

    animation: wishink-twinkle 7s ease-in-out infinite;
}

.closing::before {
    top: calc(var(--cl-r) + clamp(50px, 6vw, 100px));
    left: clamp(24px, 10vw, 200px);

    width: clamp(40px, 5vw, 80px);
    aspect-ratio: 1;

    background-image: var(--sp-outline-light);

    opacity: .5;
}

.closing::after {
    bottom: clamp(70px, 9vw, 140px);
    right: clamp(30px, 12vw, 240px);

    width: clamp(18px, 2.2vw, 34px);
    aspect-ratio: 1;

    background-image: var(--sp-filled-pink);

    animation-delay: -3.5s;
}

.closing__inner {
    position: relative;

    max-width: 980px;

    margin: 0 auto;
}

.closing__title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(44px, 7.4vw, 124px);

    line-height: .94;

    font-weight: 700;

    letter-spacing: -.055em;
}

.closing__title span {
    display: block;
}

.closing__title span:last-child {
    color: #c99a78;
}

.closing__lead {
    margin:
        clamp(24px, 3vw, 36px)
        auto
        clamp(30px, 3.4vw, 44px);

    max-width: 480px;

    font-size:
        clamp(16px, 1.3vw, 20px);

    line-height: 1.65;

    color:
        rgba(247, 244, 239, .7);
}

.why__button--lg {
    min-height: 64px;

    padding: 0 34px;

    font-size: 13px;
}

.closing__alt {
    margin: 26px 0 0;

    font-size: 14px;

    color:
        rgba(247, 244, 239, .6);
}

.closing__alt a {
    margin-left: 6px;

    color: var(--paper);

    text-decoration: none;

    padding-bottom: 3px;

    border-bottom:
        1.5px solid
        var(--pink);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;

    z-index: 6;

    background: var(--ink);
    color: var(--paper);

    padding:
        0
        clamp(20px, 4vw, 76px)
        36px;
}

.site-footer__inner {
    width: min(100%, 1320px);

    margin: 0 auto;

    padding-top: 56px;

    border-top:
        1px solid
        rgba(247, 244, 239, .14);
}

.site-footer__top {
    display: grid;

    grid-template-columns:
        1.5fr
        repeat(3, minmax(0, 1fr));

    gap:
        40px
        clamp(28px, 4vw, 64px);
}

.site-footer__logo {
    display: inline-block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: -.04em;

    color: var(--paper);

    text-decoration: none;
}

.site-footer__brand p {
    margin: 12px 0 0;

    max-width: 300px;

    font-size: 14px;
    line-height: 1.6;

    color:
        rgba(247, 244, 239, .6);
}

.site-footer__col h4 {
    margin: 0 0 18px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #c99a78;
}

.site-footer__col ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer__col li {
    margin-bottom: 10px;

    font-size: 14px;
    line-height: 1.6;

    color:
        rgba(247, 244, 239, .72);
}

.site-footer__col a {
    color: var(--paper);

    text-decoration: none;

    transition:
        color .2s ease;
}

.site-footer__col a:hover {
    color: var(--pink);
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 16px;

    margin-top: 56px;
    padding-top: 24px;

    border-top:
        1px solid
        rgba(247, 244, 239, .1);

    font-size: 12px;
}

.site-footer__bottom p {
    margin: 0;

    color:
        rgba(247, 244, 239, .5);
}

.site-footer__bottom a {
    color:
        rgba(247, 244, 239, .72);

    text-decoration: none;

    letter-spacing: .08em;
}

.site-footer__bottom a:hover {
    color: var(--pink);
}


/* =========================================================
   REVEAL & MOTION (Reviews, FAQ, Closing)
========================================================= */

.reviews.is-ready [data-reveal]:not(.is-visible),
.faq.is-ready [data-reveal]:not(.is-visible),
.closing.is-ready [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.reviews [data-reveal].is-visible,
.faq [data-reveal].is-visible,
.closing [data-reveal].is-visible {
    animation:
        why-rise .8s
        cubic-bezier(.2, .7, .2, 1)
        backwards;

    animation-delay:
        calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .closing::before,
    .closing::after {
        animation: none;
    }

    .reviews [data-reveal].is-visible,
    .faq [data-reveal].is-visible,
    .closing [data-reveal].is-visible {
        animation: none;
    }

    .faq-answer {
        animation: none;
    }
}


/* =========================================================
   RESPONSIVE (Reviews, FAQ, Closing, Footer)
========================================================= */

@media (max-width: 980px) {

    .reviews-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq__aside {
        position: static;
    }

    .faq-answer {
        padding-right: 0;
    }

    .site-footer__top {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: span 2;
    }

}

@media (max-width: 600px) {

    .reviews,
    .faq {
        --rv-pad: 18px;
        --faq-pad: 18px;

        padding:
            calc(var(--rv-r, var(--faq-r)) + 56px)
            18px
            84px;
    }

    .faq-list summary {
        padding: 22px 0;

        font-size: 20px;
    }

    .faq-list summary::after {
        width: 36px;
        height: 36px;
    }

    .closing {
        padding:
            calc(var(--cl-r) + 64px)
            18px
            72px;
    }

    .closing::before {
        left: 20px;

        width: 34px;
    }

    .closing::after {
        display: none;
    }

    .closing .why__button {
        width: 100%;

        justify-content: space-between;
    }

    .site-footer {
        padding:
            0
            18px
            28px;
    }

    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__brand {
        grid-column: auto;
    }

}

/* === Shared footer === */


/* Small additions only. The existing layout remains in assets/css/main.css. */


.wishink-footer {
    background: var(--ink, #111);
    color: var(--paper, #f7f4ef);
    padding: 0 clamp(24px, 6vw, 110px) 32px;
    font: 14px/1.65 Arial, Helvetica, sans-serif;
}
.wishink-footer__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid rgba(247, 244, 239, .22);
}
.wishink-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 48px;
}
.wishink-footer__name { font: 700 24px/1.3 Georgia, serif; }
.wishink-footer address { font-style: normal; margin-top: 10px; }
.wishink-footer p { margin: 8px 0; }
.wishink-footer nav { display: flex; flex-wrap: wrap; align-content: start; gap: 12px 24px; }
.wishink-footer a { color: inherit; text-underline-offset: 4px; }
.wishink-footer a:hover { color: #e6b08d; }
.wishink-footer a:focus-visible { outline: 2px solid #ff315a; outline-offset: 5px; }
.wishink-footer__copyright { padding-top: 24px; font-size: 12px; color: #c8c4bf; }
@media (max-width: 640px) {
    .wishink-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .wishink-footer { padding-bottom: 24px; }
    
}


/* === Inner pages: shared layout and Prices === */
/* Scoped to the price page; existing homepage styles stay intact. */
.ww-price{background:var(--paper,#f7f4ef);color:var(--ink,#111);padding:42px 28px 0}
.ww-price__wrap{max-width:1160px;margin:auto}.ww-price__brand{display:inline-block;color:inherit;font:700 28px Georgia,serif;text-decoration:none;max-width:240px}.ww-price__logo{display:block;width:220px;height:auto}
.ww-price__hero{display:grid;grid-template-columns:1.35fr 1fr;gap:76px;align-items:center;padding:90px 0 86px}
.ww-price__eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.6;margin:0 0 22px;color:var(--warm,#8c5e43)}
.ww-price h1,.ww-price h2,.ww-price h3{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.045em}
.ww-price h1{font-size:clamp(43px,4.8vw,70px);line-height:1.04;margin:0 0 28px}.ww-price h1 em{font-style:normal;color:var(--warm,#8c5e43)}
.ww-price h2{font-size:clamp(36px,3.8vw,52px);line-height:1.08;margin:0 0 25px}.ww-price h3{font-size:29px;line-height:1.15;margin:0 0 12px}
.ww-price p{line-height:1.7}.ww-price__intro{font-size:17px;max-width:470px;margin:0 0 30px;color:#514d47}
.ww-price__button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 25px;border:0;border-radius:13px;background:var(--pink,#ff315a);color:#fff;font:700 12px/1.5 Arial,sans-serif;letter-spacing:.09em;text-decoration:none;cursor:pointer;min-height:58px}.ww-price__button:hover{background:#da1e46}.ww-price a:focus-visible,.ww-price button:focus-visible,.ww-price summary:focus-visible{outline:3px solid #8c5e43;outline-offset:5px}
.ww-price__amount{background:#111;color:#f7f4ef;border-radius:90px 90px 24px 24px;padding:60px 38px 35px;text-align:center}.ww-price__amount>p:first-child{font-size:11px;letter-spacing:.16em;margin:0 0 15px}.ww-price__amount>div{font:700 clamp(85px,8vw,126px)/1 Georgia,serif;letter-spacing:-.055em}.ww-price__amount>div>span{font:700 16px Arial,sans-serif;letter-spacing:.04em;vertical-align:middle}.ww-price .ww-price__amount-note{font-size:14px;line-height:1.7;color:#d4cdc4;max-width:285px;margin:24px auto}.ww-price .ww-price__currency{border-top:1px solid #49443f;padding-top:20px;margin-bottom:0;font-size:11px;color:#d4cdc4}
.ww-price__factors,.ww-price__booking,.ww-price__quote{display:grid;grid-template-columns:1fr 1.35fr;gap:85px;padding:76px 0;border-top:1px solid #d3cdc5}.ww-price__rows article{display:flex;gap:28px;border-bottom:1px solid #d3cdc5;padding:27px 0}.ww-price__rows article:first-child{padding-top:0}.ww-price__number{font:italic 22px Georgia,serif;color:#8c5e43}.ww-price__rows p{font-size:15px;color:#514d47;margin:0}
.ww-price__booking ol{list-style:none;counter-reset:booking;padding:0;margin:0}.ww-price__booking li{position:relative;padding:0 0 26px 45px;counter-increment:booking}.ww-price__booking li:before{content:counter(booking);position:absolute;left:0;top:0;border:1px solid #beb3a6;border-radius:50%;width:27px;height:27px;text-align:center;font:15px/27px Georgia,serif}.ww-price__booking li strong{display:block;font-size:17px;margin-bottom:10px}.ww-price__booking li span{display:block;font-size:15px;line-height:1.7;color:#514d47}
.ww-price__quote{scroll-margin-top:90px}.ww-price__quote>div>p:not(.ww-price__eyebrow){color:#514d47;max-width:350px}.ww-price__form{background:#e2e0dc;border:1px solid #ccc6bd;border-radius:24px;padding:30px}.ww-price__fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ww-price__form label{display:block;font-size:12px;font-weight:700;line-height:1.5;margin-bottom:18px}.ww-price__form label span{font-weight:400}.ww-price__form input,.ww-price__form textarea{display:block;width:100%;min-width:0;border:1px solid transparent;border-radius:10px;padding:14px 12px;background:#faf9f7;color:#111;font:16px/1.4 Arial,sans-serif;margin-top:8px}.ww-price__form input:focus,.ww-price__form textarea:focus{outline:2px solid #8c5e43;outline-offset:2px}.ww-price__form textarea{resize:vertical}.ww-price__form .ww-price__button{width:100%}.ww-price .ww-price__small{font-size:12px;line-height:1.65;color:#625c55}
.ww-price__faq{padding:70px 0;border-top:1px solid #d3cdc5;max-width:850px;margin:auto}.ww-price__faq h2{margin-bottom:35px}.ww-price__faq details{border-bottom:1px solid #d3cdc5;padding:21px 0}.ww-price__faq summary{cursor:pointer;font-size:17px;font-weight:700;line-height:1.5;padding-right:16px}.ww-price__faq details p{font-size:15px;color:#514d47;max-width:730px;margin-bottom:5px}.ww-price__visit{margin:0;padding:30px 0 50px;text-align:center;font-size:14px}.ww-price__visit a{color:inherit;text-underline-offset:4px}
@media(max-width:760px){.ww-price{padding:28px 22px 0}.ww-price__logo{width:180px}.ww-price__brand{max-width:190px}.ww-price__hero{grid-template-columns:1fr;gap:38px;padding:65px 0 52px}.ww-price__hero h1{max-width:550px}.ww-price__amount{border-radius:60px 60px 20px 20px;padding:38px 28px 25px;max-width:480px;width:100%;justify-self:center}.ww-price__amount>div{font-size:100px}.ww-price__factors,.ww-price__booking,.ww-price__quote{grid-template-columns:1fr;gap:24px;padding:48px 0}.ww-price__factors h2 br,.ww-price__booking h2 br,.ww-price__quote h2 br{display:none}.ww-price__form{padding:24px 20px}.ww-price__faq{padding:48px 0}.ww-price__visit{text-align:left}.ww-price__quote>div>p:not(.ww-price__eyebrow){max-width:none}}
@media(max-width:430px){.ww-price__fields{grid-template-columns:1fr;gap:0}.ww-price h1{font-size:43px}.ww-price__button{padding:20px;font-size:11px}.ww-price__logo{width:150px}.ww-price__brand{font-size:20px;max-width:165px}.ww-price__rows article{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* === Fine Line and Japanese pages === */
/* Fine Line page additions; shared layout comes from wishink-prices.css. */
.ww-fine .ww-price__hero{grid-template-columns:1.35fr 1fr;gap:70px}.ww-fine h1{font-size:clamp(42px,4.6vw,66px)}
.ww-fine__note{border:1px solid #c9b8a8;border-radius:120px 120px 24px 24px;padding:75px 36px 42px;text-align:center;background:#eee7de}.ww-fine__note .ww-price__eyebrow{max-width:210px;margin:0 auto 28px}.ww-fine .ww-fine__note-title{font:700 39px/1.12 Georgia,serif;letter-spacing:-.04em;margin:0 0 25px}.ww-fine__note>p:not(.ww-fine__note-title):not(.ww-price__eyebrow){font-size:15px;color:#514d47}.ww-fine__note a,.ww-fine__text-link,.ww-fine__faq a{color:inherit;text-underline-offset:5px;line-height:1.6}.ww-fine__note a{display:inline-block;margin-top:16px;font-size:14px}.ww-fine__copy p{margin:0 0 23px;color:#514d47;font-size:16px}.ww-fine__gallery{border-top:1px solid #d3cdc5;padding:65px 0}.ww-fine__portfolio{margin-top:35px}.ww-fine__portfolio img{max-width:100%;height:auto;border-radius:20px}.ww-fine__portfolio .wp-block-gallery{gap:22px}.ww-fine__portfolio figure{margin-left:0;margin-right:0}.ww-fine__portfolio figcaption{font-size:13px;line-height:1.6}.ww-fine__closing{padding:65px 30px 75px;text-align:center;border-top:1px solid #d3cdc5}.ww-fine__closing>p:not(.ww-price__eyebrow){max-width:490px;margin:0 auto 28px;color:#514d47}.ww-fine #fine-plan{scroll-margin-top:90px}
@media(max-width:760px){.ww-fine .ww-price__hero{grid-template-columns:1fr;gap:36px}.ww-fine__note{padding:55px 28px 34px;max-width:480px;justify-self:center}.ww-fine__gallery{padding:45px 0}.ww-fine__closing{padding:48px 0 60px}.ww-fine__closing h2 br{display:none}}

/* On mobile, let the header scroll away instead of covering the gallery. */
@media(max-width:760px){body:has(.ww-fine) .site-header{position:absolute}}

/* Inner-page mobile menus scroll away with the page. */
@media(max-width:760px){body:has(.ww-price) .site-header{position:absolute}}