@charset "utf-8";
/* CSS Document */

/* =========================================
   VAN PUIN NAAR VREDE
   MOBILE FIRST
========================================= */

.walk-page{
    background:var(--rock);
    overflow-x:clip;
}
/* =========================================
   HERO
========================================= */

.walk-page .subpage-title-group{
    width:100%;
}

.walk-page .subpage-title-group h1{
    width:100%;
    max-width:11ch;

    margin:0;

    color:var(--rice);

    font-size:clamp(2.65rem,13vw,4.1rem);
    line-height:.86;
    letter-spacing:-.055em;
}

.walk-hero-subtitle{
    max-width:18rem;
    margin:.9rem 0 0;

    color:var(--rice);

    font-size:.82rem;
    font-weight:500;
    line-height:1.45;

    text-shadow:0 2px 12px rgba(8,20,36,.45);
}

/* =========================================
   ALGEMEEN
========================================= */

.walk-main{
    position:relative;
    z-index:3;

    margin-top:-1px;

    background:var(--rock);
    overflow:hidden;
}

.walk-container{
    width:calc(100% - (2 * var(--page-padding)));
    max-width:42rem;
    margin-inline:auto;
}

.walk-eyebrow{
    margin:0 0 1.1rem;

    color:var(--karamel);

    font-size:.69rem;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.walk-main h2{
    margin:0;

    font-family:var(--font-heading);
    font-size:clamp(2.25rem,10.5vw,3.8rem);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.045em;

    text-wrap:balance;
}


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

.walk-intro{
    position:relative;

    padding:6.5rem 0 5rem;

    background:var(--rock);
}

.walk-intro::before{
    content:"";

    position:absolute;
    top:0;
    right:-20vw;

    width:70vw;
    aspect-ratio:1;

    border:1px solid rgba(198,155,82,18);
    border-radius:50%;

    pointer-events:none;
}

.walk-intro-title{
    max-width:12ch;

    color:var(--blue);
}

.walk-intro-copy{
    max-width:34rem;
    margin-top:2.25rem;
}

.walk-intro-copy p{
    margin:0 0 1.25rem;

    color:var(--blue);

    font-size:1rem;
    line-height:1.75;
}

.walk-intro-copy p:first-child{
    font-size:1.12rem;
    font-weight:500;
}


/* =========================================
   STATEMENT
========================================= */

.walk-statement{
    position:relative;

    min-height:82svh;

    display:flex;
    align-items:center;

    padding:6rem var(--page-padding);

    background:var(--dark-blue);
    color:var(--rice);

    overflow:hidden;
}

.walk-statement::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(198,155,82,18),
            transparent 34%
        );

    pointer-events:none;
}

.walk-statement-inner{
    position:relative;
    z-index:1;

    width:100%;
    max-width:42rem;
    margin-inline:auto;
}

.walk-statement p{
    position:relative;
    z-index:2;

    max-width:12ch;
    margin:0 auto;

    color:var(--rice);

    font-family:var(--font-heading);
    font-size:clamp(2.25rem,11vw,4.25rem);
    font-weight:500;
    line-height:1.02;
    letter-spacing:-.045em;

    text-align:center;
    text-wrap:balance;
}

.statement-number{
    display:block;

    color:rgba(245,240,229,8);

    font-family:var(--font-heading);
    font-size:clamp(5rem,30vw,10rem);
    font-weight:700;
    line-height:.75;
    letter-spacing:-.08em;
}

.statement-number-end{
    margin-top:2rem;
    text-align:right;
}


/* =========================================
   ROUTE INTRO
========================================= */

.route-intro{
    padding:6rem 0 4rem;

    background:var(--rock);
}

.route-intro h2{
    color:var(--blue);
}

.route-intro-text{
    max-width:32rem;
    margin-top:1.75rem;

    color:var(--blue);

    font-size:1rem;
    line-height:1.75;
}


/* =========================================
   JOURNEY
========================================= */

.journey{
    --journey-left:2rem;

    position:relative;

    padding:1rem var(--page-padding) 5rem;

    background:var(--rock);
}

.journey-line{
    position:absolute;
    top:1rem;
    bottom:5rem;
    left:calc(var(--page-padding) + var(--journey-left));

    width:2px;

    background:rgba(32,58,90,10);

    overflow:hidden;
}

