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

:root{
    --ivory:#f4efe7;
    --paper:#fbf8f3;
    --ink:#171714;
    --muted:#7b756c;
    --gold:#a7865f;
    --line:rgba(23,23,20,.14);
    --ease:cubic-bezier(.23,1,.32,1)
}

html{
    scroll-behavior:smooth
}

body{
    font-family:Manrope,sans-serif;
    background:var(--paper);
    color:var(--ink);
    overflow-x:hidden
}

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

button,
input,
textarea,
select{
    font:inherit
}


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

.loader{
    position:fixed;
    inset:0;
    background:#151512;
    color:var(--ivory);
    z-index:9999;
    display:grid;
    place-content:center;
    text-align:center;
    transition:
        opacity .8s var(--ease),
        visibility .8s
}

.loader.hide{
    opacity:0;
    visibility:hidden
}

.loader-brand{
    font-family:"Cormorant Garamond";
    font-size:clamp(54px,9vw,140px);
    letter-spacing:.08em
}

.loader span{
    font:10px "DM Mono";
    letter-spacing:.32em
}

.loader-line{
    width:220px;
    height:1px;
    background:#3b3933;
    margin:18px auto;
    overflow:hidden
}

.loader-line i{
    display:block;
    width:100%;
    height:100%;
    background:var(--ivory);
    transform:translateX(-100%);
    animation:load 1.4s var(--ease) forwards
}

@keyframes load{
    to{
        transform:none
    }
}


/* =========================================================
   HEADER
========================================================= */

.topbar{
    position:fixed;
    top:18px;
    left:24px;
    right:24px;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.brand{
    font-family:"Cormorant Garamond";
    font-weight:600;
    font-size:22px;
    letter-spacing:.08em
}

.brand small{
    font:8px "DM Mono";
    letter-spacing:.2em;
    display:block
}

.pill-nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    padding:5px;
    background:rgba(250,247,241,.72);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(0,0,0,.06);
    border-radius:50px;
    box-shadow:0 10px 40px rgba(0,0,0,.05)
}

.pill-nav a{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    padding:9px 15px;
    border-radius:40px
}

.pill-nav a.active{
    background:#171714;
    color:#fff
}

.langs{
    display:flex;
    gap:5px
}

.langs button{
    border:0;
    background:transparent;
    font:10px "DM Mono";
    padding:7px;
    cursor:pointer;
    opacity:.45
}

.langs button.active{
    opacity:1;
    border-bottom:1px solid
}

.edge-label{
    position:fixed;
    right:-58px;
    top:50%;
    z-index:500;
    transform:rotate(90deg);
    font:9px "DM Mono";
    letter-spacing:.25em;
    color:#aaa
}

.hamburger,
.mobile-nav{
    display:none
}


/* =========================================================
   GLOBAL PHOTO SETTINGS
========================================================= */

.photo-slot{
    position:relative;
    overflow:hidden;
    background-color:#a89b89;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}

.photo-slot:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(255,255,255,.12),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            rgba(255,255,255,.04),
            transparent 50%
        );
    z-index:1
}


/* =========================================================
   HERO
   images/hero.jpg
========================================================= */

.hero{
    min-height:100vh;
    position:relative;
    background:#171714;
    color:white;
    overflow:hidden
}

.hero-media{
    position:absolute;
    inset:0;
    opacity:1;

    background-image:url("images/hero.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.01);
    transition:transform 1.5s var(--ease)
}

.hero:hover .hero-media{
    transform:scale(1.035)
}

.hero-media:after{
    background:
        linear-gradient(
            90deg,
            rgba(10,10,8,.16),
            transparent 65%
        )
}

.slot-mark{
    position:absolute;
    right:5vw;
    top:15vh;
    font-family:"Cormorant Garamond";
    font-size:30vw;
    color:rgba(255,255,255,.06)
}

.slot-copy{
    position:absolute;
    right:6vw;
    bottom:7vh;
    text-align:right;
    z-index:2
}

.slot-copy span{
    font:10px "DM Mono";
    letter-spacing:.2em
}

.slot-copy small{
    display:block;
    font:8px "DM Mono";
    opacity:.55;
    margin-top:7px
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(10,10,8,.82) 0%,
            rgba(10,10,8,.58) 30%,
            rgba(10,10,8,.20) 64%,
            rgba(10,10,8,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10,10,8,.42) 0%,
            transparent 45%
        )
}

