/* ===========================================================
   CELETIOUS FRAMEWORK
   Global Styles v1.0
   =========================================================== */

/* ===========================================================
   RESET
   =========================================================== */

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

html{
    background:#050608;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scrollbar-width:thin;
    scrollbar-color:
        rgba(168,198,255,.58)
        #050608;
}

body{
    min-height:100%;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#050608;
    color:#F5F5F5;
    font-family:var(--font-primary);
    font-size:var(--body-md);
    line-height:var(--line-body);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ===========================================================
   ELEMENT DEFAULTS
   =========================================================== */

img,
picture{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
    transition:
        color var(--duration-fast) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard);
}

button{
    border:none;
    outline:none;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

input,
textarea,
select{
    font:inherit;
    color:inherit;
    background:none;
    border:none;
    outline:none;
}

ul,
ol{
    list-style:none;
}

::selection{
    background:var(--color-accent);
    color:var(--color-bg);
}

/* ===========================================================
   SCROLLBAR
   =========================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:var(--color-bg);
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        to bottom,
        rgba(190,214,255,.72),
        rgba(168,198,255,.42)
    );
    border:3px solid #050608;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        to bottom,
        rgba(210,226,255,.88),
        rgba(168,198,255,.58)
    );
}

/* ===========================================================
   ACCESSIBLE SKIP LINK
   =========================================================== */

.skip-link{
    position:fixed;
    top:0;
    left:50%;
    z-index:3100;
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border:1px solid rgba(190,214,255,.42);
    border-radius:0 0 12px 12px;
    background:rgba(5,6,8,.97);
    color:#FFFFFF;
    font-size:15px;
    font-weight:var(--font-medium);
    line-height:1.4;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:
        0 12px 32px rgba(0,0,0,.46),
        0 0 24px rgba(168,198,255,.10);
    transform:translate(-50%,calc(-100% - 16px));
    transition:transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus,
.skip-link:focus-visible{
    transform:translate(-50%,0);
}

/* ===========================================================
   FOCUS AND READING WIDTH
   =========================================================== */

:focus-visible{
    outline:3px solid rgba(143,191,127,.55);
    outline-offset:4px;
    border-radius:8px;
}

p{
    max-width:var(--reading-width);
}

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

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}

@media (max-width:767px){

    main,
    header,
    footer,
    section{
        width:100%;
        max-width:100%;
    }

    .hero-content,
    .trust-container,
    .featured-work-container,
    .craft-container,
    .process-container,
    .services-container,
    .cta-container{
        width:100%;
        min-width:0;
        max-width:100%;
        margin-inline:auto;
        align-items:center;
        text-align:center;
    }

    .contact-panel-dialog,
    .project-brief-form,
    .project-brief-grid,
    .project-brief-field{
        min-width:0;
        max-width:100%;
    }

    .hero-title,
    .trust-title,
    .featured-title,
    .craft-title,
    .craft-closing,
    .process-title,
    .process-quote,
    .services-title,
    .cta-title{
        width:100%;
        max-width:100%;
        margin-inline:auto;
        text-align:center;
        white-space:normal;
        overflow-wrap:break-word;
        text-wrap:balance;
    }
}