/* ==========================
ROOT
========================== */

:root{

    /* COLORS */

    --black:#090909;
    --black-soft:#111111;
    --black-card:#151515;

    --gold:#C9A35B;
    --gold-light:#D8B773;
    --gold-soft:#8D7447;

    --white:#F5F2EA;
    --muted:#A89A82;
    --hairline:#2A241C;

    /* TYPOGRAPHY */

    --font-heading:'Cormorant Garamond', serif;
    --font-body:'Inter', sans-serif;

    /* FONT SIZES */

    --fs-nav:12px;
    --fs-small:13px;
    --fs-body:16px;
    --fs-tagline:28px;
    --fs-h1:clamp(80px,7vw,120px);
    --fs-button:14px;

    /* BORDERS */

    --border-gold:1px solid rgba(201,163,91,.5);

    /* TRANSITIONS */

    --transition:.4s ease;

    /* SHADOWS */

    --shadow-gold:
        0 0 30px rgba(201,163,91,.08);

    /* RADIUS */
    --radius-sm:2px;
    --radius-md:4px;

    /* SPACING */

--space-xxs:8px;
--space-xs:16px;
--space-sm:24px;
--space-md:40px;
--space-lg:60px;
--space-xl:80px;
--space-2xl:120px;
--space-3xl:160px;

/* SECTION SPACING */

--section-padding:160px;
--container-padding:80px;
--section-gap:120px;
--column-gap:80px;

/* CONTAINER WIDTH */
--container-width:1400px;

/* BUTTON PADDING */
--button-padding-y:24px;
--button-padding-x:80px;
--nav-button-y:16px;
--nav-button-x:38px;

/* CONTENT */
--hero-content-width:50%;
--content-width:600px;
--tagline-width:450px;

/* NAV */
--nav-line-offset:10px;
--nav-line-height:1px;

/* FORM */

--input-height:60px;

/* MAX WIDTHS */

--text-width:550px;
--form-width:900px;

/* LINES */

--hairline-gold:
    rgba(201,163,91,.15);
}


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

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--black);
    color:var(--white);
   font-family:var(--font-body);
    
}


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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:1000;

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

    transform:translateY(0);

    overflow:visible;
}
header.hide{
    transform:translateY(-100%);
}

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

    padding:var(--space-xs) var(--space-xl);

    transition:var(--transition);
    
}

header.scrolled .navbar{

    background:rgba(9,9,9,.8);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(201,163,91,.08);

}

.logo img{
    height:60px;
    width:auto;
    display:block;
}

.nav-links{
    display:flex;
    gap:40px;

    list-style:none;
}

.nav-links a{
    position:relative;

    text-decoration:none;

    color:var(--muted);

    font-size:var(--fs-nav);

    letter-spacing:.18em;

    text-transform:uppercase;

    transition:var(--transition);

}

.nav-links a:not(.book-btn)::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:1px;

    background:var(--gold);

    transform:translateX(-50%);

    transition:var(--transition);

}

.nav-links a:hover{
    color:var(--white);
}
.nav-links a:not(.book-btn):hover::after{

    width:100%;

}


.book-btn{
   border:var(--border-gold);

    padding:var(--nav-button-y) var(--nav-button-x);

    color:var(--gold) !important;

    letter-spacing:.25em;

    font-size:var(--fs-nav);

    text-transform:uppercase;

    transition:var(--transition);
    border-radius:var(--radius-sm);
}

.book-btn:hover{

    background:var(--gold);

    color:var(--black) !important;

}

.hamburger{

    display:none;

    width:32px;
    height:24px;

    background:none;
    border:none;

    cursor:pointer;

    flex-direction:column;
    justify-content:space-between;

}

.hamburger span{

    height:1px;
    width:100%;

    background:var(--gold);

    transition:var(--transition);

}

.mobile-menu{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(9,9,9,.97);

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:60px;

    z-index:2000;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.4s ease;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.mobile-menu a{
    position:relative;

    text-decoration:none;

    color:var(--white);

    font-family:var(--font-heading);

    font-size:48px;

    letter-spacing:.08em;

    transition:var(--transition);
}

.mobile-menu a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-12px;

    width:0;
    height:1px;

    background:var(--gold);

    transform:translateX(-50%);

    transition:var(--transition);

}

.mobile-menu a:hover{

    color:var(--gold);

}

.mobile-menu a:hover::after{

    width:100%;

}

.hamburger.active span:nth-child(1){

    transform:
        rotate(45deg)
        translateY(11px);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:
        rotate(-45deg)
        translateY(-11px);

}

.close-menu{

    position:absolute;

    top:40px;

    right:40px;

    font-size:42px;

    color:var(--white);

    cursor:pointer;

    transition:var(--transition);
    margin-right: 20px;

}

.close-menu:hover{

    color:var(--gold);

    transform:rotate(90deg);

}

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

.hero{
    min-height:100vh;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    background:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.75)
        ),
        url("img/tattoo-hero.webp");

    background-size:cover;
    background-position:center;

    background-repeat:no-repeat;

    border-bottom:1px solid rgba(201,163,91,.15);
}


/* ==========================
CONTENT SIDE
========================== */

.hero-content{

    width:var(--hero-content-width);

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

    padding:var(--space-2xl) var(--space-xl);

    
}


/* ==========================
SIGNATURE
========================== */

.signature-wrap{
    width:85px;

    margin-bottom:var(--space-xs);

    color:var(--gold);
}

.signature-svg{
    width:100%;
}

.signature-path{

    stroke-dasharray:760;
    stroke-dashoffset:760;

    animation:drawLine 1.8s ease forwards;
}



/* ==========================
HANDPOKE TATTOO
========================== */

.mini-title{

    font-family:var(--font-heading);

    color:var(--gold);

    letter-spacing:.5em;

    line-height:1.8;

    font-size:14px;

    margin-bottom:var(--space-xs);

    opacity:0;

    animation:fadeUp 1s ease forwards;
    animation-delay:.7s;
}