.hero-copy{
    position:absolute;
    left:7vw;
    bottom:11vh;
    max-width:850px;
    z-index:3
}

.eyebrow,
.section-no,
.kicker,
.section-head>span,
.social-copy>span,
.contact-left>span{
    font:10px "DM Mono";
    letter-spacing:.24em;
    text-transform:uppercase
}

.hero h1,
.section-head h2,
.about h2,
.doc-copy h2,
.world h2,
.social h2,
.faq h2,
.contact h2{
    font-family:"Cormorant Garamond";
    font-weight:400;
    line-height:.88;
    letter-spacing:-.035em
}

.hero h1{
    font-size:clamp(64px,8vw,132px);
    margin:24px 0
}

.hero h1 em,
h2 em{
    font-weight:400
}

.hero p{
    max-width:610px;
    line-height:1.75;
    font-size:14px;
    color:rgba(255,255,255,.78)
}

.hero-actions{
    display:flex;
    gap:35px;
    margin-top:32px
}

.line-link{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding-bottom:7px;
    border-bottom:1px solid;
    position:relative;
    z-index:3
}

.line-link.pale{
    opacity:.65
}

.scroll-note{
    position:absolute;
    right:6vw;
    bottom:7vh;
    font:9px "DM Mono";
    letter-spacing:.2em;
    z-index:3
}

.scroll-note i{
    display:inline-block;
    width:55px;
    height:1px;
    background:#fff;
    margin-left:12px;
    vertical-align:middle
}


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

.intro{
    padding:130px 7vw;
    background:var(--paper)
}

.statement{
    font-family:"Cormorant Garamond";
    font-size:clamp(38px,5.2vw,82px);
    line-height:1.03;
    max-width:1200px;
    margin:30px 0 90px
}

.stats{
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(4,1fr)
}

.stats div{
    padding:30px 20px 0 0
}

.stats b{
    display:block;
    font-family:"Cormorant Garamond";
    font-size:42px;
    font-weight:500
}

.stats span{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--muted)
}


/* =========================================================
   GENERAL SECTION HEADINGS
========================================================= */

.breeds,
.puppies,
.gallery,
.faq{
    padding:120px 0;
    background:var(--ivory)
}

.section-head{
    padding:0 7vw 65px;
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    gap:40px;
    align-items:end
}

.section-head h2{
    font-size:clamp(55px,7vw,110px)
}

.section-head p{
    font-size:13px;
    line-height:1.7;
    color:var(--muted)
}


/* =========================================================
   BREEDS
========================================================= */

.breed-track{
    display:flex;
    gap:22px;
    overflow-x:auto;
    padding:0 7vw 25px;
    scrollbar-width:none;
    cursor:grab
}

.breed-track:active{
    cursor:grabbing
}

.breed-track::-webkit-scrollbar{
    display:none
}

.breed-card{
    flex:0 0 min(430px,72vw);
    height:66vh;
    min-height:530px;
    padding:28px;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    transition:
        transform .7s var(--ease),
        filter .7s var(--ease);

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}

.breed-card:hover{
    transform:translateY(-8px);
    filter:brightness(1.04)
}

.breed-card:after{
    background:
        linear-gradient(
            180deg,
            rgba(10,10,8,.02) 0%,
            rgba(10,10,8,.05) 45%,
            rgba(10,10,8,.82) 100%
        )
}


/* 01 RED POODLE */

.breed-card:nth-child(1){
    background-image:url("images/red-poodle.jpg")
}


/* 02 MALTEZER */

.breed-card:nth-child(2){
    background-image:url("images/maltezer.jpg")
}


/* 03 POMERANAC */

.breed-card:nth-child(3){
    background-image:url("images/pomeranac.jpg")
}


/* 04 YORKSHIRE TERRIER */

.breed-card:nth-child(4){
    background-image:url("images/yorkshire-terrier.jpg")
}


/* 05 MALTIPOO */

.breed-card:nth-child(5){
    background-image:url("images/maltipoo.jpg")
}


/* 06 FRANCUSKI BULDOG */

.breed-card:nth-child(6){
    background-image:url("images/francuski-buldog.jpg")
}


/* 07 CANE CORSO */

.breed-card:nth-child(7){
    background-image:url("images/cane-corso.jpg")
}


.breed-card>span{
    position:absolute;
    top:25px;
    left:28px;
    font:10px "DM Mono";
    letter-spacing:.2em;
    z-index:2
}

