:root{
    --navy:#071a35;
    --cyan:#27dfe4;
    --muted:#68768a;
    --line:#071a3517;
    --ease:cubic-bezier(.22,1,.36,1)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    color:var(--navy);
    font-family:Inter,Arial,sans-serif;
    background:#fff
}

a{
    text-decoration:none;
    color:inherit
}


/* =========================
   LOADER
========================= */

.loader{
    position:fixed;
    inset:0;
    background:#fff;
    z-index:9999;
    display:grid;
    place-items:center;
    transition:.7s
}

.loader.hide{
    opacity:0;
    pointer-events:none
}

.loader-mark{
    width:90px;
    height:90px;
    object-fit:contain;
    display:block;
    animation:loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse{
    0%,100%{
        transform:scale(.92);
        opacity:.75;
    }

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


/* =========================
   NAVIGATION
========================= */

.nav{
    position:fixed;
    z-index:100;
    top:0;
    left:0;
    width:100%;
    height:76px;
    padding:0 5vw;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(255,255,255,.72);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);

    border-bottom:1px solid rgba(7,26,53,.07);

    box-shadow:0 4px 24px rgba(7,26,53,.035)
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800
}

.logo img{
    width:38px;
    height:38px;
    object-fit:contain
}

.desktop-nav{
    display:flex;
    align-items:center;
    gap:34px;

    font-size:12px;
    font-weight:600
}

.desktop-nav a{
    position:relative;
    transition:color .3s ease
}

.desktop-nav a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;
    height:1px;

    background:var(--cyan);

    transition:width .35s var(--ease)
}

.desktop-nav a:hover{
    color:var(--cyan)
}

.desktop-nav a:hover::after{
    width:100%
}

.nav-cta{
    font-size:11px;
    font-weight:700;

    background:var(--navy);
    color:white;

    padding:12px 18px;

    border-radius:999px;

    transition:
        transform .3s var(--ease),
        background .3s ease
}

.nav-cta:hover{
    transform:translateY(-2px);
    background:#102b50
}


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


.hero p{
    position:relative;
    display:inline-block;
    z-index:1;
}

.hero p::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(
        circle,
        rgba(39,223,228,.12) 0%,
        rgba(39,223,228,.06) 25%,
        rgba(39,223,228,.025) 45%,
        transparent 70%
    );
    filter:blur(12px);
    z-index:-1;
    pointer-events:none;
    animation:ambientHero 12s ease-in-out infinite;
}

@keyframes ambientHero{
    0%,100%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-47%,-53%) scale(1.12);
    }
}

.hero{
    min-height:100vh;

    padding:145px 5vw 65px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;

    text-align:center;

    overflow:hidden
}

.hero-top{
    max-width:900px
}

.eyebrow{
    font-size:10px;
    letter-spacing:.2em;
    font-weight:800;
    color:#0cbcc2
}

.hero h1{
    font-size:clamp(54px,9vw,124px);

    line-height:.88;
    letter-spacing:-.075em;

    margin:0
}

.hero h1 span{
    color:#20cfd4
}

.hero-sub{
    color:var(--muted);

    font-size:14px;

    margin:25px auto 0;

    max-width:470px;

    line-height:1.7
}



/* =========================
   CODE EXPERIENCE
========================= */

.code-stage{
    position:relative;

    width:min(900px,92vw);
    height:310px;

    margin-top:25px
}

.code-window{
    position:absolute;

    left:50%;
    top:20px;

    width:min(610px,85vw);

    transform:translateX(-50%);

    text-align:left;

    border:1px solid #071a3514;
    border-radius:18px;

    background:#fbfcfe;

    box-shadow:0 30px 90px #071a3512;

    overflow:hidden;

    transition:1.1s var(--ease)
}


.window-bar{
    height:38px;

    border-bottom:1px solid var(--line);

    display:flex;
    align-items:center;

    gap:6px;

    padding:0 14px
}

.window-bar i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#c6cdd6
}

.window-bar span{
    margin-left:9px;

    color:#8a96a6;

    font:10px monospace
}