/* ==========================
LALA
========================== */

.brand-name{

     font-family:var(--font-heading);

    font-size:var(--fs-h1);

    letter-spacing:.22em;

    font-weight:400;

    color:var(--gold);

    opacity:0;

    animation:fadeUp 1s ease forwards;
    animation-delay:1s;
}



/* ==========================
DIVIDER
========================== */

.divider{

    width:90px;
    height:1px;

    background:var(--gold-soft);

    margin:var(--space-sm) 0;

    opacity:0;

    animation:fadeUp 1s ease forwards;
    animation-delay:1.2s;
}


/* ==========================
DESCRIPTORS
========================== */

.descriptors{

    color:var(--gold);

    font-size:var(--fs-nav);

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:var(--space-sm);

    opacity:0;

    animation:fadeUp 1s ease forwards;
    animation-delay:1.4s;
}

.dot{
    margin:0 var(--space-xs);
}


/* ==========================
TAGLINE
========================== */

.tagline{

    font-family:var(--font-heading);

    font-style:italic;

    font-size:var(--fs-tagline);

    color:var(--muted);

    max-width:var(--tagline-width);

    line-height:1.6;

    margin-bottom:var(--space-lg);

    opacity:0;

    animation:fadeUp 1s ease forwards;
    animation-delay:1.6s;
}



/* ==========================
BUTTONS
========================== */

.hero-buttons{

    display:flex;
    flex-direction:column;

    gap:var(--space-sm);
    opacity:0;

    animation:fadeUp 1s ease forwards;
    animation-delay:1.8s;
}


.btn-primary{

      background:var(--gold);
    color:var(--black);

    text-decoration:none;

   padding:var(--button-padding-y) var(--button-padding-x);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:var(--fs-button);

    font-weight:500;

    transition:var(--transition);
     box-shadow:var(--shadow-gold);
     border-radius:var(--radius-sm);
}

.btn-primary:hover{

    background:transparent;

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

    color:var(--gold);
}


.btn-secondary{

    text-decoration:none;

    color:var(--muted);

    letter-spacing:.15em;

    font-size:var(--fs-small);

    transition:var(--transition);

    opacity:.7;

   margin-top:var(--space-xxs);
}

.btn-secondary:hover{
    color:var(--white);
}

.hamburger{
    display:none;
}

/* ==========================
PORTFOLIO
========================== */

.portfolio{

    display:grid;
    margin-top:80px;
    grid-template-columns:300px 1fr;

    gap:80px;

    padding:
        var(--section-padding)
        var(--container-padding);

    max-width:var(--container-width);

    margin:auto;
    margin-bottom: -10px;


    border-bottom:1px solid rgba(201,163,91,.15);

}

/* ==========================
LEFT SIDE
========================== */

.section-label{

    color:var(--gold);

    font-size:var(--fs-nav);

    letter-spacing:.25em;

    text-transform:uppercase;

}

.section-label::after{

    content:"";

    display:block;

    width:40px;

    height:1px;

    background:var(--gold);

    margin-top:20px;

}


.portfolio-intro h2{

    font-family:var(--font-heading);

    font-size:clamp(52px,5vw,72px);

    line-height:1.15;

    font-weight:400;

    margin-top:60px;

}


/* ==========================
FILTERS
========================== */

.portfolio-filter{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:80px;

    margin-bottom:50px;

}
.portfolio-filter button{

    background:none;

    border:none;

    cursor:pointer;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:13px;

    transition:.4s;

}


.portfolio-filter button:hover{

    color:var(--white);

}

.active-filter{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:13px;

    position:relative;

}

.active-filter::after{

    content:"";

    position:absolute;

    width:100%;

    height:1px;

    background:var(--gold);

    left:0;

    bottom:-15px;

}



.divider-line{

    width:1px;
    height:18px;

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

}


.portfolio-link{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:22px 42px;

    background:transparent;

    border:1px solid rgba(201,163,91,.3);

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:12px;

    position:relative;

    overflow:hidden;

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

.portfolio-link::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:.5s ease;

    z-index:-1;

}

.portfolio-link:hover::before{

    transform:scaleX(1);

}

.portfolio-link:hover{

    color:var(--black);

    border-color:var(--gold);

}

.portfolio-link span{

    display:inline-block;

    transition:.4s ease;

}

.portfolio-link:hover span{

    transform:translateX(8px);

}

/* ==========================
GRID
========================== */

.portfolio-gallery{
 
  
    position:relative;

    min-height:560px;

}

.portfolio-grid{

    display:grid;

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

    gap:12px;

    position:absolute;

    inset:0;

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

}
.portfolio-grid.fade-out{

    opacity:0;

    transform:translateY(15px);

}

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

.portfolio-card{

opacity:1;
    overflow:hidden;
transform:translateY(0);
    background:none; /* remove black-card */


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

      position:relative;
      

}


.portfolio-card img{

    width:100%;

    aspect-ratio:0.65;

    object-fit:cover;

    display:block;

    transition:.7s ease;
  

}

.portfolio-card:nth-child(3) img{
    height:540px;
}

.portfolio-card:nth-child(1) img{
    height:430px;
}

.portfolio-card:nth-child(2) img{
    height:430px;
}

.portfolio-card:nth-child(4) img{
    height:460px;
}

.portfolio-card:nth-child(7) img{
    height:540px;
}

.portfolio-card:nth-child(5) img{
    height:430px;
}

.portfolio-card:nth-child(6) img{
    height:430px;
}

.portfolio-card:nth-child(8) img{
    height:460px;
}

.portfolio-card:hover img{

      transform:translateY(-8px);

    border-color:rgba(201,163,91,.25);
}
.portfolio-card:nth-child(1){
    margin-top:0;
}

.portfolio-card:nth-child(2){
   margin-top:20px;
}

.portfolio-card:nth-child(3){
    margin-top:0;
}

.portfolio-card:nth-child(4){
     margin-top:30px;
}

