/* ═══════════════════════════════════════
   NJOY CREATION — HOME PAGE STYLES
═══════════════════════════════════════ */
:root {
  --brown:    #39211f;
  --brown2:   #2e1a18;
  --gold:     #E5bc88;
  --gold2:    #Bea47f;
  --cream:    #faf4ec;
  --cream2:   #f3ead9;
  --white:    #ffffff;
  --muted-d:  rgba(255,255,255,0.52);
  --muted-l:  rgba(57,33,31,0.55);
  --border-d: rgba(229,188,136,0.2);
  --border-l: rgba(57,33,31,0.12);
}
/* ── HERO ── */
.hero{
  min-height:100vh;
  background:
    linear-gradient(rgba(24,14,12,.55), rgba(24,14,12,.78)),
    radial-gradient(circle at top left, rgba(229,188,136,.08), transparent 40%),
    radial-gradient(circle at bottom right, rgba(190,164,127,.06), transparent 35%),
    var(--brown);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 72px 90px;
  position:relative;
  overflow:hidden;
}

/* cinematic grain */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.35;
  pointer-events:none;
  mix-blend-mode:soft-light;
}

/* vertical cinematic light */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(255,255,255,.015) 2px,
      transparent 4px,
      transparent 90px
    );
  opacity:.45;
  pointer-events:none;
}

/* aperture artwork */
.hero-aperture{
  position:absolute;
  right:-120px;
  top:50%;
  transform:translateY(-50%);
  width:min(720px,58vw);
  opacity:.22;
  pointer-events:none;
  animation:spinSlow 90s linear infinite;
  filter:drop-shadow(0 0 30px rgba(229,188,136,.06));
}

.hero-aperture-sm{
  position:absolute;
  left:18%;
  top:10%;
  width:170px;
  opacity:.16;
  pointer-events:none;
  animation:spinSlowRev 60s linear infinite;
}

@keyframes spinSlow{
  from{transform:translateY(-50%) rotate(0deg);}
  to{transform:translateY(-50%) rotate(360deg);}
}
@keyframes spinSlowRev{
  from{transform:rotate(0deg);}
  to{transform:rotate(-360deg);}
}

/* hero content */
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* eyebrow */
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  letter-spacing:6px;
  color:var(--gold2);
  text-transform:uppercase;
  margin-bottom:34px;
  animation:fadeUp .8s ease 1.2s both;
}

.hero-eyebrow span{
  display:block;
  width:36px;
  height:1px;
  background:var(--gold2);
}

/* title */
.hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(58px,9vw,118px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:px;
  margin-bottom:34px;
  color:var(--white);
  max-width:1100px;
  text-align:center;
  text-shadow:
    0 10px 40px rgba(0,0,0,.28),
    0 2px 10px rgba(0,0,0,.18);
  animation:fadeUp 1s ease 1.4s both;
}

.hero-title em{
  font-style:italic;
  color:var(--gold);
  font-weight:400;
}

.hero-title .line2{
  color:var(--gold2);
}

/* subtitle */
.hero-sub{
  font-size:16px;
  color:var(--muted-d);
  line-height:1.95;
  max-width:760px;
  margin:0 auto 52px;
  font-weight:300;
  animation:fadeUp .9s ease 1.7s both;
}

/* buttons */
.hero-btns{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:72px;
  animation:fadeUp .9s ease 1.9s both;
}

/* premium button */
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--brown);
  padding:18px 38px;
  font-size:10px;
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:
    transform .3s,
    box-shadow .3s,
    opacity .3s;
  box-shadow:0 14px 40px rgba(229,188,136,.18);
}

.btn-gold:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 54px rgba(229,188,136,.28);
}

/* ghost button */
.btn-ghost{
  border:1px solid rgba(255,255,255,.16);
  color:var(--white);
  padding:18px 38px;
  font-size:10px;
  letter-spacing:4px;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
  transition:
    border-color .3s,
    color .3s,
    background .3s,
    transform .3s;
}

