/* ==========================================================
   KOUSA — Teaser Site
   ========================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;               /* clip instead of hidden — doesn't create scroll container */
    scroll-snap-type: y mandatory;  /* slide-snap on html (the actual scroll container) */
}

body {
    overflow-x: clip;
    background: #fafaf7;
    font-family: "Montserrat", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    color: #111;
    -webkit-font-smoothing: antialiased;
    line-height: 1.85;
    font-weight: 500;                   /* bolder base body (was default 400) */
}

/* Each top-level section is a snap point.
   Long sections (Team, Manifesto) still snap from top but allow
   internal scroll to read the rest before snapping to the next section. */
.stage,
.section-tagline,
.section-statement,
.section-pillar,
.section-journal,
.section-team,
.section-osaka,
.section-coming,
.section-strategy,
.section-manifesto,
.section-note,
.section-contact {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/* ----------------------------------------------------------
   Journal preview section — editorial magazine layout
   No rounded corners, no card boxes, image + text stacked.
   ---------------------------------------------------------- */
.section-journal {
    min-height: 100vh;
    background: #111;                    /* dark editorial — bold contrast against the cream rhythm */
    color: #F5F1E8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 7vw;
}

.jp-inner {
    width: 100%;
    max-width: 1240px;
    text-align: center;
}

.jp-head {
    text-align: left;
    margin-bottom: 3.5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 2rem;
    border-bottom: 1px solid rgba(245, 241, 232, 0.2);
    padding-bottom: 2rem;
}

.jp-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #F5F1E8;
    line-height: 1;
    text-transform: none;
}

/* Small tagline sitting next to the big JOURNAL wordmark */
.jp-eyebrow-sub {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(245, 241, 232, 0.55);
    align-self: end;
    padding-bottom: 0.4rem;
}

/* Issue number on the right */
.jp-eyebrow-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(245, 241, 232, 0.55);
    align-self: end;
    padding-bottom: 0.5rem;
}

/* Legacy title/lede (kept but hidden — head bar carries the identity now) */
.jp-title,
.jp-lede {
    display: none;
}

/* Category tabs — Sumu Lab-style editorial nav */
.jp-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.4rem;
    margin: -1rem 0 2.8rem;
    text-align: left;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    overflow-x: auto;
    scrollbar-width: none;
}

.jp-tabs::-webkit-scrollbar {
    display: none;
}

.jp-tab {
    color: rgba(245, 241, 232, 0.55);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.3rem 0;
    transition: color 0.25s ease;
    border-bottom: 1px solid transparent;
}

.jp-tab:hover {
    color: #F5F1E8;
}

.jp-tab.is-active {
    color: #F5F1E8;
    font-weight: 700;
    border-bottom-color: #F8C907;
}

.jp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem 2rem;
    margin-bottom: 3.5rem;
    text-align: left;
}

.jp-card {
    display: block;
    background: transparent;
    color: inherit;
    text-decoration: none;
    position: relative;
}

.jp-card-visual {
    position: relative;
    aspect-ratio: 4 / 5;                 /* portrait — more editorial */
    overflow: hidden;
    margin: 0 0 1.2rem;
    background: #222;
}

.jp-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
    filter: grayscale(0.15) contrast(1.05);
}

.jp-card:hover .jp-card-visual img {
    transform: scale(1.06);
    filter: grayscale(0) contrast(1);
}

/* Removed: badge, colored category pills — replaced by cleaner text meta */
.jp-card-badge {
    display: none;
}

.jp-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.jp-meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(245, 241, 232, 0.5);
    text-transform: uppercase;
    flex-wrap: wrap;
}

/* Category becomes a clean text label with a colored dot, not a pill */
.jp-cat {
    padding: 0;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.85);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.jp-cat::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    background: currentColor;
}