.portfolio-card:nth-child(5){
    margin-top:0;
}

.portfolio-card:nth-child(6){
   margin-top:20px;
}

.portfolio-card:nth-child(7){
    margin-top:0;
}

.portfolio-card:nth-child(8){
     margin-top:30px;
}

.tattoo-type{


position:absolute;

   position:absolute;

    top:20px;
    left:20px;

    width:auto;

    padding:8px 16px;

  background:rgba(20,20,20,.85);
    border:1px solid rgba(201,163,91,.15);

    backdrop-filter:blur(10px);

    color:var(--gold);

    font-size:11px;

    letter-spacing:.25em;

}

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


.gallery-modal{

    position:fixed;

    inset:0;

    background:rgba(8,8,8,.97);

    backdrop-filter:blur(20px);

    padding:60px;

    overflow-y:auto;

    z-index:5000;

    opacity:0;

    visibility:hidden;

    transition:.4s ease;

}

.gallery-modal.active{

    opacity:1;

    visibility:visible;

}


.gallery-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}

.gallery-header h2{

    font-family:var(--font-heading);

    font-size:60px;

    font-weight:400;

}


.close-gallery{

    position:absolute;

    top:40px;

    font-weight:200;
    right:40px;

   font-size:40px;

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


    cursor:pointer;

    transition:var(--transition);
    margin-right: 20px;



}
.close-gallery:hover{

    color:var(--gold);

    transform:rotate(90deg);

}

.gallery-wrapper{
    position:relative;
    min-height:650px;
}
.gallery-filter{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-bottom:40px;

}


.gallery-filter button{

    background:none;

    border:none;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:.25em;

    cursor:pointer;

}


.gallery-active{

    color:var(--gold)!important;

}


.gallery-grid{

    position:absolute;
    inset:0;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

    transition:
        opacity .5s ease,
        transform .5s ease;
}

.gallery-grid.fade-out{

    opacity:0;

    transform:translateY(20px);

}
.gallery-card{

    position:relative;

    overflow:hidden;
     border-radius:6px;

    overflow:hidden;

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



}
.gallery-card.hidden{

    opacity:0;

    transform:translateY(20px);

    pointer-events:none;

    position:absolute;

}

.gallery-card img{

    width:100%;

    display:block;

    transition:.7s;

   height:280px;

}


.gallery-card:hover img{

   transform:scale(1.08);
   cursor:pointer;

}


.gallery-card span{

    position:absolute;

    top:15px;

    left:15px;

    padding:8px 15px;

     background:rgba(15,15,15,.45);

     border:1px solid rgba(201,163,91,.15);
      border-radius:3px;

    color:var(--gold);

    font-size:11px;

    letter-spacing:.25em;
backdrop-filter:blur(12px);

}

/*=====================================
LIGHTBOX
=====================================*/

.lightbox{

    position:fixed;
    inset:0;

    background:rgba(8,8,8,.98);

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

    gap:60px;

    opacity:0;
    visibility:hidden;

    transition:.4s;

    z-index:9000;

}

.lightbox.active{

    opacity:1;
    visibility:visible;

}

.lightbox-content{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:30px;

}

#lightbox-image{

    max-width:80vw;

    max-height:80vh;

    object-fit:contain;

    transition:.4s;

}

.lightbox-label{

    color:var(--gold);

    letter-spacing:.3em;

    text-transform:uppercase;

}

.lightbox-count{

    color:var(--muted);

    letter-spacing:.2em;

}

.prev-btn,
.next-btn{

    background:none;

    border:none;

    color:white;

    font-size:70px;

    cursor:pointer;

    transition:.3s;

}

.prev-btn:hover,
.next-btn:hover{

    color:var(--gold);

}

.lightbox-close{

    position:absolute;

    top:40px;
    right:50px;

    font-size:50px;

    cursor:pointer;

}

.lightbox-close:hover{
    color:var(--gold);
    transform:rotate(180deg);

}

.hidden-grid{

    opacity:0;

    transform:translateY(15px);

    scale:.95;

    pointer-events:none;

}

/*=========================================
GALLERY MODAL SCROLLBAR
=========================================*/

.gallery-modal::-webkit-scrollbar{

    width:8px;

}

.gallery-modal::-webkit-scrollbar-track{

    background:#090909;

}

.gallery-modal::-webkit-scrollbar-thumb{

    background:rgba(201,163,91,.25);

}

.gallery-modal::-webkit-scrollbar-thumb:hover{

    background:rgba(201,163,91,.5);

}

/*=========================================
ABOUT
=========================================*/
.about{

    display:grid;

    grid-template-columns:
    1.2fr 1fr .5fr;

    gap:100px;

    align-items:center;

    padding:160px 8%;


    border-bottom:1px solid rgba(201,163,91,.15);

}

/* Image */

.image-frame{

    position:absolute;

    width:82%;
    height:60%;

    border:1px solid rgba(201,163,91,.5);

    top:90px;
    left:0;

    z-index:1;

     left:-20px;

     top:60px;
}


.about-image{
    position:relative;

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

    min-height:800px;
}

.about-image img{

    position:relative;

    width:85%;
height:600px;
    aspect-ratio:4/5;

    object-fit:cover;

    z-index:2;

    box-shadow:
        0 40px 80px rgba(0,0,0,.6);

         animation:floatImage 7s ease-in-out infinite;
}

.about-image::after{
    content:"";

    position:absolute;
    inset:20px;

    border:1px solid rgba(201,163,91,.15);

    pointer-events:none;
}

/* Text */

.about-content{

    max-width:550px;

}

/* Label */

.about .section-label{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:14px;

}

.about .section-label::after{

    content:"";

    display:block;

    width:70px;

    height:1px;

    background:var(--gold);

    margin-top:20px;

}
/* Heading */

.about h2{

    margin:50px 0;

     font-size:clamp(48px,4vw,70px);
    line-height:1.15;
    max-width:700px;

    font-weight:400;

     font-family:var(--font-heading);

}

/* Paragraph */