pre{
    padding:27px 32px;

    margin:0;

    font:13px/1.75 "SFMono-Regular",Consolas,monospace;

    color:#738197
}

.tag{
    color:#1469d2
}

.attr{
    color:#9b3ac2
}

.str{
    color:#149b75
}

.c1{
    color:#b7c0cc
}

.txt{
    color:var(--navy)
}



/* =========================
   BUILD LINE
========================= */

.build-line{
    position:absolute;

    left:50%;
    bottom:10px;

    width:2px;
    height:75px;

    background:#e6ebf0;

    transform:translateX(-50%);

    overflow:hidden
}

.build-line span{
    display:block;

    width:100%;
    height:35%;

    background:var(--cyan);

    animation:scan 2.2s ease-in-out infinite
}

@keyframes scan{
    50%{
        transform:translateY(190%)
    }
}


/* =========================
   DIGITAL EXPERIENCE CARD
========================= */

.experience-card{
    animation:experienceFloat 7s ease-in-out infinite;
    will-change:transform;
}

@keyframes experienceFloat{
    0%{
        transform:translate(-50%,0) rotate(0deg);
    }

    25%{
        transform:translate(calc(-50% + 3px),-5px) rotate(.15deg);
    }

    50%{
        transform:translate(-50%,-9px) rotate(0deg);
    }

    75%{
        transform:translate(calc(-50% - 3px),-5px) rotate(-.15deg);
    }

    100%{
        transform:translate(-50%,0) rotate(0deg);
    }
}

.experience-card{
    position:absolute;

    left:50%;
    top:25px;

    width:min(780px,90vw);
    height:230px;

    transform:translate(-50%,20px) scale(.92);

    opacity:0;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #fff,
        #f3f8fc
    );

    border:1px solid #071a3514;

    box-shadow:0 35px 100px #071a3518;

    overflow:hidden;

    text-align:left;

    transition:1.1s var(--ease)
}



.mini-nav{
    height:44px;

    padding:0 22px;

    border-bottom:1px solid var(--line);

    display:flex;
    align-items:center;
    justify-content:space-between;

    font-size:9px
}

.mini-nav b{
    letter-spacing:-.03em
}

.mini-nav span{
    color:#8390a1
}

.experience-copy{
    padding:30px 40px;

    position:relative;

    z-index:2
}

.experience-copy small{
    font-size:8px;

    letter-spacing:.18em;

    color:#11aeb4
}

.experience-copy strong{
    display:block;

    font-size:37px;

    line-height:.94;

    letter-spacing:-.055em;

    margin-top:10px
}

.experience-copy em{
    display:block;

    font-style:normal;

    color:#7d8999;

    font-size:11px;

    margin-top:15px
}


/* =========================
   RAJENDEV R LOGO
========================= */

.experience-orb{
    position:absolute;

    width:300px;
    height:300px;

    right:-45px;
    bottom:-105px;

    background-image:url("./assets/logo.png");

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    border-radius:0;

    opacity:.96;

    filter:
        drop-shadow(
            0 22px 30px rgba(7,26,53,.16)
        )
        drop-shadow(
            0 0 35px rgba(39,223,228,.12)
        );

    transform:rotate(-8deg);

    transform-origin:center;

    z-index:3;

    pointer-events:none
}

.experience-orb::before{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        circle,
        rgba(39,223,228,.18) 0%,
        rgba(39,223,228,.06) 42%,
        transparent 72%
    );

    filter:blur(25px);

    z-index:-1
}

.code-stage.built .experience-orb{
    transform:rotate(-8deg) scale(1.04)
}

.code-stage.built .code-window{
    opacity:0;

    transform:
        translate(-50%,-35px)
        scale(.85)
}

.code-stage.built .experience-card{
    opacity:1;

    transform:
        translate(-50%,0)
        scale(1)
}


/* =========================
   EXPLORE BUTTON
========================= */

.explore{
    border:0;

    background:transparent;

    font-size:11px;

    letter-spacing:.16em;

    font-weight:800;

    color:var(--navy);

    cursor:pointer;

    transition:color .3s ease
}

