:root{
      --clr-primary:#200000;        /* deep logo brown */
      --clr-secondary:#602000;      /* warm wood brown */
      --clr-turmeric:#F2A500;       /* turmeric accent */
      --clr-chili:#D94600;          /* chili accent */
      --clr-cardamom:#A8C57A;       /* green accent */
      --clr-bg:#F1E4D2;             /* page background (paper beige) */
      --clr-bg-soft:#E0C0A0;        /* section background */
      --clr-text-dark:#200000;      /* headline / body primary */

      --radius:12px;
      --container:1200px;
    }

    /* Basic reset */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial;
      background:linear-gradient(0deg, var(--clr-bg), #fff 60%);
      color:var(--clr-text-dark);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }

    a{color:var(--clr-turmeric);text-decoration:none}
    img{max-width:100%;display:block}

    /* Layout */
    .container{max-width:var(--container);margin:0 auto;padding:0 18px}

    header{
      position:sticky;top:0;z-index:60;background:rgba(241,228,210,0.95);backdrop-filter:blur(4px);border-bottom:1px solid rgba(0,0,0,0.05);
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:12px}
    .logo-circle{width:54px;height:54px;border-radius:10px;background:linear-gradient(135deg,var(--clr-secondary),var(--clr-primary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;box-shadow:0 6px 18px rgba(32,0,0,0.12)}
    .brand h1{font-size:18px;margin:0;line-height:1}
    .brand p{margin:0;font-size:12px;color:rgba(32,0,0,0.6)}

    nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
    nav li a{padding:6px 10px;border-radius:8px;font-weight:600}
    nav li a:hover{background:rgba(217,70,0,0.06)}

    /* Mobile nav */
    .nav-toggle{display:none}
    @media (max-width:860px){
      nav ul{display:none}
      .nav-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;font-weight:700}
    }

    /* Hero */
    .hero{padding:56px 0;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
    .hero .kicker{display:inline-block;background:var(--clr-turmeric);color:#fff;padding:6px 12px;border-radius:999px;font-weight:700;margin-bottom:14px}
    .hero h2{font-size:42px;margin:0 0 10px}
    .hero p{margin:0 0 18px;color:rgba(32,0,0,0.75)}
    .cta-row{display:flex;gap:12px;align-items:center}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-weight:700;border:none;cursor:pointer}
    .btn-primary{background:linear-gradient(90deg,var(--clr-turmeric),var(--clr-chili));color:white;box-shadow:0 8px 20px rgba(217,70,0,0.12)}
    .btn-outline{background:transparent;border:2px solid rgba(32,0,0,0.06);color:var(--clr-text-dark)}
    .hero-card{background:var(--clr-bg-soft);padding:18px;border-radius:18px;box-shadow:0 12px 30px rgba(96,32,0,0.06)}

    /* Features */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
    .feature{background:white;padding:16px;border-radius:12px;border:1px solid rgba(0,0,0,0.03)}
    .feature h4{margin:8px 0 6px}
    .feature p{margin:0;color:rgba(32,0,0,0.65);font-size:14px}

    /* About / Two-col */
    .two-col{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center;padding:36px 0}

    /* Gallery grid */
    .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .gallery-item{border-radius:10px;overflow:hidden;background:#fff}

    /* Testimonial */
    .testimonials{background:linear-gradient(180deg,rgba(242,165,0,0.06),transparent);padding:28px;border-radius:16px}
    .testimonial{background:white;padding:18px;border-radius:12px;box-shadow:0 10px 22px rgba(32,0,0,0.04)}

    /* Contact */
    .contact-card{background:white;padding:18px;border-radius:12px;box-shadow:0 10px 28px rgba(32,0,0,0.04)}
    form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    form label{font-size:13px;color:rgba(32,0,0,0.75)}
    input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.07)}
    textarea{min-height:120px}

    footer{padding:28px 0;margin-top:28px;border-top:1px solid rgba(0,0,0,0.04)}
    .footer-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:center}

    /* Responsive rules */
    @media (max-width:1100px){
      .hero{grid-template-columns:1fr 360px}
      .two-col{grid-template-columns:1fr}
      .gallery-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:860px){
      .hero{grid-template-columns:1fr;gap:18px}
      .nav{padding:10px 0}
      .brand h1{font-size:16px}
      .brand p{display:none}
      .features{grid-template-columns:1fr}
      .gallery-grid{grid-template-columns:1fr}
      form .row{grid-template-columns:1fr}
    }

    /* Tiny details */
    .muted{color:rgba(32,0,0,0.55);font-size:14px}
    .caps{letter-spacing:1px;text-transform:uppercase;font-weight:700;font-size:12px}

    /* Simple swipe-like testimonial controls */
    .test-row{display:flex;gap:12px;align-items:center}
    .dots{display:flex;gap:8px}
    .dot{width:10px;height:10px;border-radius:999px;background:rgba(0,0,0,0.08)}
    .dot.active{background:var(--clr-turmeric)}