.about p{

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

    line-height:1.9;

    font-size:18px;

}

/* Link */

.about-link{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:22px 42px;

    margin-top:50px;

    border:1px solid rgba(201,163,91,.5);

    color:var(--gold);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:14px;

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.about-link .arrow{

    transition:.4s;

}

.about-link:hover{

    border-color:var(--gold);

    box-shadow:

        0 0 20px rgba(201,163,91,.15);

        color:var(--black);

}

.about-link:hover .arrow{

    transform:translateX(10px);

}

.about-link::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:var(--gold);

    transition:.5s;

    z-index:-1;

}

.about-link:hover::before{

    left:0;

}

/* Stats */

.about-stats{

   display:flex;

    align-items:flex-start;

    gap:40px;

    margin-top:100px;

}




/* Stat labels */

.stat-item{

    display:flex;

    flex-direction:column;

}

.stat-item h3{

  font-family:var(--font-heading);

    color:var(--gold);

    font-size:20px;

    font-weight:400;

    line-height:1;

    margin-bottom:25px;

}

.stat-item p{

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

    font-size:12px;

    letter-spacing:.25em;

    text-transform:uppercase;

    line-height:2;

}

.stat-divider{

    width:1px;

    height:100px;

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

}

/* Flower Column */

.about-flower{
    display:flex;
    justify-content:center;
    width:300px;

    opacity:.45;

    transform-origin:bottom center;
}

.flower-svg{

      width:100%;
    overflow:visible;
 filter:
        drop-shadow(0 0 4px rgba(201,163,91,.1));
        
}

.flower-path{
    fill:none;
    stroke:var(--gold);

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

    opacity:.3;
}


.about-flower.show{
    opacity:.7;
    transition:1.5s ease;
    animation:sway 10s ease-in-out infinite;
}
/*=========================================
MEET LALA MODAL
=========================================*/

.lala-modal{

    position:fixed;
    inset:0;

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

    backdrop-filter:blur(20px);

    overflow-y:auto;

    padding:60px 0;

    z-index:5000;

    opacity:0;
    visibility:hidden;

    transition:.5s ease;
}

.lala-modal.active{

    opacity:1;

    visibility:visible;

}
.lala-container{

    width:min(1200px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:400px 1fr;

    gap:80px;

    padding:80px;

}

.lala-modal.active .lala-container{

    transform:translateY(0);

    opacity:1;

}

.lala-image{

    position:relative;
  z-index:2;
   filter:
    drop-shadow(
        0 0 30px rgba(201,163,91,.08)
    );
      

}

.lala-image img{

    position:relative;

    width:100%;

    display:block;

    z-index:3;
}

.lala-image:hover img{

   
    transform:scale(1.02);

    filter:grayscale(100%) brightness(1);

}

.portrait-frame{

      position:absolute;

    top:30px;
    left:-30px;

    width:100%;
    height:100%;

    border:1px solid rgba(201,163,91,.25);

    z-index:1;      
}

.lala-image::after{

    content:"";

    position:absolute;

    inset:15px;

    border:1px solid rgba(201,163,91,.08);

    z-index:0;

}

.lala-content h2{

    font-family:var(--font-heading);

    font-size:72px;

    font-weight:400;

    margin:30px 0;

}

.lala-content p{

    line-height:2;

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

    max-width:600px;

}

.lala-label{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:6px;

    font-size:.8rem;

    position:relative;

}

.lala-label::after{

    content:"";

    display:block;

    width:80px;

    height:1px;

    background:var(--gold);

    margin-top:15px;

}

.lala-location{

    color:var(--gold);

    margin:40px 0;

}

.lala-specialties{

    display:flex;

    gap:80px;

    margin:60px 0;
    margin-top: 30px;

}

.lala-specialties div{

    display:flex;

    flex-direction:column;

    gap:20px;

    align-items:center;

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

}

.lala-specialties span{

    color:var(--gold);

    font-size:1.5rem;

}

blockquote{

    position:relative;

    font-family:var(--font-heading);

    font-style:italic;

    font-size:2rem;

    line-height:1.7;

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

    max-width:500px;

    margin-bottom: 30px;
    margin-top: 30px;

}

blockquote::before{

    content:"“";

    position:absolute;

    left:-40px;
    top:-20px;

    font-size:5rem;

    color:rgba(201,163,91,.3);

}

.lala-buttons{

    display:flex;

    gap:30px;
     

}

.lala-buttons a{

    border:1px solid rgba(201,163,91,.4);

    padding:22px 40px;

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    transition:.4s;
    text-decoration:none;

}
.lala-buttons span{
    display:inline-block;
    transition:.4s ease;
}

.lala-buttons a:hover span{
    transform:translateX(8px);
}

.lala-buttons a:hover{

    background:var(--gold);

    color:black;

}

.close-lala{

    position:absolute;

    top:40px;
    right:40px;

    width:50px;
    height:50px;

    border:1px solid rgba(201,163,91,.3);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--gold);

    cursor:pointer;

    transition:.4s;

}

.close-lala:hover{

    transform:rotate(90deg);

    background:var(--gold);

    color:black;

}

.lala-decoration{

    position:absolute;

    right:40px;

    bottom:200px;

    width:180px;

    opacity:.08;

    pointer-events:none;

     transform-origin:bottom center;
    animation:sway 10s ease-in-out infinite;

    

}

.lala-line{

    width:120px;
    height:1px;

    background:rgba(201,163,91,.3);

    margin:50px 0;

}

.lala-content > *{

    opacity:0;

    transform:translateY(30px);

}

.lala-modal.active .lala-content > *{

    opacity:1;

    transform:translateY(0);

}

.lala-label{transition:.6s .1s;}
.lala-content h2{transition:.6s .2s;}
.lala-content p{transition:.6s .3s;}
.lala-location{transition:.6s .4s;}
.lala-line{transition:.6s .5s;}
.lala-specialties{transition:.6s .6s;}
blockquote{transition:.6s .7s;}
.lala-buttons{transition:.6s .8s;}

