/* Woodworking Projects For Small Apartments | Mahasa */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1C252E;
  --off:#F4F6F8;
  --amber:#FF9900;
  --amber2:#ffb340;
  --text:#1C252E;
  --muted:#5a6470;
  --line:rgba(28,37,46,.12);
  --green:#22c55e;
  --shadow:0 10px 30px rgba(28,37,46,.10);
  --fh:'Playfair Display', Georgia, serif;
  --fb:'Roboto', system-ui, sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--text);background:var(--off);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh);color:var(--navy);line-height:1.2;font-weight:700;letter-spacing:.2px}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.6rem}
h3{font-size:1.25rem}
p{margin-bottom:1rem;color:#2a333d}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Marquee */
.marquee{position:sticky;top:0;z-index:60;background:var(--navy);color:#fff;border-bottom:2px solid var(--amber);overflow:hidden}
.marquee__inner{display:flex;white-space:nowrap;animation:slide 38s linear infinite;padding:10px 0;font-weight:500;font-size:.95rem}
.marquee:hover .marquee__inner{animation-play-state:paused}
.marquee span{padding:0 2.5rem}
.marquee b{color:var(--amber)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Nav */
.nav{position:sticky;top:42px;z-index:55;background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);box-shadow:0 2px 18px rgba(28,37,46,.06)}
.nav__wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1200px;margin:0 auto;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:700;font-size:1.25rem;color:var(--navy)}
.brand img{width:36px;height:36px}
.brand small{display:block;font-family:var(--fb);font-size:.7rem;letter-spacing:.2em;color:var(--amber);text-transform:uppercase;font-weight:600}
.menu{display:flex;align-items:center;gap:4px;list-style:none}
.menu li{position:relative}
.menu > li > a, .menu > li > button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:8px;font-weight:500;font-size:.95rem;color:var(--navy);background:none;border:0;cursor:pointer;font-family:var(--fb)}
.menu > li > a:hover, .menu > li > button:hover{background:rgba(255,153,0,.12);color:var(--navy)}
.menu .dropdown{position:absolute;top:100%;left:0;background:#fff;min-width:260px;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;list-style:none}
.menu li:hover > .dropdown, .menu li:focus-within > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:6px;font-size:.92rem}
.dropdown a:hover{background:var(--off);color:var(--amber)}
.cta-btn{background:var(--amber);color:#000 !important;padding:11px 18px !important;border-radius:8px;font-weight:600 !important;box-shadow:0 6px 16px rgba(255,153,0,.35)}
.cta-btn:hover{background:#ff8800 !important}
.hamburger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;color:var(--navy)}
.hamburger svg{width:26px;height:26px}

@media (max-width:960px){
  .hamburger{display:flex;align-items:center;justify-content:center}
  .menu{position:fixed;top:0;right:0;height:100vh;width:84%;max-width:340px;background:#fff;flex-direction:column;align-items:stretch;padding:80px 18px 24px;gap:4px;transform:translateX(110%);transition:transform .3s ease;box-shadow:-12px 0 32px rgba(0,0,0,.15);overflow-y:auto}
  .menu.open{transform:translateX(0)}
  .menu li{width:100%}
  .menu > li > a,.menu > li > button{width:100%;justify-content:space-between}
  .menu .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--off);margin:4px 0;display:none}
  .menu li.open > .dropdown{display:block}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:54;display:none}
  .backdrop.show{display:block}
}

/* Breadcrumb */
.crumbs{padding:18px 20px;font-size:.88rem;color:var(--muted);max-width:1200px;margin:0 auto}
.crumbs a{color:var(--amber);font-weight:500}
.crumbs span{margin:0 8px;color:var(--muted)}
@media (max-width:600px){.crumbs{padding-left:18px}}

/* Hero */
.hero{padding:10px 0 60px}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:28px}}
.stars{color:var(--amber);font-size:1.1rem;letter-spacing:2px}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.12);color:#15803d;padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:600;margin:10px 0}
.badge::before{content:"";width:8px;height:8px;background:var(--green);border-radius:50%}
.hero h1{margin:14px 0 10px}
.hero .sub{font-size:1.15rem;color:var(--muted);font-weight:500;margin-bottom:14px;font-family:var(--fh);font-style:italic}
.hero p.lead{font-size:1rem;color:#2a333d}
.last-updated{display:inline-block;background:var(--off);border:1px solid var(--line);padding:6px 12px;border-radius:6px;font-size:.82rem;color:var(--muted);margin-bottom:14px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer;border:0;transition:.18s;font-family:var(--fb)}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 10px 24px rgba(255,153,0,.4)}
.btn-primary:hover{background:#ff8800;transform:translateY(2px)}
.btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-lg{padding:18px 32px;font-size:1.1rem}

/* Hero slider */
.slider{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio: 4 / 5; background:var(--navy)}
.slides{position:relative;width:100%;height:100%}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.slides img.active{opacity:1}
.dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);border:0;cursor:pointer}
.dots button.on{background:var(--amber);width:26px;border-radius:5px}