.btn-ghost:hover{
  border-color:var(--gold);
  background:rgba(229,188,136,.05);
  color:var(--gold);
  transform:translateY(-4px);
}

/* stats */
.hero-stats{
  display:flex;
  justify-content:center;
  gap:56px;
  padding-top:42px;
  border-top:1px solid rgba(229,188,136,.12);
  flex-wrap:wrap;
  width:100%;
  max-width:850px;
  animation:fadeUp .9s ease 2.1s both;
}

.stat{
  text-align:center;
}

.stat-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:44px;
  color:var(--gold);
  letter-spacing:3px;
  line-height:1;
  margin-bottom:6px;
}

.stat-lbl{
  font-size:9px;
  letter-spacing:3px;
  color:var(--muted-d);
  text-transform:uppercase;
}

/* fade animation */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ── SERVICES ───────────────────────── */
.home-services{
  background:var(--cream);
  padding:110px 72px;
}

.home-services-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:62px;
}

.hs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}

.hs-card{
  background:var(--white);
  padding:46px 36px;
  position:relative;
  overflow:hidden;
  transition:
    transform .35s,
    background .35s,
    box-shadow .35s;
}

.hs-card:hover{
  transform:translateY(-6px);
  background:var(--cream2);
  box-shadow:0 20px 50px rgba(57,33,31,.08);
}

.hs-card::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--gold2);
  transition:width .45s ease;
}

.hs-card:hover::after{
  width:100%;
}

.hs-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:11px;
  letter-spacing:4px;
  color:rgba(57,33,31,.2);
  margin-bottom:24px;
}

.hs-icon{
  font-size:28px;
  margin-bottom:18px;
  display:block;
}

.hs-name{
  font-family:'Playfair Display',serif;
  font-size:22px;
  font-weight:700;
  color:var(--brown);
  margin-bottom:12px;
}

.hs-desc{
  font-size:13px;
  color:var(--muted-l);
  line-height:1.8;
  font-weight:300;
}

.hs-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:2px;
  color:var(--gold2);
  text-transform:uppercase;
  margin-top:24px;
  transition:gap .3s;
}

.hs-card:hover .hs-more{
  gap:14px;
}

/* ── ABOUT ── */
.home-about {
  background: var(--gold); padding: 100px 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.ha-left .sec-label { color: rgba(57,33,31,.6); }
.ha-left .sec-label::before { background: rgba(57,33,31,.5); }
.ha-left .sec-title { color: var(--brown); }
.ha-left .sec-title em { color: var(--brown2); }
.ha-left .sec-body { color: rgba(57,33,31,.65); }
.ha-btns { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.about-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 20px;
}
.asg-item {
  background: rgba(57,33,31,.1); padding: 28px 24px; text-align: center;
  transition: background .3s;
}
.asg-item:hover { background: rgba(57,33,31,.18); }
.asg-num { font-family:'Bebas Neue',sans-serif; font-size:38px; color:var(--brown); letter-spacing:2px; line-height:1; }
.asg-lbl { font-size:9px; letter-spacing:3px; color:rgba(57,33,31,.6); text-transform:uppercase; margin-top:5px; }

.founder-card {
  background: var(--brown); padding: 26px 28px;
  display: flex; align-items: center; gap: 18px;
}
.fc-avatar {
  width: 54px; height: 54px; flex-shrink: 0;
  background: rgba(229,188,136,.12); border: 1px solid var(--border-d);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold);
}
.fc-name { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--white); }
.fc-role { font-size:9px; letter-spacing:2px; color:var(--gold2); text-transform:uppercase; margin:4px 0 10px; }
.fc-tags { display:flex; flex-wrap:wrap; gap:7px; }
.fc-tags span { border:1px solid var(--border-d); color:var(--gold); padding:4px 10px; font-size:9px; letter-spacing:2px; text-transform:uppercase; }

