/*
Theme Name: Interior Studio Manager
Theme URI: https://zyrodigital.in
Author: Zyro Digital
Description: Single-page animated website for an interior design studio plus a private business app at /app/ (projects, quotations, payments, expenses).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: interior-studio
*/

:root{--ink:#221c18;--walnut:#3d2a1f;--sand:#f5efe4;--lam:#e6d9c2;--brass:#b08a4e;--sage:#5f7a6b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.site{margin:0;font:17px/1.6 "DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--sand)}
.site h1,.site h2,.site h3{font-family:Fraunces,Georgia,serif;margin:0;letter-spacing:-.02em;line-height:1.05}
.site a{color:inherit}
.wrap{width:min(1120px,92%);margin:0 auto}

.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px max(4%,20px);background:rgba(245,239,228,.88);backdrop-filter:blur(8px)}
.nav b{font:700 20px Fraunces,serif}
.nav nav{display:flex;gap:26px}
.nav nav a{text-decoration:none;font-weight:500;font-size:15px}
.nav nav a:hover{color:var(--brass)}
.cta{display:inline-block;background:var(--walnut);color:#fff!important;padding:12px 24px;border-radius:99px;text-decoration:none;font-weight:700}
.cta.ghost{background:transparent;color:var(--walnut)!important;border:2px solid var(--walnut)}

/* hero: a kitchen elevation that draws itself */
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:30px;padding:110px max(4%,20px) 50px;width:min(1240px,100%);margin:0 auto}
.hero h1{font-size:clamp(42px,6.4vw,84px);font-weight:700}
.hero p{max-width:30em;font-size:19px;color:#5a4d42;margin:20px 0 28px}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.draw{width:100%;height:auto;color:var(--walnut)}
.draw .ln{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);animation:drawln 1.6s ease forwards;animation-delay:var(--d,0s)}
.draw .fill{opacity:0;animation:fillin .9s ease forwards;animation-delay:var(--d,2s)}
@keyframes drawln{to{stroke-dashoffset:0}}
@keyframes fillin{to{opacity:1}}

.band{background:var(--walnut);color:#ecdfc9;overflow:hidden;padding:18px 0;white-space:nowrap}
.band div{display:inline-block;animation:slide 32s linear infinite;font:500 22px Fraunces,serif}
.band span{margin:0 26px}
@keyframes slide{to{transform:translateX(-50%)}}

section.blk{padding:110px 0}
.blk h2{font-size:clamp(32px,4.4vw,56px);max-width:14em}
.blk .lead{max-width:34em;color:#5a4d42;margin:18px 0 0}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;margin-top:50px;border-top:2px solid var(--walnut)}
.svc{padding:26px 22px 30px 0;border-bottom:1px solid #d8ccb6}
.svc h3{font-size:26px;margin-bottom:8px;transition:color .25s}
.svc:hover h3{color:var(--brass)}
.svc p{margin:0;color:#6a5d51;font-size:15.5px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;margin-top:50px;counter-reset:s}
.step{border-left:3px solid var(--brass);padding-left:16px}
.step h3{font-size:22px;margin-bottom:6px}
.step p{margin:0;color:#6a5d51;font-size:15px}

.contact{background:var(--lam)}
.contact .box{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-end}
.contact address{font-style:normal;font-size:19px;line-height:1.8}
footer.foot{padding:26px 4%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#7a6e63;font-size:14px}
footer.foot a{text-decoration:none}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

@media(max-width:860px){
 .hero{grid-template-columns:1fr;padding-top:100px}
 .nav nav a:not(.cta){display:none}
 section.blk{padding:70px 0}
}
@media(prefers-reduced-motion:reduce){
 .draw .ln{animation:none;stroke-dashoffset:0}.draw .fill{animation:none;opacity:1}.band div{animation:none}.rv{opacity:1;transform:none;transition:none}
}