.breed-card h3{
    font-family:"Cormorant Garamond";
    font-size:44px;
    z-index:2;
    text-shadow:0 3px 22px rgba(0,0,0,.35)
}

.breed-card p{
    max-width:300px;
    font-size:12px;
    line-height:1.6;
    z-index:2;
    opacity:.82;
    text-shadow:0 2px 12px rgba(0,0,0,.3)
}

.drag-hint{
    text-align:right;
    padding:20px 7vw 0;
    font:9px "DM Mono";
    letter-spacing:.2em
}


/* =========================================================
   ABOUT
   images/porodica-savkovic.jpg
========================================================= */

.about,
.documents{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100vh
}

.about-photo{
    min-height:760px;
    background-image:url("images/porodica-savkovic.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}

.about-photo:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.16)
        )
}

.doc-visual{
    min-height:760px
}

.about-copy,
.doc-copy{
    padding:10vw 8vw;
    align-self:center
}

.about h2,
.doc-copy h2{
    font-size:clamp(58px,6.8vw,105px);
    margin:24px 0 40px
}

.about p,
.doc-copy p{
    font-size:13px;
    line-height:1.9;
    color:#5f5a53;
    margin-bottom:18px
}

.about .lead{
    font-family:"Cormorant Garamond";
    font-size:27px;
    color:var(--ink)
}

blockquote{
    font-family:"Cormorant Garamond";
    font-style:italic;
    font-size:34px;
    margin-top:45px;
    padding-top:25px;
    border-top:1px solid var(--line)
}


/* =========================================================
   STANDARD / PHILOSOPHY
========================================================= */

.standard{
    background:#171714;
    color:var(--ivory);
    padding:130px 7vw
}

.section-head.dark{
    padding:0 0 80px
}

.section-head.dark p{
    color:#9d978e
}

.principles{
    margin-left:33%;
    border-top:1px solid #393832
}

.principles article{
    display:grid;
    grid-template-columns:70px 1fr 1.2fr;
    gap:30px;
    padding:36px 0;
    border-bottom:1px solid #393832;
    opacity:.25;
    transform:translateY(25px);
    transition:1s var(--ease)
}

.principles article.in-view{
    opacity:1;
    transform:none
}

.principles b{
    font:10px "DM Mono";
    color:#a7865f
}

.principles h3{
    font-family:"Cormorant Garamond";
    font-size:34px;
    font-weight:400
}

.principles p{
    font-size:12px;
    line-height:1.7;
    color:#a6a198
}


/* =========================================================
   PUPPIES
========================================================= */

.puppy-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    padding:0 7vw
}

.puppy-card{
    height:620px;
    padding:25px;
    display:flex;
    justify-content:space-between;
    flex-direction:column;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}

.puppy-card:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.03) 45%,
            rgba(0,0,0,.78) 100%
        )
}


/* PUPPY 01 */

.puppy-card:nth-child(1){
    background-image:url("images/puppy-01.jpg")
}


/* PUPPY 02 */

.puppy-card:nth-child(2){
    background-image:url("images/puppy-02.jpg")
}


/* PUPPY 03 */

.puppy-card:nth-child(3){
    background-image:url("images/puppy-03.jpg")
}


.puppy-card>div:last-child{
    z-index:2;
    color:white
}

.puppy-card h3{
    font-family:"Cormorant Garamond";
    font-size:45px
}

.puppy-card small{
    font:9px "DM Mono";
    letter-spacing:.2em
}

.status{
    z-index:3;
    align-self:flex-start;
    background:#f4efe7;
    color:#171714;
    padding:9px 12px;
    font:8px "DM Mono";
    letter-spacing:.15em
}

.status.reserved{
    background:#171714;
    color:#fff
}


/* =========================================================
   DOCUMENTATION
   images/documentation.jpg
========================================================= */

.doc-visual{
    background-image:url("images/documentation.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}

.doc-visual:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.42)
        )
}

.passport{
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    font-family:"Cormorant Garamond";
    font-size:150px;
    line-height:.55;
    text-align:center;
    color:rgba(255,255,255,.78);
    z-index:2;
    text-shadow:0 8px 40px rgba(0,0,0,.3)
}

.passport span{
    font:12px "DM Mono";
    letter-spacing:.4em
}

.doc-copy .line-link{
    margin-top:20px
}


/* =========================================================
   WORLD
========================================================= */

