/* ======================================================
   PAGE
====================================================== */

body{
  background:#151518;
  color:#fff;
  overflow-x:hidden;
}


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

.contact-hero{
  padding:320px 8% 220px;
  background:#151518;
}

.contact-hero-inner{
  max-width:1000px;
}

.contact-eyebrow{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:24px;
}

.contact-hero h1{
  font-family:'Playfair Display',serif;
  font-size:96px;
  font-style:italic;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-2px;
  margin-bottom:38px;
}

.hero-sub{
  font-size:16px;
  opacity:.6;
}


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

.contact-section{
    padding:200px 8%;
}

.contact-grid{

    display:grid;

    grid-template-columns:1.45fr .9fr;

    gap:120px;

    align-items:start;

}


/* ======================================================
   FORM
====================================================== */

.contact-form-wrapper{
    width:100%;
}

.contact-form-box{

    padding:70px;

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}


/* ======================================================
   FORM FIELDS
====================================================== */

.form-group{
    margin-bottom:34px;
}

.form-group:last-child{
    margin-bottom:0;
}

.form-group label{

    display:block;

    margin-bottom:12px;

    font-size:11px;

    font-weight:500;

    letter-spacing:2.5px;

    text-transform:uppercase;

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

}

.form-group input,
.form-group textarea,
.form-group select{

    width:100%;

    padding:18px 22px;

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:14px;

    font-family:'Inter',sans-serif;

    font-size:15px;

    color:#fff;

    outline:none;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

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

}

.form-group textarea{

    min-height:170px;

    resize:vertical;

}

.form-group select{

    appearance:none;

    background:
        linear-gradient(45deg, transparent 50%, #fff 50%),
        linear-gradient(135deg, #fff 50%, transparent 50%),
        rgba(255,255,255,.03);

    background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px),
        0 0;

    background-size:
        6px 6px,
        6px 6px,
        100% 100%;

    background-repeat:no-repeat;

    padding-right:56px;

}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover{

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

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

    border-color:#fff;

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

    box-shadow:
        0 0 0 4px rgba(255,255,255,.05);

}


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

.contact-submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:60px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.22);

    background:transparent;

    color:#fff;

    font-family:'Inter',sans-serif;

    font-size:14px;

    font-weight:400;

    letter-spacing:1px;

    cursor:pointer;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

.contact-submit:hover{

    background:#fff;

    color:#000;

    border-color:#fff;

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(255,255,255,.08);

}


/* ======================================================
   INFO
====================================================== */

.contact-info-box{
    padding-top:10px;
}

.contact-info-box h2{

    font-family:'Playfair Display',serif;

    font-size:46px;

    line-height:1;

    margin-bottom:60px;

}

.contact-info-box h2::after{

    content:"";

    display:block;

    width:70px;

    height:1px;

    margin-top:22px;

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

}

.info-block{

    padding-bottom:28px;

    margin-bottom:34px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.info-block:last-child{

    border-bottom:none;

    margin-bottom:0;

}

.info-block span{

    display:block;

    margin-bottom:12px;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

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

}

.info-block p,
.info-block a{

    font-size:16px;

    line-height:1.8;

    color:#fff;

    text-decoration:none;

    opacity:.82;

    transition:opacity .3s ease;

}

.info-block a:hover{

    opacity:1;

}

.booking-note{

    margin-top:55px;

    font-size:14px;

    line-height:1.8;

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

}


/* ======================================================
   CUSTOM DROPDOWN
====================================================== */

.custom-select{
    position:relative;
    width:100%;
    user-select:none;
}

.select-trigger{

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

    width:100%;

    padding:18px 22px;

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:14px;

    cursor:pointer;

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}

.select-trigger:hover{

    border-color:rgba(255,255,255,.28);

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

}

.custom-select.active .select-trigger{

    border-color:#fff;

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

    box-shadow:
        0 0 0 4px rgba(255,255,255,.05);

}

.selected-option{

    color:#fff;

    font-size:15px;

    font-weight:400;

}

.select-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:.6;

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

}

.custom-select.active .select-arrow{

    transform:rotate(180deg);

    opacity:1;

}

/* ======================================================
   DROPDOWN MENU
====================================================== */

.select-menu{

    position:absolute;

    left:0;
    right:0;

    top:calc(100% + 10px);

    background:
        linear-gradient(
            180deg,
            rgba(25,25,28,.98),
            rgba(18,18,20,.98)
        );

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    backdrop-filter:blur(20px);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(-12px) scale(.98);

    transition:
        opacity .28s ease,
        visibility .28s ease,
        transform .28s ease;

    z-index:999;

}

