:root{

    --hoho-red:#ff0000;
    --hoho-red-hover:#d90000;
    --hoho-black:#111111;
    --hoho-text:#222222;
    --hoho-secondary:#444444;
    --hoho-border:#d6d6d6;
    --hoho-light:#f4f4f4;
    --hoho-green:#126b3a;
    --hoho-yellow:#ffd51b;

}



/* ============================================================
   FINDER
============================================================ */

.hoho-finder{

    width:min(94vw,500px);

    max-height:92vh;

    padding:0;

    border:0;

    border-radius:14px;

    background:#fff;

    color:#111;

    overflow-x:hidden;

    overflow-y:auto;

    font-family:
        'GT Eesti Display',
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

    box-shadow:
        0 14px 46px
        rgba(0,0,0,.28);

}


.hoho-finder::backdrop{

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

}



/* ============================================================
   SCREEN
============================================================ */

.hoho-screen{

    box-sizing:border-box;

    padding:
        36px
        30px
        27px;

}


.hoho-start-screen{

    padding-top:27px;

}


.hoho-result-screen{

    padding-top:29px;

}



/* ============================================================
   CLOSE
============================================================ */

.hoho-close{

    position:absolute;

    top:10px;

    right:10px;

    z-index:1000;

    width:44px;

    height:44px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#fff;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    cursor:pointer;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.12);

    transition:
        background .15s ease,
        transform .15s ease;

}


.hoho-close:hover{

    background:#ededed;

}


.hoho-close:active{

    transform:
        scale(.96);

}



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

.hoho-finder button:focus-visible,
.hoho-finder a:focus-visible{

    outline:
        3px solid
        rgba(255,0,0,.28);

    outline-offset:3px;

}



/* ============================================================
   GENERAL TYPOGRAPHY
============================================================ */

.hoho-finder h2{

    margin:
        0
        0
        10px;

    color:#111;

    font-size:33px;

    font-weight:700;

    line-height:1.08;

    letter-spacing:-.25px;

}


.hoho-intro{

    margin:0;

    color:
        var(--hoho-text);

    font-size:17px;

    line-height:1.5;

}



/* ============================================================
   START SHELL
============================================================ */

.hoho-start-shell{

    border:
        1px solid
        #cfcfcf;

    border-radius:16px;

    background:#fff;

    overflow:hidden;

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

}



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

.hoho-start-hero{

    position:relative;

    min-height:245px;

    box-sizing:border-box;

    padding:
        22px
        24px
        27px;

    background:

        radial-gradient(
            circle at 90% 5%,
            rgba(255,0,0,.34),
            transparent 33%
        ),

        linear-gradient(
            145deg,
            #171717 0%,
            #080808 70%,
            #000 100%
        );

    color:#fff;

    overflow:hidden;

}


.hoho-start-hero::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    background:
        var(--hoho-red);

}



/* ============================================================
   START BRAND
============================================================ */

.hoho-start-brand{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    gap:8px;

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

    font-size:10px;

    font-weight:700;

    letter-spacing:.8px;

}


.hoho-live-dot{

    width:7px;

    height:7px;

    flex:
        0
        0
        7px;

    border-radius:50%;

    background:
        var(--hoho-red);

    box-shadow:
        0 0 0 4px
        rgba(255,0,0,.16);

}



/* ============================================================
   ROUTE GRAPHIC
============================================================ */

.hoho-route-visual{

    position:absolute;

    top:48px;

    right:-8px;

    width:175px;

    height:95px;

    opacity:.85;

    transform:
        rotate(-7deg);

}


.hoho-route-line{

    position:absolute;

    top:46px;

    left:0;

    width:185px;

    height:3px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            rgba(255,0,0,.08),
            var(--hoho-red)
        );

}


.hoho-route-point{

    position:absolute;

    top:40px;

    width:14px;

    height:14px;

    box-sizing:border-box;

    border:
        3px solid
        var(--hoho-red);

    border-radius:50%;

    background:#111;

}


.hoho-route-point-one{

    left:32px;

}


.hoho-route-point-two{

    left:92px;

}


.hoho-route-point-three{

    left:153px;

    background:
        var(--hoho-red);

    box-shadow:
        0 0 0 6px
        rgba(255,0,0,.15);

}



/* ============================================================
   START PIN
============================================================ */