.jp-cat--yellow::before  { color: #F8C907; }
.jp-cat--cyan::before    { color: #B8E4F5; }
.jp-cat--magenta::before { color: #F7C6DA; }

.jp-card-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.65;
    color: #F5F1E8;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
    /* Editorial: cap to 4 lines, ellipsis if longer */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jp-card:hover .jp-card-title {
    color: #F8C907;
}

/* Sumu Lab-style tag (finer secondary label under the title) */
.jp-tag {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(245, 241, 232, 0.45);
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(245, 241, 232, 0.12);
}

/* CTA — squared, minimal, with animated arrow */
.jp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 2.2rem;
    background: transparent;
    color: #F5F1E8;
    border: 1px solid rgba(245, 241, 232, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border-radius: 0;                    /* squared */
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    align-self: center;
    margin: 0 auto;
}

.jp-cta:hover {
    background: #F5F1E8;
    color: #111;
    border-color: #F5F1E8;
}

.jp-cta-arrow {
    font-size: 0.95rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.jp-cta:hover .jp-cta-arrow {
    transform: translate(4px, -4px);
}

@media (max-width: 900px) {
    .jp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.4rem;
    }
    .jp-head {
        grid-template-columns: auto 1fr;
    }
    .jp-eyebrow-num {
        display: none;
    }
}

@media (max-width: 700px) {
    .section-journal {
        padding: 5rem 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .jp-head {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        align-items: start;
    }
    .jp-eyebrow-sub {
        padding-bottom: 0;
    }
    .jp-tabs {
        gap: 1.4rem;
        margin: 0 0 2rem;
        font-size: 0.72rem;
    }
    .jp-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2.5rem;
    }
    .jp-card-visual {
        aspect-ratio: 3 / 2;             /* landscape on phone for single-column stacking */
    }
    .jp-cta {
        padding: 0.95rem 1.7rem;
        font-size: 0.66rem;
    }
}

/* ----------------------------------------------------------
   Stage — fullscreen container
   ---------------------------------------------------------- */
.stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;  /* initial white base — bg photos fade in later */
}

/* ----------------------------------------------------------
   Background — rapid city slideshow ("パラパラ", 0.2s per frame, 50 frames)
   Cycle length: 50 × 0.2s = 10s
   ---------------------------------------------------------- */
.bg {
    position: absolute;
    inset: -15%;               /* extra room for stronger parallax movement */
    z-index: 1;
    background: #ffffff;  /* white backdrop — matches initial stage */
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
    opacity: 0;
    /* Animation starts only when the stage is scrolled into view (JS adds .is-in) */
}

.stage.is-in .bg {
    animation: bgIntroFade 1.1s ease-out 1.6s forwards;
}

@keyframes bgIntroFade {
    to { opacity: 1; }
}

.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #ffffff;  /* white fallback while image loads */
    opacity: 0;
    animation: bgFlip 5.6s steps(1, end) infinite;
}

/* Each slide visible for 1/50 = 2% of the cycle */
.bg-slide:nth-child(1) { animation-delay: 0.00s; }
.bg-slide:nth-child(2) { animation-delay: 0.40s; }
.bg-slide:nth-child(3) { animation-delay: 0.80s; }
.bg-slide:nth-child(4) { animation-delay: 1.20s; }
.bg-slide:nth-child(5) { animation-delay: 1.60s; }
.bg-slide:nth-child(6) { animation-delay: 2.00s; }
.bg-slide:nth-child(7) { animation-delay: 2.40s; }
.bg-slide:nth-child(8) { animation-delay: 2.80s; }
.bg-slide:nth-child(9) { animation-delay: 3.20s; }
.bg-slide:nth-child(10) { animation-delay: 3.60s; }
.bg-slide:nth-child(11) { animation-delay: 4.00s; }
.bg-slide:nth-child(12) { animation-delay: 4.40s; }
.bg-slide:nth-child(13) { animation-delay: 4.80s; }
.bg-slide:nth-child(14) { animation-delay: 5.20s; }

@keyframes bgFlip {
    0%, 7.9%  { opacity: 1; }
    8%, 100%  { opacity: 0; }
}

/* ----------------------------------------------------------
   Centered K mark
   ---------------------------------------------------------- */
.mark {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.mark-stack {
    position: relative;
    width: clamp(120px, 16vw, 220px);
    aspect-ratio: 583 / 666;  /* matches the K mark layer PNGs */
}

.mark-stack .mark-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 3 lines pop in one by one — instant appearance, 0.2s rhythm between */
.mark-stack .mark-line {
    clip-path: inset(0 0 100% 0);              /* fully hidden by default */
    animation-duration: 0.01s;
    animation-timing-function: step-end;
    animation-fill-mode: forwards;
}

/* K lines pop in only when the stage is scrolled into view */
.stage.is-in .mark-stack .mark-line-1 { animation-name: markPop; animation-delay: 0.3s; }
.stage.is-in .mark-stack .mark-line-2 { animation-name: markPop; animation-delay: 0.8s; }
.stage.is-in .mark-stack .mark-line-3 { animation-name: markPop; animation-delay: 1.3s; }

@keyframes markPop {
    to { clip-path: inset(0 0 0 0); }
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 2.4rem;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 0.62rem;
    letter-spacing: 0.4em;
    color: #fff;
    mix-blend-mode: difference;
    opacity: 0;
    animation: hintFade 1.2s ease-out 1.2s forwards,
               hintFloat 2.4s ease-in-out 2.4s infinite;
    pointer-events: none;
}

@keyframes hintFade {
    to { opacity: 0.85; }
}
@keyframes hintFloat {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

/* ----------------------------------------------------------
   Tagline section — Lounge photo + "KOUSAで、ホテルが面白くなる。"
   3 progressive PNG overlays fade in one by one
   ---------------------------------------------------------- */
.section-tagline {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #0a0a0a;
}

.tagline-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.tagline-bg img {
    object-position: center center;
}

.tagline-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Soft dark veil so the white text banners pop */
.tagline-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.32) 50%,
        rgba(0, 0, 0, 0.20) 100%
    );
    pointer-events: none;
}

.tagline-copy-stack {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* All 3 overlays stack in the same position — the later ones
   contain the earlier text plus more, so they cascade "adding" text */
.tagline-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    max-height: 58vh;
    max-width: 42vw;
    height: auto;
    width: auto;
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

/* Sequential reveal — triggered by IntersectionObserver (.is-in class) */
.section-tagline.is-in .tagline-copy-1 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.3s;
}
.section-tagline.is-in .tagline-copy-2 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 1.2s;
}
.section-tagline.is-in .tagline-copy-3 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 2.1s;
}

@media (max-width: 700px) {
    .tagline-copy {
        max-height: 55vh;
        max-width: 65vw;
    }
}

/* ----------------------------------------------------------
   Statement — Concept statement on a clean white page
   Follows the Tagline (photo + animated overlays)
   ---------------------------------------------------------- */
.section-statement {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 8vw;
}

.statement-inner {
    width: 100%;
    max-width: 780px;
    text-align: left;
}

.statement-inner p {
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    line-height: 2.3;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 0.03em;
}

@media (max-width: 700px) {
    .section-statement {
        padding: 6rem 8vw;
    }
    .statement-inner p {
        font-size: 0.9rem;
        line-height: 2.1;
    }
}

/* ----------------------------------------------------------
   Pillar pages — 3 themes, split-column layout with photo
   Odd = photo on left / Even = photo on right (alternating)
   ---------------------------------------------------------- */
.section-pillar {
    position: relative;
    min-height: 100vh;
    background: #FAFAF7;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    overflow: hidden;
}

/* Per-pillar accent color via CSS variable */
#pillar-01 { --pillar-accent: #F8C907; background: #ffffff; }
#pillar-02 { --pillar-accent: #DC3380; background: #ffffff; }
#pillar-03 { --pillar-accent: #2DB7E5; background: #ffffff; }

/* Photo takes full height of its column */
.pillar-photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.pillar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2);   /* extra room so parallax shift never reveals empty edges */
}

/* Alternate: 01/03 photo on LEFT, 02 photo on RIGHT */
#pillar-01 .pillar-photo { order: 1; }
#pillar-01 .pillar-inner { order: 2; }
#pillar-02 .pillar-photo { order: 2; }
#pillar-02 .pillar-inner { order: 1; }
#pillar-03 .pillar-photo { order: 1; }
#pillar-03 .pillar-inner { order: 2; }

.pillar-inner {
    position: relative;
    z-index: 2;
    padding: 6rem 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    max-width: 620px;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

/* When inner is on right (odd pillars), pull the content leftward */
#pillar-01 .pillar-inner,
#pillar-03 .pillar-inner {
    justify-self: start;
    padding-left: 5vw;
}

#pillar-02 .pillar-inner {
    justify-self: end;
    padding-right: 5vw;
}

.pillar-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.7em;
}

