/* OVERRIDE */
.text-xxxl{
    font-size:2.8rem;
}

/* ESSENTIALS */
:root{
    --dk-blue:#42798C;
    --dk-orange:#8E4C34;
    --dk-green:#25650E;
    --dk-gold:#BEB18B;
    --dk-silver:#F1F0F4;
    --dk-grey:#35363C;
    --dk-black:#0F0F0F;
    --dk-white:#FBFBFB;
}

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

.dk-serif{
    font-family:"Kaisei Decol", serif;
}

.dk-sans{
    font-family:"Inter", sans-serif;
}

.gold-frame{
    border:5px solid var(--dk-gold);
}

.gold-frame-thin{
    border:2px solid var(--dk-gold);
}

.ratio-almsquare{
    aspect-ratio:8/7;
}



/* =========================
   TEXT COLORS
========================= */
.text-dk-blue{ color:var(--dk-blue); }
.text-dk-orange{ color:var(--dk-orange); }
.text-dk-green{ color:var(--dk-green); }
.text-dk-gold{ color:var(--dk-gold); }
.text-dk-silver{ color:var(--dk-silver); }
.text-dk-grey{ color:var(--dk-grey); }
.text-dk-black{ color:var(--dk-black); }
.text-dk-white{ color:var(--dk-white); }

/* =========================
   BACKGROUND COLORS
========================= */
.bg-dk-blue{ background-color:var(--dk-blue); }
.bg-dk-orange{ background-color:var(--dk-orange); }
.bg-dk-green{ background-color:var(--dk-green); }
.bg-dk-gold{ background-color:var(--dk-gold); }
.bg-dk-silver{ background-color:var(--dk-silver); }
.bg-dk-grey{ background-color:var(--dk-grey); }
.bg-dk-black{ background-color:var(--dk-black); }
.bg-dk-white{ background-color:var(--dk-white); }

/* =========================
   BORDER COLORS
========================= */
.border-dk-blue{ border-color:var(--dk-blue); }
.border-dk-orange{ border-color:var(--dk-orange); }
.border-dk-green{ border-color:var(--dk-green); }
.border-dk-gold{ border-color:var(--dk-gold); }
.border-dk-silver{ border-color:var(--dk-silver); }
.border-dk-grey{ border-color:var(--dk-grey); }
.border-dk-black{ border-color:var(--dk-black); }
.border-dk-white{ border-color:var(--dk-white); }

/* =========================
   FILL / STROKE (SVG SUPPORT)
========================= */
.fill-dk-blue{ fill:var(--dk-blue); }
.fill-dk-orange{ fill:var(--dk-orange); }
.fill-dk-green{ fill:var(--dk-green); }
.fill-dk-gold{ fill:var(--dk-gold); }
.fill-dk-silver{ fill:var(--dk-silver); }
.fill-dk-grey{ fill:var(--dk-grey); }
.fill-dk-black{ fill:var(--dk-black); }
.fill-dk-white{ fill:var(--dk-white); }

.stroke-dk-blue{ stroke:var(--dk-blue); }
.stroke-dk-orange{ stroke:var(--dk-orange); }
.stroke-dk-green{ stroke:var(--dk-green); }
.stroke-dk-gold{ stroke:var(--dk-gold); }
.stroke-dk-silver{ stroke:var(--dk-silver); }
.stroke-dk-grey{ stroke:var(--dk-grey); }
.stroke-dk-black{ stroke:var(--dk-black); }
.stroke-dk-white{ stroke:var(--dk-white); }

/* =========================
   HOVER STATES
========================= */
.hover-text-dk-blue:hover{ color:var(--dk-blue); }
.hover-text-dk-orange:hover{ color:var(--dk-orange); }
.hover-text-dk-green:hover{ color:var(--dk-green); }
.hover-text-dk-gold:hover{ color:var(--dk-gold); }

