/*==========================================================
    KIYOMI RYOKAN
    ABOUT PAGE
    PART 1
==========================================================*/


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

.about-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    color:#fff;

    overflow:hidden;

    background:#1c2410;

}


.about-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:120%;

    object-fit:cover;

    filter:

        saturate(.82)

        brightness(.72);

}


.about-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(36,46,18,.32),
            rgba(20,26,10,.76)
        );

}


.about-hero .container{

    position:relative;

    z-index:5;

}


/*==========================================================
    MOSS MIST
    Ambient drifting light — same treatment as the tea-house
    forest-mist, tinted with the about page's deep moss accent
==========================================================*/

.moss-mist{

    position:absolute;

    inset:0;

    pointer-events:none;

    mix-blend-mode:screen;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(154,180,110,.16),
        transparent 40%),

        radial-gradient(circle at 80% 35%,
        rgba(255,255,255,.10),
        transparent 38%),

        radial-gradient(circle at 50% 100%,
        rgba(154,180,110,.12),
        transparent 55%);

    animation:mossMistFloat 18s ease-in-out infinite;

}


@keyframes mossMistFloat{

    0%{

        transform:translateY(0);

        opacity:.6;

    }

    50%{

        transform:translateY(-20px);

        opacity:.85;

    }

    100%{

        transform:translateY(0);

        opacity:.6;

    }

}


.about-hero .vertical-jp,
.principles .vertical-jp,
.timeline .vertical-jp{

    position:absolute;

    writing-mode:vertical-rl;

    text-orientation:upright;

    white-space:nowrap;

    display:block;

    font-family:"Noto Serif JP", serif;

    line-height:1.1;

    letter-spacing:.2rem;

}


.about-hero .vertical-jp{

    top:50%;

    left:2.5rem;

    transform:translateY(-50%);

    opacity:.6;

    font-size:12rem;

    color:rgba(224,196,133,.6);

}


.principles .vertical-jp{

    left:-4rem;

    top:3rem;

    font-size:11rem;

    color:rgba(154,180,110,.24);

    opacity:.99;

}


.timeline .vertical-jp{

    right:-4rem;

    top:3rem;

    font-size:11rem;

    color:rgba(154,180,110,.24);

    opacity:.99;

}


.about-hero-content{

    max-width:760px;

}


.about-hero .section-label{

    color:rgba(255,255,255,.85);

    letter-spacing:.30em;

    text-transform:uppercase;

}


.about-hero h1{

    color:#fff;

    margin:1rem 0 2rem;

    font-size:clamp(4rem,9vw,7rem);

    line-height:.92;

    letter-spacing:-.03em;

}


.about-hero p{

    max-width:560px;

    color:rgba(255,255,255,.85);

    font-size:1.15rem;

    line-height:1.8;

}


/*==========================================================
    ABOUT HANKO
==========================================================*/

.hanko-floating{

    position:absolute;

    right:3.5%;

    top:6%;

    width:150px;

    height:150px;

    border:8px solid rgba(224,196,133,.9);

    color:rgba(224,196,133,1);

    background:rgba(224,196,133,.08);

    backdrop-filter:blur(10px);

}


/*==========================================================
    OUR STORY
==========================================================*/

.our-story{

    padding:8rem 0;

    background:var(--color-background);

}


.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.story-content{

    max-width:540px;

}


.story-content h2{

    margin:1rem 0 2rem;

}


.story-content p{

    margin-bottom:1.75rem;

    font-size:1.05rem;

}


.story-image{

    position:relative;

}


.story-image img{

    width:100%;

    height:720px;

    object-fit:cover;

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

    box-shadow:var(--shadow-lg);

}


/* Decorative frame */

.story-image::after{

    content:"";

    position:absolute;

    inset:24px;

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

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

    pointer-events:none;

}


/*==========================================================
    INTRO SPACING
==========================================================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 5rem;

}


.section-heading h2{

    margin:1rem 0;

}


.section-heading p{

    margin:0 auto;

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .story-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .story-image{

        order:-1;

    }

    .story-image img{

        height:550px;

    }

}


@media(max-width:640px){

    .about-hero{

        min-height:75vh;

    }

    .about-hero h1{

        font-size:clamp(3rem,12vw,4.5rem);

    }

    .story-image img{

        height:400px;

    }

}
/*==========================================================
    THREE PRINCIPLES
==========================================================*/

.principles{

    position:relative;

    overflow:hidden;

    padding:8rem 0;

    background:var(--color-background-alt);

}


.principles-grid{

    display:grid;

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

    gap:2rem;

    margin-top:5rem;

}


.principle-card{

    padding:3rem;

    text-align:center;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}


.principle-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:60px;

    height:4px;

    background:var(--color-primary);

    border-radius:999px;

}


.principle-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}


.principle-card h3{

    margin:2rem 0 1rem;

    font-size:2rem;

}


.principle-card p{

    max-width:260px;

    margin:auto;

}


/*==========================================================
    ARCHITECTURE
==========================================================*/

.architecture{

    padding:8rem 0;

    background:var(--color-background);

}


.architecture-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.architecture-image{

    position:relative;

}


.architecture-image img{

    width:100%;

    height:750px;

    object-fit:cover;

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

    box-shadow:var(--shadow-lg);

}


