/* =========================================================
   DEVAGYA — Vastu & Signature Spaces
   Shared design system (used by every page)
   ========================================================= */

:root{
  --bg-dark:#14171C;
  --bg-dark-2:#1B1F26;
  --bg-light:#E7E0D2;
  --bg-light-2:#DED4C0;
  --ink:#EDE7DA;
  --ink-dim:rgba(237,231,218,0.68);
  --ink-dark:#20242B;
  --ink-dark-dim:rgba(32,36,43,0.68);
  --brass:#B8894F;
  --brass-bright:#CBA06A;
  --hairline-dark:rgba(237,231,218,0.14);
  --hairline-light:rgba(32,36,43,0.16);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); background:var(--bg-dark); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px; border-radius:2px;
}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,23,28,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline-dark);
  transition:padding .25s ease;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; max-width:var(--maxw); margin:0 auto;
  transition:padding .25s ease;
}
header.scrolled .nav{padding:12px 32px;}
.brand{display:flex; align-items:center; gap:10px; line-height:1.05;}
.brand-icon{
  width:36px; height:36px; border-radius:8px; background:var(--bg-light);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.brand-icon img{width:100%; height:100%; object-fit:cover;}
.brand-text{display:flex; flex-direction:column;}
.brand-main{font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:0.01em;}
.brand-sub{font-size:0.66rem; color:var(--ink-dim); margin-top:3px;}

.brand-strip{background:var(--bg-light); text-align:center; padding:64px 0 48px;}
.brand-strip img{width:180px; margin:0 auto 8px; border-radius:8px;}
.brand-strip .brand-strip-tag{font-family:var(--serif); font-style:italic; color:var(--ink-dark-dim); font-size:1.1rem; margin:14px 0 36px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{position:relative; font-size:0.9rem; color:var(--ink-dim); transition:color .2s; padding-bottom:3px;}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--ink);}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:var(--brass); transition:right .25s ease;
}
.nav-links a:hover::after{right:0;}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{right:0;}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{right:0;}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brass); color:#191308;
  padding:9px 16px; border-radius:3px; font-size:0.86rem; font-weight:700;
  transition:background .2s;
}
.nav-cta::after{display:none;}
.nav-cta:hover, .nav-cta:focus-visible{background:var(--brass-bright);}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); width:34px; height:34px; cursor:pointer;}
.nav-toggle span{display:block; width:22px; height:1.5px; background:var(--ink); margin:6px auto; transition:transform .2s, opacity .2s;}