.hover-bg-dk-blue:hover{ background-color:var(--dk-blue); }
.hover-bg-dk-orange:hover{ background-color:var(--dk-orange); }
.hover-bg-dk-green:hover{ background-color:var(--dk-green); }
.hover-bg-dk-gold:hover{ background-color:var(--dk-gold); }

/* =========================
   OUTLINE (useful for focus)
========================= */
.outline-dk-blue{ outline:2px solid var(--dk-blue); }
.outline-dk-orange{ outline:2px solid var(--dk-orange); }
.outline-dk-green{ outline:2px solid var(--dk-green); }
.outline-dk-gold{ outline:2px solid var(--dk-gold); }


#header-banner{
    object-position:center top;
}

/* wrapper */
.dk-hover-card{
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

/* overlay film */
.dk-hover-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    transition:background var(--t-med) var(--ease-std);
}

/* text block */
.dk-hover-content{
    position:absolute;
    bottom:1rem;
    left:1rem;
    right:1rem;
    color:var(--dk-white);
    opacity:0;
    transform:translateY(10px);
    transition:opacity var(--t-med) var(--ease-std), transform var(--t-med) var(--ease-std);
}

/* hover state */
.dk-hover-card:hover .dk-hover-overlay{
    background:rgba(0,0,0,0.45);
}

.dk-hover-card:hover .dk-hover-content{
    opacity:1;
    transform:translateY(0);
}



.dk-steps{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:0;
}

.dk-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    max-width:20rem;
}

.dk-step-circle{
    width:15rem;
    height:15rem;
    border-radius:50%;
    border:4px solid var(--dk-blue);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--dk-blue);
    font-size:8rem;
    line-height:1;
    font-family:"Kaisei Decol", serif;
}

.dk-step-line{
    flex:1;
    height:0;
    border-top:4px solid var(--dk-blue);
    margin-top:7.5rem;
}

.dk-step-text{
    margin-top:1rem;
    color:var(--dk-blue);
    font-family:"Kaisei Decol", serif;
    font-size:1.5rem;
    max-width:15rem;
}



/* =========================
   CAROUSEL
========================= */
.dk-carousel{
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:100%;
}

.dk-carousel-track{
    display:flex;
    width:100%;
    transition:transform var(--t-slow) var(--ease-std);
}

.dk-carousel-slide{
    min-width:100%;
    max-width:100%;
    flex:0 0 100%;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    box-sizing:border-box;
    padding-left:var(--space-3);
    padding-right:var(--space-3);
}

/* =========================
   CARD
========================= */
.dk-review-card{
    width:100%;
    max-width:32rem;
    box-sizing:border-box;
    background:var(--dk-white);
    box-shadow:var(--shadow-md);
    border-radius:var(--radius-md);
    padding:var(--space-7);
}

.dk-review-stars{
    color:var(--dk-gold);
    font-size:1.25rem;
}

.dk-review-text{
    margin-top:var(--space-5);
    color:var(--dk-grey);
}

.dk-review-name{
    margin-top:var(--space-4);
    font-weight:600;
    color:var(--dk-blue);
}

/* =========================
   DOTS
========================= */
.dk-carousel-dots{
    display:flex;
    justify-content:center;
    gap:0.5rem;
    margin-top:1rem;
}

.dk-carousel-dot{
    width:0.75rem;
    height:0.75rem;
    border-radius:50%;
    background:var(--dk-white);
    opacity:0.4;
    cursor:pointer;
    transition:opacity var(--t-fast), transform var(--t-fast);
}

.dk-carousel-dot.active{
    opacity:1;
    transform:scale(1.2);
    background:var(--dk-white);
}

@media (max-width: 640px) {
    .dk-carousel-slide{
        padding-left:var(--space-2);
        padding-right:var(--space-2);
    }

    .dk-review-card{
        max-width:100%;
        padding:var(--space-5);
    }

    .dk-review-card .region-row{
        flex-wrap:wrap;
        gap:var(--space-2);
    }

    .dk-review-name{
        width:100%;
        margin-top:0;
    }

    .dk-review-stars{
        width:100%;
    }
}

