/* ===========================
   Fonts (use your existing files)
=========================== */
@font-face{
  font-family:"ProductSans-Regular";
  src: url("../assets/fonts/ProductSans-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"ProductSans-Bold";
  src: url("../assets/fonts/ProductSans-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Wondar-Quason";
  src: url("../assets/fonts/Wondar-Quason.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ===========================
   Theme
=========================== */
:root{
  --brand:#b8a090;
  --bg:#fafafa;
  --text:#2f2f2f;
  --muted:#555;
  --card:#fff;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --shadow-lg:0 12px 30px rgba(0,0,0,.12);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }

/* Subtle gradient + CSS texture */
body{
  font-family:"ProductSans-Regular",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 0% 0%, #ffffff 0%, #f7f3f0 60%, #ffffff 100%),
    linear-gradient(135deg, #ffffff 0%, #fbf9f7 50%, #ffffff 100%);
  background-attachment: fixed;
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(rgba(0,0,0,.025) 0.5px, transparent 0.5px),
    radial-gradient(rgba(0,0,0,.02) 0.5px, transparent 0.5px);
  background-size: 12px 12px, 18px 18px;
  background-position: 0 0, 6px 6px;
  opacity:.35;
  pointer-events:none;
}

/* ===========================
   Navbar (smaller + refined)
=========================== */
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 44px; background:#fff;
  position:sticky; top:0; z-index:100;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  border-bottom:1px solid rgba(184,160,144,.35); /* lighter border */
}
.nav-left,.nav-right{ width:160px; display:flex; align-items:center; justify-content:flex-end; }
.nav-left{ justify-content:flex-start; }
.nav-center{ flex:1; display:flex; justify-content:center; }
.nav-logo{ height:40px; }

.contact-btn{
  border:1.5px solid var(--brand);
  padding:6px 14px;
  border-radius:20px;
  color:var(--brand); font-weight:600;
  transition:.25s ease; background:transparent;
  margin-left:-14px; /* moved slightly left */
  font-size:14px;
}
.contact-btn:hover{ background:var(--brand); color:#fff; }

/* ===========================
   Hero
=========================== */
.hero {
  text-align: center;
  padding: 70px 20px 50px;
}

/* H1 wrapping the picture/logo */
.hero-logo {
  margin: 15px auto 18px;
  text-align: center;
}

.hero-logo img {
  max-width: 400px; /* desktop size */
  height: auto;
  display: inline-block;
}

.hero-title {
  font-family: "Wondar-Quason", serif;
  font-size: 44px;
  color: #222;
  margin: 30px 0 16px;
  letter-spacing: 1.3px;
}

.hero-desc {
  max-width: 1100px;
  margin: 40px auto;
  font-size: 15.5px;
  color: #444;
  line-height: 1.85;
  letter-spacing: 0.1px;
}

/* ✅ Mobile styles */
@media (max-width: 920px) {
  .hero-logo {
    margin: 10px auto 15px;
  }

  .hero-logo img {
    max-width: 220px; /* smaller on mobile */
  }

  .hero-title {
    font-size: 28px; /* shrink heading text */
  }

  .hero-desc {
    font-size: 14px;
    padding: 0 10px;
  }
}

/* ===========================
   Projects
=========================== */
/* Projects container stays left-aligned */
.projects {
  padding: 60px 24px 80px;
  text-align: left; /* ensure children default to left */
}

/* Center just the title itself */
.section-title {
  display: block;                 /* own line */
  width: max-content;             /* shrink to text width */
  margin: 0 auto 50px;            /* center the block itself */
  font-family: "ProductSans-Bold", sans-serif;
  font-size: 40px;
  letter-spacing: 1px;
  text-align: center;

  /* Gradient text */
  background: linear-gradient(135deg, var(--brand), #d7c1b4);
  -webkit-background-clip: text;  /* Chrome/Safari */
  background-clip: text;          /* Standard */
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Fade-out underline under the title */
.section-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 120px;
  margin: 12px auto 0; /* centers the underline under the title */
  background: linear-gradient(to right, var(--brand), transparent);
  border-radius: 2px;
  opacity: 0.9;
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, 400px);
  justify-content: center;
  column-gap:150px; /* closer cards */
  row-gap:70px;     /* vertical space (between rows) */
  justify-items:center; align-items:start;
}

.project-card{
  width:100%; max-width:400px;
  background:var(--card); border:1px solid var(--brand); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
  transition: box-shadow .3s ease, border-color .3s ease, transform .25s ease;
  perspective:800px; cursor:pointer;
}
.project-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--brand); transform: translateY(-6px); }

.project-img{ position:relative; overflow:hidden; }
.project-img img{
  width:100%; height:180px; /* slightly shorter */
  object-fit:cover;
  transition: transform .6s ease; transform-origin:center;
}
.project-card:hover .project-img img{ transform: scale(1.06) rotate(.4deg); }
.project-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(184,160,144,.12), rgba(0,0,0,.14));
  opacity:0; transition:opacity .35s ease;
}
.project-card:hover .project-img::after{ opacity:1; }

.badge{
  position:absolute; top:12px; right:12px;
  background:var(--brand); color:#fff;
  padding:6px 12px; border-radius:14px; font-size:11.5px;
  font-family:"ProductSans-Bold", sans-serif;
}

.project-details{
  padding:14px 16px; transform:translateY(10px); opacity:.96;
  transition: transform .35s ease, opacity .35s ease;
}
.project-card:hover .project-details{ transform:translateY(0); opacity:1; }

.project-details h3{
  font-family:"ProductSans-Bold",sans-serif;
  font-size:24px; margin:0 0 8px; color:var(--brand);
}
.project-details ul{ list-style:none; margin:0 0 8px; padding:0; }
.project-details li{ font-size:15px; color:#444; margin:3px 0; letter-spacing: 1.1px; }
.project-details li strong{ color:#111; font-weight:700; }

/* Learn More appears on hover */
.learn-more{
  display:inline-block; padding:6px 14px; border:1px solid var(--brand);
  border-radius:20px; color:var(--brand); font-weight:700; font-size:12.5px;
  opacity:0; transform:translateY(8px); transition:all .3s ease;
}
.project-card:hover .learn-more{ opacity:1; transform:translateY(0); }

/* ===========================
   Footer (3 columns, tighter)
=========================== */
.footer{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;
  padding:20px; background:#fff;
  border-top:1px solid rgba(184,160,144,.35);
  box-shadow:0 -4px 12px rgba(0,0,0,.05);
  text-align:center;
}
.footer-left,.footer-center,.footer-right{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.footer-left a{ font-size:14px; color:#333; }
.footer-left p{ font-size:13px; color:#666; margin:6px 0 0; }
.footer-logo{ height:40px; }
.footer-center p{ font-size:13px; color:#444; margin:0; }
.footer-center a{ font-size:13px; color:#333; }
.footer-right p{ font-size:13px; color:#444; margin:0 0 4px; }
.social-icons{
  display:flex; gap:10px; justify-content:center; align-items:center;
}
.social-icons img{
  height:20px; filter:grayscale(100%); transition:filter .25s ease;
}
.social-icons img:hover{ filter:grayscale(0%); }

/* ===========================
   Modal (Web3Forms)
=========================== */
.enquiry-modal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  align-items:center; justify-content:center; z-index:1000;
}
.enquiry-modal.active{ display:flex; }
.enquiry-content{
  width:min(92vw, 420px); background:#fff; border-radius:12px;
  padding:28px; position:relative; border:2px solid var(--brand);
  animation:fadeIn .4s ease;
}

.enquiry-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5f2f0;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.enquiry-close:hover {
  background: var(--brand);
  color: #fff;
  transform: rotate(90deg);
}


.enquiry-content h2{ margin:0 0 8px; font-family:"ProductSans-Bold",sans-serif; }

.contact-form label{ display:block; font-size:12px; margin:10px 0 6px; color:#222; font-weight:700; }
.contact-form input, .contact-form textarea{
  width:100%; padding:10px; border:1px solid var(--brand); border-radius:6px; font-size:13px; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:#222; }

#btn{
  width:140px; height:40px; margin-top:14px;
  border:2px solid var(--brand); background:transparent; color:var(--brand);
  border-radius:25px; cursor:pointer; position:relative; overflow:hidden; transition:.3s ease;
}
#btn:hover{ background:rgba(184,160,144,.08); }
#btn p{ margin:0; }
.check-box{
  width:40px; height:40px; border-radius:25px; background:var(--brand);
  position:absolute; top:0; right:-42px; opacity:0; display:flex; align-items:center; justify-content:center;
}
.check-box svg{ width:20px; }
svg path{ stroke-width:3; stroke:#fff; stroke-dasharray:34; stroke-dashoffset:34; stroke-linecap:round; }
#btn.active{ background:var(--brand); color:#fff; }
#btn.active .check-box{ right:0; opacity:1; transition:.8s; }
#btn.active p{ margin-right:60px; transition:.8s; }
#btn.active svg path{ stroke-dashoffset:0; transition:.8s; transition-delay:.5s; }

/* ===========================
   Reveal Animations (Basic)
=========================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: all 0.7s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 920px){
  .projects-grid{ grid-template-columns:1fr; gap:22px; }
  .project-card{ max-width:520px; }
  .navbar{ padding:10px 20px; }
  .nav-left,.nav-right{ width:120px; }
  .footer{ grid-template-columns:1fr; gap:10px; }
  .social-icons{ justify-content:center; }
}

/* ===========================
   Responsive (Mobile / Tablet)
=========================== */
@media (max-width: 920px) {
  .navbar {
    padding: 10px 16px;
  }

  /* Show left logo, hide center logo */
  .nav-logo-left {
    display: block !important;
    height: 38px;
    width: auto;
    object-fit: contain;
    margin-left: -10px;  /* fine tune left shift */
  }
  .nav-logo-center {
    display: none !important;
  }

  .nav-right {
    margin-left: auto;
    margin-right: -4px; /* fine tune right shift */
  }

  .contact-btn {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 18px;
  }
}

/* ===========================
   Navbar (Desktop Default)
=========================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 48px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
  border-bottom: 1px solid rgba(184,160,144,0.25);
  overflow-x: hidden;
}

.nav-left,
.nav-right {
  width: 180px;
  display: flex;
  align-items: center;
}

.nav-left {
  justify-content: flex-start;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-right {
  justify-content: flex-end;
}

/* Logos */
.nav-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-logo-left {
  display: none; /* hidden on desktop */
}

.nav-logo-center {
  display: block; /* visible on desktop */
}

/* Contact button */
.contact-btn {
  border: 1.5px solid var(--brand);
  padding: 8px 16px;
  border-radius: 22px;
  color: var(--brand);
  font-weight: 600;
  background: transparent;
  transition: .25s ease;
  box-shadow: 0 2px 8px rgba(184,160,144,0.25);
  white-space: nowrap;
}
.contact-btn:hover {
  background: var(--brand);
  color: #fff;
}

/* ===========================
   Extra Mobile Adjustments
=========================== */
@media (max-width: 920px) {
  /* Titles smaller */
  .hero-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .section-title {
    font-size: 26px;
    margin-bottom: 36px;
  }

  /* Footer reorder */
  .footer {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }

  .footer-center {
    order: 1;
  }

  .footer-right {
    order: 2;
  }

  .footer-left {
    order: 3;
  }
}

@media (max-width: 920px) {
  /* 🔹 Disable image zoom on hover */
  .project-card:hover .project-img img {
    transform: none !important;
  }

  /* 🔹 Disable card shadow / translate lift */
  .project-card:hover {
    transform: none !important;
    box-shadow: var(--shadow) !important;
  }

  /* 🔹 Force Learn More to always be visible */
  .learn-more,
  .project-card:hover .learn-more {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* 🔹 Keep project details static (no slide-up) */
  .project-details,
  .project-card:hover .project-details {
    transform: none !important;
    opacity: 1 !important;
  }

  .projects-grid{
    row-gap:50px;     /* vertical space (between rows) */
  }

  .hero-desc{
  margin-bottom: 0px;
  }
}

/* ====== Enquiry Modal – Minimal Luxury Style ====== */
.enquiry-content {
  width: min(92vw, 380px);
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  animation: fadeIn .3s ease;
}

.enquiry-content h2 {
  font-family: "ProductSans-Bold", sans-serif;
  font-size: 22px;
  color: var(--brand);
  margin: 0 0 14px;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Compact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 5px; /* tighter */
}

.contact-form label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 2px; /* very close to input */
}

/* Minimal input fields */
.contact-form input,
.contact-form textarea {
  border: none;
  border-bottom: 1.5px solid #ccc;
  font-size: 13px;
  padding: 6px 2px;
  transition: border-color .3s ease;
  background: transparent;
  resize: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brand);
  outline: none;
}

/* Submit button */
#btn {
  display: block;
  margin: 16px auto 0;   /* centers the button */
  padding: 8px 28px;     /* horizontal padding */
  border: none;
  background: var(--brand);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .3s ease, transform .2s ease;
  width: auto;           /* shrink to fit text */

  /* ✅ required for tick animation */
  position: relative;
  overflow: hidden;
}

#btn:hover {
  background: #a68c7d;
  transform: translateY(-1px);
}

.check-box {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background: var(--brand);
  position: absolute;
  top: 0;
  right: -42px;   /* hidden by default */
  opacity: 0;
  display: flex;  /* ✅ must stay */
  align-items: center;
  justify-content: center;
}

.check-box svg {
  width: 20px;
}

svg path {
  stroke-width: 3;
  stroke: #fff;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  stroke-linecap: round;
}

#btn.active .check-box {
  right: 0;
  opacity: 1;
  transition: .8s;
}

#btn.active p {
  margin-right: 60px;
  transition: .8s;
}

#btn.active svg path {
  stroke-dashoffset: 0;
  transition: .8s;
  transition-delay: .5s;
}

@media (max-width: 920px) {
  body {
    background-attachment: scroll !important; /* disable fixed background on mobile */
  }
}

[data-aos] {
  will-change: transform, opacity;
}