/* =====================================================
   PACKAGES
===================================================== */

.home-packages{
    background:
        radial-gradient(circle at top,
        rgba(229,188,136,.08),
        transparent 45%),
        var(--cream);

    padding:120px 70px;
    overflow:hidden;
}

/* Heading */

.pkg-top{
    text-align:center;
    max-width:900px;
    margin:0 auto 70px;
}

.pkg-top .sec-label{
    color:var(--gold);
    justify-content:center;
}

.pkg-top .sec-label::before{
    display:none;
}

.pkg-top .sec-title{
    color:var(--brown);
}

.pkg-top .sec-title em{
    color:var(--gold);
}


/* =====================================================
   SLIDER
===================================================== */

.pkg-slider{
    max-width:1350px;
    margin:auto;
    overflow:hidden;
    position:relative;
}

.pkg-track{
    display:flex;
    gap:30px;
    transition:transform .6s ease;
    will-change:transform;

}


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


.pkg-card{
    flex:0 0 calc((100% - 90px)/4);
    background:var(--brown);
    border:1px solid rgba(229,188,136,.15);
    padding:35px;
    position:relative;
    overflow:hidden;
    transition:.45s;
    display: flex;
    flex-direction: column;
}


.pkg-card:hover{
    transform:translateY(-10px);
    border-color:var(--gold);
    box-shadow:
        0 25px 70px rgba(0,0,0,.15);

}


/* Popular */

.pkg-star{
    border-color:rgba(229,188,136,.45);
}

.pkg-badge{
    position:absolute;
    top:24px;
    right:-55px;
    width:190px;
    text-align:center;
    transform:rotate(45deg);
    background:var(--gold);
    color:var(--brown);
    padding:8px 0;
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
}
/* =====================================================
   ICON
===================================================== */

.pkg-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(229,188,136,.08);
    border:1px solid rgba(229,188,136,.18);
    margin-bottom:26px;
}

.pkg-icon i{
    font-size:30px;
    color:var(--gold);
}
/* =====================================================
   TEXT
===================================================== */

.pkg-name{
    font-family:'Playfair Display',serif;
    color:#fff;
    font-size:30px;
    line-height:1.2;
    margin-bottom:16px;
    min-height:75px;
}
.pkg-desc{
    color:rgba(255,255,255,.75);
    font-size:15px;
    line-height:1.8;
    margin-bottom:28px;
    font-family:'Outfit',sans-serif;
}
.pkg-div{
    height:1px;
    background:rgba(229,188,136,.18);
    margin:26px 0;
}
.pkg-price{
    font-family:'Bebas Neue',sans-serif;
    font-size:60px;
    color:var(--gold);
    letter-spacing:2px;
    line-height:1;
}
.pkg-note{
    margin-top:6px;
    margin-bottom:28px;
    color:rgba(255,255,255,.55);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
}
.pkg-footer{
    margin-top:auto;
    display:flex;
    flex-direction:column;
}
/* =====================================================
   BUTTON
===================================================== */

.pkg-btn{
    display:block;
    text-align:center;
    padding:15px;
    border:1px solid rgba(229,188,136,.3);
    color:var(--gold);
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:3px;
    transition:.35s;
}
.pkg-btn:hover{
    background:var(--gold);
    color:var(--brown);
    border-color:var(--gold);
}
/* =====================================================
   DOTS
===================================================== */

.pkg-dots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:45px;
}

.pkg-dot{
    width:11px;
    height:11px;
    border-radius:50%;
    background:#c8b8a4;
    cursor:pointer;
    transition:.35s;
}

.pkg-dot.active{
    width:34px;
    border-radius:30px;
    background:var(--gold);
}


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