.hoho-start-pin{

    position:relative;

    z-index:5;

    width:64px;

    height:64px;

    margin-top:30px;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.hoho-pin-core{

    position:relative;

    z-index:3;

    width:58px;

    height:58px;

    border-radius:15px;

    background:
        var(--hoho-red);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:23px;

    box-shadow:
        0 8px 22px
        rgba(255,0,0,.32);

}


.hoho-pin-pulse{

    position:absolute;

    inset:3px;

    border-radius:18px;

    background:
        rgba(255,0,0,.30);

    animation:
        hohoLocationPulse
        2.1s
        ease-out
        infinite;

}


@keyframes hohoLocationPulse{

    0%{

        transform:
            scale(.9);

        opacity:.8;

    }


    70%,
    100%{

        transform:
            scale(1.35);

        opacity:0;

    }

}



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

.hoho-start-kicker{

    position:relative;

    z-index:5;

    display:block;

    margin-bottom:5px;

    color:#ff4a4a;

    font-size:10px;

    font-weight:800;

    letter-spacing:.9px;

}


.hoho-start-hero h2{

    position:relative;

    z-index:5;

    max-width:360px;

    margin:
        0
        0
        7px;

    color:#fff;

    font-size:36px;

    font-weight:700;

    line-height:1;

    letter-spacing:-.7px;

}


.hoho-start-hero p{

    position:relative;

    z-index:5;

    margin:0;

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

    font-size:15px;

    font-weight:500;

}



/* ============================================================
   START ACTION
============================================================ */

.hoho-start-action-area{

    padding:
        16px
        18px
        17px;

    background:#fff;

}



/* ============================================================
   FEATURE PILLS
============================================================ */

.hoho-start-features{

    min-height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-bottom:12px;

}


.hoho-start-features span{

    min-height:36px;

    box-sizing:border-box;

    padding:
        7px
        12px;

    border:
        1px solid
        #e0e0e0;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #f9f9f9,
            #eeeeee
        );

    color:#191919;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    font-size:12.5px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

}


.hoho-start-features i{

    color:
        var(--hoho-red);

    font-size:12px;

}



/* ============================================================
   FIND BUTTON
============================================================ */

.hoho-find-button{

    position:relative;

    width:100%;

    min-height:72px;

    box-sizing:border-box;

    padding:
        10px
        12px;

    border:
        1px solid
        #b98a00;

    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            #fff26a 0%,
            #ffdc21 46%,
            #ffc400 100%
        );

    color:#111;

    display:flex;

    align-items:center;

    gap:12px;

    font-family:inherit;

    cursor:pointer;

    overflow:hidden;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.95),

        inset 0 -2px 0
        rgba(120,80,0,.18),

        0 6px 15px
        rgba(150,105,0,.23);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.hoho-find-button::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:46%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.56),
            transparent
        );

    pointer-events:none;

}


.hoho-find-button::after{

    content:"";

    position:absolute;

    top:-65%;

    left:-42%;

    width:24%;

    height:230%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.72),
            transparent
        );

    animation:
        hohoFindShine
        4.8s
        ease-in-out
        infinite;

    pointer-events:none;

}


@keyframes hohoFindShine{

    0%,
    70%{

        left:-42%;

    }


    95%,
    100%{

        left:125%;

    }

}


.hoho-find-button:hover{

    transform:
        translateY(-1px);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.95),

        inset 0 -2px 0
        rgba(120,80,0,.18),

        0 9px 21px
        rgba(150,105,0,.31);

}


.hoho-find-button:active{

    transform:
        scale(.995);

}



/* FIND BUTTON ICON */