.journey-line-progress{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:var(--journey-progress, 0%);

    background:
        linear-gradient(
            180deg,
            var(--honey),
            var(--blue),
            var(--honey)
        );

    box-shadow:0 0 1rem rgba(198,155,82,35);
}

.journey-stop{
    position:relative;

    max-width:42rem;
    margin:0 auto 2rem;
    padding-left:4.65rem;
}

.journey-marker{
    position:absolute;
    top:2rem;
    left:.55rem;
    z-index:4;

    width:3rem;
    height:3rem;

    display:grid;
    place-items:center;

    border:1px solid rgba(198,155,82,55);
    border-radius:50%;

    background:var(--rock);
    color:var(--karamel);

    box-shadow:
        0 0 0 .45rem var(--rock),
        0 .65rem 1.4rem rgba(8,20,36,10);
}

.journey-marker span{
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
}

.journey-card{
    position:relative;

    min-height:28rem;

    padding:2.25rem 1.4rem 2rem;

    border:1px solid var(--border);
    border-radius:1.75rem;

    background:rgba(255,255,255,68);
    color:var(--blue);

    box-shadow:
        0 1.2rem 2.8rem -.9rem
        rgba(8,20,36,16);

    overflow:hidden;

    opacity:0;
    transform:
        translate3d(2.75rem,4rem,0)
        rotate(2deg)
        scale(.94);

    transition:
        opacity .85s cubic-bezier(.22,1,.36,1),
        transform 1.05s cubic-bezier(.22,1,.36,1);
}

.journey-stop:nth-child(even) .journey-card{
    transform:
        translate3d(-2.75rem,4rem,0)
        rotate(-2deg)
        scale(.94);
}

.journey-card.is-visible{
    opacity:1;
    transform:
        translate3d(0,0,0)
        rotate(0)
        scale(1);
}

.journey-label{
    position:relative;
    z-index:2;

    margin:0 0 .85rem;

    color:var(--karamel);

    font-size:.66rem;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.journey-title{
    position:relative;
    z-index:2;

    max-width:10ch;
    margin:0;

    color:inherit;

    font-family:var(--font-heading);
    font-size:clamp(2.15rem,10.5vw,3.45rem);
    font-weight:600;
    line-height:.92;
    letter-spacing:-.05em;

    text-wrap:balance;
}

.journey-title::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-.5rem;

    width:100%;
    height:.12rem;

    background:var(--honey);

    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .9s cubic-bezier(.22,1,.36,1) .35s;
}

.journey-card.is-visible .journey-title::after{
    transform:scaleX(1);
}

.journey-symbol{
    position:relative;
    z-index:2;

    margin:1.6rem 0 0;

    color:var(--karamel);

    font-family:var(--font-heading);
    font-size:1.1rem;
    font-style:italic;
}

.journey-copy{
    position:relative;
    z-index:2;

    margin-top:1.4rem;
}

.journey-copy p{
    margin:0 0 1rem;

    font-size:.96rem;
    line-height:1.7;
}

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

.journey-word{
    position:absolute;
    right:-.08em;
    bottom:-.13em;
    z-index:1;

    color:rgba(32,58,90,5);

    font-family:var(--font-heading);
    font-size:clamp(4rem,21vw,7rem);
    font-weight:700;
    line-height:.8;
    letter-spacing:-.08em;

    pointer-events:none;
}


/* =========================================
   DONKERE ROUTEKAART
========================================= */

.journey-stop-dark .journey-card{
    background:var(--dark-blue);
    color:var(--rice);
}

.journey-stop-dark .journey-label,
.journey-stop-dark .journey-symbol{
    color:var(--honey);
}

.journey-stop-dark .journey-word{
    color:rgba(245,240,229,5);
}


/* =========================================
   PUIN
========================================= */

.journey-stop-rubble .journey-card{
    background:
        linear-gradient(
            145deg,
            rgba(220,216,207,98),
            rgba(242,238,229,98)
        );
}

.journey-stop-rubble .journey-card::before,
.journey-stop-rubble .journey-card::after{
    content:"";

    position:absolute;
    z-index:0;

    background:rgba(32,58,90,6);

    transform:rotate(12deg);
}

.journey-stop-rubble .journey-card::before{
    top:-2rem;
    right:-3.5rem;

    width:8rem;
    height:10rem;

    background:rgba(32,58,90,.09);

    clip-path:polygon(
        24% 0,
        100% 12%,
        78% 100%,
        0 78%
    );
}