@media(max-width:900px){

.home-packages{

padding:90px 25px;

}

.pkg-track{

gap:20px;

}

@media(max-width:992px){

.pkg-card{

    flex:0 0 calc((100% - 20px)/2);

}

}

.pkg-name{

font-size:26px;

}

.pkg-price{

font-size:52px;

}}
@media(max-width:768px){

.home-packages{

    padding:90px 20px;

}

.pkg-track{

    gap:20px;

}

.pkg-card{

    flex:0 0 100%;

    padding:35px;

}

.pkg-name{

    font-size:26px;

}

.pkg-price{

    font-size:52px;

}

}


/* ── OUR WORK ── */
.home-work { background: var(--cream2); padding: 100px 72px; }
.work-top { margin-bottom: 36px; }
.work-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.wf-btn {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  border:1px solid var(--border-l); color:var(--muted-l);
  padding:9px 20px; cursor:pointer; background:transparent;
  font-family:'Outfit',sans-serif; transition:all .3s;
}
.wf-btn.on,.wf-btn:hover { border-color:var(--brown); color:var(--brown); background:rgba(57,33,31,.05); }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.work-item {
  background:var(--white); overflow:hidden; cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}
.work-item:hover { transform:translateY(-5px); box-shadow:0 18px 56px rgba(57,33,31,.12); }
.work-item.hidden { display:none; }
.wi-bg {
  width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s;
}
.work-item:hover .wi-bg { transform:scale(1.05); }
.wi-bg span { font-family:'Bebas Neue',sans-serif; font-size:48px; color:rgba(229,188,136,.3); letter-spacing:4px; }
.wi-info { padding:20px 22px 24px; border-top:1px solid var(--border-l); }
.wi-cat { font-size:9px; letter-spacing:3px; color:var(--gold2); text-transform:uppercase; margin-bottom:5px; }
.wi-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--brown); }

/* ── OUR WORK ── */
.home-work { background: var(--cream2); padding: 100px 72px; }
.work-top { margin-bottom: 36px; }
.work-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.wf-btn {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  border:1px solid var(--border-l); color:var(--muted-l);
  padding:9px 20px; cursor:pointer; background:transparent;
  font-family:'Outfit',sans-serif; transition:all .3s;
}
.wf-btn.on,.wf-btn:hover { border-color:var(--brown); color:var(--brown); background:rgba(57,33,31,.05); }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.work-item {
  background:var(--white); overflow:hidden; cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}
.work-item:hover { transform:translateY(-5px); box-shadow:0 18px 56px rgba(57,33,31,.12); }
.work-item.hidden { display:none; }
.wi-bg {
  width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s;
}
.work-item:hover .wi-bg { transform:scale(1.05); }
.wi-bg span { font-family:'Bebas Neue',sans-serif; font-size:48px; color:rgba(229,188,136,.3); letter-spacing:4px; }
.wi-info { padding:20px 22px 24px; border-top:1px solid var(--border-l); }
.wi-cat { font-size:9px; letter-spacing:3px; color:var(--gold2); text-transform:uppercase; margin-bottom:5px; }
.wi-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--brown); }

/*=========================================
TESTIMONIALS
=========================================*/

.home-testimonial{
    background: var(--cream2);
    color:#fff;
    padding:40px 8%;
    text-align:center;
    overflow:hidden;
}

.testimonial-slider{
    position:relative;
    max-width:900px;
    margin:auto;
    min-height:180px;
}
/* ───────── TESTIMONIAL HEADER ───────── */

.testimonial-top{
    position: relative;      /* <-- IMPORTANT */
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 50px;
    padding-top: 10px;
}