@media (max-width: 480px) {
    .dk-review-card{
        padding:var(--space-4);
    }

    .dk-review-text{
        margin-top:var(--space-4);
    }
}



.dk-bg-section{
    position:relative;
    overflow:hidden;
}

.dk-bg-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.dk-bg-content{
    position:relative;
    z-index:20;
}

@media (max-width: 1024px) {
    #footer-inner{
        align-items:center;
    }

    #hero-inner{
        align-items:center;
    }

    .dk-step-circle{
        width:12rem;
        height:12rem;
        border-radius:50%;
        border:4px solid var(--dk-blue);
        display:flex;
        align-items:center;
        justify-content:center;
        color:var(--dk-blue);
        font-size:8rem;
        line-height:1;
        font-family:"Kaisei Decol", serif;
    }

    .dk-step-line{
        flex:1;
        height:0;
        border-top:4px solid var(--dk-blue);
        margin-top:6rem;
    }

    .dk-step-text{
        margin-top:1rem;
        color:var(--dk-blue);
        font-family:"Kaisei Decol", serif;
        font-size:1.1rem;
        max-width:11rem;
    }

    #guides-title{
        text-align:center;
    }

    #together-title{
        text-align:center;
    }

    #recent-title{
        text-align:center;
    }
}


#navbar-wrapper{
    position:relative;
    flex-wrap:wrap;
}

#mobile-navbar-toggle{
    border:0;
    cursor:pointer;
    font-family:inherit;
}

#mobile-navbar-menu{
    position:absolute;
    top:100%;
    right:0;
    width:13rem;
    max-width:calc(100vw - var(--space-6));
    z-index:var(--z-100);
    border:1px solid rgba(66,121,140,0.2);
}

#mobile-navbar-menu a{
    text-decoration:none;
}

#mobile-navbar-menu.open{
    display:flex !important;
}

@media (min-width: 1025px) {
    #mobile-navbar-menu{
        display:none !important;
    }

    #mobile-navbar-toggle{
        display:none !important;
    }
}

@media (max-width: 768px) {
    #footer-inner{
        align-items:flex-start;
    }

    #hero-tagline{
        align-items:center;
    }

    #hero-tagline-dk{
        font-size:3rem;
    }

    #reviews-title{
        text-align:center;
    }

    #header-tagline{
        font-size:3.3rem;
    }
}

@media (max-width: 640px){
    .dk-steps{
        flex-direction: column;
        align-items: center;
        gap:2rem;
    }

    .dk-step-line{
        display:none;
    }

    .extra-shrink{
        font-size:2.2rem;
    }
}




.dk-contact-status{
    min-height:18rem;
}

.dk-contact-sent-mark{
    width:5.5rem;
    height:5.5rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--dk-blue);
    color:var(--dk-white);
    font-size:3.2rem;
    font-weight:700;
    animation:dkContactPop 420ms ease-out both;
}

.dk-contact-error-mark{
    width:5.5rem;
    height:5.5rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--dk-orange);
    color:var(--dk-white);
    font-size:3.2rem;
    font-weight:700;
    animation:dkContactShake 420ms ease-out both;
}

.dk-contact-form-error{
    width:100%;
}

.border-none{
    border:0;
}

@keyframes dkContactPop{
    0%{
        opacity:0;
        transform:scale(0.5) rotate(-8deg);
    }

    70%{
        opacity:1;
        transform:scale(1.12) rotate(2deg);
    }

    100%{
        opacity:1;
        transform:scale(1) rotate(0);
    }
}

@keyframes dkContactShake{
    0%, 100%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-6px);
    }

    50%{
        transform:translateX(6px);
    }

    75%{
        transform:translateX(-3px);
    }
}