@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --teal: #006e73;
    --deep: #00575c;
    --bright: #8be9dc;
    --ink: #101a1c;
    --cream: #f2f0e9;
    --muted: #66787a
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    background: var(--cream)
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid #f9b24c;
    outline-offset: 5px
}

.skip {
    position: absolute;
    top: -80px;
    left: 10px;
    z-index: 200;
    background: white;
    padding: 12px
}

.skip:focus {
    top: 10px
}

.header {
    height: 82px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    color: #fff;
    border-bottom: 1px solid #ffffff35
}

.brand {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.09em;
    gap: 3px
}

.brand>span:first-child {
    color: var(--bright);
    font-size: 24px;
    letter-spacing: 0
}

.brand-sub {
    font-size: 9px;
    letter-spacing: .16em;
    font-weight: 700;
    line-height: 1.2;
    max-width: 58px;
    margin-left: 8px
}

.nav {
    display: flex;
    align-items: center;
    gap: 33px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em
}

.nav a:hover {
    color: var(--bright)
}

.nav-cta {
    border: 1px solid #ffffff85;
    padding: 13px 20px
}

.menu-toggle {
    display: none
}

.hero {
    min-height: 780px;
    min-height: 100svh;
    background: radial-gradient(circle at 68% 42%, #118e90 0%, #006d74 42%, #00555d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center
}

.hero:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #003a4033, transparent 70%);
    pointer-events: none
}

.hero-content {
    width: 100%;
    padding: 130px 8% 110px;
    z-index: 2;
    position: relative
}

.eyebrow,
.small-kicker {
    font-size: 11px;
    letter-spacing: .23em;
    font-weight: 800
}

.hero h1 {
    font-size: clamp(75px, 13.8vw, 220px);
    line-height: .83;
    letter-spacing: -.105em;
    margin: 55px 0 50px;
    font-weight: 800;
    white-space: nowrap
}

.hero h1 em,
.experience h2 em,
.statement h2 em,
.event h2 em,
.faq h2 em,
.join h2 em {
    font-style: normal;
    color: var(--bright)
}

.dot {
    color: var(--bright)
}

.hero-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    max-width: 940px
}

.hero-bottom p {
    font-size: clamp(15px, 2vw, 24px);
    line-height: 1.45;
    letter-spacing: .06em;
    font-weight: 700
}

.circle-link {
    width: 62px;
    height: 62px;
    border: 1px solid #ffffffa8;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 25px;
    transition: transform .3s
}

.circle-link:hover {
    transform: translateY(7px)
}

.hero-index {
    position: absolute;
    bottom: 35px;
    right: 5%;
    font-size: 10px;
    letter-spacing: .17em;
    z-index: 3
}

.hero-index span {
    margin-left: 15px
}

.hero-orbit {
    position: absolute;
    right: -3%;
    top: 9%;
    width: min(59vw, 850px);
    aspect-ratio: 1;
    z-index: 1;
    transform: rotate(-15deg)
}

.orbit-line {
    position: absolute;
    inset: 7%;
    border: 1px solid #ffffff36;
    border-radius: 50%
}

.orb {
    position: absolute;
    border-radius: 50%;
    box-shadow: inset -30px -30px 70px #003e4a7a, 20px 25px 90px #002d3050
}