.explore:hover{
    color:var(--cyan)
}

.explore span{
    color:var(--cyan);

    margin-left:10px
}


/* =========================================================
   OUR WORK
========================================================= */

.work-section{
    position:relative;

    padding:clamp(120px,14vw,190px) 5vw;

    background:#fff;

    overflow:hidden;
}

.work-container{
    width:100%;
    max-width:1280px;

    margin:0 auto;
}


/* =========================
   WORK HEADING
========================= */

.work-heading{
    max-width:760px;

    margin-bottom:clamp(60px,8vw,100px);
}

.section-eyebrow{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:28px;

    color:var(--muted);

    font-size:10px;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;
}

.eyebrow-line{
    width:28px;
    height:1px;

    display:block;

    background:var(--cyan);
}

.work-heading h2{
    margin:0;

    color:var(--navy);

    font-size:clamp(48px,7vw,92px);

    line-height:.94;

    letter-spacing:-.065em;

    font-weight:600;
}

.work-heading h2 span{
    color:#9aa5b3;
}

.work-heading p{
    max-width:500px;

    margin:30px 0 0;

    color:var(--muted);

    font-size:15px;

    line-height:1.7;

    letter-spacing:-.01em;
}


/* =========================
   FEATURED PROJECT
========================= */

.work-project{
    width:100%;
}


/* =========================
   WEBSITE PREVIEW
========================= */

.work-preview{
    position:relative;

    width:100%;

    background:#f4f6f8;

    border:1px solid rgba(7,26,53,.08);

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(7,26,53,.09),
        0 8px 25px rgba(7,26,53,.04);

    transition:
        transform .7s var(--ease),
        box-shadow .7s var(--ease);
}

.work-preview:hover{
    transform:translateY(-6px);

    box-shadow:
        0 45px 100px rgba(7,26,53,.13),
        0 12px 35px rgba(7,26,53,.06);
}


/* =========================
   PREVIEW TOP BAR
========================= */

.preview-topbar{
    height:46px;
    width:100%;

    display:flex;

    align-items:center;

    padding:0 18px;

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

    border-bottom:1px solid rgba(7,26,53,.07);

    position:relative;

    z-index:3;
}

.preview-dots{
    display:flex;

    align-items:center;

    gap:6px;

    width:80px;
}

.preview-dots span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#c7ced6;
}

.preview-address{
    position:absolute;

    left:50%;

    transform:translateX(-50%);

    max-width:55%;

    padding:6px 18px;

    border-radius:999px;

    background:rgba(7,26,53,.045);

    color:#8792a0;

    font-size:9px;

    font-weight:500;

    letter-spacing:.01em;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.preview-spacer{
    margin-left:auto;

    width:80px;
}


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

.preview-screen{
    position:relative;

    width:100%;

    height:min(58vw,680px);

    background:#fff;

    overflow:hidden;
}

.preview-screen iframe{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;

    background:#fff;
}


/* =========================
   PREVIEW HOVER
========================= */

.preview-overlay{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(7,26,53,.08);

    opacity:0;

    text-decoration:none;

    transition:
        opacity .45s ease,
        background .45s ease;

    z-index:5;
}

.work-preview:hover .preview-overlay{
    opacity:1;

    background:rgba(7,26,53,.18);
}

.preview-overlay-text{
    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:13px 19px;

    border-radius:999px;

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

    color:var(--navy);

    font-size:12px;

    font-weight:600;

    box-shadow:0 12px 35px rgba(7,26,53,.16);

    transform:translateY(10px);

    transition:
        transform .5s var(--ease);
}

.work-preview:hover .preview-overlay-text{
    transform:translateY(0);
}

.preview-overlay-text span{
    font-size:15px;

    transition:transform .3s ease;
}

.preview-overlay:hover .preview-overlay-text span{
    transform:translate(3px,-3px);
}


/* =========================
   PROJECT INFORMATION
========================= */

.work-info{
    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:clamp(40px,8vw,120px);

    padding:46px 8px 0;
}

.work-meta{
    display:flex;

    align-items:center;

    gap:13px;

    height:max-content;

    padding-top:8px;

    color:#8a95a3;

    font-size:9px;

    font-weight:700;

    letter-spacing:.14em;
}

.meta-line{
    width:32px;
    height:1px;

    background:rgba(7,26,53,.16);
}

.work-content{
    max-width:650px;
}

.work-title-block{
    margin-bottom:24px;
}

.work-title-block h3{
    margin:0;

    color:var(--navy);

    font-size:clamp(38px,5vw,64px);

    line-height:.95;

    letter-spacing:-.06em;

    font-weight:600;
}

.work-subtitle{
    margin:13px 0 0;

    color:#7b8795;

    font-size:14px;

    font-weight:500;

    letter-spacing:-.01em;
}

.work-description{
    max-width:570px;

    margin:0 0 30px;

    color:var(--muted);

    font-size:15px;

    line-height:1.75;

    letter-spacing:-.01em;
}

.work-link{
    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--navy);

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    padding-bottom:7px;

    border-bottom:1px solid rgba(7,26,53,.25);

    transition:
        color .3s ease,
        border-color .3s ease;
}