.hoho-find-button-icon{

    position:relative;

    z-index:3;

    width:47px;

    height:47px;

    flex:
        0
        0
        47px;

    border-radius:10px;

    background:#111;

    color:
        var(--hoho-yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:19px;

}



/* FIND TEXT */

.hoho-find-button strong{

    position:relative;

    z-index:3;

    flex:1;

    color:#111;

    font-size:19px;

    font-weight:800;

    line-height:1;

    text-align:left;

    transform-origin:
        left
        center;

    animation:
        hohoFindText
        4.8s
        ease-in-out
        infinite;

}


@keyframes hohoFindText{

    0%,
    70%,
    100%{

        transform:
            translateX(0)
            scale(1);

    }


    77%{

        transform:
            translateX(3px)
            scale(1.025);

    }


    84%{

        transform:
            translateX(1px)
            scale(1.01);

    }

}



/* FIND ARROW */

.hoho-find-button-arrow{

    position:relative;

    z-index:3;

    width:36px;

    height:36px;

    flex:
        0
        0
        36px;

    border-radius:50%;

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

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    animation:
        hohoFindArrow
        4.8s
        ease-in-out
        infinite;

}


@keyframes hohoFindArrow{

    0%,
    70%,
    100%{

        transform:
            translateX(0);

    }


    79%{

        transform:
            translateX(3px);

    }

}



/* ============================================================
   PRIVACY
============================================================ */

.hoho-start-privacy{

    margin-top:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    color:#555;

    font-size:10px;

    font-weight:600;

}


.hoho-start-privacy i{

    font-size:9px;

}



/* ============================================================
   ALL STOPS
============================================================ */

.hoho-all-stops{

    min-height:43px;

    margin-top:8px;

    color:#222;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.hoho-all-stops > i:first-child{

    color:
        var(--hoho-red);

}


.hoho-all-stops > i:last-child{

    font-size:9px;

    transition:
        transform .15s ease;

}


.hoho-all-stops:hover{

    color:
        var(--hoho-red);

}


.hoho-all-stops:hover
> i:last-child{

    transform:
        translateX(2px);

}



/* ============================================================
   ============================================================
   LOADING SCREEN
   ============================================================
============================================================ */

.hoho-loading-screen{

    position:relative;

    isolation:isolate;

    min-height:430px;

    padding:0;

    overflow:hidden;

    background:#f5f5f5;

}



/* ============================================================
   MAP LAYER

   IMPORTANT:
   NO URL HERE.

   JS applies background-image only AFTER:
   1. full window.load
   2. browser idle time
   3. map image finishes downloading
============================================================ */

.hoho-loading-map{

    position:absolute;

    inset:-12px;

    z-index:0;

    pointer-events:none;

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    opacity:0;

    transform:
        scale(1.045);

    filter:
        grayscale(.10)
        saturate(.62)
        contrast(.88)
        brightness(1.08);

    transition:
        opacity .45s ease;

}


.hoho-loading-map.is-ready{

    opacity:.46;

}



/* ============================================================
   WHITE MAP WASH
============================================================ */

.hoho-loading-map-wash{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 88% 7%,
            rgba(255,0,0,.09),
            transparent 38%
        ),

        linear-gradient(
            180deg,
            rgba(255,255,255,.68) 0%,
            rgba(255,255,255,.75) 48%,
            rgba(255,255,255,.86) 100%
        );

}


.hoho-loading-map-wash::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 31% 51%,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.25) 36%,
            transparent 67%
        );

}


.hoho-loading-map-wash::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:42%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.30)
        );

}



/* ============================================================
   LOADING CONTENT
============================================================ */

.hoho-loading-content{

    position:relative;

    z-index:2;

    min-height:430px;

    box-sizing:border-box;

    padding:
        30px
        30px
        27px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

}



/* LOADING BRAND */

.hoho-loading-brand{

    position:absolute;

    top:24px;

    left:30px;

    display:flex;

    align-items:center;

    gap:8px;

    color:#282828;

    font-size:10px;

    font-weight:800;

    letter-spacing:.8px;

}



/* ============================================================
   LOADING PIN
============================================================ */