.orb-one {
    width: 62%;
    height: 62%;
    right: 7%;
    top: 10%;
    background: radial-gradient(circle at 35% 30%, #b8fff0, #4bc9c0 40%, #007a81 75%);
    animation: float 9s ease-in-out infinite
}

.orb-two {
    width: 29%;
    height: 29%;
    left: 5%;
    bottom: 8%;
    background: radial-gradient(circle at 30% 25%, #ecfff2, #a3e2cb 45%, #308d8c);
    animation: float 7s ease-in-out infinite reverse
}

.orb-three {
    width: 12%;
    height: 12%;
    right: 3%;
    bottom: 7%;
    background: radial-gradient(circle at 35% 30%, #e9fff8, #62c3bd 60%, #00636a)
}

@keyframes float {
    50% {
        transform: translateY(-20px)
    }
}

.section {
    padding: 110px 8%
}

.section-label {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #83939380;
    padding-top: 17px;
    font-size: 10px;
    letter-spacing: .17em;
    font-weight: 800
}

.section-label.light {
    border-color: #ffffff55;
    color: #b9d2d1
}

.intro {
    background: var(--cream)
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8%;
    padding: 105px 0 60px
}

.small-kicker {
    line-height: 1.9;
    color: var(--teal)
}

.intro h2 {
    font-size: clamp(46px, 6.6vw, 110px);
    line-height: 1.15;
    letter-spacing: -.075em;
    margin: 0 0 45px
}

.intro h2 i {
    font-style: normal;
    color: var(--teal)
}

.intro-copy {
    max-width: 590px;
    font-size: 17px;
    line-height: 2.15;
    color: #46585a
}

.text-link {
    display: inline-flex;
    gap: 40px;
    margin-top: 32px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em
}

.experience {
    background: #101a1c;
    color: #fff;
    overflow: hidden
}

.experience-heading {
    padding: 80px 0 65px
}

.experience-heading p {
    font-size: 11px;
    letter-spacing: .2em;
    color: #98b7b5
}

.experience h2 {
    font-size: clamp(44px, 7vw, 112px);
    letter-spacing: -.08em;
    line-height: .97;
    margin: 28px 0
}

.experience-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.exp-card {
    min-width: 0
}

.card-art {
    height: 340px;
    overflow: hidden;
    position: relative;
    background: #087b7f;
    display: grid;
    place-items: center
}

.exp-two .card-art {
    background: #1d575c
}

.exp-three .card-art {
    background: #b9e5d9
}

.art-ball {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #d3eee5 50%, #65b7ad);
    position: absolute;
    left: 15%;
    top: 20%;
    box-shadow: 18px 25px 35px #002d3644
}

.art-paddle {
    width: 110px;
    height: 175px;
    border-radius: 55px 55px 45px 45px;
    background: #0e393e;
    position: absolute;
    right: 15%;
    bottom: 13%;
    transform: rotate(32deg);
    box-shadow: 10px 10px 20px #002d3655
}

.art-paddle:after {
    content: '';
    position: absolute;
    width: 27px;
    height: 90px;
    background: #e4f4ed;
    bottom: -75px;
    left: 42px;
    border-radius: 10px
}

.music-art>span:first-child {
    font-size: 210px;
    color: #a6f4de;
    transform: rotate(-15deg)
}

.music-ring {
    position: absolute;
    border: 1px solid #b7fff08c;
    border-radius: 50%;
    width: 330px;
    height: 330px
}

.connect-art span {
    font-size: 150px;
    font-weight: 800;
    color: #006e73;
    position: absolute
}

.connect-art span:first-child {
    transform: translate(-45px, -45px)
}

.connect-art span:last-child {
    transform: translate(45px, 55px)
}

.card-info {
    padding: 27px 4px
}

.card-info>span {
    font-size: 10px;
    letter-spacing: .15em;
    color: #a4bfbd
}

.card-info h3 {
    font-size: clamp(35px, 4vw, 64px);
    letter-spacing: -.07em;
    margin: 15px 0
}

.card-info p {
    font-size: 13px;
    line-height: 1.9;
    color: #a9b8b7;
    max-width: 280px
}

.statement {
    background: #006e73;
    color: white;
    text-align: center;
    padding-top: 145px;
    padding-bottom: 145px
}

.statement h2 {
    font-size: clamp(45px, 8.5vw, 145px);
    letter-spacing: -.09em;
    line-height: 1.02;
    margin: 60px 0
}

.statement-line {
    height: 1px;
    background: #ffffff6b;
    max-width: 180px;
    margin: 0 auto 25px
}

.statement>p:last-child {
    font-size: 13px;
    letter-spacing: .08em
}

.event {
    background: var(--cream)
}

.event-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8%;
    padding: 90px 0 10px;
    align-items: center
}

.event h2,
.faq h2 {
    font-size: clamp(50px, 6.7vw, 105px);
    letter-spacing: -.09em;
    line-height: .99;
    margin: 28px 0
}

.event h2 em,
.faq h2 em {
    color: var(--teal)
}

.event-copy {
    font-size: 15px;
    line-height: 2;
    color: #566769;
    max-width: 430px
}

.primary-button,
.join-button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 55px;
    padding: 21px 26px;
    background: var(--ink);
    color: white;
    font-size: 11px;
    letter-spacing: .1em;
    font-weight: 800;
    margin-top: 30px;
    transition: background .2s, transform .2s
}

.primary-button:hover {
    background: var(--teal);
    transform: translateY(-3px)
}

.event-visual {
    height: 490px;
    background: radial-gradient(circle at 30% 30%, #35c6bf, #007b7d 50%, #00585d);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.event-watermark {
    font-size: clamp(180px, 23vw, 370px);
    font-weight: 800;
    letter-spacing: -.14em;
    color: #ffffff25;
    transform: rotate(-16deg)
}

.event-sticker {
    position: absolute;
    right: 10%;
    top: 13%;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: #e8f7e7;
    color: #005b60;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 800;
    transform: rotate(15deg)
}

.event-visual-bottom {
    position: absolute;
    bottom: 25px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 11px;
    letter-spacing: .13em
}

.faq {
    background: #e7eae3
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 10%;
    padding-top: 75px
}

.faq-items {
    padding-top: 10px
}

.faq details {
    border-bottom: 1px solid #8d9d9c;
    padding: 24px 0
}

.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 15px;
    font-weight: 700
}

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

.faq summary span {
    font-size: 22px;
    color: var(--teal)
}

.faq details[open] summary span {
    transform: rotate(45deg)
}

.faq details p {
    font-size: 14px;
    line-height: 1.9;
    color: #526466
}

.join {
    background: var(--teal);
    color: white;
    text-align: center;
    padding-top: 135px;
    padding-bottom: 135px
}

.join h2 {
    font-size: clamp(65px, 12vw, 190px);
    letter-spacing: -.095em;
    line-height: .86;
    margin: 50px 0 35px
}

.join>p:not(.eyebrow) {
    font-size: 15px
}

.join-button {
    background: var(--cream);
    color: var(--teal);
    margin-top: 25px
}

.join-button:hover {
    background: var(--bright)
}

.join .join-note {
    font-size: 11px !important;
    opacity: .8;
    margin-top: 22px
}

.footer {
    background: #101a1c;
    color: white;
    padding: 65px 8% 30px
}

.footer-brand {
    font-size: clamp(40px, 8vw, 130px);
    letter-spacing: -.09em;
    font-weight: 800;
    white-space: nowrap
}

.footer-brand span {
    color: var(--bright)
}

.footer-bottom {
    border-top: 1px solid #ffffff55;
    padding-top: 25px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 10px;
    letter-spacing: .1em
}

.reveal {
    opacity: 1;
    transform: none
}

.js-animate .reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .9s ease, transform .9s ease
}

.js-animate .reveal.visible {
    opacity: 1;
    transform: none
}

@media(max-width:900px) {
    .hero h1 {
        font-size: clamp(65px, 12vw, 130px)
    }

    .experience-track {
        grid-template-columns: 1fr 1fr
    }

    .exp-card:last-child {
        grid-column: 1/-1
    }

    .exp-card:last-child .card-art {
        height: 260px
    }

    .intro-grid {
        grid-template-columns: 1fr 2fr
    }

    .event-visual {
        height: 380px
    }
}