.pillar-eyebrow .pillar-num {
    color: var(--pillar-accent, #111);
    font-weight: 700;
}

.pillar-eyebrow .pillar-eyebrow-sep {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 400;
}

.pillar-title {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05em;
    color: #111;
    margin-bottom: 1.4rem;
}

.pillar-tagline {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.75;
    color: #111;
    margin-bottom: 2.4rem;
    letter-spacing: 0.02em;
}

.pillar-body {
    font-size: clamp(0.82rem, 1.05vw, 0.92rem);
    line-height: 2.1;
    color: #3A3A3A;
    max-width: 30em;
}

/* Mobile: stack photo above text */
@media (max-width: 800px) {
    .section-pillar {
        grid-template-columns: 1fr;
        grid-template-rows: 40vh auto;
    }
    .pillar-photo,
    #pillar-01 .pillar-photo,
    #pillar-02 .pillar-photo,
    #pillar-03 .pillar-photo { order: 1; }
    .pillar-inner,
    #pillar-01 .pillar-inner,
    #pillar-02 .pillar-inner,
    #pillar-03 .pillar-inner {
        order: 2;
        padding: 3rem 6vw;
        justify-self: start;
        max-width: 100%;
    }
}

/* ----------------------------------------------------------
   Concept section — Statement
   ---------------------------------------------------------- */
.section-concept {
    min-height: 100vh;
    background: #fafaf7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 8vw;
}

.concept-inner {
    max-width: 880px;
    width: 100%;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.concept-headline {
    font-size: clamp(1.7rem, 3.8vw, 2.6rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin-bottom: 3.5rem;
    color: #111;
}

.concept-statement p {
    font-size: clamp(0.85rem, 1.15vw, 1rem);
    line-height: 2.15;
    color: #2A2A2A;
    margin-bottom: 1.4rem;
    max-width: 38em;
}

.concept-statement p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
   Osaka section — First property (text + carousel)
   ---------------------------------------------------------- */
.section-osaka {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 7vw;
}

.osaka-inner {
    width: 100%;
    max-width: 1240px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 5rem;
    align-items: center;
}

.osaka-text {
    display: flex;
    flex-direction: column;
}

.osaka-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.4rem;
}

.osaka-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.05em;
    margin-bottom: 1.1rem;
    color: #111;
}

.osaka-open {
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 2.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.osaka-desc {
    font-size: clamp(0.82rem, 1.1vw, 0.96rem);
    line-height: 2.1;
    color: #2A2A2A;
    margin-bottom: 2.4rem;
    max-width: 32em;
}

.osaka-meta {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.osaka-meta-row {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #2A2A2A;
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
}

.osaka-meta-label {
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #888;
    min-width: 5.5em;
}

/* Carousel */
.osaka-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.osaka-track {
    position: absolute;
    inset: 0;
}

.osaka-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity 1.1s ease-in-out,
        transform 5s ease-out;
    pointer-events: none;
}

.osaka-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Dots */
.osaka-dots {
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.7rem;
    z-index: 5;
}

.osaka-dot {
    width: 28px;
    height: 2px;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.osaka-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}

.osaka-dot.is-active {
    background: rgba(255, 255, 255, 1);
    transform: scaleY(1.6);
}

@media (max-width: 900px) {
    .osaka-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* ----------------------------------------------------------
   Manifesto — HOTEL INNOVATION COMPANY (KASOKU summary page)
   ---------------------------------------------------------- */
.section-manifesto {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(0, 0, 0, 0.15), transparent 55%),
        #DC3545;                            /* KASOKU brand red */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 7vw;
    overflow: hidden;
}

.manifesto-inner {
    width: 100%;
    max-width: 1180px;
}

.manifesto-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2.2rem;
}

/* Hero row — title on left, KASOKU logo on right */
.manifesto-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: flex-start;
    margin-bottom: 3.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.manifesto-hero-text {
    max-width: 700px;
}

.manifesto-title {
    font-family: 'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: #fff;
    margin-bottom: 1.2rem;
}

.manifesto-sub {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
}

.manifesto-hero-logo {
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: clamp(80px, 12vw, 140px);
    flex-shrink: 0;
}

.manifesto-hero-logo img {
    width: 100%;
    height: auto;
    display: block;
    /* Invert-ish for dark bg — KASOKU logo has white bg by default */
    background: transparent;
}

/* Body paragraphs */
.manifesto-body {
    max-width: 42em;
    margin-bottom: 3rem;
}

.manifesto-body p {
    font-size: clamp(0.85rem, 1.1vw, 0.96rem);
    line-height: 2.15;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.4rem;
}

.manifesto-body p:last-child {
    margin-bottom: 0;
}

/* Small statement note */
.manifesto-note {
    max-width: 42em;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    padding: 1.4rem 1.6rem;
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 4rem;
    letter-spacing: 0.02em;
}

/* 3 Foundations */
.manifesto-traits-label {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.4rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.manifesto-traits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.trait {
    padding: 1.8rem 1.4rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}

.trait:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.32);
}

.trait-num {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.5);
}