.hoho-loading-pin{

    position:relative;

    width:74px;

    height:74px;

    margin:
        20px
        0
        19px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.hoho-loading-pin-core{

    position:relative;

    z-index:5;

    width:58px;

    height:58px;

    border-radius:15px;

    background:
        var(--hoho-red);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    box-shadow:

        0 9px 24px
        rgba(255,0,0,.38),

        0 2px 6px
        rgba(0,0,0,.10);

}


.hoho-loading-pin-pulse{

    position:absolute;

    inset:8px;

    z-index:2;

    border-radius:18px;

    background:
        rgba(255,0,0,.25);

    animation:
        hohoLoadingPulse
        1.8s
        ease-out
        infinite;

}


@keyframes hohoLoadingPulse{

    0%{

        transform:
            scale(.85);

        opacity:.9;

    }


    72%,
    100%{

        transform:
            scale(1.48);

        opacity:0;

    }

}



/* ROTATING ORBIT */

.hoho-loading-orbit{

    position:absolute;

    inset:0;

    z-index:4;

    box-sizing:border-box;

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

    border-top-color:
        var(--hoho-red);

    border-right-color:
        rgba(255,0,0,.55);

    border-radius:22px;

    animation:
        hohoLoadingOrbit
        1.1s
        linear
        infinite;

}


@keyframes hohoLoadingOrbit{

    to{

        transform:
            rotate(360deg);

    }

}



/* ============================================================
   LOADING COPY
============================================================ */

.hoho-loading-kicker{

    display:block;

    margin-bottom:5px;

    color:
        var(--hoho-red);

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

}


.hoho-loading-screen h2{

    max-width:360px;

    margin:
        0
        0
        7px;

    color:#080808;

    font-size:35px;

    font-weight:700;

    line-height:1;

    letter-spacing:-.7px;

}


.hoho-loading-copy{

    max-width:330px;

    margin:0;

    color:#202020;

    font-size:15px;

    font-weight:500;

    line-height:1.42;

}



/* ============================================================
   LOADING STATUS
============================================================ */

.hoho-loading-status{

    min-height:49px;

    box-sizing:border-box;

    margin-top:20px;

    padding:
        11px
        14px;

    border:
        1px solid
        rgba(185,185,185,.88);

    border-radius:10px;

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

    color:#111;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:12px;

    font-weight:700;

    box-shadow:
        0 6px 19px
        rgba(0,0,0,.08);

    backdrop-filter:
        blur(7px);

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

}


.hoho-spinner{

    width:20px;

    height:20px;

    flex:
        0
        0
        20px;

    box-sizing:border-box;

    border:
        3px solid
        #dedede;

    border-top-color:
        var(--hoho-red);

    border-radius:50%;

    animation:
        hohoSpinner
        .7s
        linear
        infinite;

}


@keyframes hohoSpinner{

    to{

        transform:
            rotate(360deg);

    }

}



/* ============================================================
   ROUTE PROGRESS
============================================================ */

.hoho-loading-route-progress{

    margin-top:14px;

    display:flex;

    align-items:center;

    gap:7px;

    color:#333;

    font-size:10px;

    font-weight:700;

}


.hoho-loading-route-progress span{

    min-height:29px;

    box-sizing:border-box;

    padding:
        5px
        9px;

    border:
        1px solid
        rgba(200,200,200,.92);

    border-radius:18px;

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

    display:flex;

    align-items:center;

    gap:5px;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.04);

    backdrop-filter:
        blur(5px);

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

}


.hoho-loading-route-progress span i{

    color:
        var(--hoho-red);

}


.hoho-loading-route-progress > i{

    color:#777;

    font-size:8px;

}



/* ============================================================
   RESULT FOUND
============================================================ */

.hoho-found{

    margin-bottom:13px;

    display:flex;

    align-items:center;

    gap:7px;

    color:
        var(--hoho-green);

    font-size:14px;

    font-weight:700;

}



/* ============================================================
   STOP CARD
============================================================ */

.hoho-stop{

    padding:20px;

    border:
        1px solid
        var(--hoho-border);

    border-radius:12px;

    background:#fff;

}


.hoho-stop-heading{

    margin-bottom:13px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}


.hoho-stop-number{

    display:inline-flex;

    padding:
        7px
        11px;

    border-radius:6px;

    background:
        var(--hoho-red);

    color:#fff;

    font-size:12px;

    font-weight:700;

}


.hoho-route{

    color:
        var(--hoho-secondary);

    font-size:13px;

    font-weight:600;

}


.hoho-stop h2{

    margin:
        0
        0
        8px;

    color:#111;

    font-size:29px;

    font-weight:700;

    line-height:1.08;

}


.hoho-description{

    margin:0;

    color:
        var(--hoho-text);

    font-size:15px;

    line-height:1.45;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}



/* ============================================================
   STATS
============================================================ */

.hoho-stats{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:9px;

    margin-top:17px;

}


.hoho-stat{

    min-height:66px;

    box-sizing:border-box;

    padding:
        11px
        12px;

    border-radius:9px;

    background:
        var(--hoho-light);

    display:flex;

    align-items:center;

    gap:10px;

}