/*=========================================
LALA MODAL SCROLLBAR
=========================================*/

.lala-modal::-webkit-scrollbar{

    width:8px;

}

.lala-modal::-webkit-scrollbar-track{

    background:#090909;

}

.lala-modal::-webkit-scrollbar-thumb{

    background:rgba(201,163,91,.25);

}

.lala-modal::-webkit-scrollbar-thumb:hover{

    background:rgba(201,163,91,.5);

}

/*=========================================
BOOKING
=========================================*/

.booking{



        padding:var(--section-padding) 0;

    border-bottom:1px solid rgba(201,163,91,.15);
}

.booking-container{

    width:min(
        var(--container-width),
        calc(100% - var(--container-padding)*2)
    );

    margin:auto;

    display:grid;

    grid-template-columns:220px 1fr;

    gap:var(--space-2xl);

    align-items:start;


}

.booking-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.booking-info p{

    margin:40px 0;

    line-height:1.8;

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

   max-width:var(--content-width);


}

.booking-info-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:12px;

    position:relative;

    text-decoration: none;

}

.booking-info-link::after{

    content:"";

    position:absolute;

    bottom:-10px;

    left:0;

    width:100%;

    height:1px;

    background:var(--gold);

}

.booking-form{

    max-width:1000px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;


}

.booking-form input{

    width:100%;

    background:none;

    border:none;

    border-bottom:1px solid rgba(201,163,91,.3);

    padding:18px 0;

    color:white;

    letter-spacing:.15em;

    transition:.4s ease;

}

.booking-form input:focus{

    outline:none;

    border-color:var(--gold);

}

.booking-form input::placeholder{

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

    letter-spacing:.2em;

}

.booking-form input:focus,
.booking-form textarea:focus{

    outline:none;

    border-color:var(--gold);

}

.booking-submit{

    grid-column:1/-1;

    width:50%;

    margin:60px auto 0;

    padding:28px;

    background:var(--gold);

    color:black;

    letter-spacing:.3em;

}

.booking-submit:hover{

      background:var(--gold-light);

    letter-spacing:.45em;


}

.booking-info-link span{

    transition:.4s ease;

}

.booking-info-link:hover span{

    transform:translateX(8px);

}

.form-left,
.form-right{

    display:flex;

    flex-direction:column;

    gap:40px;

}

input[type=file]{

    display:none;

}

textarea{

    width:100%;

    min-height:260px;

    resize:none;

    background:none;

    border:none;

    border-bottom:1px solid rgba(201,163,91,.3);

    color:white;

    padding:18px 0;

    font-family:var(--font-body);

    font-size:var(--fs-body);

    letter-spacing:.08em;

    line-height:1.8;

    transition:.4s ease;

}
textarea::placeholder{

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

    letter-spacing:.15em;

}

.booking-form input,
textarea{

    transition:
        border-color .4s ease,
        transform .4s ease;

}

.booking-form input:focus,
textarea:focus{

    border-color:var(--gold);

}

.upload-row{

   border-bottom:1px solid rgba(201,163,91,.3);

    padding-bottom:18px;

    margin-top:6px;

     display:flex;

    flex-direction:column;

    gap:18px;

}

.upload-row label{

    display:flex;

    justify-content:space-between;

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

    cursor:pointer;

    align-items:center;

}

.file-name{

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

      font-size:.85rem;

}

.upload-row.has-file{

    border-color:var(--gold);

}

.upload-row.has-file label{

    color:var(--gold);

}

.upload-note{

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

    font-size:.8rem;

    letter-spacing:.1em;

}

/*=========================================
BOOKING MODAL
=========================================*/

.booking-modal-header{
    text-align:center;
    margin-bottom:90px;
}

.booking-modal-header h2{
   font-family:var(--font-heading);
    font-size:clamp(48px,5vw,64px);
    font-weight:400;
    color:var(--white);
}
.booking-divider{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;

    margin-top:40px;

}

.booking-divider i{
    color:var(--gold);
    font-size:18px;
}

.booking-divider span{
    width:120px;
    height:1px;
    background:rgba(201,163,91,.25);
}

.booking-modal{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(20px);

    overflow-y:auto;

    opacity:0;

    visibility:hidden;

    transition:.5s ease;

    z-index:6000;

}

.booking-modal-glow{

       position:fixed;

    width:900px;
    height:900px;

    left:50%;
    top:50%;

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

    border-radius:50%;
  z-index:-1;

    background:

    radial-gradient(
        circle,
        rgba(201,163,91,.06) 0%,
        rgba(201,163,91,.02) 40%,
        transparent 70%
    );

    filter:blur(120px);

    animation:goldGlow 14s ease-in-out infinite alternate;

    pointer-events:none;

}


.booking-modal-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px 100px;

}

.booking-card h3{

    color:var(--gold);

    letter-spacing:.25em;

    text-transform:uppercase;

    font-size:13px;

    font-weight:400;

    margin-bottom:30px;

}

.booking-card ul{

    list-style:none;

}

.booking-card li{

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

    line-height:2.2;

    position:relative;

    padding-left:18px;

}

.booking-card li::before{

    content:"•";

    position:absolute;

    left:0;

    color:var(--gold);

}

.booking-quote{

    margin:100px auto 70px;

    max-width:550px;

    text-align:center;

    font-family:var(--font-heading);

    font-style:italic;

    font-size:2rem;

    line-height:1.7;

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

     transition:.8s .75s;

}
.booking-button-divider{

    width:100%;

    max-width:800px;

    height:1px;

    background:rgba(201,163,91,.15);

    margin:70px auto 50px;

    transition:.8s .9s;

}
.booking-modal-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;

    margin-top:80px;

    transition:.8s 1.05s;
}

.booking-main-btn{

    min-width:420px;

    padding:28px 60px;

    border:1px solid rgba(201,163,91,.3);

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.35em;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    transition:.4s ease;


}