.journey-stop-rubble .journey-card::after{
    bottom:-3.5rem;
    left:-3rem;

    width:8rem;
    height:8rem;

    background:rgba(32,58,90,.07);

    clip-path:polygon(
        12% 18%,
        86% 0,
        100% 72%,
        28% 100%
    );
}


/* =========================================
   AFTELLEN
========================================= */

.journey-stop-countdown .journey-card{
    min-height:34rem;

    background:var(--blue);
    color:var(--rice);
}

.journey-stop-countdown .journey-label,
.journey-stop-countdown .journey-symbol{
    color:var(--honey);
}

.countdown-visual{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:.85rem;

    margin-top:2.25rem;
}

.countdown-visual span{
    color:var(--rice);

    font-family:var(--font-heading);
    font-size:clamp(2.3rem,11vw,3.75rem);
    font-weight:600;
    line-height:1;
    letter-spacing:-.05em;
}

.countdown-visual i{
    position:relative;

    flex:1;
    height:1px;

    background:rgba(245,240,229,25);
}

.countdown-visual i::after{
    content:"";

    position:absolute;
    top:50%;
    left:0;

    width:.55rem;
    height:.55rem;

    border-top:1px solid var(--honey);
    border-right:1px solid var(--honey);

    transform:
        translateY(-50%)
        rotate(45deg);

    animation:routeArrow 2s ease-in-out infinite;
}

@keyframes routeArrow{

    0%,
    100%{
        left:0;
        opacity:.35;
    }

    50%{
        left:calc(100% - .8rem);
        opacity:1;
    }

}


/* =========================================
   ITALO DISCO
========================================= */

.journey-stop-dolce .journey-card{
    background:
        linear-gradient(
            145deg,
            #f4e8cf,
            var(--offwhite)
        );
}

.journey-stop-dolce .journey-title{
    font-style:italic;
}

.journey-stop-dolce .journey-word{
    color:rgba(198,155,82,10);

    transform:rotate(-5deg);
}


/* =========================================
   VREDE
========================================= */

.journey-stop-peace .journey-card{
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(198,155,82,24),
            transparent 30%
        ),
        var(--rice);
}

.journey-stop-peace .journey-card::before{
    content:"";

    position:absolute;
    top:1.4rem;
    right:1.4rem;

    width:4rem;
    aspect-ratio:1;

    border:1px solid rgba(198,155,82,35);
    border-radius:50%;

    box-shadow:
        0 0 0 1rem rgba(198,155,82,5),
        0 0 0 2rem rgba(198,155,82,3);
}


/* =========================================
   TITELWOORDEN
========================================= */

.journey-title .title-word{
    display:inline-block;

    margin-right:.18em;

    opacity:0;

    will-change:transform, opacity, filter;

    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .85s cubic-bezier(.22,1,.36,1),
        filter .85s ease;
}

.journey-title .title-word:last-child{
    margin-right:0;
}


/* Rise */

.journey-title[data-title-effect="rise"] .title-word{
    transform:
        translateY(1.15em)
        rotate(5deg);

    filter:blur(.35rem);
}


/* Split */

.journey-title[data-title-effect="split"] .title-word:nth-child(odd){
    transform:translateX(-1.1em) rotate(-5deg);
}

.journey-title[data-title-effect="split"] .title-word:nth-child(even){
    transform:translateX(1.1em) rotate(5deg);
}


/* Impact */

.journey-title[data-title-effect="impact"] .title-word{
    transform:
        scale(1.7)
        rotate(-7deg);

    filter:blur(.25rem);
}


/* Slide */

.journey-title[data-title-effect="slide"] .title-word{
    transform:
        translateX(-1.75em)
        skewX(-12deg);
}


/* Dance */

.journey-title[data-title-effect="dance"] .title-word:nth-child(odd){
    transform:
        translateY(-1em)
        rotate(-9deg);
}

.journey-title[data-title-effect="dance"] .title-word:nth-child(even){
    transform:
        translateY(1em)
        rotate(9deg);
}


/* Peace */

.journey-title[data-title-effect="peace"] .title-word{
    transform:
        translateY(.75em)
        scale(.8);

    filter:blur(.5rem);
}


/* Zichtbaar */

.journey-title.is-title-visible .title-word{
    opacity:1 !important;

    transform:
        translate3d(0,0,0)
        rotate(0)
        skewX(0)
        scale(1) !important;

    filter:blur(0) !important;
}