@media(max-width:680px) {
    .header {
        height: 70px;
        padding: 0 6%
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 7px;
        border: 1px solid #ffffff8c;
        background: transparent;
        width: 45px;
        height: 45px;
        align-items: center;
        justify-content: center;
        z-index: 25
    }

    .menu-toggle span {
        height: 2px;
        width: 20px;
        background: white;
        transition: transform .2s
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform: translateY(4.5px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform: translateY(-4.5px) rotate(-45deg)
    }

    .nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: #003f45;
        padding: 30px 6%;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .nav.open {
        display: flex
    }

    .nav a {
        padding: 18px 0;
        border-bottom: 1px solid #ffffff25;
        font-size: 13px
    }

    .nav .nav-cta {
        padding: 18px;
        margin-top: 15px;
        text-align: center;
        border: 1px solid #ffffff90
    }

    .hero {
        min-height: 680px;
        min-height: 90svh
    }

    .hero-content {
        padding: 120px 6% 95px
    }

    .hero h1 {
        font-size: clamp(52px, 13.5vw, 95px);
        margin: 75px 0 60px
    }

    .hero-orbit {
        width: 95vw;
        right: -35%;
        top: 21%;
        opacity: .7
    }

    .hero-bottom p {
        font-size: 14px
    }

    .hero-index {
        bottom: 20px;
        right: 6%;
        font-size: 8px
    }

    .circle-link {
        width: 48px;
        height: 48px
    }

    .section {
        padding: 78px 6%
    }

    .section-label {
        font-size: 8px;
        gap: 20px
    }

    .intro-grid,
    .event-layout,
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 65px
    }

    .intro-grid {
        padding-bottom: 15px
    }

    .intro h2 {
        font-size: clamp(44px, 11vw, 74px)
    }

    .intro-copy {
        font-size: 15px
    }

    .experience-heading {
        padding: 55px 0 35px
    }

    .experience h2 {
        font-size: clamp(39px, 9.5vw, 70px)
    }

    .experience-track {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .exp-card:last-child {
        grid-column: auto
    }

    .card-art,
    .exp-card:last-child .card-art {
        height: 310px
    }

    .card-info {
        padding: 15px 2px
    }

    .card-info h3 {
        font-size: 50px;
        margin: 8px 0
    }

    .statement {
        padding-top: 105px;
        padding-bottom: 105px
    }

    .statement h2 {
        font-size: clamp(42px, 10vw, 70px)
    }

    .event h2,
    .faq h2 {
        font-size: clamp(52px, 12vw, 85px)
    }

    .event-visual {
        height: 360px;
        margin-top: 20px
    }

    .event-watermark {
        font-size: 240px
    }

    .faq-layout {
        gap: 15px
    }

    .join h2 {
        font-size: clamp(60px, 13vw, 95px)
    }

    .footer-brand {
        font-size: clamp(34px, 9vw, 65px)
    }

    .footer-bottom {
        flex-wrap: wrap;
        line-height: 1.8
    }
}

@media(max-width:360px) {
    .hero h1 {
        font-size: 12.8vw
    }

    .brand-sub {
        font-size: 8px
    }

    .hero-bottom {
        gap: 10px
    }

    .footer-brand {
        font-size: 8.4vw
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }

    .js-animate .reveal {
        opacity: 1;
        transform: none
    }
}

/* ===== EVENT DETAILS V2 — desktop & mobile ===== */
.event-new-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,100px);align-items:start;padding-top:clamp(54px,8vw,110px)}
.event-editorial,.event-detail-panel{min-width:0}
.event-overline{font-size:11px;font-weight:800;letter-spacing:.17em;color:var(--teal);display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.event-status{border:1px solid #9ab9b6;border-radius:100px;padding:7px 12px;font-size:9px;color:#325a5b}
.event-editorial h2{font-size:clamp(49px,6.6vw,110px);overflow-wrap:anywhere;line-height:.98;margin:36px 0;letter-spacing:-.085em}
.event-lead{font-size:clamp(20px,2.5vw,32px);font-weight:800;line-height:1.5;margin:0 0 24px}
.event-description{font-size:15px;line-height:2.15;color:#4d6364;max-width:560px}
.event-highlights{display:flex;flex-wrap:wrap;gap:9px;margin:36px 0 25px}
.event-highlights span{border:1px solid #a7bcb7;border-radius:50px;padding:10px 13px;font-size:10px;letter-spacing:.07em;font-weight:800}
.event-flow-link{display:inline-flex;align-items:center;gap:32px;border-bottom:1px solid var(--teal);padding:13px 0;font-size:13px;font-weight:800;color:var(--teal)}
.event-detail-panel{background:#063f43;color:#f5f6f0;padding:clamp(25px,3.5vw,52px);box-shadow:20px 24px 0 #c9e2dc}
.event-panel-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.16em;color:#a9dcd5;font-weight:800}
.event-date-lockup{display:flex;align-items:baseline;gap:14px;margin:34px 0 30px;border-bottom:1px solid #ffffff4d;padding-bottom:30px}
.event-date-lockup span{font-size:12px;font-weight:800;letter-spacing:.13em}
.event-date-lockup strong{font-size:clamp(72px,10vw,140px);line-height:.8;letter-spacing:-.1em;color:#9de7d9}
.event-facts{margin:0}.event-facts>div{padding:18px 0;border-bottom:1px solid #ffffff32;display:grid;grid-template-columns:112px minmax(0,1fr);gap:15px}
.event-facts dt{font-size:10px;letter-spacing:.11em;color:#9fd6cd;font-weight:800;padding-top:5px}
.event-facts dd{margin:0;font-size:14px;line-height:1.9;overflow-wrap:anywhere}
.event-facts dd strong{font-weight:800}.event-caution{font-size:12px;color:#c8dfdb;line-height:1.7;margin:22px 0}
.event-book-button{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#b5f0e4;color:#073b3f;padding:19px 20px;font-size:13px;font-weight:800;transition:background .2s,transform .2s}
.event-book-button:hover{background:#fff;transform:translateY(-2px)}
.event-link-note{font-size:10px;color:#bbd6d1;line-height:1.8;margin:14px 0 0}
.event-flow{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid #8aa5a1;margin-top:100px;padding-top:40px;scroll-margin-top:25px}
.event-flow-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--teal)}
.event-flow h3{font-size:clamp(30px,4vw,62px);line-height:1.1;letter-spacing:-.06em;margin:0 0 18px}.event-flow h3 em{font-style:normal;color:var(--teal)}
.event-flow p{font-size:14px;line-height:2;color:#4d6364}
@media(max-width:900px){.event-new-layout{grid-template-columns:1fr;gap:45px}.event-detail-panel{max-width:680px}.event-editorial h2{font-size:clamp(54px,10vw,90px)}}
@media(max-width:680px){.event-new-layout{padding-top:45px}.event-editorial h2{font-size:clamp(45px,12vw,76px)}.event-detail-panel{box-shadow:9px 11px 0 #c9e2dc;padding:25px 20px}.event-date-lockup strong{font-size:85px}.event-facts>div{grid-template-columns:1fr;gap:4px;padding:15px 0}.event-facts dt{padding:0}.event-flow{grid-template-columns:1fr;gap:12px;margin-top:75px}.event-book-button{min-height:52px}.event-overline{font-size:10px}}
@media(max-width:360px){.event-editorial h2{font-size:12vw}.event-date-lockup{gap:9px}.event-date-lockup strong{font-size:73px}}
/* ==============================
   FLOW SECTION
================================ */

.flow {
  background: #f5f3ed;
  color: #101a1c;
  overflow: hidden;
}

.flow-heading {
  text-align: center;
  margin: 80px auto 70px;
}

.flow-heading h2 {
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -0.06em;
  margin: 20px 0;
}

.flow-heading h2 span {
  color: #007f86;
}

.flow-heading > p:last-child {
  color: #66787a;
  font-size: 14px;
  line-height: 1.9;
}

.flow-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
}

.flow-item {
  text-align: center;
  min-width: 0;
  position: relative;
}

.flow-image {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1;
  margin: 0 auto 25px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #007f86;
  padding: 6px;
  transition: transform 0.5s ease;
}

.flow-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.flow-item:hover .flow-image {
  transform: translateY(-10px);
}

.flow-number {
  display: block;
  color: #007f86;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.flow-item h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.flow-item p {
  font-size: 12px;
  line-height: 1.8;
  color: #66787a;
}

/* Tablet */
@media (max-width: 1000px) {
  .flow-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 45px 20px;
  }
}

/* Smartphone */
@media (max-width: 680px) {
  .flow-heading {
    margin: 55px auto 45px;
  }

  .flow-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 14px;
  }

  .flow-image {
    max-width: 145px;
    margin-bottom: 18px;
  }

  .flow-item h3 {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .flow-item p {
    font-size: 11px;
  }

  .flow-item:last-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }
}

/* Small smartphone */
@media (max-width: 360px) {
  .flow-container {
    grid-template-columns: 1fr;
  }

  .flow-item:last-child {
    grid-column: auto;
    width: 100%;
  }
}
/* FLOWタイトルと説明文の位置を統一 */

.flow-item h3 {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  line-height: 1.4;
}

.flow-item p {
  margin: 0;
}
/* ==============================
   EXPERIENCE PHOTO SYSTEM
================================ */

.card-art {
  position: relative;
  overflow: hidden;
}

/* 写真 */
.experience-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  transition: transform 0.8s ease;
}

/* 写真の上に薄い暗色フィルター */
.card-art:has(.experience-photo:not([style*="display: none"]))::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 30, 32, 0.3),
    transparent 60%
  );
  z-index: 6;
  pointer-events: none;
}

/* PCでマウスを乗せると写真が拡大 */
@media (hover: hover) and (pointer: fine) {
  .exp-card:hover .experience-photo {
    transform: scale(1.08);
  }
}

/* スマートフォン */
@media (max-width: 680px) {
  .experience-photo {
    object-position: center;
  }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .experience-photo {
    transition: none;
  }
}
/* ==================================
   MODERN FAQ
================================== */

.faq-modern {
  background: #f5f3ed;
  color: #101719;
  padding: 120px 24px;
}

.faq-modern-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.faq-modern-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 60px;
}

.faq-kicker {
  color: #007f86;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.faq-modern-header h2 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.05em;
  margin-top: 15px;
}

.faq-modern-header h2 span {
  color: #007f86;
}

.faq-count {
  color: #007f86;
  font-size: 12px;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.faq-item {
  border-top: 1px solid rgba(0, 80, 85, 0.2);
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(0, 80, 85, 0.2);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 27px 8px;
  cursor: pointer;
  list-style: none;
}

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

.faq-num {
  color: #007f86;
  font-size: 12px;
  font-weight: 700;
  min-width: 25px;
}

.faq-question {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.faq-icon {
  font-size: 25px;
  font-weight: 300;
  color: #007f86;
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 55px 28px;
  color: #66787a;
  font-size: 14px;
  line-height: 2;
}

/* PC hover */
@media (hover: hover) {
  .faq-item summary:hover .faq-question {
    color: #007f86;
  }
}

/* Smartphone */
@media (max-width: 680px) {

  .faq-modern {
    padding: 75px 20px;
  }

  .faq-modern-header {
    margin-bottom: 35px;
  }

  .faq-modern-header h2 {
    font-size: 38px;
  }

  .faq-item summary {
    gap: 12px;
    padding: 22px 0;
  }

  .faq-question {
    font-size: 14px;
  }

  .faq-icon {
    font-size: 22px;
  }

  .faq-answer {
    padding: 0 10px 24px 37px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon {
    transition: none;
  }
}
/* ==========================================
   PICKLE GROOVE
   JOIN SECTION — PREMIUM TURQUOISE
   Desktop / Tablet / Mobile
========================================== */

/* SECTION */

.join.section {
  position: relative;

  width: 100%;
  min-height: 650px;

  padding: 120px 8%;

  background: #16777b;
  color: #ffffff;

  display: flex;
  flex-direction: column;

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

  text-align: center;

  overflow: hidden;
  box-sizing: border-box;
}


/* EYEBROW */

.join .eyebrow {
  display: block;

  margin: 0 0 32px;

  color: #c0f4e8;

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

  letter-spacing: 0.22em;
  line-height: 1.6;

  text-align: center;
}


/* MAIN TITLE */

.join h2 {
  width: 100%;
  max-width: 1200px;

  margin: 0 0 35px;

  color: #ffffff;

  font-family: Manrope, sans-serif;

  font-size: clamp(60px, 10vw, 150px);
  font-weight: 800;

  line-height: 0.95;
  letter-spacing: -0.075em;

  text-align: center;
}


/* GROOVE ACCENT */

.join h2 em {
  display: inline-block;

  color: #a4f0df;

  font-style: normal;
  font-weight: 800;
}


/* DESCRIPTION */

.join .join-description {
  width: 100%;
  max-width: 600px;

  margin: 0 0 40px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 16px;
  font-weight: 500;

  line-height: 1.9;
  letter-spacing: 0.04em;

  text-align: center;
}


/* APPLICATION BUTTON */

.join .join-button {
  display: inline-flex;

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

  width: auto;
  min-width: 320px;
  max-width: 100%;

  margin: 0;

  padding: 22px 30px;

  background: #ffffff;
  color: #123b3d;

  border: none;
  border-radius: 3px;

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

  letter-spacing: 0.1em;
  line-height: 1.5;

  text-decoration: none;

  gap: 45px;

  box-sizing: border-box;

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


/* BUTTON ARROW */

.join .join-button span {
  display: inline-block;

  font-size: 22px;
  font-weight: 500;

  line-height: 1;
}


/* BUTTON HOVER */

@media (hover: hover) and (pointer: fine) {

  .join .join-button:hover {
    background: #b5f3e5;

    transform: translateY(-4px);

    box-shadow:
      0 12px 30px rgba(0, 30, 32, 0.15);
  }

}


/* NOTE */

.join .join-note {
  width: 100%;
  max-width: 600px;

  margin: 24px 0 0;

  color: rgba(255, 255, 255, 0.65);

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

  line-height: 1.8;
  letter-spacing: 0.02em;

  text-align: center;
}


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

@media (max-width: 900px) {

  .join.section {
    min-height: 600px;

    padding: 100px 6%;
  }

  .join h2 {
    font-size: clamp(60px, 11vw, 110px);
  }

}


/* ==========================================
   SMARTPHONE
========================================== */

@media (max-width: 680px) {

  .join.section {
    min-height: 550px;

    padding: 90px 6%;
  }

  .join .eyebrow {
    font-size: 10px;

    letter-spacing: 0.16em;

    margin-bottom: 28px;
  }

  .join h2 {
    font-size: clamp(48px, 12.5vw, 80px);

    line-height: 1;

    letter-spacing: -0.065em;

    margin-bottom: 28px;
  }

  .join .join-description {
    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 35px;
  }

  .join .join-button {
    width: 100%;

    min-width: 0;
    max-width: 360px;

    padding: 20px 24px;

    font-size: 11px;

    gap: 15px;
  }

  .join .join-button span {
    font-size: 20px;
  }

  .join .join-note {
    font-size: 10px;

    line-height: 1.7;

    margin-top: 20px;
  }

}


/* ==========================================
   SMALL SMARTPHONE
========================================== */

@media (max-width: 360px) {

  .join.section {
    padding: 80px 20px;
  }

  .join h2 {
    font-size: 12vw;
  }

  .join .join-button {
    font-size: 10px;

    padding: 18px 16px;
  }

}


/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {

  .join .join-button {
    transition: none;
  }

}
/* ==========================================
   FLOW — TABLET TRAPEZOID LAYOUT
   3 ITEMS TOP / 2 ITEMS CENTERED BELOW
========================================== */

/* タブレット・小さめのPC */
@media (min-width: 681px) and (max-width: 1000px) {

  .flow-container {
    display: grid;

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

    column-gap: 12px;
    row-gap: 65px;

    max-width: 900px;
    margin: 0 auto;
  }

  /* 上段：3つ */
  .flow-item:nth-child(1) {
    grid-column: 1 / span 2;
  }

  .flow-item:nth-child(2) {
    grid-column: 3 / span 2;
  }

  .flow-item:nth-child(3) {
    grid-column: 5 / span 2;
  }

  /* 下段：中央に2つ */
  .flow-item:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .flow-item:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .flow-item {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .flow-image {
    width: 100%;
    max-width: 190px;
    margin: 0 auto 22px;
  }

  .flow-item h3 {
    min-height: 48px;
  }
}


/* ==========================================
   SMARTPHONE — CENTERED TRAPEZOID
========================================== */

@media (max-width: 680px) {

  .flow-container {
    display: grid;

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

    column-gap: 8px;
    row-gap: 42px;

    width: 100%;
    max-width: 600px;

    margin: 0 auto;
  }

  /* 上段 */
  .flow-item:nth-child(1) {
    grid-column: 1 / span 2;
  }

  .flow-item:nth-child(2) {
    grid-column: 3 / span 2;
  }

  .flow-item:nth-child(3) {
    grid-column: 5 / span 2;
  }

  /* 下段 */
  .flow-item:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .flow-item:nth-child(5) {
    grid-column: 4 / span 2;
  }

  /* 以前の5番目の中央配置指定を解除 */
  .flow-item:last-child {
    grid-column: 4 / span 2;
    width: 100%;
    justify-self: stretch;
  }

  .flow-item {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  /* 円形画像 */
  .flow-image {
    width: 100%;
    max-width: 145px;

    aspect-ratio: 1;

    margin: 0 auto 16px;
  }

  /* 番号 */
  .flow-number {
    font-size: 11px;
    margin-bottom: 10px;
  }

  /* タイトル */
  .flow-item h3 {
    font-size: clamp(10px, 2.5vw, 13px);

    min-height: 42px;

    line-height: 1.35;
    margin: 0 0 8px;

    overflow-wrap: anywhere;
  }

  /* 説明文 */
  .flow-item p {
    font-size: 10px;
    line-height: 1.6;
  }
}


/* ==========================================
   SMALL SMARTPHONE
========================================== */

@media (max-width: 360px) {

  .flow-container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 5px;
    row-gap: 35px;
  }

  .flow-image {
    max-width: 100px;
  }

  .flow-item h3 {
    font-size: 10px;
  }

  .flow-item p {
    font-size: 9px;
  }

}
/* =====================================
   LANGUAGE SWITCH
===================================== */

.language-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.lang-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);

  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;

  padding: 8px 3px;
  cursor: pointer;

  transition: color 0.25s ease;
}

.lang-btn:hover {
  color: #ffffff;
}

.lang-btn.active {
  color: #8be9dc;
}

.lang-divider {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}

/* PC */
@media (min-width: 681px) {

  .nav {
    gap: clamp(12px, 2vw, 33px);
  }

}

/* SMARTPHONE */
@media (max-width: 680px) {

  .language-switch {
    justify-content: flex-start;
    padding: 18px 0;
    gap: 12px;
  }

  .lang-btn {
    font-size: 14px;
    padding: 10px 8px;
  }

}
/* FIX: photo-free flow placeholders and narrow mobile screens */
.flow-image { background: radial-gradient(circle at 35% 30%, #c8f1e7, #6bbeb7 65%, #0d7379); }
.flow-image img { position: relative; z-index: 1; }
@media (max-width: 680px) {
  .flow-container { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 38px; }
  .flow-item:nth-child(n) { grid-column: auto; width: 100%; justify-self: stretch; }
  .flow-item:last-child { grid-column: 1 / -1; max-width: calc(50% - 9px); justify-self: center; }
  .flow-item h3 { font-size: clamp(11px, 3vw, 14px); }
  .flow-item p { font-size: 11px; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .flow-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-item:last-child { grid-column: 1 / -1; }
}
/* ==============================
   FOOTER INSTAGRAM
============================== */

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;

  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.instagram-link svg {
  width: 24px;
  height: 24px;
}

.instagram-link:hover {
  color: #8be9dc;
  transform: translateY(-3px);
}

/* スマホ表示 */
@media (max-width: 680px) {

  .footer-social {
    margin-top: 25px;
    padding-top: 20px;
  }

  .instagram-link {
    font-size: 12px;
  }

}
/* ==============================
   FOOTER CENTER ALIGNMENT
============================== */

/* フッター全体 */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Instagram */
.footer-social {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PICKLE GROOVE ロゴ */
.footer-brand {
  width: 100%;
  text-align: center;
  margin: 35px auto;
  font-size: clamp(34px, 8vw, 130px);
  letter-spacing: -0.09em;
  white-space: nowrap;
}

/* 下部のコピーライト */
.footer-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

/* スマホ */
@media (max-width: 680px) {

  .footer-brand {
    font-size: clamp(30px, 8vw, 60px);
    margin: 25px auto;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

}
/* Venue detail link inside EVENT DETAILS */
.event-venue-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding: 5px 0;
  color: #b5f0e4;
  font-size: 12px;
  font-weight: 800;
  border-bottom: 1px solid currentColor;
  transition: color .2s ease, gap .2s ease;
}
.event-venue-link:hover { color: #fff; gap: 22px; }
.event-venue-note { display: block; margin-top: 9px; color: #b8d4cf; font-size: 10px; line-height: 1.7; }
.event-venue-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* REGULAR PLAN PRICE CARDS */
.pricing{background:#e9eee9;color:#101a1c}.pricing-heading{display:flex;justify-content:space-between;gap:45px;align-items:end;margin:65px 0 40px}.pricing-heading h2{font-size:clamp(48px,6vw,100px);line-height:1;letter-spacing:-.075em;margin:10px 0}.pricing-heading h2 em{font-style:normal;color:#007f86}.pricing-heading>p{max-width:430px;line-height:1.9;color:#51676a;font-size:15px}.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.pricing-card{background:#fff;border:1px solid #d7e0db;padding:clamp(18px,2vw,30px);display:flex;flex-direction:column;min-width:0}.pricing-card-featured{background:#f2faf5;border-color:#a6d8c9}.pricing-card-top{min-height:220px}.pricing-card-top>span{color:#007f86;font-weight:800;letter-spacing:.16em;font-size:11px}.pricing-card h3{font-size:clamp(24px,2.5vw,39px);letter-spacing:-.065em;margin:16px 0 14px;line-height:1.08}.pricing-card h3 small{display:block;font-size:14px;letter-spacing:0;margin-top:10px;color:#377e7d}.pricing-card-top p{font-size:13px;line-height:1.9;color:#51676a}.price-table-wrap{width:100%;overflow-x:auto}.pricing table{border-collapse:collapse;width:100%;font-size:clamp(11px,1vw,14px);text-align:center}.pricing th,.pricing td{border:1px solid #d9e3df;padding:13px 6px}.pricing thead{background:#d5ece4}.pricing th{font-weight:800}.pricing td{font-weight:800;white-space:nowrap}.pricing-foot{font-size:11px;color:#52686a;line-height:1.9;margin-top:18px}.pricing-bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid #a8c5bf;padding-top:30px;margin-top:50px}.pricing-bottom>div{max-width:780px}.pricing-bottom strong{letter-spacing:.1em;font-size:13px}.pricing-bottom p{font-size:13px;line-height:1.9;color:#51676a}.pricing-bottom .pricing-disclaimer{font-size:11px}.pricing-venue-link{background:#073f43;color:white;padding:18px 22px;display:inline-flex;gap:20px;align-items:center;font-size:12px;font-weight:800;white-space:nowrap;min-height:50px}@media(max-width:1000px){.pricing-grid{grid-template-columns:1fr 1fr}.pricing-card-top{min-height:185px}}@media(max-width:680px){.pricing-heading{display:block;margin:45px 0 30px}.pricing-grid{grid-template-columns:1fr}.pricing-card-top{min-height:0;margin-bottom:20px}.pricing-bottom{display:block}.pricing-venue-link{margin-top:16px;white-space:normal}.pricing th,.pricing td{padding:14px 8px}}

/* BOOKING & ACCESS: responsive, independent from event styles */
.booking{background:#e7eee9}.booking-heading{max-width:820px;margin:64px 0 42px}.booking-heading h2,.access h2{font-size:clamp(46px,7vw,105px);line-height:1;letter-spacing:-.08em;margin:20px 0}.booking-heading em,.access h2 em{font-style:normal;color:var(--teal)}.booking-heading>p:last-child{line-height:1.9;color:#506669}.booking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.booking-card{background:#fff;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;min-width:0;min-height:320px}.booking-card>span{color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.14em}.booking-card h3{font-size:clamp(23px,2.7vw,38px);letter-spacing:-.05em;line-height:1.1;margin:26px 0 12px}.booking-card p{font-size:14px;line-height:1.9;color:#516669}.booking-link,.plan-contact,.access-map-link{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:#063f43;color:#fff;font-size:12px;font-weight:800;line-height:1.6;text-align:left}.booking-card .booking-link{margin-top:auto}.booking-link.is-pending,.plan-contact.is-pending{background:#d7e0dd;color:#536867;cursor:default}.booking-note,.access-caution{font-size:12px;color:#576d6d;line-height:1.8;margin-top:22px}.plan-contact{margin-top:22px;width:100%;text-decoration:none}.access{background:var(--cream)}.access-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:center;margin-top:55px}.access-grid p{line-height:1.9}.access-venue{font-size:22px;font-weight:800}.access-map-link{margin-top:22px}.access-map{min-height:420px;background:#d9e7e2}.access-map iframe{border:0;width:100%;height:420px;display:block}@media(max-width:900px){.booking-grid{grid-template-columns:1fr}.booking-card{min-height:0}.booking-card .booking-link{margin-top:25px}.access-grid{grid-template-columns:1fr}.access-map,.access-map iframe{min-height:320px;height:320px}}@media(max-width:680px){.booking-heading{margin:40px 0 30px}.booking-card{padding:24px}.access-grid{margin-top:35px}}


/* === V3: consistent pricing + aligned venue detail === */
.pricing-grid{align-items:stretch}
.pricing-card,.pricing-card-featured{background:#fff;border:1px solid #d7e0db;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.pricing-card{height:100%}
.pricing-card-top{min-height:220px}
.pricing-card .price-table-wrap{margin-top:0}
.pricing-card .pricing-foot{min-height:58px}
.pricing-card .pricing-cta,.pricing-card .booking-button,.pricing-card [class*="booking"]{margin-top:auto}
@media(hover:hover){.pricing-card:hover{transform:translateY(-7px);box-shadow:0 18px 38px #003b3d17;border-color:#74c8bd;background:#f9fffc}}
.event-facts>div{grid-template-columns:minmax(105px,26%) minmax(0,1fr);align-items:start}
.event-facts dd{min-width:0;overflow-wrap:break-word}
#event-venue{display:block;line-height:1.5}
#event-floor{display:block;margin-top:3px}
.event-venue-link{display:inline-flex;max-width:100%;gap:9px;margin-top:10px;padding:3px 0 6px;font-size:12px;line-height:1.5;white-space:normal;vertical-align:top;text-align:left}
.event-venue-link span{flex-shrink:0}
.event-venue-note{display:block;max-width:34ch;margin-top:8px;font-size:10px;line-height:1.7}
@media(max-width:900px){.pricing-card-top{min-height:200px}}
@media(max-width:680px){.pricing-card-top{min-height:0}.pricing-card .pricing-foot{min-height:0}.event-facts>div{grid-template-columns:1fr;gap:6px}.event-venue-link{font-size:12px}}
/* === V3: additional motion, progressive enhancement === */
.motion-ready .pricing-card,.motion-ready .flow-item,.motion-ready .faq-item,.motion-ready .event-detail-panel,.motion-ready .pricing-heading{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.motion-ready .motion-in{opacity:1;transform:translateY(0)}
.motion-ready .flow-item:nth-child(2),.motion-ready .pricing-card:nth-child(2){transition-delay:.09s}
.motion-ready .flow-item:nth-child(3),.motion-ready .pricing-card:nth-child(3){transition-delay:.18s}
.motion-ready .flow-item:nth-child(4){transition-delay:.27s}
.motion-ready .flow-item:nth-child(5){transition-delay:.36s}
@media(hover:hover){.motion-ready .pricing-card.motion-in:hover{transform:translateY(-7px)}.event-book-button,.join-button,.pricing-venue-link{transition:transform .25s ease,background .25s ease}.event-book-button:hover,.join-button:hover,.pricing-venue-link:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.motion-ready .pricing-card,.motion-ready .flow-item,.motion-ready .faq-item,.motion-ready .event-detail-panel,.motion-ready .pricing-heading{opacity:1!important;transform:none!important;transition:none!important}}

/* V4 — additional cinematic interactions */
@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: pgHeroEnter 1.15s cubic-bezier(.2,.75,.25,1) both; }
  .hero .orb-three { animation: pgFloatSmall 6s ease-in-out infinite alternate; }
  .hero .orbit-line { animation: pgOrbit 34s linear infinite; }
  .event-sticker { animation: pgSticker 7s ease-in-out infinite alternate; }
  .music-ring { animation: pgPulse 5s ease-in-out infinite; }
  .booking-card,.pricing-card,.flow-item,.event-detail-panel { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; }
  .booking-link,.plan-contact,.access-map-link,.pricing-venue-link { transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
  .pg-inview { opacity:0; transform:translateY(32px); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.25,1); transition-delay:var(--pg-delay,0ms); }
  .pg-inview.pg-shown { opacity:1; transform:translateY(0); }
  .pg-progress { position:fixed;top:0;left:0;height:3px;width:100%;z-index:1000;background:#a4f0df;transform:scaleX(0);transform-origin:left;pointer-events:none; }
  @keyframes pgHeroEnter { from {opacity:0;transform:translateY(38px)} to {opacity:1;transform:translateY(0)} }
  @keyframes pgFloatSmall { to {transform:translate(-18px,-28px)} }
  @keyframes pgOrbit {to {transform:rotate(360deg)} }
  @keyframes pgSticker {to {transform:translateY(-14px) rotate(24deg)} }
  @keyframes pgPulse {50% {transform:scale(1.08);opacity:.6} }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .booking-card:hover,.pricing-card:hover {transform:translateY(-9px);box-shadow:0 22px 48px #003e4020;border-color:#6cb9aa;}
 .flow-item:hover {transform:translateY(-6px)}
 .booking-link:not(.is-pending):hover,.plan-contact:not(.is-pending):hover,.access-map-link:hover,.pricing-venue-link:hover {transform:translateY(-3px);background:#08787b;box-shadow:0 12px 24px #003e4030;}
}
@media(prefers-reduced-motion:reduce){.pg-inview{opacity:1!important;transform:none!important}.pg-progress{display:none}}

/* V5: location-first hero and mobile-friendly booking */
.hero-tagline{max-width:650px!important;font-size:clamp(15px,1.65vw,23px)!important;line-height:1.8!important;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;position:relative;z-index:5}
.hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:15px 23px;font-size:12px;font-weight:800;letter-spacing:.06em;transition:transform .2s,background .2s}
.hero-actions a:hover{transform:translateY(-3px)}
.hero-action-primary{background:#e6fff7;color:#063f43}.hero-action-secondary{border:1px solid #d5f8ef;color:#fff}
.pricing-calc-notice{font-size:12px;line-height:1.9;color:#426163;background:#d9e9e3;border-left:4px solid var(--teal);padding:13px 17px;margin-bottom:22px}
.price-total-example{background:#e4f2ec;padding:15px 17px;margin-top:17px;color:#073f43;font-size:13px;line-height:1.8}
.price-total-example strong{font-size:17px;display:block}.price-total-example small{display:block;font-size:11px;color:#4e6663}
.booking-link{min-height:54px;justify-content:center;text-align:center;touch-action:manipulation}.plan-contact{margin-top:auto}
@media(max-width:680px){.hero-actions{flex-direction:column;max-width:350px}.hero-actions a{width:100%}.hero-bottom{align-items:center}.hero-tagline{font-size:14px!important}.pricing-calc-notice{font-size:11px}.booking-link{min-height:56px;font-size:13px}.pricing-card{gap:14px}}

/* 2026-11: stable photo hero and responsive circular flow images */
.hero { background-color:#075b60; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; background-image:linear-gradient(90deg,rgba(0,39,45,.66) 0%,rgba(0,61,67,.35) 53%,rgba(0,54,59,.17) 100%),url("../assets/images/hero-rooftop.jpg"); background-size:cover; background-position:center center; pointer-events:none; }
.hero::after { z-index:0; }
.hero-orbit { opacity:.24; pointer-events:none; }
.hero-content,.hero-index { position:relative; z-index:2; }
.flow-container { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.5vw,24px); align-items:start; }
.flow-item { min-width:0; width:100%; }
.flow-image { box-sizing:border-box; width:min(100%,190px); max-width:190px; aspect-ratio:1/1; height:auto; margin:0 auto 25px; padding:6px; overflow:hidden; border:3px solid #8ce7d5; border-radius:50%; background:#075f63; box-shadow:0 0 0 3px rgba(140,231,213,.18); }
.flow-image img { box-sizing:border-box; display:block; width:100%; height:100%; aspect-ratio:1; object-fit:cover; object-position:center; border-radius:50%; filter:brightness(.88) saturate(.9); }
@media(max-width:900px){.flow-container{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}.flow-item:last-child{grid-column:auto;max-width:none}}
@media(max-width:640px){.hero::before{background-position:62% center}.hero-orbit{opacity:.12}.flow-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.flow-item:nth-child(n){grid-column:auto;width:100%;max-width:none;justify-self:stretch}.flow-item:last-child{grid-column:1 / -1;width:calc(50% - 8px);max-width:none;justify-self:center}.flow-image{width:min(100%,175px)} }
.event.is-upcoming .event-highlights,.event.is-upcoming .event-flow-link,.event.is-upcoming #event-flow,.event.is-upcoming #event-apply,.event.is-upcoming .event-link-note,.event.is-upcoming #event-caution{display:none!important}
.event:not(.is-upcoming) .upcoming-big,.event:not(.is-upcoming) .upcoming-small,.event:not(.is-upcoming) .upcoming-panel-copy{display:none}

/* FLOW spacing refinement: compact vertical whitespace, larger photos, balanced grid */
@media (min-width: 901px) {
  .flow.section { padding-top: 54px; padding-bottom: 64px; padding-left: clamp(24px,4vw,72px); padding-right: clamp(24px,4vw,72px); }
  .flow-heading { margin: 28px auto 36px; }
  .flow-heading h2 { margin: 8px 0 12px; }
  .flow-container { max-width: 1480px; gap: clamp(12px,1.8vw,30px); }
  .flow-image { width: min(100%, 215px); max-width: 215px; margin-bottom: 16px; }
  .flow-number { margin-bottom: 8px; }
  .flow-item h3 { margin-bottom: 8px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .flow.section { padding-top: 52px; padding-bottom: 60px; }
  .flow-heading { margin: 30px auto 38px; }
  .flow-container { row-gap: 32px; }
  .flow-image { margin-bottom: 14px; }
}
@media (max-width: 640px) {
  .flow.section { padding-top: 40px; padding-bottom: 46px; }
  .flow-heading { margin: 24px auto 30px; }
  .flow-heading h2 { margin: 10px 0; }
  .flow-container { row-gap: 25px; }
  .flow-image { margin-bottom: 12px; }
  .flow-number { margin-bottom: 7px; }
  .flow-item h3 { margin-bottom: 7px; }
}

/* FLOW: guaranteed circular crop, no square image or inset padding */
.flow .flow-image {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 215px);
  max-width: 215px;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  border: 4px solid #8ce7d5;
  border-radius: 50% !important;
  overflow: hidden !important;
  clip-path: circle(50% at 50% 50%);
  background: #075f63;
}
.flow .flow-image > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  clip-path: circle(50% at 50% 50%);
}
@media (max-width: 640px) {
  .flow .flow-image { width: min(100%, 175px); }
}

/* PHASE 4 — Cancellation and weather policy */
.policy{background:#f3f6f1}.policy-heading{max-width:850px;margin:65px 0 42px}.policy-heading h2{font-size:clamp(44px,6vw,90px);line-height:1.02;letter-spacing:-.075em;margin:15px 0}.policy-heading h2 em{font-style:normal;color:var(--teal)}.policy-heading>p:last-child{color:#526769;line-height:1.9}.policy-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.policy-panel{padding:clamp(24px,3vw,42px);background:#fff;border:1px solid #d7e5df;min-width:0}.policy-panel h3{font-size:clamp(21px,2.4vw,32px);margin:0 0 25px;letter-spacing:-.04em}.policy-panel p{color:#53696b;line-height:1.95;font-size:14px}.policy-table{border-collapse:collapse;width:100%;font-size:13px;margin-bottom:24px}.policy-table th,.policy-table td{text-align:left;padding:15px 12px;border-bottom:1px solid #dce8e3}.policy-table th{background:#e1f1eb;font-size:12px}.policy-table td:last-child{font-weight:800;color:#075d60}.policy-weather{background:#083f43;color:white}.policy-weather p{color:#d0e6e1}.policy-weather .policy-highlight{color:#b2f4e2;font-weight:800;font-size:17px;border-top:1px solid #ffffff40;padding-top:22px;margin-top:25px}@media(max-width:800px){.policy-grid{grid-template-columns:1fr}.policy-heading{margin:40px 0 30px}}@media(max-width:500px){.policy-panel{padding:22px 17px}.policy-table{font-size:12px}.policy-table th,.policy-table td{padding:12px 7px}}

/* Official LINE contact: scoped styles, existing design preserved */
.line-contact-card{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,80px);padding:clamp(30px,6vw,84px);background:linear-gradient(125deg,#063f43,#006e73 72%,#064c50);border-radius:22px;color:#fff;overflow:hidden}
.line-contact-copy{max-width:760px}.line-contact-copy h2{font-size:clamp(42px,6vw,88px);line-height:1.05;margin:14px 0 24px;color:#fff}.line-contact-copy h2 em{color:#8be9dc}.line-contact-copy p{line-height:1.9}.line-contact-note{font-size:.9rem;opacity:.85}
.line-contact-button,.policy-line-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;text-decoration:none;font-weight:800;transition:transform .2s,filter .2s}.line-contact-button{background:#8be9dc;color:#053e41;padding:16px 27px;margin-top:18px}.line-contact-button:hover,.policy-line-link:hover{transform:translateY(-2px);filter:brightness(1.06)}.policy-line-link{margin-top:18px;padding:13px 20px;background:#006e73;color:#fff}
.line-contact-badge{flex:0 0 220px;width:220px;min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(255,255,255,.07)}.line-contact-badge span{font-weight:900;font-size:1.4rem;color:#8be9dc}.line-contact-badge strong{font-size:1.55rem;line-height:1.15;letter-spacing:.07em;margin:12px 0}.line-contact-badge small{font-size:.6rem;letter-spacing:.12em}.footer-line-link{color:inherit;text-decoration:none;font-weight:700;margin-right:20px}.footer-line-link:hover{text-decoration:underline}
@media(max-width:720px){.line-contact-card{flex-direction:column;align-items:flex-start}.line-contact-badge{flex-basis:auto;min-height:150px;width:150px;align-self:center}.line-contact-badge strong{font-size:1.1rem}.line-contact-button{width:100%}.footer-line-link{display:inline-block;margin-bottom:12px}}

/* LINE icon in footer */
.footer-line-link{display:inline-flex;align-items:center;gap:10px;vertical-align:middle}
.line-brand-icon{display:inline-flex;width:35px;height:35px;flex:0 0 35px}
.line-brand-icon svg{display:block;width:100%;height:100%}
.footer-line-label{font-size:inherit}
.footer-external-arrow{font-size:.8em;opacity:.85}
@media(max-width:720px){.footer-line-link{display:inline-flex}}
/* ==========================================
   PICKLE GROOVE BOOKING BUTTON STATES
========================================== */

/* 初期状態・認証前・仮押さえ済み */
#create-hold-btn,
#create-hold-btn:disabled {
  background: #a9bab8;
  color: #ffffff;
  opacity: 1;
  cursor: not-allowed;
  border: none;
  transition:
    background 0.25s ease,
    transform 0.2s ease;
}

/* 認証成功 ＋ 予約可能 */
#create-hold-btn.hold-ready,
#create-hold-btn.hold-ready:not(:disabled) {
  background: #006e73;
  color: #ffffff;
  opacity: 1;
  cursor: pointer;
}

/* ホバー時 */
#create-hold-btn.hold-ready:hover {
  background: #00575c;
  transform: translateY(-2px);
}

/* 押した瞬間 */
#create-hold-btn.hold-ready:active {
  transform: translateY(0);
}