.testimonial-top .sec-label{
    color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.testimonial-top .sec-title{
    color:var(--brown);
    margin-top:18px;
}

.testimonial-top .sec-title em{
    color:var(--gold);
    font-style:italic;
}

.testimonial-sub{
    margin:24px auto 0;
    max-width:650px;
    color:var(--brown);
    font-size:17px;
    line-height:1.8;
    font-family:'Outfit',sans-serif;
}
.testimonial{
    position:absolute;
    width:100%;
    top:0;
    left:0;
    opacity:0;
    transform:translateY(30px);
    transition:.8s;
}

.testimonial.active{
    opacity:1;
    transform:translateY(0);
    position:relative;
}

.ht-quote{
    font-size:clamp(26px,3vw,42px);
    font-family: 'Poppins'; 
    /* font-family:'Outfit',sans-serif; */
    line-height:1.3;
    font-weight:300;
    font-style: italic;
    color:black;
    max-width:900px;
    margin:auto;
}

.ht-author{
    font-family: 'Bebas Neue', sans-serif;
    margin-top:35px;
    color:var(--gold);
    font-size:18px;
    letter-spacing:2px;
    text-transform:uppercase;
} 

.testimonial-dots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:50px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transition:.4s;
}

.dot.active{
    background:var(--gold);
    transform:scale(1.4);
}

/* ── CONTACT ── */
.home-contact { background:var(--brown); padding:100px 72px; }
.contact-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start; }
.contact-left .sec-label { color:var(--gold2); }
.contact-left .sec-label::before { background:var(--gold2); }

.contact-details { margin-top:36px; }
.cd-item { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--border-d); }
.cd-icon {
  width:40px; height:40px; flex-shrink:0;
  border:1px solid var(--border-d); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.cd-label { font-size:9px; letter-spacing:3px; color:var(--gold2); text-transform:uppercase; margin-bottom:3px; }
.cd-val { font-size:13px; color:var(--white); font-weight:300; }

.contact-form { display:flex; flex-direction:column; gap:16px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-group { display:flex; flex-direction:column; gap:8px; }
.cf-group label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold2); }
.cf-group input,
.cf-group select,
.cf-group textarea {
  background:rgba(255,255,255,.05); border:1px solid var(--border-d);
  color:var(--white); padding:14px 18px; font-size:13px;
  font-family:'Outfit',sans-serif; outline:none; transition:border-color .3s;
  -webkit-appearance:none;
}
.cf-group input::placeholder,.cf-group textarea::placeholder { color:rgba(255,255,255,.25); }
.cf-group input:focus,.cf-group select:focus,.cf-group textarea:focus { border-color:var(--gold); }
.cf-group select { cursor:pointer; color:rgba(255,255,255,.4); }
.cf-group select option { background:var(--brown); color:var(--white); }
.cf-group textarea { resize:vertical; }
.cf-submit {
  background:var(--gold); color:var(--brown); border:none;
  padding:17px 28px; font-size:11px; letter-spacing:4px; text-transform:uppercase;
  font-weight:700; font-family:'Outfit',sans-serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:14px;
  transition:background .3s, transform .25s; margin-top:6px;
}
.cf-submit:hover { background:var(--gold2); transform:translateY(-2px); }
/* ── CONTACT FORM — OTP & VALIDATION ── */
.cf-email-row {
  display: flex; gap: 10px; align-items: stretch;
}
.cf-email-row input { flex: 1; }
.verify-btn {
  background: transparent; border: 1px solid var(--gold2);
  color: var(--gold2); padding: 0 18px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; font-family: 'Outfit', sans-serif;
  white-space: nowrap; transition: background .3s, color .3s, border-color .3s;
  flex-shrink: 0;
}
.verify-btn:hover:not(:disabled) { background: var(--gold2); color: var(--brown); }
.verify-btn:disabled { opacity: .4; cursor: not-allowed; }
 