/* =========================================
   PRAKTISCH
========================================= */

.walk-practical{
    padding:6rem 0;

    background:var(--brown-light);
}

.walk-practical h2{
    max-width:10ch;

    color:var(--blue);
}

.practical-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;

    margin-top:2.5rem;
}

.practical-card{
    min-width:0;
    padding:1.25rem 1rem;

    border:1px solid var(--border);
    border-radius:1.25rem;

    background:var(--kaki);

    box-shadow:
        0 .75rem 1.8rem -.9rem
        rgba(8,20,36,14);
}

.practical-number{
    display:block;

    margin-bottom:1rem;

    color:var(--karamel);

    font-family:var(--font-heading);
    font-size:clamp(2.1rem,10vw,3.25rem);
    font-weight:600;
    line-height:.9;
    letter-spacing:-.06em;
}

.practical-card h3{
    margin:0 0 .55rem;

    color:var(--blue);

    font-family:var(--font-heading);
    font-size:1.18rem;
    line-height:1.05;
}

.practical-card p{
    margin:0;

    color:var(--blue);

    font-size:.78rem;
    line-height:1.55;
}

.practical-note{
    margin-top:1rem;
    padding:1.5rem;

    border-radius:1.5rem;

    background:var(--dark-blue);
    color:var(--rice);
}

.practical-note h3{
    margin:0 0 1rem;

    color:var(--honey);

    font-family:var(--font-heading);
    font-size:1.65rem;
}

.practical-note p{
    margin:0 0 1.25rem;

    font-size:.95rem;
    line-height:1.65;
}

.practical-note ul{
    margin:0;
    padding:0;

    list-style:none;
}

.practical-note li{
    position:relative;

    margin:.65rem 0;
    padding-left:1.4rem;

    font-size:.9rem;
    line-height:1.5;
}

.practical-note li::before{
    content:"";

    position:absolute;
    top:.62em;
    left:0;

    width:.45rem;
    height:.45rem;

    border-radius:50%;

    background:var(--honey);
}


/* =========================================
   NIETS HOEFT
========================================= */

.walk-freedom{
    padding:7rem 0;

    background:var(--rock);
}

.walk-freedom h2{
    max-width:12ch;

    color:var(--blue);
}

.walk-freedom-copy{
    max-width:33rem;
    margin-top:2.25rem;
}

.walk-freedom-copy p{
    margin:0 0 1.15rem;

    color:var(--blue);

    font-size:1rem;
    line-height:1.75;
}

.walk-freedom-copy strong{
    display:block;

    margin-top:2rem;

    color:var(--karamel);

    font-family:var(--font-heading);
    font-size:1.55rem;
    font-weight:600;
    line-height:1.25;
}


/* =========================================
   EINDE
========================================= */

.walk-ending{
    position:relative;

    min-height:90svh;

    display:flex;
    align-items:center;

    padding:7rem 0;

    background:var(--dark-blue);
    color:var(--rice);

    overflow:hidden;
}

.walk-ending-sun{
    position:absolute;
    top:-15vw;
    right:-20vw;

    width:75vw;
    max-width:32rem;
    aspect-ratio:1;

    border:1px solid rgba(198,155,82,24);
    border-radius:50%;

    box-shadow:
        0 0 0 3rem rgba(198,155,82,3),
        0 0 0 6rem rgba(198,155,82,2);

    animation:peacePulse 6s ease-in-out infinite;
}

@keyframes peacePulse{

    0%,
    100%{
        transform:scale(.96);
        opacity:.6;
    }

    50%{
        transform:scale(1.04);
        opacity:1;
    }

}

.walk-ending .walk-container{
    position:relative;
    z-index:2;
}

.walk-ending .walk-eyebrow{
    color:var(--honey);
}

.walk-ending blockquote{
    margin:0;
}

.walk-ending blockquote p{
    max-width:12ch;
    margin:0 0 1rem;

    color:var(--rice);

    font-family:var(--font-heading);
    font-size:clamp(2.35rem,11vw,4rem);
    font-weight:500;
    line-height:1;
    letter-spacing:-.045em;
}

.ending-sequence{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.65rem;

    margin-top:3rem;
}

.ending-sequence span{
    color:var(--rice);

    font-size:.7rem;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ending-sequence i{
    width:1.5rem;
    height:1px;

    background:var(--honey);
}

.walk-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    width:100%;
    margin-top:3.25rem;
    padding:1.15rem 1.2rem;

    border:1px solid rgba(198,155,82,48);
    border-radius:999px;

    background:var(--honey);
    color:var(--dark-blue);

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-decoration:none;
    text-transform:uppercase;

    transition:
        transform var(--transition),
        background-color var(--transition);
}