.work-link-arrow{
    font-size:15px;

    transition:
        transform .35s var(--ease);
}

.work-link:hover{
    color:var(--cyan);

    border-color:var(--cyan);
}

.work-link:hover .work-link-arrow{
    transform:translate(4px,-4px);
}


/* =========================
   WORK REVEAL
========================= */

.work-section .reveal{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .9s ease,
        transform 1s var(--ease);
}

.work-section .reveal.is-visible{
    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section{
    padding:145px 5vw
}

.capabilities{
    background:#f7f9fc
}

.section-head{
    max-width:900px;

    margin-bottom:75px
}

.section-head h2{
    font-size:clamp(50px,7vw,95px);

    line-height:.9;

    letter-spacing:-.07em;

    margin:0
}

.section-head h2 span{
    color:#20cfd4
}

.section-head>p:last-child{
    max-width:570px;

    color:var(--muted);

    line-height:1.8;

    font-size:14px;

    margin-top:25px
}


/* =========================
   SERVICES
========================= */

.service-grid{
    display:grid;

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

    border-top:1px solid var(--line)
}

.service-grid article{
    min-height:350px;

    padding:40px 32px;

    border-right:1px solid var(--line)
}

.service-grid article:last-child{
    border:0
}

.service-grid b{
    font-size:11px;

    color:#13b9bf
}

.service-grid h3{
    font-size:27px;

    letter-spacing:-.045em;

    margin-top:100px
}

.service-grid p,
.steps p,
.price p{
    color:var(--muted);

    font-size:13px;

    line-height:1.75
}


/* =========================
   PIPELINE
========================= */

.pipeline{
    background:#fff
}

.steps{
    border-top:1px solid var(--line)
}

.steps article{
    display:grid;

    grid-template-columns:100px 1fr;

    gap:30px;

    padding:35px 0;

    border-bottom:1px solid var(--line)
}

.steps article>b{
    font-size:12px;

    color:#13b9bf
}

.steps small{
    font-size:9px;

    letter-spacing:.15em;

    color:#8995a5
}

.steps h3{
    font-size:28px;

    margin:8px 0
}

.steps p{
    max-width:620px;

    margin:0
}


/* =========================
   PRICING
========================= */

.pricing{
    background:#f7f9fc
}

.price-grid{
    display:grid;

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

    gap:20px
}

.price{
    background:#fff;

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

    border-radius:24px;

    padding:30px;

    min-height:430px
}

.price.featured{
    box-shadow:0 20px 60px #071a350c
}

.price-top{
    display:flex;

    justify-content:space-between;

    gap:10px;

    font-size:9px;

    letter-spacing:.1em;

    color:#708096
}

.price-top small{
    color:#0db7bd
}

.price h3{
    font-size:30px;

    letter-spacing:-.05em;

    margin:50px 0 12px
}

.price>p{
    max-width:520px;

    min-height:48px
}

.price>strong{
    display:block;

    font-size:32px;

    letter-spacing:-.05em;

    margin:25px 0
}

.price>strong small{
    font-size:9px;

    color:#8995a5;

    font-weight:500
}

.price ul{
    list-style:none;

    padding:18px 0 0;

    margin:0;

    border-top:1px solid var(--line)
}

.price li{
    font-size:11px;

    line-height:1.6;

    margin:8px 0;

    color:#536175
}

.price li.no{
    color:#a2abb7
}


/* =========================
   CONTACT
========================= */

.contact{
    min-height:72vh;

    padding:130px 5vw;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center
}

.contact h2{
    font-size:clamp(55px,8vw,110px);

    line-height:.9;

    letter-spacing:-.075em;

    margin:0
}

.contact h2 span{
    color:#20cfd4
}

.contact a{
    margin-top:45px;

    padding:15px 22px;

    background:var(--navy);

    color:#fff;

    border-radius:999px;

    font-size:11px;

    font-weight:800
}


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

footer{
    background:var(--navy);

    color:#fff;

    padding:60px 5vw 28px;

    display:grid;

    grid-template-columns:1fr auto;

    gap:50px
}

.footer-brand{
    display:flex;

    align-items:center;

    gap:14px
}

.footer-brand img{
    width:45px
}

.footer-brand p{
    font-size:11px;

    color:#ffffff70;

    margin:5px 0 0
}

.footer-links{
    display:flex;

    gap:25px;

    font-size:11px;

    font-weight:600
}

.footer-links a:hover{
    color:var(--cyan)
}

footer small{
    grid-column:1/-1;

    padding-top:25px;

    border-top:1px solid #fff1;

    font-size:9px;

    color:#ffffff55
}


/* =========================================================
   MOBILE HAMBURGER MENU
========================================================= */

.menu-toggle{
    display:none;

    width:42px;
    height:42px;

    padding:0;
    margin:0;

    border:0;

    background:transparent;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

    position:relative;

    z-index:10002;
}

.menu-toggle span{
    display:block;

    width:20px;
    height:1.5px;

    background:var(--navy);

    border-radius:999px;

    transition:
        transform .45s var(--ease),
        opacity .25s ease,
        width .35s var(--ease);
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    width:0;

    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
}


/* =========================================================
   MOBILE MENU PANEL
========================================================= */

.mobile-menu{
    position:fixed;

    inset:0;

    z-index:99;

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

    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(-10px);

    transition:
        opacity .4s ease,
        transform .55s var(--ease),
        visibility .4s ease;
}

.mobile-menu.active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);
}