@media (max-width:820px){
  .nav-links{
    position:fixed; top:69px; left:0; right:0; bottom:0;
    background:var(--bg-dark); flex-direction:column; align-items:flex-start;
    padding:32px; gap:24px; transform:translateX(100%);
    transition:transform .25s ease; z-index:40; overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a, .nav-links .nav-cta{font-size:1.1rem;}
  .nav-toggle{display:block;}
}

/* ---------- Buttons / links ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brass); color:#191308;
  padding:14px 26px; border-radius:3px; font-size:0.98rem; font-weight:700;
  transition:background .2s, transform .2s; border:none; cursor:pointer;
}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--brass-bright); transform:translateY(-1px);}
.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--ink); border:1px solid var(--hairline-dark);
  padding:13px 25px; border-radius:3px; font-size:0.98rem; font-weight:600;
  transition:border-color .2s, background .2s;
}
.btn-outline:hover, .btn-outline:focus-visible{border-color:var(--brass); background:rgba(184,137,79,0.08);}
.light-section .btn-outline{border-color:var(--hairline-light); color:var(--ink-dark);}
.light-section .btn-outline:hover{border-color:var(--brass);}
.link-quiet{font-size:0.98rem; color:var(--ink-dim); border-bottom:1px solid var(--hairline-dark); padding-bottom:3px; transition:color .2s, border-color .2s;}
.link-quiet:hover, .link-quiet:focus-visible{color:var(--ink); border-color:var(--brass);}
.light-section .link-quiet{color:var(--ink-dark-dim); border-color:var(--hairline-light);}

/* ---------- Section shell ---------- */
section{padding:104px 0;}
.section-label{font-size:0.9rem; color:var(--brass); font-weight:600; margin:0 0 18px;}
.light-section{background:var(--bg-light); color:var(--ink-dark);}
.light-section .section-label{color:#8A612F;}
.page-hero{padding:76px 0 64px; border-bottom:1px solid var(--hairline-dark);}
.page-hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.12; margin:0 0 18px;}
.page-hero p{font-size:1.08rem; line-height:1.65; color:var(--ink-dim); max-width:560px; margin:0;}

.fade-up{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.fade-up.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ .fade-up{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* ---------- Hero (home) ---------- */
.hero{position:relative; overflow:hidden; padding:96px 0 120px; background:var(--bg-dark);}
.hero-grid-svg{position:absolute; top:-60px; right:-160px; width:640px; height:640px; opacity:0.14; pointer-events:none;}
@media (max-width:720px){ .hero-grid-svg{ right:-260px; top:-40px; width:480px; height:480px; } }
.hero-inner{position:relative; z-index:1; max-width:640px;}
.hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,5.4vw,3.9rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 26px;}
.hero p{font-size:1.1rem; line-height:1.65; color:var(--ink-dim); max-width:480px; margin:0 0 40px;}
.hero-actions{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}

/* ---------- Trust strip ---------- */
.trust-strip{padding:34px 0; border-top:1px solid var(--hairline-dark); border-bottom:1px solid var(--hairline-dark);}
.trust-list{display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center; text-align:center;}
.trust-list li{font-size:0.9rem; color:var(--ink-dim); list-style:none;}

/* ---------- Approach / process steps ---------- */
.approach-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hairline-dark);}
.approach-steps.steps-5{grid-template-columns:repeat(5,1fr);}
.approach-step{padding:32px 26px; border-right:1px solid var(--hairline-dark); transition:background .25s ease;}
.approach-step:last-child{border-right:none;}
.approach-step:hover{background:rgba(184,137,79,0.06);}
.approach-num{font-family:var(--serif); font-size:0.95rem; color:var(--brass); margin:0 0 16px;}
.approach-step h3{font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 12px; color:var(--ink);}
.approach-step p{font-size:0.94rem; line-height:1.62; color:var(--ink-dim); margin:0;}
@media (max-width:900px){
  .approach-steps, .approach-steps.steps-5{grid-template-columns:1fr;}
  .approach-step{border-right:none; border-bottom:1px solid var(--hairline-dark); padding:26px 2px;}
  .approach-step:last-child{border-bottom:none;}
}

/* ---------- Services grid ---------- */
.service-row{
  display:grid; grid-template-columns:64px 1fr 1.1fr; gap:36px;
  padding:36px 24px; margin:0 -24px; border-top:1px solid var(--hairline-dark);
  align-items:start; transition:background .25s ease;
}
.service-row:hover{background:rgba(184,137,79,0.06);}
.service-row:last-of-type{border-bottom:1px solid var(--hairline-dark);}
.service-icon{width:44px; height:44px; color:var(--brass); transition:transform .25s ease;}
.service-row:hover .service-icon{transform:translateY(-2px);}
.service-row h3{font-family:var(--serif); font-weight:500; font-size:1.35rem; margin:0; color:var(--ink);}
.service-row p{font-size:1rem; line-height:1.7; color:var(--ink-dim); margin:0;}
@media (max-width:760px){ .service-row{grid-template-columns:1fr; gap:14px;} }

/* ---------- Signature Spaces block ---------- */
.signature-block{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.signature-visual{
  aspect-ratio:4/5; border:1px solid var(--hairline-dark); position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--bg-dark-2), var(--bg-dark));
}
.signature-visual svg{position:absolute; inset:0; width:100%; height:100%; opacity:0.9;}
.signature-copy h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.7rem); margin:0 0 22px; line-height:1.15;}
.signature-copy p{font-size:1.04rem; line-height:1.75; color:var(--ink-dim); margin:0 0 20px;}
@media (max-width:860px){ .signature-block{grid-template-columns:1fr; gap:34px;} }

/* ---------- Insights grid ---------- */
.insights-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline-dark); border:1px solid var(--hairline-dark);}
.insight-card{background:var(--bg-dark); padding:30px; transition:background .25s ease;}
.insight-card:hover{background:var(--bg-dark-2);}
.insight-cat{font-size:0.78rem; color:var(--brass); font-weight:700; letter-spacing:0.03em; margin:0 0 14px;}
.insight-card h3{font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 10px; line-height:1.3;}
.insight-card p{font-size:0.92rem; color:var(--ink-dim); line-height:1.6; margin:0;}
@media (max-width:820px){ .insights-grid{grid-template-columns:1fr;} }
.insights-note{margin-top:36px; font-size:0.95rem; color:var(--ink-dim); text-align:center;}