.custom-select.active .select-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

}

/* ======================================================
   HEADINGS
====================================================== */

.select-heading{

    padding:20px 24px 10px;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

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

}

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

.select-divider{

    height:1px;

    margin:8px 0;

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

}

/* ======================================================
   OPTIONS
====================================================== */

.select-option{

    display:flex;

    align-items:center;

    padding:18px 24px;

    color:#fff;

    font-size:15px;

    cursor:pointer;

    transition:
        background .25s ease,
        padding-left .25s ease,
        color .25s ease;

}

.select-option:hover{

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

    padding-left:34px;

}

.select-option.selected{

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

}

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

.select-menu::-webkit-scrollbar{

    width:6px;

}

.select-menu::-webkit-scrollbar-thumb{

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

    border-radius:999px;

}

.select-menu::-webkit-scrollbar-track{

    background:transparent;

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:1100px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .contact-form-box{

        padding:45px;

    }

}

@media(max-width:768px){

    .contact-section{

        padding:140px 8%;

    }

    .contact-form-box{

        padding:32px;

    }

    .contact-info-box h2{

        font-size:38px;

    }

}


/* ======================================================
   WHAT HAPPENS NEXT
====================================================== */

.contact-process{
  padding:220px 8%;
}

.process-header{
  max-width:900px;

  margin-bottom:100px;
}

.process-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  color:rgba(255,255,255,.45);
}

.process-header h2{
  font-family:'Playfair Display',serif;

  font-size:64px;

  line-height:1;
}

.process-grid{
  display:grid;

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

  gap:30px;
}

.process-card{
  padding:50px;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    );

  border:1px solid rgba(255,255,255,.08);

  opacity:0;

  transform:translateY(20px);

  transition:
    opacity .8s ease,
    transform .8s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.process-card.active{
  opacity:1;

  transform:translateY(0);
}

.process-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,255,255,.18);

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

.process-card.active{
  opacity:1;

  transform:translateY(0);
}

.process-card.active{
  opacity:1;

  transform:translateY(0);
}

.process-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,255,255,.18);

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

.process-number{
  display:block;

  margin-bottom:24px;

  font-size:13px;

  letter-spacing:3px;

  opacity:.35;
}

.process-card h3{
  font-size:24px;

  margin-bottom:20px;
}

.process-card p{
  font-size:15px;

  line-height:1.9;

  opacity:.65;
}

.process-card:nth-child(1){
  transition-delay:0s;
}

.process-card:nth-child(2){
  transition-delay:.15s;
}

.process-card:nth-child(3){
  transition-delay:.3s;
}


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

.contact-faq{
  padding:220px 8%;
}

.faq-header{
  max-width:900px;
  margin-bottom:120px;
}

.faq-label{
  display:inline-block;
  margin-bottom:24px;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.faq-header h2{
  font-family:'Playfair Display',serif;
  font-size:64px;
  line-height:1;
}

/* ====================================================== */

.faq-item{
  border-top:1px solid rgba(255,255,255,.08);
}

.faq-item:last-child{
  border-bottom:1px solid rgba(255,255,255,.08);
}

.faq-question{
  width:100%;

  padding:42px 0;

  display:grid;

  grid-template-columns:100px 1fr 60px;

  align-items:start;

  gap:40px;

  background:none;

  border:none;

  color:#fff;

  cursor:pointer;

  text-align:left;
}

.faq-number{
  font-size:15px;

  letter-spacing:3px;

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

.faq-title{
  font-size:25px;
  font-weight:600;
  line-height:1.25;
}

.faq-icon{
  font-size:42px;

  text-align:right;

  opacity:.45;

  transition:.4s ease;
}

/* ====================================================== */

.faq-answer{
  height:0;

  overflow:hidden;

  transition:height .55s cubic-bezier(.22,.61,.36,1);
}

.faq-answer-inner{
  padding-left:100px;
  padding-bottom:40px;
}

.faq-answer p{
  max-width:800px;

  font-size:17px;

  line-height:1.9;

  opacity:.7;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg);
}

/* ====================================================== */

@media(max-width:900px){

  .faq-header h2{
    font-size:42px;
  }

  .faq-question{
    grid-template-columns:50px 1fr 40px;
    gap:20px;
  }

  .faq-title{
    font-size:22px;
  }

  .faq-icon{
    font-size:28px;
  }

  .faq-answer-inner{
    padding-left:50px;
  }

}


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

.contact-cta{
  padding:220px 8% 180px;

  text-align:center;
}

.contact-cta-inner{
  max-width:900px;

  margin:0 auto;
}

.contact-cta-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  color:rgba(255,255,255,.45);
}