.hoho-stat > i{

    width:20px;

    color:
        var(--hoho-red);

    font-size:18px;

    text-align:center;

}


.hoho-stat small{

    display:block;

    margin-bottom:3px;

    color:
        var(--hoho-secondary);

    font-size:11px;

    font-weight:600;

}


.hoho-stat strong{

    display:block;

    color:#111;

    font-size:18px;

    font-weight:700;

}



/* ============================================================
   NEXT BUS
============================================================ */

.hoho-next-bus{

    min-height:78px;

    box-sizing:border-box;

    margin-top:9px;

    padding:
        11px
        12px;

    border:
        1px solid
        #cfcfcf;

    border-radius:10px;

    background:#fff;

    color:#111;

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

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

}


.hoho-next-bus:hover{

    border-color:#111;

    background:#fafafa;

    color:#111;

}


.hoho-next-bus:active{

    transform:
        scale(.995);

}


.hoho-next-bus-icon{

    width:45px;

    height:45px;

    flex:
        0
        0
        45px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

}


.hoho-next-bus-copy{

    flex:1;

    min-width:0;

}


.hoho-next-bus-copy > small{

    display:block;

    margin-bottom:3px;

    color:
        var(--hoho-secondary);

    font-size:11px;

    font-weight:700;

}


.hoho-next-bus-main{

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:
        5px
        8px;

}


#nearestNextBusTime{

    color:#111;

    font-size:23px;

    font-weight:700;

    line-height:1;

}


#nearestNextBusCountdown{

    color:
        var(--hoho-red);

    font-size:14px;

    font-weight:700;

}


.hoho-next-bus-status{

    display:block;

    margin-top:5px;

    color:
        var(--hoho-secondary);

    font-size:12px;

    line-height:1.25;

}



/* ============================================================
   WALK
============================================================ */

.hoho-next-walk{

    min-width:43px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

}


.hoho-next-walk small{

    font-size:9px;

    font-weight:700;

}


.hoho-next-walk i{

    width:31px;

    height:31px;

    border-radius:50%;

    background:#ececec;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

}


.hoho-next-bus:hover
.hoho-next-walk i{

    background:#111;

    color:#fff;

}



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

.hoho-book{

    position:relative;

    min-height:78px;

    box-sizing:border-box;

    margin-top:11px;

    padding:
        12px
        15px;

    border:
        1px solid
        #bc8f00;

    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            #fff47a 0%,
            #ffe033 43%,
            #ffc400 100%
        );

    color:#111;

    display:flex;

    align-items:center;

    gap:13px;

    text-decoration:none;

    overflow:hidden;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.95),

        inset 0 -2px 0
        rgba(130,90,0,.18),

        0 5px 13px
        rgba(130,90,0,.20);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.hoho-book::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:45%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.02)
        );

    pointer-events:none;

}


.hoho-book::after{

    content:"";

    position:absolute;

    top:-60%;

    left:-45%;

    width:25%;

    height:220%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.70),
            transparent
        );

    animation:
        hohoBookShine
        5.5s
        ease-in-out
        infinite;

    pointer-events:none;

}


@keyframes hohoBookShine{

    0%,
    72%{

        left:-45%;

    }


    94%,
    100%{

        left:125%;

    }

}


.hoho-book:hover{

    color:#111;

    transform:
        translateY(-1px);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.95),

        inset 0 -2px 0
        rgba(130,90,0,.18),

        0 8px 18px
        rgba(130,90,0,.28);

}



/* BOOK ICON */