/* ---------- About page ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
.about-grid h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.15; margin:0;}
.about-copy p{font-size:1.04rem; line-height:1.75; color:var(--ink-dark-dim); margin:0 0 22px;}
.about-copy p:last-child{margin-bottom:0;}
.pull{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink-dark); margin:34px 0 0; padding-top:26px; border-top:1px solid var(--hairline-light);}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr; gap:32px;} }

/* ---------- Sign-up / lead form ---------- */
.signup-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.signup-copy h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.6rem); margin:0 0 18px; line-height:1.15;}
.signup-copy p{font-size:1.02rem; line-height:1.7; color:var(--ink-dim); margin:0 0 16px; max-width:440px;}
.signup-form{
  background:var(--bg-dark-2); border:1px solid var(--hairline-dark); border-radius:6px; padding:32px;
}
.field{margin-bottom:18px;}
.field label{display:block; font-size:0.85rem; color:var(--ink-dim); margin-bottom:7px;}
.field input, .field textarea{
  width:100%; background:var(--bg-dark); border:1px solid var(--hairline-dark); color:var(--ink);
  padding:12px 14px; border-radius:3px; font-family:var(--sans); font-size:0.96rem;
}
.field input:focus, .field textarea:focus{border-color:var(--brass); outline:none;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.consent{font-size:0.8rem; color:var(--ink-dim); margin:14px 0 20px; line-height:1.5;}
.form-note{font-size:0.82rem; color:var(--ink-dim); margin-top:14px;}
.form-success{
  display:none; background:rgba(63,191,99,0.12); border:1px solid rgba(63,191,99,0.35);
  color:#7FE39A; padding:14px 16px; border-radius:4px; font-size:0.92rem; margin-bottom:16px;
}
.form-success.show{display:block;}
@media (max-width:860px){ .signup-panel{grid-template-columns:1fr; gap:32px;} }

/* ---------- Contact card ---------- */
.contact-methods{display:grid; gap:16px; margin-top:36px;}
.contact-method{
  display:flex; align-items:center; gap:18px; padding:22px; border:1px solid var(--hairline-dark);
  border-radius:4px; background:var(--bg-dark-2); transition:border-color .2s;
}
.contact-method:hover{border-color:var(--brass);}
.contact-method .cm-icon{width:34px; height:34px; color:var(--brass); flex-shrink:0;}
.contact-method .cm-label{font-size:0.82rem; color:var(--ink-dim); margin-bottom:2px;}
.contact-method .cm-value{font-family:var(--serif); font-size:1.1rem;}

/* ---------- Final CTA band ---------- */
.cta-band{background:var(--bg-dark-2); text-align:center;}
.cta-band h2{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.2vw,2.9rem); margin:0 0 20px;}
.cta-band p{font-size:1.05rem; color:var(--ink-dim); max-width:480px; margin:0 auto 34px;}
.cta-band .hero-actions{justify-content:center;}

/* ---------- Prose (privacy/terms) ---------- */
.prose{max-width:720px;}
.prose h2{font-family:var(--serif); font-size:1.4rem; margin:36px 0 12px;}
.prose p, .prose li{font-size:0.98rem; line-height:1.75; color:var(--ink-dim); margin:0 0 14px;}
.prose ul{padding-left:22px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hairline-dark); padding:56px 0 32px; background:var(--bg-dark);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-col h4{font-size:0.82rem; color:var(--ink-dim); margin:0 0 16px; font-weight:600;}
.footer-col a{display:block; font-size:0.92rem; color:var(--ink-dim); margin-bottom:10px; transition:color .2s;}
.footer-col a:hover{color:var(--ink);}
.footer-tag{font-size:0.85rem; color:var(--ink-dim); margin-top:10px; max-width:280px;}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--hairline-dark); font-size:0.82rem; color:var(--ink-dim);
}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:28px;} }

/* ---------- Floating helpers ---------- */
.float-wa{
  position:fixed; bottom:26px; right:26px; z-index:60; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#0b1a10; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.35); opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.float-wa.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.float-wa svg{width:28px; height:28px;}
.float-wa:hover{transform:translateY(-2px) scale(1.04);}
.back-to-top{
  position:fixed; bottom:26px; right:92px; z-index:60; width:40px; height:40px; border-radius:50%;
  background:var(--bg-dark-2); color:var(--ink); border:1px solid var(--hairline-dark);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; cursor:pointer;
}
.back-to-top.show{opacity:1; transform:translateY(0); pointer-events:auto;}
.back-to-top:hover{background:var(--brass); color:#191308;}
@media (max-width:600px){ .back-to-top{display:none;} }