.walk-button:active{
    transform:scale(.98);
}


/* =========================================
   ALGEMENE SCROLL REVEAL
========================================= */

[data-reveal]{
    opacity:0;

    transform:
        translate3d(0,2.5rem,0)
        scale(.97);

    filter:blur(.25rem);

    transition:
        opacity .85s cubic-bezier(.22,1,.36,1),
        transform .95s cubic-bezier(.22,1,.36,1),
        filter .85s ease;
}

[data-reveal].is-visible{
    opacity:1;

    transform:
        translate3d(0,0,0)
        scale(1);

    filter:blur(0);
}


/* =========================================
   GROTERE TELEFOONS
========================================= */

@media (min-width:430px){

    .journey{
        --journey-left:2.25rem;
    }

    .journey-stop{
        padding-left:5.25rem;
    }

    .journey-marker{
        left:.75rem;
    }

    .journey-card{
        padding:2.5rem 1.7rem;
    }

}


/* =========================================
   MUIS
========================================= */

@media (hover:hover){

    .journey-card:hover{
        transform:translateY(-.35rem);
    }

    .walk-button:hover{
        background:var(--rice);
        transform:translateY(-.15rem);
    }

}


/* =========================================
   MINDER BEWEGING
========================================= */

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

    .journey-card,
    [data-reveal],
    .journey-title .title-word{
        opacity:1;
        transform:none;
        filter:none;
    }

    .journey-title::after{
        transform:scaleX(1);
    }

    .countdown-visual i::after,
    .walk-ending-sun{
        animation:none;
    }

}

/* =========================================
   INHOUD ALTIJD BOVEN DECORATIE
========================================= */

.journey-card{
    isolation:isolate;
}

.journey-card > *{
    position:relative;
    z-index:3;
}

.journey-word{
    z-index:1;
    pointer-events:none;
}

.journey-stop-rubble .journey-card::before,
.journey-stop-rubble .journey-card::after{
    z-index:1;
    opacity:.45;
    pointer-events:none;
}

.journey-title,
.journey-label,
.journey-symbol,
.journey-copy,
.countdown-visual{
    position:relative;
    z-index:4;
}

/* =========================================
   SHORTCUTS
========================================= */

.walk-shortcuts{
    position:relative;
    z-index:10;

    width:100%;
    padding:.7rem 0;

    background:rgba(245,240,229,.96);
    border-bottom:1px solid var(--border);

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

.walk-shortcuts-inner{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:.3rem;
}

.walk-shortcuts a{
    min-width:0;
    padding:.62rem .25rem;

    border:1px solid rgba(32,58,90,.11);
    border-radius:999px;

    background:rgba(255,255,255,.7);
    color:var(--blue);

    font-size:.57rem;
    font-weight:700;
    line-height:1.15;
    letter-spacing:.015em;

    text-align:center;
    text-decoration:none;
    white-space:nowrap;
}

.walk-shortcuts a:active{
    background:var(--blue);
    color:var(--rice);
}

#waarom,
#route,
#praktisch,
#meelopen{
    scroll-margin-top:5rem;
}

/* =========================================
   MEELOPEN
========================================= */

.walk-signup{
    position:relative;

    padding:7rem 0;

    background:var(--rice);
    color:var(--blue);

    overflow:hidden;
}

.walk-signup::before{
    content:"";

    position:absolute;
    top:-8rem;
    right:-8rem;

    width:18rem;
    aspect-ratio:1;

    border:1px solid rgba(198,155,82,.18);
    border-radius:50%;

    box-shadow:
        0 0 0 3rem rgba(198,155,82,.04),
        0 0 0 6rem rgba(198,155,82,.025);
}

.walk-signup .walk-container{
    position:relative;
    z-index:2;
}

.walk-signup h2{
    max-width:12ch;
    color:var(--blue);
}

.walk-signup-copy{
    max-width:32rem;
    margin-top:2rem;
}

.walk-signup-copy p{
    margin:0 0 1rem;

    font-size:1rem;
    line-height:1.75;
}

.walk-signup-actions{
    display:grid;
    gap:.75rem;

    margin-top:2.5rem;
}