.world{
    min-height:92vh;
    background:#22211e;
    color:var(--ivory);
    display:grid;
    place-items:center;
    text-align:center;
    position:relative;
    overflow:hidden
}

.world-lines{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 50%,
            transparent 0 24%,
            rgba(255,255,255,.08) 24.2% 24.4%,
            transparent 24.6% 39%,
            rgba(255,255,255,.06) 39.2% 39.4%,
            transparent 39.6%
        ),
        linear-gradient(
            90deg,
            transparent 49.9%,
            rgba(255,255,255,.05) 50%,
            transparent 50.1%
        )
}

.world-content{
    max-width:900px;
    z-index:2;
    padding:40px
}

.world h2{
    font-size:clamp(70px,9vw,145px);
    margin:25px 0
}

.world p{
    max-width:620px;
    margin:auto;
    color:#b9b4ab;
    font-size:13px;
    line-height:1.8
}

.route{
    margin-top:65px;
    font:11px "DM Mono";
    letter-spacing:.2em
}

.route i{
    font-style:normal;
    color:#a7865f;
    margin:0 20px
}


/* =========================================================
   GALLERY
========================================================= */

.gallery{
    background:var(--paper)
}

.gallery-grid{
    padding:0 7vw;
    display:grid;
    grid-template-columns:1.15fr .85fr .85fr;
    grid-template-rows:320px 320px;
    gap:18px
}

.gallery-grid>div{
    padding:18px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}

.gallery-grid>div:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04),
            rgba(0,0,0,.34)
        )
}

.gallery-grid span{
    position:relative;
    z-index:2;
    font:9px "DM Mono";
    letter-spacing:.18em;
    color:white
}


/* GALLERY 01 */

.g1{
    grid-row:span 2;
    background-image:url("images/gallery-01.jpg")
}


/* GALLERY 02 */

.g2{
    background-image:url("images/gallery-02.jpg")
}


/* GALLERY 03 */

.g3{
    background-image:url("images/gallery-03.jpg")
}


/* GALLERY 04 */

.g4{
    grid-column:span 2;
    background-image:url("images/gallery-04.jpg")
}


/* GALLERY 05 */

.g5{
    background-image:url("images/gallery-05.jpg")
}


/* =========================================================
   SOCIAL
========================================================= */

.social{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:120px 7vw;
    background:#ded5c9;
    gap:8vw
}

.social h2{
    font-size:clamp(70px,8vw,130px);
    margin:25px 0
}

.social p{
    font-size:13px
}

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

.social-links a{
    display:grid;
    grid-template-columns:1fr auto;
    padding:28px 0;
    border-bottom:1px solid var(--line);
    font-family:"Cormorant Garamond";
    font-size:35px;
    transition:
        padding-left .4s var(--ease),
        opacity .4s
}

.social-links a:hover{
    padding-left:10px
}

.social-links small{
    grid-column:1;
    font:9px "DM Mono";
    letter-spacing:.12em;
    color:var(--muted);
    margin-top:5px
}


/* =========================================================
   FAQ
========================================================= */

.faq{
    background:var(--paper)
}

.faq-list{
    margin-left:35%;
    margin-right:7vw;
    border-top:1px solid var(--line)
}

details{
    border-bottom:1px solid var(--line);
    padding:25px 0
}

summary{
    font-family:"Cormorant Garamond";
    font-size:27px;
    cursor:pointer;
    list-style:none
}

summary::-webkit-details-marker{
    display:none
}

details p{
    max-width:650px;
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    padding-top:15px
}


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

.contact{
    position:relative;
    background:#171714;
    color:var(--ivory);
    padding:130px 7vw;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8vw;
    overflow:hidden
}

.contact-bg{
    position:absolute;
    bottom:-4vw;
    left:-2vw;
    font-family:"Cormorant Garamond";
    font-size:20vw;
    color:rgba(255,255,255,.025);
    white-space:nowrap
}

.contact h2{
    font-size:clamp(60px,7vw,110px);
    margin:25px 0 35px
}

.contact-left>p{
    max-width:600px;
    color:#aaa49b;
    font-size:13px;
    line-height:1.8
}

.contact-info{
    margin-top:60px;
    display:grid;
    gap:24px
}

.contact-info small{
    display:block;
    font:8px "DM Mono";
    letter-spacing:.2em;
    color:#817b72;
    margin-bottom:7px
}

.contact-info a{
    font-family:"Cormorant Garamond";
    font-size:23px
}

