:root{
    --bg:#FAF8F3; --card:#FFFFFF; --ink:#211F1A; --ink-soft:#5B564A;
    --amber:#C98A2E; --amber-soft:#F1DDB4; --sage:#7C8A5E; --sage-soft:#E4E8D9;
    --line: rgba(33,31,26,0.09); --shadow: 0 20px 50px -20px rgba(33,31,26,0.18);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif; font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Inter', sans-serif; font-weight:600; letter-spacing:-0.01em; line-height:1.15;}
  em{font-style:normal; color:var(--amber); font-weight:600;}
  .mono{font-family:'Inter', sans-serif; font-weight:500; letter-spacing:0.02em;}
  .eyebrow{font-family:'Inter', sans-serif; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); font-weight:600;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  img{display:block; max-width:100%;}

  .blob-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
  .blob-bg span{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.5;}
  .b1{width:520px; height:520px; background:var(--amber-soft); top:-160px; left:-120px;}
  .b2{width:460px; height:460px; background:var(--sage-soft); top:120px; right:-160px;}

  .nav-outer{position:sticky; top:18px; z-index:50; display:flex; justify-content:center; padding:0 20px;}
  nav{width:100%; max-width:980px; background:rgba(255,255,255,0.75); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px; padding:10px 12px 10px 18px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 8px 30px -12px rgba(33,31,26,0.15);}
  .logo{display:flex; align-items:center; gap:9px;}
  .logo img{height:55px; width:auto;}
  .navlinks{display:flex; align-items:center; gap:24px; font-size:13.5px; font-weight:500; color:var(--ink-soft);}
  .navlinks a:hover{color:var(--ink);}
  .cta-btn{background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:999px; font-size:13px; font-weight:500; border:none;}
  @media(max-width:900px){ .navlinks{display:none;} }

  .hero{padding:60px 0 20px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  .hero h1{font-size:clamp(36px,4.6vw,42px); margin:18px 0 20px;}
  .hero p.lead{font-size:16.5px; color:var(--ink-soft); max-width:460px; margin-bottom:28px;}
  .hero-ctas{display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap;}
  .cta-ghost{background:var(--card); border:1px solid var(--line); color:var(--ink); padding:14px 26px; border-radius:999px; font-size:14px; font-weight:500;}
  .cta-solid{background:var(--amber); color:#fff; padding:14px 26px; border-radius:999px; font-size:14px; font-weight:500; border:none;}
  .stat-row{display:flex; gap:28px; flex-wrap:wrap;}
  .stat{border-left:2px solid var(--amber); padding-left:14px;}
  .stat .num{font-family:'Inter', sans-serif; font-weight:700; font-size:22px;}
  .stat .lbl{font-size:11px; color:var(--ink-soft); margin-top:2px; font-family:'Inter', sans-serif; font-weight:500;}

  .collage{position:relative; height:440px;}
  .collage img{position:absolute; border-radius:20px; box-shadow:var(--shadow); object-fit:cover; border:4px solid var(--card);}
  .c1{width:62%; height:270px; top:0; left:0; z-index:1;}
  .c2{width:56%; height:220px; top:220px; right:0; z-index:2;}
  .c3{width:42%; height:140px; bottom:0; left:8%; z-index:3;}

  section{padding:96px 0;}
  .section-head{max-width:600px; margin:0 auto 48px; text-align:center;}
  .section-head h2{font-size:clamp(27px,3.2vw,40px); margin-top:10px;}
  .section-head p{color:var(--ink-soft); margin-top:14px; font-size:15px;}
  .section-head.left{text-align:left; margin:0 0 20px;}

  .process-track{position:relative;}
  .rail{position:absolute; top:34px; left:12.5%; right:12.5%; height:1px; background:var(--line); z-index:0;}
  .process-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; z-index:1;}
  .step{text-align:center;}
  .step .badge{width:52px; height:52px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:'Inter', sans-serif; font-weight:600; font-size:14px; color:var(--amber); box-shadow:var(--shadow);}
  .step h3{font-size:16.5px; margin-bottom:6px; font-weight:600;}
  .step p{font-size:12px; color:var(--ink-soft); padding:0 4px;}
  @media(max-width:980px){ .process-steps{grid-template-columns:1fr 1fr 1fr;} .rail{display:none;} }
  @media(max-width:600px){ .process-steps{grid-template-columns:1fr 1fr;} }

  .bento{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .card{background:var(--card); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
  .swatch{height:150px; overflow:hidden;}
  .swatch img{width:100%; height:100%; object-fit:cover;}
  .card-body{padding:22px 22px 24px;}
  .card-body .cat{font-size:10.5px; color:var(--amber); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; font-family:'Inter', sans-serif;}
  .card-body h3{font-size:18.5px; margin-bottom:12px; font-weight:600;}
  .spec-ticket{background:var(--sage-soft); border-radius:14px; padding:12px 14px; font-family:'Inter', sans-serif; font-weight:500; font-size:11.5px; color:var(--ink-soft);}
  .spec-ticket div{display:flex; justify-content:space-between; padding:3px 0;}
  .spec-ticket div span:first-child{opacity:0.6;}
  @media(max-width:980px){ .bento{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .bento{grid-template-columns:1fr;} }

  .why-split{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center;}
  .why-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px;}
  .why-card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px 18px; box-shadow:var(--shadow);}
  .why-card .icon{width:36px; height:36px; border-radius:11px; background:var(--amber-soft); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:16px;}
  .why-card h3{font-size:16px; font-weight:600; margin-bottom:5px;}
  .why-card p{font-size:12px; color:var(--ink-soft);}
  .why-pill{display:inline-block; background:var(--amber); color:#fff; padding:9px 18px; border-radius:999px; font-size:11.5px; font-family:'Inter', sans-serif; font-weight:600; margin-bottom:16px;}
  .why-collage{position:relative; height:420px;}
  .why-collage img{position:absolute; border-radius:18px; box-shadow:var(--shadow); object-fit:cover; border:4px solid var(--card);}
  .w1{width:58%; height:260px; top:0; left:0; z-index:1;}
  .w2{width:54%; height:220px; top:190px; right:0; z-index:2;}
  .w3{width:40%; height:150px; bottom:0; left:12%; z-index:3;}

  /* LAB SPEC TABLE */
  .lab-card{background:var(--card); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:36px 40px;}
  .lab-top{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px;}
  .lab-top h3{font-size:22px; font-weight:600;}
  .lab-badge{font-family:'Inter', sans-serif; font-weight:600; font-size:12px; color:var(--amber); padding:6px 14px; border-radius:999px;}
  table.spec-table{width:100%; border-collapse:collapse; font-size:13px;}
  table.spec-table th{text-align:left; font-family:'Inter', sans-serif; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--line);}
  table.spec-table td{padding:10px 10px; border-bottom:1px solid var(--line);}
  table.spec-table td.mono-val{font-family:'Inter', sans-serif; font-weight:500;}
  .lab-note{margin-top:18px; font-size:11.5px; color:var(--ink-soft);}

  .testimonial .t-card{max-width:740px; margin:0 auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:32px; padding:52px 46px; box-shadow:var(--shadow);}
  .t-card blockquote{font-family:'Inter', sans-serif; font-weight:500; font-size:clamp(15px,2.4vw,20px); line-height:1.5; color:var(--ink);}
  .t-card .attrib{margin-top:22px; font-size:12.5px; color:var(--ink-soft); font-family:'Inter', sans-serif; font-weight:600;}

  .contact-card{background:var(--card); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); display:grid; grid-template-columns:0.9fr 1.1fr; overflow:hidden;}
  .contact-info{padding:48px 40px; background:var(--sage-soft);}
  .contact-info h2{font-size:clamp(24px,2.8vw,30px); margin-bottom:14px; font-weight:600;}
  .contact-info p{color:var(--ink-soft); font-size:14px; margin-bottom:24px; max-width:320px;}
  .contact-line{display:flex; gap:14px; padding:11px 0; border-top:1px solid rgba(33,31,26,0.1); font-size:13px;}
  .contact-line .k{color:var(--ink-soft); width:82px; flex:none; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; font-family:'Inter', sans-serif; font-weight:600; padding-top:2px;}
  .contact-form{padding:48px 40px;}
  form{display:flex; flex-direction:column; gap:14px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  label{font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:5px; display:block; font-family:'Inter', sans-serif; font-weight:600;}
  input, select, textarea{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-family:'Inter', sans-serif; font-size:13.5px; color:var(--ink);}
  textarea{resize:vertical; min-height:76px;}
  .submit-btn{background:var(--amber); color:#fff; border:none; padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600; align-self:flex-start; margin-top:4px;}
  @media(max-width:860px){ .contact-card{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .why-split{grid-template-columns:1fr;} }

  footer{padding:44px 0 30px;}
  .footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; border-top:1px solid var(--line); padding-top:26px;}
  .footer-grid .logo img{height:56px;}
  .foot-links{display:flex; gap:22px; font-size:12.5px; color:var(--ink-soft);}
  .foot-bottom{margin-top:16px; font-size:11px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

  @media(max-width:900px){ .wrap{padding:0 24px;} .hero-grid{grid-template-columns:1fr;} .collage{height:340px; margin-top:20px;} }

  /* ==============================
   Exhibition
============================== */

.exhibition{
    background:#fff;
}

.expo-slider{
    position:relative;
    overflow:hidden;
    margin-top:50px;
}

.expo-track{
    display:flex;
    gap:24px;
    transition:transform .6s ease;
}

.expo-slide{
    min-width:calc(33.333% - 16px);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    background:#fff;
}

.expo-slide img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.expo-slide:hover img{
    transform:scale(1.05);
}

.expo-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
    cursor:pointer;
    font-size:22px;
    font-family:'Inter', sans-serif;
    z-index:10;
}

.expo-btn:hover{
    background:var(--amber);
    color:#fff;
}

.prev{
    left:10px;
}

.next{
    right:10px;
}

@media(max-width:992px){

    .expo-slide{
        min-width:50%;
    }

}

@media(max-width:768px){

    .expo-slide{
        min-width:100%;
    }

    .expo-slide img{
        height:300px;
    }

}


@media (max-width: 991px) {
    .expo-btn {
        display: none;
    }
}

/* ////////////// floating botton */
/* Floating Buttons */
.floating-btn{
    position:fixed;
    bottom:25px;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.2);
    transition:.3s ease;
}

.floating-btn i{
    font-size:28px;
}

/* WhatsApp */
.whatsapp-btn{
    left:20px;
    background:#25D366;
    color:#fff;
}

.whatsapp-btn:hover{
    background:#1ebe5d;
    transform:translateY(-5px) scale(1.08);
}

/* Scroll Top */
.scroll-top-btn{
    right:20px;
    border:none;
    cursor:pointer;

    /* Glass Effect */
    background:rgba(148, 132, 26, 0.18);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    color:var(--amber);
    border:1px solid rgba(29, 107, 83, 0.3);

    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:all .3s ease;
}

.scroll-top-btn.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top-btn:hover{
    background:rgba(29, 107, 83, 0.35);
    transform:translateY(-4px) scale(1.05);
}

/* Mobile */
@media (max-width:768px){

    .floating-btn{
        width:50px;
        height:50px;
        bottom:18px;
    }

    .floating-btn i{
        font-size:24px;
    }

    .whatsapp-btn{
        left:15px;
    }

    .scroll-top-btn{
        right:15px;
    }
}

/* ==========================
   Mobile Footer
========================== */
@media (max-width: 768px) {

    .footer-grid{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .foot-links{
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .foot-bottom{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 10px;
        line-height: 1.8;
    }

    .footer-grid .logo img{
        margin: 0 auto;
    }

    .foot-bottom span{
        width: 100%;
    }

}

/* ==========================
   Exhibition Dots
========================== */

.expo-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:28px;
}

.expo-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#d3d3d3;
    cursor:pointer;
    transition:.3s ease;
}

.expo-dot:hover{
    background:var(--amber);
}

.expo-dot.active{
    width:32px;
    border-radius:999px;
    background:var(--amber);
}