.booking-main-btn span{
    transition:.4s ease;
}

.booking-main-btn:hover{

    background:var(--gold);

    color:black;

}

.booking-main-btn:hover span{
    transform:translateX(8px);
}

.booking-instagram-link{

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

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:12px;

    text-decoration:none;

    position:relative;

}

.booking-instagram-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:100%;
    height:1px;

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

    transition:.4s ease;

}

.booking-instagram-link:hover{

    color:var(--gold);

}

.booking-instagram-link:hover::after{

    background:var(--gold);

}

.close-booking{

    position:absolute;

    top:40px;

    right:40px;

    width:50px;

    height:50px;

    border:1px solid rgba(201,163,91,.3);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--gold);

    cursor:pointer;

    transition:.4s ease;

}

.close-booking:hover{

    transform:rotate(90deg);

    background:var(--gold);

    color:black;

}

.booking-modal.active{

    opacity:1;

    visibility:visible;

}

.booking-modal-container{

    width:min(950px,90%);

  
   margin:80px auto;
    padding:90px;

    border:1px solid rgba(201,163,91,.2);

    position:relative;

    transform:translateY(50px);

    opacity:0;

    transition:.7s ease;

}

.booking-modal.active .booking-modal-container{

    transform:translateY(0);

    opacity:1;

}

.booking-modal-header,
.booking-card,
.booking-quote,
.booking-button-divider,
.booking-modal-buttons{

    opacity:0;
    transform:translateY(40px);

}

.booking-modal.active .booking-modal-header,
.booking-modal.active .booking-card,
.booking-modal.active .booking-quote,
.booking-modal.active .booking-button-divider,
.booking-modal.active .booking-modal-buttons{

    opacity:1;
    transform:translateY(0);

}

.booking-modal-header{

    transition:.7s ease;

}

.booking-card:nth-child(1){

    transition:.7s .15s;

}

.booking-card:nth-child(2){

    transition:.7s .3s;

}

.booking-card:nth-child(3){

    transition:.7s .45s;

}

.booking-card:nth-child(4){

    transition:.7s .6s;

}

.booking-modal::-webkit-scrollbar{

    width:8px;

}

.booking-modal::-webkit-scrollbar-track{

    background:#090909;

}

.booking-modal::-webkit-scrollbar-thumb{

    background:rgba(201,163,91,.25);

    border-radius:100px;

}

.booking-modal::-webkit-scrollbar-thumb:hover{

    background:rgba(201,163,91,.5);

}


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

.faq{

    padding:var(--section-padding) 0;

   

}

.faq-title{

    text-align:center;

    margin-bottom:80px;

}

.faq .section-label::after{

    display:none;

}

.faq-grid{

    width:min(
        var(--container-width),
        calc(100% - var(--container-padding)*2)
    );

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}

.faq-column{

    display:flex;

    flex-direction:column;

}

.faq-item{

    border-top:1px solid rgba(201,163,91,.2);

    padding:28px 0;

}

.faq-item{

    transition:.4s ease;

}

.faq-item:hover{

    border-color:rgba(201,163,91,.5);

}

.faq-column .faq-item:last-child{

    border-bottom:1px solid rgba(201,163,91,.2);

}

.faq-header{

    display:flex;

    justify-content:space-between;

     align-items:flex-start;


    cursor:pointer;
 padding-right:20px;
}

.faq-header h3{

    font-size:13px;

    font-weight:400;

    text-transform:uppercase;

    letter-spacing:.22em;

    color:var(--white);

}

.faq-icon{

    color:var(--gold);

    font-size:2rem;

    line-height:1;

    transition:.4s ease;

     flex-shrink:0;

    margin-left:20px;

}