.architecture-content{

    max-width:540px;

}


.architecture-content h2{

    margin:1rem 0 2rem;

}


.architecture-content p{

    margin-bottom:2rem;

}


/*==========================================================
    QUOTE BLOCK
==========================================================*/

.quote-block{

    max-width:900px;

    margin:8rem auto;

    text-align:center;

}


.quote-block blockquote{

    font-family:var(--font-heading);

    font-size:clamp(2rem,4vw,3.5rem);

    line-height:1.25;

    color:var(--color-primary);

}


.quote-block cite{

    display:block;

    margin-top:2rem;

    font-style:normal;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--color-text-light);

    font-size:.8rem;

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .principles-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:992px){

    .architecture-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

}


@media(max-width:640px){

    .architecture-image img{

        height:450px;

    }

}/*==========================================================
    NATURE & SUSTAINABILITY
==========================================================*/

.nature{

    position:relative;

    padding:8rem 0;

    background:var(--color-background-alt);

    overflow:hidden;

}


.nature-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.nature-content{

    max-width:560px;

}


.nature-content h2{

    margin:1rem 0 2rem;

}


.nature-content p{

    margin-bottom:1.75rem;

}


.nature-image img{

    width:100%;

    height:700px;

    object-fit:cover;

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

    box-shadow:var(--shadow-lg);

}


/*==========================================================
    OMOTENASHI
==========================================================*/

.hospitality{

    padding:9rem 0;

    text-align:center;

    background:var(--color-background);

}


.hospitality-content{

    max-width:850px;

    margin:0 auto;

}


.hospitality h2{

    margin:1rem 0 2rem;

}


.hospitality p{

    max-width:700px;

    margin:0 auto 2rem;

}


.omotenashi-quote{

    margin-top:4rem;

    padding:3rem;

    border-left:4px solid var(--color-primary);

    background:var(--color-surface);

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

    font-family:var(--font-heading);

    font-size:clamp(1.8rem,3vw,2.8rem);

    line-height:1.4;

}


/*==========================================================
    TIMELINE
==========================================================*/

.timeline{

    position:relative;

    padding:8rem 0;

    background:var(--color-background-alt);

}


.timeline-wrapper{

    max-width:900px;

    margin:0 auto;

    position:relative;

}


.timeline-wrapper::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    background:rgba(0,0,0,.08);

    transform:translateX(-50%);

}


.timeline-item{

    position:relative;

    width:50%;

    padding:2rem 3rem;

}


.timeline-item:nth-child(odd){

    margin-right:auto;

    text-align:right;

}


.timeline-item:nth-child(even){

    margin-left:auto;

}


.timeline-dot{

    position:absolute;

    top:2.5rem;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--color-primary);

}


.timeline-item:nth-child(odd) .timeline-dot{

    right:-9px;

}


.timeline-item:nth-child(even) .timeline-dot{

    left:-9px;

}


.timeline-year{

    font-family:var(--font-heading);

    font-size:2rem;

    color:var(--color-primary);

    margin-bottom:.75rem;

}


.timeline-item h3{

    margin-bottom:.75rem;

}


/*==========================================================
    TEAM
==========================================================*/

.team{

    padding:8rem 0;

    background:var(--color-background);

}


.team-grid{

    display:grid;

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

    gap:2rem;

}


.team-member{

    text-align:center;

}


.team-member img{

    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

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

    margin-bottom:1.5rem;

    transition:var(--transition);

}


.team-member:hover img{

    transform:translateY(-10px);

}


.team-member h3{

    margin-bottom:.4rem;

}


.team-member span{

    color:var(--color-text-light);

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.85rem;

}


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

.about-cta{

    padding:8rem 0;

    text-align:center;

    background:linear-gradient(
        rgba(20,20,20,.55),
        rgba(20,20,20,.55)
    ),
    url("../images/image18.jpg");

    background-size:cover;

    background-position:center;

    color:#fff;

}


.about-cta h2{

    color:#fff;

    margin-bottom:1.5rem;

}


.about-cta p{

    max-width:650px;

    margin:0 auto 2.5rem;

    color:rgba(255,255,255,.85);

}


/*==========================================================
    BRAND HOOKS
    (Enhanced later in brand.css)
==========================================================*/

.section-label{

    position:relative;

}


.section-label::after{

    content:"";

    display:block;

    width:50px;

    height:2px;

    margin-top:.75rem;

    background:var(--color-primary);

}


.has-divider{

    margin:7rem auto;

}


.asanoha-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .team-grid{

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

    }

}


@media(max-width:992px){

    .nature-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .timeline-wrapper::before{

        left:20px;

        transform:none;

    }

    .timeline-item{

        width:100%;

        padding-left:4rem;

        padding-right:0;

        text-align:left !important;

    }

    .timeline-item:nth-child(even),

    .timeline-item:nth-child(odd){

        margin:0;

    }

    .timeline-dot{

        left:11px !important;

        right:auto !important;

    }

}


@media(max-width:640px){

    .team-grid{

        grid-template-columns:1fr;

    }

    .nature-image img{

        height:420px;

    }

    .omotenashi-quote{

        padding:2rem;

        font-size:1.5rem;

    }

}