.hoho-book-icon{

    position:relative;

    z-index:2;

    width:47px;

    height:47px;

    flex:
        0
        0
        47px;

    border-radius:10px;

    background:#111;

    color:
        var(--hoho-yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:19px;

}



/* BOOK COPY */

.hoho-book-copy{

    position:relative;

    z-index:2;

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

}


.hoho-book-message{

    min-height:14px;

    margin-bottom:3px;

    color:#493600;

    font-size:11px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:.5px;

    transition:
        opacity .18s ease,
        transform .18s ease;

}


.hoho-book-message.is-changing{

    opacity:0;

    transform:
        translateY(-3px);

}


.hoho-book-copy strong{

    color:#111;

    font-size:18px;

    font-weight:700;

    line-height:1.08;

}



/* BOOK ARROW */

.hoho-book-arrow{

    position:relative;

    z-index:2;

    width:35px;

    height:35px;

    flex:
        0
        0
        35px;

    border-radius:50%;

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

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

}


.hoho-book:hover
.hoho-book-arrow{

    background:#111;

    color:
        var(--hoho-yellow);

}



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

.hoho-footer-actions{

    margin-top:16px;

    padding-top:14px;

    border-top:
        1px solid
        #ddd;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:
        14px
        22px;

}


.hoho-link-button{

    min-height:36px;

    border:0;

    background:none;

    padding:
        6px
        2px;

    color:#222;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

}


.hoho-link-button i{

    margin-right:4px;

}


.hoho-link-button:hover{

    color:
        var(--hoho-red);

}



/* ============================================================
   ERROR
============================================================ */

.hoho-error-status{

    margin-bottom:13px;

    display:flex;

    align-items:center;

    gap:7px;

    color:
        var(--hoho-red);

    font-size:14px;

    font-weight:700;

}


.hoho-error-card{

    padding:20px;

    border:
        1px solid
        var(--hoho-border);

    border-radius:12px;

    background:#fff;

}


.hoho-error-heading{

    margin-bottom:16px;

    display:flex;

    align-items:center;

    gap:14px;

}


.hoho-error-heading small{

    display:block;

    margin-bottom:4px;

    color:
        var(--hoho-secondary);

    font-size:11px;

    font-weight:700;

}


.hoho-error-heading h2{

    margin:0;

    font-size:27px;

}


.hoho-icon{

    width:54px;

    height:54px;

    flex:
        0
        0
        54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.hoho-icon-error{

    background:#fff0f0;

    color:
        var(--hoho-red);

}


.hoho-primary{

    width:100%;

    min-height:58px;

    box-sizing:border-box;

    margin-top:22px;

    padding:
        0
        18px;

    border:0;

    border-radius:9px;

    background:
        var(--hoho-red);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-family:inherit;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

}


.hoho-primary:hover{

    background:
        var(--hoho-red-hover);

}



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

@media(max-width:600px){


    .hoho-finder{

        width:
            calc(100% - 14px);

        max-height:94vh;

        border-radius:12px;

    }


    .hoho-screen{

        padding:
            28px
            17px
            21px;

    }


    .hoho-start-screen{

        padding-top:25px;

    }


    .hoho-result-screen{

        padding-top:25px;

    }



    /* START */

    .hoho-start-hero{

        min-height:225px;

        padding:
            19px
            18px
            23px;

    }


    .hoho-route-visual{

        top:42px;

        right:-30px;

        transform:
            scale(.9)
            rotate(-7deg);

    }


    .hoho-start-pin{

        margin-top:27px;

        margin-bottom:15px;

    }


    .hoho-start-hero h2{

        font-size:31px;

    }


    .hoho-start-hero p{

        font-size:14px;

    }


    .hoho-start-action-area{

        padding:
            14px
            13px
            15px;

    }


    .hoho-start-features{

        min-height:43px;

        gap:6px;

        margin-bottom:11px;

    }


    .hoho-start-features span{

        min-height:34px;

        padding:
            7px
            9px;

        gap:5px;

        font-size:11.5px;

    }


    .hoho-start-features i{

        font-size:11px;

    }


    .hoho-find-button{

        min-height:68px;

        padding:
            9px
            10px;

        gap:10px;

    }


    .hoho-find-button-icon{

        width:44px;

        height:44px;

        flex-basis:44px;

        font-size:18px;

    }


    .hoho-find-button strong{

        font-size:17px;

    }


    .hoho-find-button-arrow{

        width:34px;

        height:34px;

        flex-basis:34px;

    }



    /* LOADING */

    .hoho-loading-screen{

        min-height:400px;

    }


    .hoho-loading-map{

        inset:-15px;

        transform:
            scale(1.09);

        filter:
            grayscale(.12)
            saturate(.58)
            contrast(.86)
            brightness(1.10);

    }


    .hoho-loading-map.is-ready{

        opacity:.42;

    }


    .hoho-loading-map-wash{

        background:

            radial-gradient(
                circle at 88% 7%,
                rgba(255,0,0,.08),
                transparent 39%
            ),

            linear-gradient(
                180deg,
                rgba(255,255,255,.70) 0%,
                rgba(255,255,255,.77) 48%,
                rgba(255,255,255,.87) 100%
            );

    }


    .hoho-loading-content{

        min-height:400px;

        padding:
            28px
            19px
            23px;

    }


    .hoho-loading-brand{

        top:21px;

        left:19px;

    }


    .hoho-loading-pin{

        width:68px;

        height:68px;

        margin:
            18px
            0
            17px;

    }


    .hoho-loading-pin-core{

        width:54px;

        height:54px;

        font-size:20px;

    }


    .hoho-loading-screen h2{

        font-size:30px;

    }


    .hoho-loading-copy{

        max-width:285px;

        font-size:14px;

    }


    .hoho-loading-status{

        margin-top:17px;

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

        font-size:11.5px;

    }


    .hoho-loading-route-progress{

        gap:5px;

    }


    .hoho-loading-route-progress span{

        padding:
            5px
            7px;

        gap:4px;

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

        font-size:9px;

    }



    /* RESULT */

    .hoho-finder h2{

        font-size:29px;

    }


    .hoho-intro{

        font-size:16px;

    }


    .hoho-found{

        font-size:13px;

    }


    .hoho-stop{

        padding:16px;

    }


    .hoho-route{

        display:none;

    }


    .hoho-stop h2{

        font-size:27px;

    }


    .hoho-description{

        font-size:14px;

        line-height:1.4;

        -webkit-line-clamp:1;

    }


    .hoho-stats{

        margin-top:14px;

        gap:8px;

    }


    .hoho-stat{

        min-height:61px;

        padding:
            9px
            10px;

        gap:8px;

    }


    .hoho-stat > i{

        font-size:16px;

    }


    .hoho-stat small{

        font-size:10px;

    }


    .hoho-stat strong{

        font-size:17px;

    }


    .hoho-next-bus{

        min-height:73px;

        padding:10px;

        gap:10px;

    }


    .hoho-next-bus-icon{

        width:41px;

        height:41px;

        flex-basis:41px;

        font-size:15px;

    }


    .hoho-next-bus-copy > small{

        font-size:10px;

    }


    #nearestNextBusTime{

        font-size:21px;

    }


    #nearestNextBusCountdown{

        font-size:13px;

    }


    .hoho-next-bus-status{

        font-size:11px;

    }


    .hoho-next-walk{

        min-width:36px;

    }


    .hoho-next-walk small{

        font-size:9px;

    }


    .hoho-next-walk i{

        width:29px;

        height:29px;

    }



    /* BOOK */

    .hoho-book{

        min-height:74px;

        padding:
            10px
            12px;

        gap:10px;

    }


    .hoho-book-icon{

        width:43px;

        height:43px;

        flex-basis:43px;

        font-size:17px;

    }


    .hoho-book-message{

        font-size:10px;

    }


    .hoho-book-copy strong{

        font-size:17px;

    }


    .hoho-book-arrow{

        width:33px;

        height:33px;

        flex-basis:33px;

    }


    .hoho-footer-actions{

        margin-top:13px;

        padding-top:11px;

        gap:
            7px
            14px;

    }


    .hoho-link-button{

        font-size:13px;

    }



    /* ERROR */

    .hoho-error-card{

        padding:16px;

    }


    .hoho-error-heading{

        gap:11px;

    }


    .hoho-error-heading h2{

        font-size:24px;

    }

}



/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media(max-width:360px){


    .hoho-start-features{

        gap:4px;

    }


    .hoho-start-features span{

        padding:
            6px
            7px;

        gap:4px;

        font-size:10.5px;

    }


    .hoho-find-button strong{

        font-size:16px;

    }


    .hoho-loading-route-progress{

        gap:4px;

    }


    .hoho-loading-route-progress > i{

        display:none;

    }


    .hoho-loading-route-progress span{

        padding:
            5px
            6px;

    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

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


    .hoho-pin-pulse,

    .hoho-find-button::after,

    .hoho-find-button strong,

    .hoho-find-button-arrow,

    .hoho-loading-pin-pulse,

    .hoho-loading-orbit,

    .hoho-spinner,

    .hoho-book::after{

        animation:none;

    }


    .hoho-loading-map{

        transition:none;

    }


    .hoho-book-message{

        transition:none;

    }

}