.contact-form{
    position:relative;
    z-index:2;
    align-self:center;
    border-top:1px solid #3d3a35;
    padding-top:15px
}

.contact-form label{
    display:block;
    border-bottom:1px solid #3d3a35;
    padding:17px 0
}

.contact-form label span{
    display:block;
    font:8px "DM Mono";
    letter-spacing:.15em;
    color:#827c73;
    margin-bottom:8px
}

.contact-form input,
.contact-form textarea,
.contact-form select{
    width:100%;
    background:transparent;
    border:0;
    outline:0;
    color:var(--ivory);
    font-family:"Cormorant Garamond";
    font-size:21px
}

.contact-form select option{
    color:#111
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}

.contact-form button{
    margin-top:30px;
    background:var(--ivory);
    color:#171714;
    border:0;
    padding:17px 24px;
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    cursor:pointer;
    transition:.4s
}

.contact-form button:hover{
    transform:translateY(-3px)
}


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

footer{
    background:#111;
    color:#777;
    padding:25px 7vw;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    font:8px "DM Mono";
    letter-spacing:.15em
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:
        opacity 1s var(--ease),
        transform 1s var(--ease)
}

.reveal.visible{
    opacity:1;
    transform:none
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .pill-nav{
        display:none
    }

    .hamburger{
        display:block;
        background:none;
        border:0;
        width:34px;
        height:28px;
        margin-left:10px
    }

    .hamburger span{
        display:block;
        height:1px;
        background:#111;
        margin:7px
    }

    .mobile-nav{
        position:fixed;
        inset:0;
        background:#171714;
        color:white;
        z-index:900;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:22px;
        font-family:"Cormorant Garamond";
        font-size:38px;
        transform:translateY(-100%);
        transition:.7s var(--ease)
    }

    .mobile-nav.open{
        transform:none
    }

    .topbar{
        mix-blend-mode:normal
    }

    .hero-copy{
        left:6vw;
        right:6vw
    }

    .hero-media{
        background-position:center center
    }

    .section-head{
        grid-template-columns:1fr;
        padding-left:6vw;
        padding-right:6vw
    }

    .about,
    .documents,
    .social,
    .contact{
        grid-template-columns:1fr
    }

    .about-photo,
    .doc-visual{
        min-height:70vh
    }

    .about-copy,
    .doc-copy{
        padding:90px 7vw
    }

    .principles{
        margin-left:0
    }

    .principles article{
        grid-template-columns:45px 1fr
    }

    .principles p{
        grid-column:2
    }

    .puppy-grid{
        grid-template-columns:1fr
    }

    .puppy-card{
        height:65vh
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:360px 260px 260px
    }

    .g1{
        grid-column:span 2;
        grid-row:auto
    }

    .g4{
        grid-column:auto
    }

    .faq-list{
        margin:0 7vw
    }

    .stats{
        grid-template-columns:1fr 1fr
    }

    .edge-label{
        display:none
    }

    .langs{
        margin-left:auto
    }

    footer{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
}


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

@media(max-width:560px){

    .brand{
        font-size:18px
    }

    .topbar{
        left:15px;
        right:15px
    }

    .hero{
        min-height:100svh
    }

    .hero-media{
        background-position:center center
    }

    .hero h1{
        font-size:16vw
    }

    .hero p{
        font-size:12px
    }

    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
        gap:16px
    }

    .intro{
        padding:90px 6vw
    }

    .statement{
        font-size:12vw
    }

    .stats b{
        font-size:34px
    }

    .breed-card{
        height:62vh
    }

    .about-photo,
    .doc-visual{
        min-height:60vh
    }

    .principles article{
        padding:25px 0
    }

    .section-head h2,
    .about h2,
    .doc-copy h2{
        font-size:15vw
    }

    .world h2,
    .social h2,
    .contact h2{
        font-size:16vw
    }

    .route{
        font-size:8px
    }

    .route i{
        margin:0 6px
    }

    .gallery-grid{
        display:flex;
        overflow:auto;
        padding-right:6vw
    }

    .gallery-grid>div{
        min-width:78vw;
        height:55vh
    }

    .form-row{
        grid-template-columns:1fr
    }

    .social{
        padding:90px 7vw
    }

    .contact{
        padding:100px 7vw
    }

    footer{
        grid-template-columns:1fr
    }
}


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

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

    *{
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important
    }

    .reveal{
        opacity:1;
        transform:none
    }
}