.faq-item:hover .faq-icon{

    transform:rotate(90deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .5s ease,

        opacity .4s ease;

}

.faq-answer p{

    margin-top:25px;

    line-height:2;

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

}

.faq-item.active .faq-answer{

    max-height:200px;

    opacity:1;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}

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

.footer{

   

    padding:40px 0;

}

.footer-container{

    width:min(
        var(--container-width),
        calc(100% - var(--container-padding)*2)
    );

    margin:auto;

    display:grid;

    display:flex;

    align-items:center;

    gap:80px;

    align-items:center;

    gap:120px;


}


.footer-logo img{

      width:110px;

    display:block;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:12px;

     margin-right:auto;
     




}

.footer-brand h4{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:13px;

    font-weight:400;

}

.footer-brand p{

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

    letter-spacing:.2em;

    font-size:12px;

    text-transform:uppercase;
    

}

.footer-instagram{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:13px;

    transition:.4s ease;
    text-decoration: none;

}

.footer-instagram:hover{

    color:var(--gold-light);

}

.footer-instagram span{

    transition:.4s ease;

}

.footer-instagram:hover span{

    transform:translateX(8px);

}

.footer-instagram:hover .instagram-icon{

    transform:translateY(-2px);

}

.footer-bottom{

    width:min(
        var(--container-width),
        calc(100% - var(--container-padding)*2)
    );

    margin:40px auto 0;

    padding-top:30px;

 

    text-align:center;

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

    font-size:.8rem;

    letter-spacing:.15em;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.instagram-icon{

    width:20px;

    height:20px;
transition:.4s ease;
}

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

@media (max-width:1024px){

/* Header */

    .nav-links{
        display:none;
    }

    .hamburger{
        display:flex;
    }

     .navbar{
        padding:var(--space-xs) var(--space-lg);
    }
    /* Hero */
 .hero{

        background:
            linear-gradient(
                rgba(0,0,0,.85),
                rgba(0,0,0,.55)
            ),
            url("img/tattoo-hero-tablet.webp");

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


.hero-content{

    width:100%;

    padding:var(--space-3xl) var(--space-xl);

}
.brand-name{

    font-size:90px;

}
.tagline{

    font-size:24px;

    max-width:500px;

}
.btn-primary{

    padding:22px 70px;

}

/* Portfolio */
  .portfolio{

        grid-template-columns:1fr;

        gap:60px;

        margin-bottom: -250px;

    }

    .portfolio-intro{

        text-align:center;

    }

    .section-label::after{

        margin:20px auto 0;

    }

    .portfolio-filter{

        justify-content:center;

    }
 .portfolio-gallery{
        position:static;
    }

    .portfolio-grid{
        position:relative;

        display:grid;

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

        gap:18px;
    }
     .hidden-grid{
        display:none;
    }

    .portfolio-card:nth-child(3) img{
    height:320px;
}

.portfolio-card:nth-child(1) img{
    height:320px;
}

.portfolio-card:nth-child(2) img{
    height:320px;
}

.portfolio-card:nth-child(4) img{
    height:320px;
}

.portfolio-card:nth-child(7) img{
    height:320px;
}

.portfolio-card:nth-child(5) img{
    height:320px;
}

.portfolio-card:nth-child(6) img{
    height:320px;
}

.portfolio-card:nth-child(8) img{
    height:320px;
}

.portfolio-card{
    margin-top:0;
}
    .portfolio-card:nth-child(1){
    margin-top:0;
}

.portfolio-card:nth-child(2){
   margin-top:0;
}

.portfolio-card:nth-child(3){
    margin-top:0;
}

.portfolio-card:nth-child(4){
     margin-top:0;
}

.portfolio-card:nth-child(5){
    margin-top:0;
}

.portfolio-card:nth-child(6){
   margin-top:0;
}

.portfolio-card:nth-child(7){
    margin-top:0;
}

.portfolio-card:nth-child(8){
     margin-top:0;
}
    /* Modal */
     .gallery-modal{

        padding:40px;

    }

    .gallery-header h2{

        font-size:48px;

    }

    .gallery-grid{

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

    }

    /* Lightbox */
       #lightbox-image{

        max-width:85vw;

        max-height:75vh;

    }

    /* About */
    .about{

    grid-template-columns:1fr;

    gap:30px;

    text-align:center;


}

.about-image{
    width:500px;
    max-width:85%;
    margin:auto;
    height: 60%;
    margin-bottom: -100px;
}

.about-image img{
    width:100%;
    height:40%;
    
}

.about-image::before{
    width:100%;
    height:100%;
    top:-30px;
    left:-30px;
}

.about-image::after{

    display:none;

}

.image-frame{

    height: 35%;
    width:430px;

     z-index:1;

     left:-20px;

     top:205px;
}

.about-content{

    max-width:700px;

    margin:auto;

}


    .about-stats{

        gap:30px;
        display: flex;
  justify-content: center;

    }

    .stat-item h3{

        font-size:20px;

    }

    .stat-item p {
        font-size: 12px;
    }

.flower-svg{

    width:200px;

}

.about-flower{
    width:200px;
     margin:50px auto 0;
     margin-top: 50px;
}

/* ABOUT MODAL */

     .lala-container{

        grid-template-columns:300px 1fr;

        gap:50px;

        padding:60px;

    }

    .lala-content h2{

        font-size:56px;

    }

    .lala-specialties{

        gap:40px;

    }

    .lala-decoration{

       display: none;

    } 

    /* Booking */
       .booking-container{

        grid-template-columns:1fr;
        gap:80px;

    }

    .booking-info{

        max-width:600px;
        margin:auto;
        text-align:center;
        align-items:center;

    }

    .booking-info p{

        max-width:500px;

    }

    .booking-info-link{

        width:fit-content;

    }

/*=========================================
FAQ TABLET
=========================================*/
   .faq-grid{

        grid-template-columns:1fr;

        gap:0;

    }

     .faq{

        padding:120px 0;

    }

    .faq-title{

        margin-bottom:60px;

    }

    .footer-container{

        gap:60px;

    }

    .footer-brand{

        margin-left:0;

    }
    
}


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

@media (max-width:768px){

/* Header */  
    .navbar{

    padding:var(--space-sm);

}

.hero-content{

    justify-content:flex-start;
    width:100%;

    padding:150px 24px 80px;

}

.signature-wrap{    

    width:70px;

}

.mini-title{

    font-size:12px;

    letter-spacing:.35em;

}
.brand-name{
    font-size:56px;
}

.descriptors{

    display:flex;

    flex-direction:column;

    gap:8px;

    font-size:11px;

}
.dot{

    display:none;

}

.tagline{

    font-size:22px;

    line-height:1.5;

    color: rgba(245,242,234,.85);

}

.btn-primary{

    width:100%;

    max-width:350px;

    padding:20px;
padding:24px 40px;
}

.btn-secondary{

    font-size:14px;

}
    /* Hero */
    .hero{

        background:
            linear-gradient(
                rgba(0,0,0,.85),
                rgba(0,0,0,.55)
            ),

            url("img/tattoo-hero-mobile.webp");

        background-size:cover;
        background-position:center;
    }
    
/* Portfolio */
 .portfolio{

        padding:
        var(--space-2xl)
        var(--space-sm);

    }

    .portfolio-intro h2{

        font-size:48px;

    }

    .portfolio-filter{

        margin-top:50px;
  justify-content:center;

        gap:18px;
    }

     .portfolio-gallery{

        position:static;

    }

    .portfolio-grid{

     display:grid;

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

    gap:15px;

    overflow:visible;
      position:relative;
    }

    .portfolio-grid::-webkit-scrollbar{

        display:none;

    }

     .hidden-grid{
        display:none;
    }

    .portfolio-card{
         height:280px;

    object-fit:cover;
    }

    .portfolio-card img{

    height:260px !important;

        object-fit:cover;

}



/* Modal */
 .gallery-modal{

        padding:100px 20px 40px;

    }

    .gallery-header{

        flex-direction:column;

        gap:20px;

    }

    .gallery-header h2{

        font-size:38px;

        text-align:center;

    }

    .gallery-filter{

        gap:20px;

        flex-wrap:wrap;

    }

    .gallery-grid{

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

        gap:12px;

    }

    /* Lightbox */
      .lightbox{

        gap:20px;

    }

    #lightbox-image{

        max-width:90vw;

        max-height:65vh;

    }

    .prev-btn,
    .next-btn{

        position:absolute;

        bottom:40px;

        font-size:50px;

    }

    .prev-btn{

        left:50px;

    }

    .next-btn{

        right:50px;

    }

    .lightbox-label{

        font-size:12px;

        letter-spacing:.2em;

    }

    .lightbox-count{

        font-size:13px;

    }

/* About */

.about{

    padding:120px 8%;

     grid-template-columns:1fr;
    gap:80px;

}

.about h2{

    font-size:2.3rem;

}

.about-image{
       width:320px;
    max-width:85%;
    margin:auto;
    margin-bottom: -200px;

}

.about-image img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
}

.about-image::before{
    display:none;
}

.image-frame{
     width:280px;
    max-width:85%;
    margin:auto;
    height:300px;
     z-index:1;

     left:-20px;

     top:200px;
    
}

  .about-stats{

        flex-direction:row;

        gap:40px;

        margin-top:70px;

    }

    .stat-divider{

        display:none;

    }

.flower-svg{

    width:200px;

}

.about-flower{
    width:180px;
    margin:50px auto 0;
    margin-top: -5px;
}

/* ABOUT MODAL */

  .lala-container{

        grid-template-columns:1fr;

        gap:50px;

        padding:50px 35px;

    }

    .lala-image{

        max-width:320px;

        margin:auto;
        margin-top: 30px;

    }

    .lala-label::after{
       content: "";
  position: absolute; /* 2. Removes line from normal document flow */
  bottom: -20px; /* Positions the line slightly below the text */
  left: 50%; /* 3. Moves the left edge of the line to the container's center */
  transform: translateX(-50%); 

    }

    .lala-content{

       position:relative;
    text-align:center;

    }

     .lala-content h2{

        font-size:clamp(2.5rem,8vw,3.5rem);

    margin-top:60px;

    }

    .lala-line{

        margin:35px auto;

    }

        .lala-specialties{

        flex-direction:column;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

    }

    .close-lala{
        margin-top: -20px;
        height: 40px;
        width: 40px;
    }

     blockquote{

     position:relative;

    font-size:1.3rem;
    line-height:1.7;
    max-width:320px;

    margin:0 auto 80px;

    }

    blockquote::before{
    left:-10px;
    top:-30px;
    font-size:4rem;
}

blockquote::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:url("../img/flower.svg")
               center/contain no-repeat;

    left:50%;
    top:50%;

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

    opacity:.05;

    z-index:-1;

}

     .lala-buttons{

        flex-direction:column;

    }


   .lala-decoration{

     display:none
   

}