.walk-signup-primary,
.walk-signup-secondary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    min-height:3.7rem;
    padding:.95rem 1.15rem;

    border-radius:999px;

    font-size:.76rem;
    font-weight:700;
    letter-spacing:.07em;
    text-decoration:none;
    text-transform:uppercase;
}

.walk-signup-primary{
    background:var(--blue);
    color:var(--rice);
}

.walk-signup-secondary{
    justify-content:center;

    border:1px solid rgba(32,58,90,.16);

    background:transparent;
    color:var(--blue);
}

.walk-ending{
    position:relative;

    min-height:90svh;

    display:flex;
    align-items:center;

    padding:7rem 0 10rem;

    background:
        linear-gradient(
            180deg,
            var(--dark-blue) 0%,
            var(--dark-blue) 72%,
            var(--rock) 100%
        );

    color:var(--rice);
    overflow:hidden;
}

.walk-ending::after{
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:1;

    height:7rem;

    background:
        linear-gradient(
            180deg,
            rgba(16,47,77,0) 0%,
            var(--rock) 100%
        );

    pointer-events:none;
}

/* =========================================
   GOOGLE MAPS ROUTE
========================================= */

.walk-map{
    padding:1rem 0 6rem;
    background:var(--rock);
}

.walk-map-card{
    position:relative;

    padding:1.5rem;

    border:1px solid var(--border);
    border-radius:1.75rem;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(198,155,82,.16),
            transparent 36%
        ),
        var(--dark-blue);

    color:var(--rice);

    box-shadow:
        0 1.4rem 3rem -1rem
        rgba(8,20,36,.24);

    overflow:hidden;
}

.walk-map-card::after{
    content:"";

    position:absolute;
    right:-3.5rem;
    bottom:-4.5rem;

    width:11rem;
    aspect-ratio:1;

    border:1px solid rgba(198,155,82,.16);
    border-radius:50%;

    box-shadow:
        0 0 0 2rem rgba(198,155,82,.035),
        0 0 0 4rem rgba(198,155,82,.02);

    pointer-events:none;
}

.walk-map-icon{
    position:relative;
    z-index:2;

    width:3.25rem;
    height:3.25rem;

    display:grid;
    place-items:center;

    margin-bottom:1.5rem;

    border:1px solid rgba(198,155,82,.4);
    border-radius:50%;

    background:rgba(255,255,255,.05);
    color:var(--honey);
}

.walk-map-icon svg{
    width:1.35rem;
    height:1.35rem;
}

.walk-map-content{
    position:relative;
    z-index:2;
}

.walk-map .walk-eyebrow{
    color:var(--honey);
}

.walk-map h2{
    max-width:11ch;
    color:var(--rice);
}

.walk-map-content > p:not(.walk-eyebrow){
    max-width:31rem;
    margin:1.5rem 0 0;

    color:rgba(245,240,229,.84);

    font-size:.96rem;
    line-height:1.7;
}

.walk-map-stops{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;

    margin-top:2rem;
}

.walk-map-stops span{
    color:var(--rice);

    font-size:.66rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.walk-map-stops i{
    width:1rem;
    height:1px;
    background:var(--honey);
}

.walk-map-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    width:100%;
    margin-top:2.25rem;
    padding:1rem 1.15rem;

    border-radius:999px;

    background:var(--honey);
    color:var(--dark-blue);

    font-size:.72rem;
    font-weight:700;
    letter-spacing:.07em;
    text-decoration:none;
    text-transform:uppercase;

    transition:
        transform var(--transition),
        background-color var(--transition);
}

.walk-map-button svg{
    width:1rem;
    height:1rem;
    flex-shrink:0;
}

.walk-map-button:active{
    transform:scale(.98);
}

@media (hover:hover){

    .walk-map-button:hover{
        background:var(--rice);
        transform:translateY(-.15rem);
    }

}

.walk-map-actions{
    display:grid;
    gap:.75rem;

    margin-top:2.25rem;
}

.walk-map-actions .walk-map-button{
    margin-top:0;
}

.walk-map-button-secondary{
    border:1px solid rgba(198,155,82,.5);

    background:transparent;
    color:var(--rice);
}

.walk-map-button-secondary:active{
    background:rgba(255,255,255,.08);
}

@media (hover:hover){

    .walk-map-button-secondary:hover{
        background:var(--rice);
        color:var(--dark-blue);
        transform:translateY(-.15rem);
    }

}