/* Per-trait accent color for the number */
.trait:nth-child(1) .trait-num { color: #F8C907; }
.trait:nth-child(2) .trait-num { color: #2DB7E5; }
.trait:nth-child(3) .trait-num { color: #DC3380; }

.trait-en {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0;
}

.trait-ja {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.06em;
    line-height: 1.7;
}

.trait-desc {
    font-size: 0.75rem;
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* KASOKU company info — placed at the bottom of Manifesto section */
.manifesto-company {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.manifesto-company-label {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    margin-bottom: 1.8rem;
}

.manifesto-company-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 3rem;
    max-width: 900px;
}

.mci-row {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 1rem;
    align-items: baseline;
    font-size: 0.72rem;
    line-height: 1.75;
}

.mci-row dt {
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.14em;
    font-size: 0.62rem;
    text-transform: uppercase;
    padding-top: 0.15em;
}

.mci-row dd {
    color: #fff;
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.mci-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.86em;
    margin-left: 0.4em;
    letter-spacing: 0;
}

.mci-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.25s ease;
}

.mci-link:hover {
    opacity: 0.7;
}

/* Google Maps embed for KASOKU location */
.manifesto-company-map {
    margin-top: 2rem;
    max-width: 900px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    /* Slight filter so map blends with dark red section */
    filter: grayscale(0.2) contrast(1.02);
}

.manifesto-company-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: none;
    background: #eee;
}

@media (max-width: 700px) {
    .manifesto-company-map iframe {
        height: 240px;
    }
}

/* KASOKU logo in manifesto hero — wrap in a white background so
   the white-bg logo file stays readable on the red section */
.manifesto-hero-logo {
    background: #fff;
    padding: 0.9rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 800px) {
    .manifesto-hero {
        grid-template-columns: 1fr;
    }
    .manifesto-hero-logo {
        order: -1;
        width: 80px;
        margin-bottom: 1rem;
    }
    .manifesto-traits {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .manifesto-company-info {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
    .mci-row {
        grid-template-columns: 6em 1fr;
    }
}

/* ----------------------------------------------------------
   Producer's Note — Closing editorial reflection
   ---------------------------------------------------------- */
.section-note {
    min-height: 100vh;
    background: #FAF6EE;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 7vw;
}

.note-inner {
    width: 100%;
    max-width: 740px;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.note-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.8rem;
}

.note-headline {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: #111;
    margin-bottom: 3rem;
}

.note-body p {
    font-size: clamp(0.85rem, 1.1vw, 0.96rem);
    line-height: 2.2;
    color: #2A2A2A;
    margin-bottom: 1.6rem;
}

.note-body p:last-child {
    margin-bottom: 0;
}

.note-sign {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.note-sign-rule {
    width: 36px;
    height: 1px;
    background: rgba(0, 0, 0, 0.3);
}

.note-sign-text {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    line-height: 1.85;
    color: #666;
}

/* ----------------------------------------------------------
   Contact — Inquiry form (dark closing section)
   ---------------------------------------------------------- */
.section-contact {
    min-height: 100vh;
    background: #0a0a0a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 7vw 4rem;
}

.contact-inner {
    width: 100%;
    max-width: 720px;
}

.contact-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.6rem;
}

.contact-headline {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin-bottom: 1.4rem;
    color: #fff;
}

.contact-lede {
    font-size: clamp(0.85rem, 1.05vw, 0.94rem);
    line-height: 2.1;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 3.5rem;
    max-width: 38em;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.form-field input,
.form-field select,
.form-field textarea {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 400;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.5rem 0;
    outline: none;
    transition: border-color 0.25s ease;
    border-radius: 0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-bottom-color: #fff;
}

.form-field textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.7;
}

.form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
    background-position: calc(100% - 14px) 16px, calc(100% - 8px) 16px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 1.4rem;
}

.form-field select option {
    color: #111;
    background: #fff;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin-top: 1rem;
}

.form-submit {
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #111;
    background: #fff;
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
    border-radius: 999px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.form-submit:hover {
    background: #F8C907;
    transform: translateY(-2px);
}

.form-direct {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.form-direct a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.form-direct a:hover {
    color: #F8C907;
}

.form-thanks {
    font-size: 0.82rem;
    color: #F8C907;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.form-thanks.is-shown {
    opacity: 1;
}

.contact-footer {
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .form-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-footer {
        flex-direction: column;
    }
}

/* ----------------------------------------------------------
   Strategy section — Development model & 4-stakeholder grid
   ---------------------------------------------------------- */
.section-strategy {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 7vw;
}

.strategy-inner {
    width: 100%;
    max-width: 1180px;
}

.strategy-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.6rem;
}

.strategy-headline {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: #111;
    margin-bottom: 2.4rem;
}

.strategy-body {
    margin-bottom: 4rem;
}

.strategy-p {
    font-size: clamp(0.85rem, 1.1vw, 0.96rem);
    line-height: 2.15;
    color: #2A2A2A;
    margin-bottom: 1.4rem;
    max-width: 42em;
}

.strategy-p:last-child {
    margin-bottom: 0;
}

.strategy-grid-label {
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.4rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);

    /* Block reveal coordinated with strategy-grid */
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 2.1s;
}

.reveal-sequence.is-revealed .strategy-grid-label {
    opacity: 1;
    transform: translateY(0);
}

/* Network diagram — 4 nodes in diamond layout, connected by 6 lines */
.strategy-network {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 8 / 6;
    margin: 0 auto 3rem;
}

.net-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.net-line {
    stroke: #111;
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.55;
    stroke-linecap: round;
    transition:
        stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.6s ease;
}

.reveal-sequence.is-revealed .net-line {
    stroke-dashoffset: 0;
}

/* Lines emerge as their endpoint cards appear (cards stagger by ~0.25s) */
.reveal-sequence.is-revealed .net-line-1 { transition-delay: 2.5s; }  /* top → right (after card 2) */
.reveal-sequence.is-revealed .net-line-5 { transition-delay: 2.75s; } /* top ↕ bottom (after card 3) */
.reveal-sequence.is-revealed .net-line-2 { transition-delay: 2.75s; } /* right → bottom (after card 3) */
.reveal-sequence.is-revealed .net-line-3 { transition-delay: 3.0s; }  /* bottom → left (after card 4) */
.reveal-sequence.is-revealed .net-line-4 { transition-delay: 3.0s; }  /* left → top (after card 4) */
.reveal-sequence.is-revealed .net-line-6 { transition-delay: 3.0s; }  /* left ↔ right (after card 4) */

/* Center K mark sitting on top of the crossing lines */
.net-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 3;
    width: 88px;
    height: 88px;
    background: #ffffff;
    border-radius: 50%;
    padding: 18px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 3.4s;
}

.net-center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.reveal-sequence.is-revealed .net-center {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Node positioning — diamond corners */
.net-node {
    position: absolute;
    width: 32%;
    max-width: 260px;
    z-index: 2;
}

.net-node-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.net-node-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.net-node-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.net-node-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.strategy-card {
    padding: 1.6rem 1.4rem 1.4rem;
    background: #FAFAF7;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #111;

    /* Each card fades up — staggered "one by one" */
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Per-stakeholder background colors */
.strategy-card.strategy-card--asset    { background: #1A1A1A; color: #fff; }
.strategy-card.strategy-card--ops      { background: #F8C907; color: #1A1A1A; }
.strategy-card.strategy-card--produce  { background: #2DB7E5; color: #1A1A1A; }
.strategy-card.strategy-card--local    { background: #DC3380; color: #fff; }

/* Inherit color for inner text so the per-card color rules above apply */
.strategy-card .strategy-card-title,
.strategy-card .strategy-card-desc {
    color: inherit;
}

.strategy-card.strategy-card--asset .strategy-card-by,
.strategy-card.strategy-card--local .strategy-card-by {
    color: rgba(255, 255, 255, 0.65);
}
.strategy-card.strategy-card--ops .strategy-card-by,
.strategy-card.strategy-card--produce .strategy-card-by {
    color: rgba(0, 0, 0, 0.55);
}

.strategy-card.strategy-card--asset .strategy-card-desc,
.strategy-card.strategy-card--local .strategy-card-desc {
    color: rgba(255, 255, 255, 0.82);
}
.strategy-card.strategy-card--ops .strategy-card-desc,
.strategy-card.strategy-card--produce .strategy-card-desc {
    color: rgba(0, 0, 0, 0.7);
}

.reveal-sequence.is-revealed .strategy-card {
    opacity: 1;
    transform: translateY(0);
}

/* Card stagger — 01 → 02 → 03 → 04 every 0.25s */
.reveal-sequence.is-revealed .net-node-top    .strategy-card { transition-delay: 2.3s; }
.reveal-sequence.is-revealed .net-node-right  .strategy-card { transition-delay: 2.55s; }
.reveal-sequence.is-revealed .net-node-bottom .strategy-card { transition-delay: 2.8s; }
.reveal-sequence.is-revealed .net-node-left   .strategy-card { transition-delay: 3.05s; }

/* Color-coded border per stakeholder type */
.strategy-card--asset    { border-color: #111111; }
.strategy-card--ops      { border-color: #F8C907; }
.strategy-card--produce  { border-color: #2DB7E5; }
.strategy-card--local    { border-color: #DC3380; }

.strategy-card-num {
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    color: #888;
    margin-bottom: 0.5rem;
}

.strategy-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: #111;
}

.strategy-card-by {
    font-size: 0.72rem;
    color: #666;
    margin-left: 0.2rem;
}

.strategy-card-desc {
    font-size: 0.78rem;
    line-height: 1.85;
    color: #4A4A4A;
}

.strategy-closing {
    font-size: clamp(0.85rem, 1.1vw, 0.96rem);
    line-height: 1.95;
    color: #111;
    text-align: center;
    margin-top: 2rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(0,0,0,0.08);

    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 3.8s;
}

.reveal-sequence.is-revealed .strategy-closing {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 800px) {
    /* Stack the 4 nodes vertically as a clean list on mobile */
    .strategy-network {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        max-width: 420px;
        margin: 0 auto;
    }
    /* Hide the SVG lines and center K on mobile — pure list layout */
    .net-svg,
    .net-center {
        display: none !important;
    }
    /* Reset positioning for ALL node classes (overrides absolute positioning) */
    .net-node,
    .net-node-top,
    .net-node-right,
    .net-node-bottom,
    .net-node-left {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
    }
    /* Thin connecting line between successive cards */
    .net-node + .net-node::before {
        content: '';
        display: block;
        width: 1px;
        height: 0.9rem;
        margin: -0.9rem auto 0;
        background: rgba(0, 0, 0, 0.25);
    }
}

/* ----------------------------------------------------------
   Coming section — Planned properties (auto-scroll marquee)
   ---------------------------------------------------------- */
.section-coming {
    position: relative;
    min-height: 100vh;
    background: #FFF6E8;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8rem 0;
    overflow: hidden;
}

/* Soft, drifting brand-color blobs — playful "many KOUSA emerging" feel */
.coming-blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.coming-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.78;
    will-change: transform;
}

.coming-blob-y1 {
    width: 56vw; height: 56vw;
    max-width: 720px; max-height: 720px;
    top: -14%; left: -10%;
    background: #F8C907;
    animation: comingDrift1 14s ease-in-out infinite;
}

.coming-blob-c {
    width: 60vw; height: 60vw;
    max-width: 780px; max-height: 780px;
    top: -18%; right: -12%;
    background: #2DB7E5;
    animation: comingDrift2 16s ease-in-out infinite;
}

.coming-blob-m {
    width: 58vw; height: 58vw;
    max-width: 740px; max-height: 740px;
    bottom: -12%; right: -8%;
    background: #DC3380;
    animation: comingDrift3 13s ease-in-out infinite;
}

.coming-blob-y2 {
    width: 50vw; height: 50vw;
    max-width: 620px; max-height: 620px;
    bottom: -16%; left: -6%;
    background: #F8C907;
    opacity: 0.55;
    animation: comingDrift4 18s ease-in-out infinite;
}

/* Wandering paths — each blob makes a 4-step loop around the section,
   with scale + translate varying so colors really shift across the canvas */
@keyframes comingDrift1 {
    0%   { transform: translate(0,   0)    scale(1); }
    25%  { transform: translate(40%, 25%)  scale(1.2); }
    50%  { transform: translate(70%, -15%) scale(0.9); }
    75%  { transform: translate(25%, 40%)  scale(1.15); }
    100% { transform: translate(0,   0)    scale(1); }
}
@keyframes comingDrift2 {
    0%   { transform: translate(0,    0)    scale(1); }
    25%  { transform: translate(-35%, 30%)  scale(1.18); }
    50%  { transform: translate(-60%, 10%)  scale(0.95); }
    75%  { transform: translate(-20%, 50%)  scale(1.1); }
    100% { transform: translate(0,    0)    scale(1); }
}
@keyframes comingDrift3 {
    0%   { transform: translate(0,    0)    scale(1); }
    25%  { transform: translate(-40%, -30%) scale(1.15); }
    50%  { transform: translate(-15%, -55%) scale(1.05); }
    75%  { transform: translate(-50%, -10%) scale(0.92); }
    100% { transform: translate(0,    0)    scale(1); }
}
@keyframes comingDrift4 {
    0%   { transform: translate(0,   0)    scale(1); }
    25%  { transform: translate(30%, -35%) scale(1.12); }
    50%  { transform: translate(55%, -10%) scale(0.95); }
    75%  { transform: translate(15%, -45%) scale(1.18); }
    100% { transform: translate(0,   0)    scale(1); }
}

.coming-header {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 0 7vw;
    margin-bottom: 5rem;
}

.coming-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 1.6rem;
}

.coming-title {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: #111;
    margin-bottom: 1.6rem;
}

.coming-sub {
    font-size: clamp(0.82rem, 1.05vw, 0.94rem);
    line-height: 2.05;
    color: rgba(0, 0, 0, 0.7);
    max-width: 40em;
}

.coming-marquee {
    position: relative;
    z-index: 1;
}

/* Marquee — JS-driven auto-scroll over a natively scrollable track.
   User can drag/swipe; auto-scroll pauses for a moment, then resumes. */
.coming-marquee {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
    /* Soft fade-out at both edges so cards enter and leave gracefully */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
    -webkit-overflow-scrolling: touch;
}

.coming-marquee::-webkit-scrollbar {
    display: none;
}

.coming-marquee.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.coming-track {
    display: flex;
    width: max-content;
    gap: 1.6rem;
    padding: 1rem 7vw;  /* outer breathing room so first/last cards align */
}

.coming-card {
    flex: 0 0 auto;
    width: 280px;
    height: 380px;
    padding: 1.8rem;
    color: #fff;
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    user-select: none;
    -webkit-user-drag: none;
}

/* Dark gradient overlay for legibility */
.coming-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 45%,
        rgba(0, 0, 0, 0.75) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.coming-card > * {
    position: relative;
    z-index: 2;
}

.coming-card:hover {
    transform: translateY(-6px);
}

.coming-card-num {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.85);
}

.coming-card-body {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.coming-card-name {
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: #fff;
}

.coming-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.coming-card-loc {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.78rem;
}

.coming-card-open {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* Concept cards — hint at future category combinations
   (Aquarium × HOTEL, Club × HOTEL, Local × HOTEL etc.) */
.coming-card-concept {
    filter: grayscale(0.4) brightness(0.7);
}

.coming-card-concept::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.coming-card-concept .coming-card-name {
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
}

.coming-card-concept .coming-card-loc {
    color: rgba(248, 201, 7, 0.95);            /* yellow tag hint */
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 800;
}

.coming-card-concept .coming-card-open {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.08em;
}

@media (max-width: 700px) {
    .coming-card {
        width: 220px;
        height: 320px;
        padding: 1.4rem;
        border-radius: 12px;
    }
    .coming-header { margin-bottom: 3rem; }
    .coming-track { padding: 1rem 5vw; }
}

/* ----------------------------------------------------------
   Team section — KASOKU × ADDReC × Local Creators
   ---------------------------------------------------------- */
.section-team {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 7vw;
}

.team-inner {
    width: 100%;
    max-width: 1180px;
}

.team-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.6rem;
}

.team-headline {
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.02em;
    margin-bottom: 1.8rem;
    color: #111;
}

.team-intro {
    font-size: clamp(0.85rem, 1.1vw, 0.96rem);
    line-height: 2.15;
    color: #2A2A2A;
    max-width: 42em;
    margin-bottom: 4.5rem;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem 5rem;
}

.team-card {
    display: flex;
    flex-direction: column;
}

/* Logo + link fade in around the time their card's text starts/ends cascading.
   Names + bios use .reveal-chars and naturally sequence via the JS cumulative offset. */
.team-logo,
.team-link {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-sequence.is-revealed .team-logo,
.reveal-sequence.is-revealed .team-link {
    opacity: 1;
    transform: translateY(0);
}

/* Card 1 (KASOKU) — logo appears just before its text starts (~4.2s),
   link after its bio finishes (~8.4s). Card 2 (ADDReC) shifts ~3.8s later. */
.team-card:nth-child(1) .team-logo { transition-delay: 1.5s; }
.team-card:nth-child(1) .team-link { transition-delay: 3.2s; }
.team-card:nth-child(2) .team-logo { transition-delay: 3.0s; }
.team-card:nth-child(2) .team-link { transition-delay: 4.6s; }

.team-logo {
    margin: 0 0 1.6rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.team-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* Per-logo sizing — KASOKU is square, ADDReC is wide */
.team-card:nth-child(1) .team-logo img { max-width: 120px;  }
.team-card:nth-child(2) .team-logo img { max-width: 220px;  }

.team-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1.2rem;
    color: #111;
    line-height: 1.4;
}

.team-role {
    font-size: 0.75rem;
    color: #888;
    letter-spacing: 0.08em;
    margin-left: 0.2rem;
}

.team-bio {
    font-size: 0.78rem;
    line-height: 2.05;
    color: #2A2A2A;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.team-link {
    align-self: flex-start;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    color: #111;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid #111;
    transition: opacity 0.25s ease, transform 0.3s ease;
}

/* KASOKU company info block — appears inside the Team KASOKU card */
.team-company-info {
    margin: 1.4rem 0 1.6rem;
    padding: 1.2rem 0 1.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.7rem;
    line-height: 1.75;
}

.tci-row {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 1rem;
    align-items: baseline;
}

.tci-row dt {
    color: #888;
    letter-spacing: 0.14em;
    font-size: 0.62rem;
    text-transform: uppercase;
    padding-top: 0.15em;
}

.tci-row dd {
    color: #222;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.tci-sub {
    color: #999;
    font-size: 0.86em;
    margin-left: 0.4em;
    letter-spacing: 0;
}

@media (max-width: 500px) {
    .tci-row {
        grid-template-columns: 5.5em 1fr;
        gap: 0.7rem;
    }
    .tci-row dt {
        font-size: 0.56rem;
    }
    .tci-row dd {
        font-size: 0.68rem;
    }
}

.team-link:hover {
    opacity: 0.55;
    transform: translateX(3px);
}

@media (max-width: 800px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .team-card:nth-child(1) .team-logo img { max-width: 90px; }
    .team-card:nth-child(2) .team-logo img { max-width: 180px; }
}

/* ----------------------------------------------------------
   Life section — Long-stay apartment hotel (photo background)
   ---------------------------------------------------------- */
.section-life {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 8vw;
    overflow: hidden;
    color: #fff;
}

.life-bg {
    position: absolute;
    inset: 0;
    background-image: url('assets/life-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1.06) translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.life-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}

.life-inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
    width: 100%;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}

.life-headline {
    font-size: clamp(1.7rem, 3.8vw, 2.6rem);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin-bottom: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.life-statement p {
    font-size: clamp(0.85rem, 1.15vw, 1rem);
    line-height: 2.15;
    color: rgba(255, 255, 255, 0.92);
    max-width: 38em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------------------
   Character-by-character reveal
   each .char floats up from below + fades in, staggered L→R
   ---------------------------------------------------------- */
.reveal-chars .char {
    display: inline-block;
    opacity: 0;
    /* Randomized "scattered" start position — set per char via inline style */
    transform:
        translate(var(--char-x, 0px), var(--char-y, 22px))
        rotate(var(--char-r, 0deg))
        scale(var(--char-s, 1));
    transition:
        opacity 0.75s cubic-bezier(0.2, 0.85, 0.25, 1),
        transform 0.75s cubic-bezier(0.2, 0.85, 0.25, 1);
    will-change: opacity, transform;
}

.reveal-chars .char.is-in {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
}

/* Spaces still need width */
.reveal-chars .char.space {
    width: 0.3em;
}

/* ----------------------------------------------------------
   Right rail — vertical logo + menu icon (visible after hero)
   ---------------------------------------------------------- */
.right-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 96px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2.4rem 0;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.right-rail.is-shown {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Rail logo — crossfade between vertical KOUSA and K mark */
.rail-logo {
    position: relative;
    display: block;
    width: 48px;
    aspect-ratio: 167 / 644;   /* matches logo_tate.png proportions */
    transition: opacity 0.3s ease;
}

.rail-logo:hover {
    opacity: 0.55;
}

.rail-logo img {
    position: absolute;
    left: 50%;
    transition: opacity 0.45s ease;
    display: block;
}

.rail-logo .rail-logo-tate {
    top: 0;
    width: 100%;
    height: auto;
    transform: translateX(-50%);
    opacity: 1;
}

.rail-logo .rail-logo-k {
    top: 0;
    width: 110%;                /* K appears slightly fuller than tate's width */
    height: auto;
    transform: translateX(-50%);
    opacity: 0;
}

.right-rail.menu-open .rail-logo-tate {
    opacity: 0;
}

.right-rail.menu-open .rail-logo-k {
    opacity: 1;
}

.rail-menu-toggle {
    position: relative;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.rail-menu-toggle span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #111;
    transition: transform 0.35s cubic-bezier(0.7, 0, 0.3, 1),
                opacity 0.2s ease;
}

.rail-menu-toggle span:nth-child(1) { top: 4px;   }
.rail-menu-toggle span:nth-child(2) { top: 50%;   transform: translateY(-50%); }
.rail-menu-toggle span:nth-child(3) { bottom: 4px;}

.side-menu.is-open ~ .right-rail .rail-menu-toggle span:nth-child(1),
.right-rail.menu-open .rail-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.right-rail.menu-open .rail-menu-toggle span:nth-child(2) {
    opacity: 0;
}
.right-rail.menu-open .rail-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Invisible hover trigger — strip on the right edge */
.right-hover-zone {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90px;
    z-index: 48;
    pointer-events: none;
}

.right-rail.is-shown ~ .right-hover-zone {
    pointer-events: auto;
}

/* ----------------------------------------------------------
   Side menu — slides in from the right on hover
   ---------------------------------------------------------- */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    z-index: 49;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.side-menu.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.side-menu-inner {
    padding: 5rem 2.6rem 3rem 2.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.side-menu-link {
    color: #111;
    text-decoration: none;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.side-menu-link:hover {
    opacity: 0.55;
    transform: translateX(-4px);
}

/* JOURNAL — external-ish link, distinct style */
.side-menu-link--journal {
    margin-top: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: #111;
    color: #FFF;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
}

.side-menu-link--journal:hover {
    background: #F8C907;
    color: #111;
    transform: translateX(-2px);
    opacity: 1;
}

.side-menu-arrow {
    font-size: 0.7rem;
    display: inline-block;
    transition: transform 0.25s ease;
}

.side-menu-link--journal:hover .side-menu-arrow {
    transform: translate(2px, -2px);
}

.side-menu-meta {
    margin-top: auto;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    line-height: 1.9;
    color: #666;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.side-menu-meta small {
    font-size: 0.62rem;
    opacity: 0.75;
}

@media (max-width: 700px) {
    .right-rail { width: 56px; padding: 1.4rem 0; }
    .rail-logo  { width: 28px; }
    .side-menu  { width: 82vw; }
}

/* ============================================================
   MOBILE OPTIMIZATION — Comprehensive polish (< 700px)
   ============================================================ */
@media (max-width: 700px) {

    /* --- Global: prevent iOS text input auto-zoom, allow tap targets --- */
    input, select, textarea { font-size: 16px !important; }

    /* Content padding so text never sits under the right rail (56px) */
    .section-statement,
    .section-team,
    .section-osaka,
    .section-coming,
    .section-strategy,
    .section-manifesto,
    .section-note,
    .section-contact {
        padding-right: max(6vw, 4.5rem);
    }

    /* ---------------------------------------------------------
       Hero — K mark + slideshow
       --------------------------------------------------------- */
    .hero-mark-stack {
        width: clamp(96px, 22vw, 160px);   /* slightly larger on mobile */
    }
    .scroll-hint {
        font-size: 0.5rem;
        bottom: 1.4rem;
        letter-spacing: 0.32em;
    }

    /* ---------------------------------------------------------
       Tagline — animated overlays over lounge
       --------------------------------------------------------- */
    .tagline-copy {
        max-height: 50vh;
        max-width: 74vw;
    }

    /* ---------------------------------------------------------
       Statement — clean white statement page
       --------------------------------------------------------- */
    .section-statement {
        padding: 5rem 8vw 5rem 8vw;
        padding-right: max(8vw, 4.5rem);
    }
    .statement-inner p {
        font-size: 0.88rem;
        line-height: 2.15;
    }

    /* ---------------------------------------------------------
       Pillar pages — split-column becomes stacked
       --------------------------------------------------------- */
    .section-pillar {
        grid-template-rows: 38vh auto;
    }
    .pillar-inner,
    #pillar-01 .pillar-inner,
    #pillar-02 .pillar-inner,
    #pillar-03 .pillar-inner {
        padding: 2.5rem 6vw 3.5rem;
        padding-right: max(6vw, 4.5rem);
    }
    .pillar-title {
        font-size: 1.35rem;
    }
    .pillar-tagline {
        font-size: 1.05rem;
        margin-bottom: 1.6rem;
    }
    .pillar-body {
        font-size: 0.82rem;
        line-height: 2;
    }

    /* ---------------------------------------------------------
       Team — KASOKU + ADDReC (already stacks; refine text)
       --------------------------------------------------------- */
    .section-team {
        padding: 5rem 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .team-headline {
        font-size: 1.25rem;
    }
    .team-intro {
        font-size: 0.85rem;
        line-height: 2;
        margin-bottom: 3rem;
    }
    .team-name {
        font-size: 0.86rem;
    }
    .team-bio {
        font-size: 0.76rem;
        line-height: 2;
    }
    .team-logo {
        height: 46px;
        margin-bottom: 1.2rem;
    }

    /* ---------------------------------------------------------
       Osaka — carousel section
       --------------------------------------------------------- */
    .section-osaka {
        padding: 5rem 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .osaka-title {
        font-size: 1.9rem;
    }
    .osaka-carousel {
        aspect-ratio: 4 / 3;    /* less tall on mobile */
    }
    .osaka-desc {
        font-size: 0.85rem;
        line-height: 2;
    }
    .osaka-meta-row {
        font-size: 0.7rem;
    }

    /* ---------------------------------------------------------
       Coming — marquee cards
       --------------------------------------------------------- */
    .coming-header {
        padding: 0 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .coming-title {
        font-size: 1.3rem;
    }
    .coming-sub {
        font-size: 0.8rem;
        line-height: 1.95;
    }

    /* ---------------------------------------------------------
       Strategy — network stacks vertically (already handled)
       --------------------------------------------------------- */
    .section-strategy {
        padding: 5rem 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .strategy-headline {
        font-size: 1.3rem;
    }
    .strategy-p {
        font-size: 0.82rem;
        line-height: 2;
    }

    /* ---------------------------------------------------------
       Manifesto — HOTEL ACCELERATOR COMPANY
       --------------------------------------------------------- */
    .section-manifesto {
        padding: 5rem 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .manifesto-title {
        font-size: 2rem;
        line-height: 1.1;
    }
    .manifesto-sub {
        font-size: 1rem;
        line-height: 1.7;
    }
    .manifesto-body p {
        font-size: 0.82rem;
        line-height: 2;
    }
    .manifesto-note {
        font-size: 0.78rem;
        padding: 1.1rem 1.2rem;
        margin-bottom: 3rem;
    }
    .trait {
        padding: 1.4rem 1.2rem;
    }
    .trait-en {
        font-size: 1rem;
    }
    .trait-ja {
        font-size: 0.72rem;
    }
    .trait-desc {
        font-size: 0.72rem;
        line-height: 1.9;
    }
    .manifesto-company-label {
        font-size: 1.1rem;
    }

    /* ---------------------------------------------------------
       Note — Producer's Note
       --------------------------------------------------------- */
    .section-note {
        padding: 5rem 7vw;
        padding-right: max(7vw, 4.5rem);
    }
    .note-headline {
        font-size: 1.25rem;
    }
    .note-body p {
        font-size: 0.82rem;
        line-height: 2.05;
    }

    /* ---------------------------------------------------------
       Contact — form
       --------------------------------------------------------- */
    .section-contact {
        padding: 5rem 7vw 3rem;
        padding-right: max(7vw, 4.5rem);
    }
    .contact-headline {
        font-size: 1.3rem;
    }
    .contact-lede {
        font-size: 0.85rem;
        line-height: 2;
        margin-bottom: 2.5rem;
    }
    .form-submit {
        padding: 0.9rem 1.6rem;
        font-size: 0.72rem;
    }
    .contact-footer {
        font-size: 0.6rem;
        letter-spacing: 0.16em;
    }

    /* ---------------------------------------------------------
       Side menu — bigger tap targets, comfortable spacing
       --------------------------------------------------------- */
    .side-menu-inner {
        padding: 4.5rem 2rem 2rem;
        gap: 1.2rem;
    }
    .side-menu-link {
        font-size: 0.98rem;
        padding: 0.3rem 0;   /* tap target */
    }
    .side-menu-meta {
        font-size: 0.65rem;
    }
}

/* Extra-small phones (iPhone SE etc.) */
@media (max-width: 380px) {
    .pillar-title      { font-size: 1.2rem; }
    .pillar-tagline    { font-size: 0.98rem; }
    .team-headline     { font-size: 1.1rem; }
    .osaka-title       { font-size: 1.7rem; }
    .manifesto-title   { font-size: 1.75rem; }
    .coming-card {
        width: 200px;
        height: 300px;
    }
}

/* ============================================================
   NEW HERO — Text cascade first, then photo crossfade behind
   (Replaces the old .stage#hero + .section-tagline)
   ============================================================ */
.new-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;                           /* white intro */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/* Background container — fades in AFTER the 3 copy PNGs have built up
   (last PNG lands ~2.8s; bg starts ~3.2s for breathing room) */
.nh-bg {
    position: absolute;
    inset: -14% 0;
    z-index: 1;
    opacity: 0;
    animation: nhBgFadeIn 1.6s ease-out 3.2s forwards;
    will-change: opacity;
}

@keyframes nhBgFadeIn { to { opacity: 1; } }

/* Individual slides — long crossfade cycle */
.nh-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #111;
    opacity: 0;
    animation: nhCrossfade 30s ease-in-out infinite;
    will-change: opacity, transform;
}
.nh-slide:nth-child(1) { animation-delay:  0s; }
.nh-slide:nth-child(2) { animation-delay:  5s; }
.nh-slide:nth-child(3) { animation-delay: 10s; }
.nh-slide:nth-child(4) { animation-delay: 15s; }
.nh-slide:nth-child(5) { animation-delay: 20s; }
.nh-slide:nth-child(6) { animation-delay: 25s; }

@keyframes nhCrossfade {
    0%   { opacity: 0; transform: scale(1.03); }
    7%   { opacity: 1; }
    17%  { opacity: 1; }
    23%  { opacity: 0; transform: scale(1.07); }
    100% { opacity: 0; transform: scale(1.07); }
}

/* Subtle dark veil that fades in with the photos — improves copy PNG legibility */
.nh-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 100%);
    opacity: 0;
    animation: nhBgFadeIn 1.6s ease-out 3.2s forwards;
}

/* Trigger the 3-copy PNG cascade on .new-hero (mirrors the old .section-tagline behavior) */
.new-hero.is-in .tagline-copy-1 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.3s;
}
.new-hero.is-in .tagline-copy-2 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 1.2s;
}
.new-hero.is-in .tagline-copy-3 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 2.1s;
}

/* ============================================================
   TOP BRAND BAR — Big K + nav, slides down after hero exits
   ============================================================ */
.top-brand-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    padding: 0 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 90;
    transform: translateY(-100%);
    transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
    font-family: 'Montserrat', sans-serif;
}

.top-brand-bar.is-visible {
    transform: translateY(0);
}

/* The big K — sits in the top-left corner, larger than a typical header logo */
.tbb-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.tbb-logo img {
    width: 60px;
    height: auto;
    display: block;
    filter: brightness(0);
}

.tbb-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.tbb-nav a {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
    padding: 0.6rem 0;
    position: relative;
    opacity: 0.72;
    transition: opacity 0.25s ease;
}

.tbb-nav a:hover { opacity: 1; }

.tbb-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tbb-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

@media (max-width: 800px) {
    .top-brand-bar { height: 72px; padding: 0 4vw; }
    .tbb-logo img { width: 44px; }
    .tbb-nav { display: none; }
}

/* ============================================================
   JOURNAL — Coming Soon variant (temporarily replaces the preview)
   ============================================================ */
.section-journal--soon {
    background: var(--dark, #0a0a0a);
    color: #F5F1E8;
}

.jp-inner--soon {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 4vw;
}

.jp-head--soon {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(245, 241, 232, 0.18);
    display: block;
}

.section-journal--soon .jp-eyebrow {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #F5F1E8;
    margin-bottom: 0.8rem;
}
.section-journal--soon .jp-eyebrow-sub {
    color: rgba(245, 241, 232, 0.55);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.jp-soon {
    padding: 2rem 0;
}
.jp-soon-label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #F8C907;
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(248, 201, 7, 0.7);
    border-radius: 999px;
    margin-bottom: 1.4rem;
}
.jp-soon-lede {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(245, 241, 232, 0.85);
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Top brand bar — "Journal — Soon" indicator (muted, no arrow underline) */
.tbb-nav-soon {
    opacity: 0.4 !important;
    cursor: default;
}
.tbb-nav-soon::after { display: none; }

/* Side menu — Journal shows a "Soon" tag instead of "↗" */
.side-menu-link--soon {
    opacity: 0.55;
}
.side-menu-link--soon .side-menu-arrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: #F8C907;
    text-transform: uppercase;
    padding-left: 0.6rem;
}