/* Fixed parallax */
.parallax{background-attachment:fixed;background-position:center;background-size:cover;min-height:380px;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;position:relative}
.parallax::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,37,46,.7),rgba(28,37,46,.85))}
.parallax > div{position:relative;z-index:1;max-width:780px;padding:60px 20px}
.parallax h2,.parallax p{color:#fff}
.parallax h2{margin-bottom:14px}

/* Sections */
section{padding:70px 0}
.section-title{text-align:center;margin-bottom:46px}
.section-title p{color:var(--muted);max-width:680px;margin:10px auto 0}

/* Features grid */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.feature{background:#fff;padding:28px;border-radius:14px;border:1px solid var(--line);transition:.2s}
.feature:hover{transform:translateY(4px);box-shadow:var(--shadow)}
.feature .ic{width:48px;height:48px;border-radius:12px;background:rgba(255,153,0,.14);color:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:1.4rem;font-weight:700}
.feature h3{margin-bottom:8px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}
.g-card{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:.2s}
.g-card:hover{transform:translateY(4px);box-shadow:var(--shadow)}
.g-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.g-card .body{padding:18px}
.g-card h3{font-family:var(--fb);font-size:1rem;color:var(--navy);margin-bottom:8px;font-weight:600}
.g-card p{font-size:.9rem;color:var(--muted);margin:0}

/* Testimonials */
.t-wrap{position:relative;overflow:hidden;padding:0 60px}
.t-track{display:flex;transition:transform .5s ease}
.t-card{flex:0 0 33.333%;padding:0 12px}
@media (max-width:900px){.t-card{flex:0 0 50%}}
@media (max-width:620px){.t-card{flex:0 0 100%}.t-wrap{padding:0 50px}}
.t-inner{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;height:100%}
.t-inner .stars{font-size:1rem;margin-bottom:10px}
.t-inner p{font-size:.95rem;color:#2a333d}
.t-inner .who{margin-top:14px;font-size:.88rem;color:var(--muted)}
.t-inner .who b{color:var(--navy);font-family:var(--fh);font-size:1rem}
.t-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;z-index:2}
.t-prev{left:0}.t-next{right:0}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:18px 22px}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);font-family:var(--fh);font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::after{content:"+";color:var(--amber);font-size:1.4rem;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details[open]{box-shadow:var(--shadow)}
.faq p{margin-top:12px;color:#2a333d}

/* Footer */
footer{background:var(--navy);color:#cfd6df;padding:60px 0 24px;margin-top:40px}
footer h4{color:#fff;font-family:var(--fh);margin-bottom:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:30px}
@media (max-width:760px){.f-grid{grid-template-columns:1fr}}
footer a{color:#cfd6df}
footer a:hover{color:var(--amber)}
footer ul{list-style:none}
footer ul li{margin-bottom:8px}
.ship{text-align:center;font-size:.85rem;color:#9aa4b0;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:18px;line-height:1.7}
.credit{text-align:center;font-size:.85rem;color:#9aa4b0;margin-top:10px}
.credit a{color:var(--amber)}

/* Live purchase */
.live-purchase{position:fixed;left:18px;bottom:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px 12px 14px;box-shadow:var(--shadow);max-width:300px;z-index:50;display:flex;gap:12px;align-items:center;transform:translateY(120%);transition:transform .4s;font-size:.85rem}
.live-purchase.show{transform:translateY(0)}
.lp-dot{width:10px;height:10px;background:var(--green);border-radius:50%;flex-shrink:0;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.lp-text b{color:var(--navy)}
.lp-text small{color:var(--muted);display:block;font-size:.75rem;margin-top:2px}
@media (max-width:600px){.live-purchase{left:12px;bottom:12px;max-width:240px;padding:10px 12px;font-size:.78rem}}

/* Chatbot */
.chat-btn{position:fixed;right:18px;bottom:18px;width:62px;height:62px;border-radius:50%;background:var(--amber);color:#fff;border:0;cursor:pointer;box-shadow:0 12px 28px rgba(255,153,0,.45);z-index:51;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.chat-btn .cdot{position:absolute;top:8px;right:8px;width:12px;height:12px;background:var(--green);border-radius:50%;border:2px solid #fff}
.chat-box{position:fixed;right:18px;bottom:90px;width:340px;max-width:calc(100vw - 30px);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);z-index:52;display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.chat-box.open{display:flex}
.chat-head{background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chat-head .av{width:38px;height:38px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700}
.chat-head b{display:block;font-size:.95rem}
.chat-head small{color:#9aa4b0;display:flex;align-items:center;gap:6px;font-size:.75rem}
.chat-head small::before{content:"";width:8px;height:8px;background:var(--green);border-radius:50%}
.chat-close{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;font-size:1.4rem}
.chat-body{padding:16px;max-height:380px;overflow-y:auto;background:var(--off)}
.bubble{background:#fff;padding:10px 14px;border-radius:14px 14px 14px 4px;margin-bottom:10px;font-size:.9rem;box-shadow:0 2px 6px rgba(0,0,0,.05);max-width:90%}
.bubble.me{background:var(--amber);color:#fff;border-radius:14px 14px 4px 14px;margin-left:auto}
.choices{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.choices button{text-align:left;background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:10px;cursor:pointer;font-size:.88rem;color:var(--navy);font-family:var(--fb)}
.choices button:hover{border-color:var(--amber);background:rgba(255,153,0,.06)}
.chat-cta{display:block;background:var(--amber);color:#fff !important;text-align:center;padding:12px;border-radius:10px;font-weight:700;margin-top:8px}
@media (max-width:600px){.chat-box{right:12px;bottom:84px}}

/* Static page */
.legal{background:#fff;padding:50px;border-radius:14px;border:1px solid var(--line);margin:30px 0}
.legal h2{margin-top:30px}
.legal h2:first-child{margin-top:0}
@media (max-width:600px){.legal{padding:28px 22px}}