.mobile-menu-inner{
    min-height:100%;

    padding:120px 24px 40px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.mobile-menu-inner > a{
    width:100%;

    padding:20px 0;

    color:var(--navy);

    text-decoration:none;

    font-size:clamp(30px,8vw,42px);

    font-weight:600;

    letter-spacing:-.055em;

    border-bottom:1px solid var(--line);

    opacity:0;

    transform:translateY(18px);

    transition:
        opacity .5s ease,
        transform .6s var(--ease),
        color .25s ease;
}

.mobile-menu.active .mobile-menu-inner > a{
    opacity:1;

    transform:translateY(0);
}

.mobile-menu.active .mobile-menu-inner > a:nth-child(1){
    transition-delay:.08s;
}

.mobile-menu.active .mobile-menu-inner > a:nth-child(2){
    transition-delay:.13s;
}

.mobile-menu.active .mobile-menu-inner > a:nth-child(3){
    transition-delay:.18s;
}

.mobile-menu.active .mobile-menu-inner > a:nth-child(4){
    transition-delay:.23s;
}

.mobile-menu.active .mobile-menu-inner > a:nth-child(5){
    transition-delay:.28s;
}

.mobile-menu-inner > a:hover{
    color:var(--cyan);
}

.mobile-menu-inner .mobile-cta{
    width:auto;

    margin-top:28px;

    padding:14px 20px;

    display:inline-flex;

    align-items:center;

    gap:12px;

    border:0;

    border-radius:999px;

    background:var(--navy);

    color:#fff;

    font-size:14px;

    letter-spacing:-.02em;
}

.mobile-menu-inner .mobile-cta span{
    transition:transform .3s ease;
}

.mobile-menu-inner .mobile-cta:hover span{
    transform:translate(3px,-3px);
}


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

@media(max-width:760px){

    /* NAV */

    .nav{
        padding:0 18px
    }

    .desktop-nav{
        display:none
    }

    .nav-cta{
        display:none
    }

    .menu-toggle{
        display:flex
    }


    /* HERO */

    .hero{
        padding:125px 18px 50px
    }

    .hero h1{
        font-size:54px
    }

    .code-stage{
        height:270px
    }

    .code-window{
        width:94vw
    }

    .code-window pre{
        font-size:10px;

        padding:20px
    }

    .experience-card{
        width:94vw
    }

    .experience-copy{
        padding:28px
    }

    .experience-copy strong{
        font-size:29px
    }

    .mini-nav span{
        display:none
    }


    /* R LOGO MOBILE */

    .experience-orb{
        width:220px;
        height:220px;

        right:-40px;
        bottom:-75px
    }


    /* OUR WORK */

    .work-section{
        padding:100px 6vw 120px;
    }

    .work-heading{
        margin-bottom:55px;
    }

    .section-eyebrow{
        margin-bottom:22px;
    }

    .work-heading h2{
        font-size:clamp(43px,13vw,66px);
    }

    .work-heading p{
        margin-top:24px;

        font-size:14px;

        line-height:1.65;
    }

    .work-preview{
        border-radius:20px;
    }

    .preview-topbar{
        height:38px;

        padding:0 13px;
    }

    .preview-dots{
        gap:5px;

        width:60px;
    }

    .preview-dots span{
        width:6px;
        height:6px;
    }

    .preview-address{
        max-width:60%;

        padding:5px 11px;

        font-size:7px;
    }

    .preview-spacer{
        width:60px;
    }

    .preview-screen{
        height:72vw;

        min-height:310px;
    }

    .preview-overlay{
        display:none;
    }

    .work-info{
        grid-template-columns:1fr;

        gap:24px;

        padding:32px 3px 0;
    }

    .work-meta{
        padding-top:0;

        font-size:8px;

        gap:10px;
    }

    .meta-line{
        width:22px;
    }

    .work-title-block{
        margin-bottom:18px;
    }

    .work-title-block h3{
        font-size:clamp(38px,11vw,55px);
    }

    .work-subtitle{
        font-size:13px;

        margin-top:10px;
    }

    .work-description{
        font-size:14px;

        line-height:1.7;

        margin-bottom:25px;
    }

    .work-link{
        font-size:12px;
    }


    /* GENERAL SECTIONS */

    .section{
        padding:95px 20px
    }

    .section-head{
        margin-bottom:50px
    }

    .section-head h2{
        font-size:54px
    }


    /* SERVICES */

    .service-grid,
    .price-grid{
        grid-template-columns:1fr
    }

    .service-grid article{
        border-right:0;

        border-bottom:1px solid var(--line);

        min-height:280px;

        padding:30px 0
    }

    .service-grid h3{
        margin-top:65px
    }


    /* PIPELINE */

    .steps article{
        grid-template-columns:55px 1fr;

        gap:12px
    }

    .steps h3{
        font-size:23px
    }


    /* PRICING */

    .price{
        min-height:auto
    }


    /* CONTACT */

    .contact h2{
        font-size:56px
    }


    /* FOOTER */

    footer{
        grid-template-columns:1fr
    }

    .footer-links{
        grid-column:1
    }

    .footer-brand{
        grid-column:1
    }

}


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

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

    html{
        scroll-behavior:auto;
    }

    .work-section .reveal{
        opacity:1;

        transform:none;

        transition:none;
    }

    .work-preview,
    .preview-overlay,
    .preview-overlay-text,
    .work-link,
    .work-link-arrow{
        transition:none;
    }

}