.contact-cta h2{
  font-family:'Playfair Display',serif;

  font-size:72px;

  line-height:1;

  margin-bottom:50px;
}

.contact-cta-form{
  max-width:700px;

  margin:0 auto 30px;

  display:flex;

  gap:16px;
}

.contact-cta-form input{
  flex:1;

  height:64px;

  padding:0 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    );

  border:1px solid rgba(255,255,255,.08);

  border-radius:999px;

  color:#fff;

  font-size:15px;

  outline:none;
}

.contact-cta-form input:focus{
  border-color:rgba(255,255,255,.25);
}

.contact-cta-form button{
  height:64px;

  padding:0 36px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  color:#fff;

  font-size:14px;

  font-weight:500;

  letter-spacing:.5px;

  cursor:pointer;

  transition:
    transform .35s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.contact-cta-form button:hover{
  background:#fff;

  color:#000;

  border-color:#fff;

  transform:translateY(-4px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.35);
}

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

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

.contact-cta p{
  font-size:15px;

  opacity:.55;
}


/* ======================================================
   SCROLL FADE
====================================================== */

.fade-item{
  opacity:0;

  transform:translateY(40px);

  transition:.8s cubic-bezier(.22,.61,.36,1);
}

.fade-item.show{
  opacity:1;

  transform:translateY(0);
}


/* ======================================================
   CONTACT HERO — RESPONSIVE
====================================================== */


/* ======================================================
   IPHONE
====================================================== */

@media(max-width:600px){

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

  .contact-hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:110px 7% 90px;
    text-align:center;
    box-sizing:border-box;
  }

  .contact-hero-inner{
    max-width:100%;
    margin:0 auto;
  }

  .contact-eyebrow{
    font-size:12px;
    letter-spacing:3px;
    margin-bottom:24px;
  }

  .contact-hero h1{
    font-size:50px;
    line-height:1.02;
    margin-bottom:30px;
  }

  .hero-sub{
    font-size:17px;
    line-height:1.75;
    max-width:360px;
    margin:0 auto;
  }


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

  .contact-section{
    width:100%;
    padding:120px 7%;
    box-sizing:border-box;
    overflow:hidden;
  }

  .contact-grid{
    grid-template-columns:1fr !important;
    gap:50px !important;
  }

  .contact-form-box{
    padding:32px 26px;
    box-sizing:border-box;
  }

  .contact-info-box h2{
    font-size:38px;
  }


  /* ================= WHAT HAPPENS NEXT ================= */

  .contact-process{
    padding:160px 8%;
    overflow:hidden;
  }

  .process-header{
    max-width:100%;
    margin-bottom:70px;
  }

  .process-header h2{
    font-size:42px;
    line-height:1.05;
  }

  .process-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:30px !important;
    width:100%;
    max-width:100%;
  }

  .process-card{
    width:100%;
    max-width:100%;
    min-width:0; 
    box-sizing:border-box;
    padding:40px 30px;
  }

}


/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .contact-hero{
    min-height:84svh;
    display:flex;
    align-items:center;
    padding:140px 7% 120px;
  }

  .contact-hero-inner{
    max-width:760px;
    margin:0;
  }

  .contact-hero h1{
    font-size:82px;
    line-height:1.05;
    margin-bottom:28px;
  }

  .hero-sub{
    font-size:20px;
    line-height:1.75;
    max-width:650px;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:80px;
  }

  .process-grid{
    grid-template-columns:1fr;
  }

  .contact-form-box{
    padding:50px;
  }

}


/* ======================================================
   IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .contact-hero{
    min-height:86svh;
    display:flex;
    align-items:center;
    padding:350px 7%;
  }

  .contact-hero-inner{
    max-width:800px;
    margin:0;
  }

  .contact-hero h1{
    font-size:90px;
    line-height:1.05;
    margin-bottom:30px;
  }

  .hero-sub{
    font-size:20px;
    line-height:1.75;
    max-width:680px;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:80px;
  }

  .process-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .contact-form-box{
    padding:50px;
  }

}


/* ======================================================
   MACBOOK / LAPTOP
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  .contact-hero{
    padding:320px 8% 220px;
  }

  .contact-hero-inner{
    max-width:1000px;
    margin:0;
  }

  .contact-hero h1{
    font-size:96px;
  }

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

  .contact-hero{
    padding:320px 8% 220px;
  }

  .contact-hero-inner{
    max-width:1000px;
    margin:0;
  }

  .contact-hero h1{
    font-size:96px;
  }

}