/* Email validation states */
.cf-group input.valid   { border-color: #4ade80 !important; }
.cf-group input.invalid { border-color: #f87171 !important; }
.cf-group input.field-error { border-color: #f87171 !important; animation: shake .35s ease; }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
 
/* Email status message */
.email-status {
  display: block; font-size: 11px; margin-top: 7px;
  letter-spacing: 1px; min-height: 16px;
}
.email-status.success  { color: #4ade80; }
.email-status.error    { color: #f87171; }
.email-status.verified { color: #4ade80; font-weight: 600; }
 
/* OTP section */
.otp-section { transition: opacity .3s; }
.otp-section.hidden { display: none; }
.otp-section.verified .cf-email-row input { border-color: #4ade80; }
 
/* Submit button states */
.cf-submit:disabled:not(.ready) {
  background: rgba(229,188,136,.3); color: rgba(57,33,31,.5); cursor: not-allowed;
}
.cf-submit:disabled:not(.ready):hover { transform: none; }
.cf-submit.ready { background: var(--gold); cursor: pointer; }
 
/* Form result message */
.form-message {
  font-size: 13px; line-height: 1.7; padding: 14px 18px;
  border-radius: 0; font-weight: 300; display: none;
}
.form-message.success {
  display: block;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3);
  color: #4ade80;
}
.form-message.error {
  display: block;
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
  color: #f87171;
}
 
/* ── FORM VALIDATION STATES ── */
.req { color: var(--gold); font-size: 12px; }
 
.cf-group input.f-valid,
.cf-group select.f-valid,
.cf-group textarea.f-valid  { border-color: #4ade80 !important; }
 
.cf-group input.f-invalid,
.cf-group select.f-invalid,
.cf-group textarea.f-invalid { border-color: #f87171 !important; }
 
.f-shake { animation: fshake .4s ease; }
@keyframes fshake {
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-7px); }
  75%    { transform:translateX(7px); }
}
 
/* Form result message */
.form-message {
  font-size: 13px; line-height: 1.7; padding: 0;
  font-weight: 300; min-height: 0; transition: all .3s;
}
.form-message.success {
  padding: 14px 18px; margin-bottom: 4px;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.25);
  color: #4ade80;
}
.form-message.error {
  padding: 14px 18px; margin-bottom: 4px;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.25);
  color: #f87171;
}
 
/* Submit disabled state */
.cf-submit:disabled {
  opacity: .6; cursor: not-allowed;
}
.cf-submit:disabled:hover { transform: none; background: var(--gold); }
 

/* ── WHATSAPP FLOAT ── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:700;
  width:54px; height:54px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  box-shadow:0 6px 24px rgba(37,211,102,.4);
  transition:transform .3s, box-shadow .3s;
}
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 10px 32px rgba(37,211,102,.5); }

/* ── HAMBURGER + MOBILE MENU ── */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-hamburger span { display:block; width:24px; height:1.5px; background:var(--brown); transition:all .3s; }
.mobile-menu {
  display:none; position:fixed; top:70px; left:0; right:0; z-index:490;
  background:var(--white); border-bottom:1px solid var(--border-l);
  flex-direction:column; padding:16px 24px 24px;
  box-shadow:0 12px 40px rgba(57,33,31,.1);
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--brown); padding:14px 0;
  border-bottom:1px solid var(--border-l); transition:color .3s;
}
.mobile-menu a:hover { color:var(--gold2); }

/* ── MOBILE ── */
@media(max-width:900px){
  .nav-hamburger { display:flex; }
  .nav-links { display:none; }
  .hero { padding:96px 24px 64px; }
  .home-services,.home-testimonial { padding:72px 24px; }
  .home-about { grid-template-columns:1fr; padding:72px 24px; }
  .home-packages { padding:72px 24px; }
  .pkg-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .home-work { padding:72px 24px; }
  .work-grid { grid-template-columns:1fr 1fr; }
  .home-contact { padding:72px 24px; }
  .contact-inner { grid-template-columns:1fr; gap:48px; }
  .cf-row { grid-template-columns:1fr; }
  .hs-grid { grid-template-columns:1fr; }
  .hero-stats { gap:28px; }
}
@media(max-width:560px){
  .work-grid { grid-template-columns:1fr; }
}