.lala-content > *{
    position:relative;
    z-index:1;
}

     .lala-image::before{

        left:-20px;

        top:20px;

    }

    /* Booking */
  .booking{

        padding:100px 0;

    }


     .booking-form{

        grid-template-columns:1fr;

        gap:40px;

    }

      .booking-submit{

        width:100%;

    }

    .booking-modal-container{

        width:95%;

        padding:50px 25px;

        margin:30px auto;

    }

    .booking-modal-header h2{

        font-size:42px;

    }

      .booking-quote{

        font-size:1.4rem;

        line-height:1.8;

    }
   .booking-main-btn{

        min-width:unset;

        width:100%;

    }

      .close-booking{

        top:20px;

        right:20px;

        width:35px;

        height:35px;

    }

     .faq-header h3{

        font-size:12px;

        letter-spacing:.15em;

        line-height:1.8;

        max-width:85%;

    }

     .faq-icon{

        font-size:1.6rem;

    }

     .faq-item{

        padding:22px 0;

    }

        .faq-answer p{

        line-height:1.9;

        font-size:.95rem;

    }

      .footer{

        padding:80px 0 50px;
    }

    .footer-container{

        flex-direction:column;

        text-align:center;

        gap:40px;

    }

    .footer-brand{

        margin:0;

        align-items:center;

    }

    .footer-brand h4{

        font-size:12px;

        letter-spacing:.2em;

    }

    .footer-brand p{

        font-size:11px;

        letter-spacing:.15em;

    }

      .footer-instagram{

        justify-content:center;

        font-size:12px;

    }

     .footer-bottom{

        font-size:.75rem;

        letter-spacing:.1em;

        line-height:1.8;

    }

}

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

@media (max-width:480px){

    .logo img{

    height:45px;

}

.brand-name{

    font-size:54px;

}

.tagline{

    font-size:20px;

}

.divider{

    width:60px;

}

.btn-primary{

    letter-spacing:.15em;

    font-size:13px;

}

 .faq-grid{

        width:min(
            var(--container-width),
            calc(100% - 50px)
        );

    }

     .footer-instagram{

        flex-wrap:wrap;

        gap:10px;

        letter-spacing:.15em;

    }   

}

/* ==========================
ANIMATIONS
========================== */

@keyframes drawLine{

    to{
        stroke-dashoffset:0;
    }

}


@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(15px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes floatImage{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

@keyframes drawFlower{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes sway{

    0%{
        transform:rotate(-1deg);
    }

    50%{
        transform:rotate(.7deg);
    }

    100%{
        transform:rotate(-1deg);
    }

    

}

@keyframes goldGlow {

    0%{

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

    }

    50%{

        transform:
        translate(-48%,-52%)
        scale(1.1);

    }

    100%{

        transform:
        translate(-52%,-48%)
        scale(1);

    }

}
/*=========================================
SCROLL REVEALS
=========================================*/

.reveal-up,
.reveal-left,
.reveal-right{

    opacity:0;

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

}

.reveal-up{

    transform:translateY(50px);

}

.reveal-left{

    transform:translateX(-60px);

}

.reveal-right{

    transform:translateX(60px);

}


.reveal-up.show,
.reveal-left.show,
.reveal-right.show{

    opacity:1;

    transform:translate(0);

}