/* NavMat — Navaratna Materials Pvt Ltd
   Wireframe / starter stylesheet */
:root{
  --green:#3f9c46;        /* logo mid green */
  --green-dark:#2f7d3a;
  --green-deep:#14381f;   /* dark section bg */
  --green-bright:#4cb45a; /* CTA on dark */
  --ink:#1b1f1c;
  --graphite:#3a3f41;     /* logo graphite */
  --body:#5f6763;
  --muted:#8b938d;
  --line:#e6e8e6;
  --line-soft:#eef0ee;
  --bg:#fff;
  --bg-alt:#fbfcfb;
  --field:#d8ded9;
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.6 Jost,"Century Gothic",Futura,system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:var(--green-dark);text-decoration:none}
a:hover{color:var(--green-deep)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.01em;line-height:1.12}
h1{font-size:clamp(32px,5vw,52px);font-weight:600}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:20px}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--green);text-transform:uppercase}
.lead{font-size:17px;color:var(--body);max-width:56ch;text-wrap:pretty}
.muted{color:var(--body)}
.rule{width:28px;height:2px;background:var(--green)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:36px;min-height:74px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:24px;white-space:nowrap}
.nav a{font-size:14px;font-weight:500;color:var(--graphite)}
.nav a:hover{color:var(--green-dark)}
.nav a.is-active{color:var(--green-dark);border-bottom:2px solid var(--green);padding-bottom:2px}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;padding:8px 12px;font:500 13px Jost,sans-serif;border-radius:2px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:12px 22px;border-radius:2px;font-size:14px;font-weight:600;letter-spacing:.01em}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark);color:#fff}
.btn-bright{background:var(--green-bright);color:#0d2413}
.btn-bright:hover{background:#3fa34d;color:#0d2413}
.btn-ghost{border:1px solid var(--green);color:var(--green-dark)}
.btn-ghost:hover{background:#eef7ef}
.arrow{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--green-dark)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:520px;display:flex;align-items:flex-end;
  background:linear-gradient(135deg, var(--green-deep) 0%, #1a3a24 40%, #0d2615 100%);}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 30%, rgba(63,156,70,.12) 0%, transparent 60%);
  pointer-events:none;}
.hero-inner{position:relative;width:100%;padding:64px 0 52px;
  background:linear-gradient(to top,rgba(20,24,21,.92),rgba(20,24,21,.6) 60%,rgba(20,24,21,0))}
.hero .eyebrow{color:#7ed08a}
.hero h1{color:#fff;margin:12px 0 14px;max-width:18ch}
.hero p{color:rgba(255,255,255,.8);max-width:44ch}

/* ---------- audience fork ---------- */
.fork{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.fork > div{padding:34px 30px;display:flex;flex-direction:column;gap:10px;min-height:220px;border-right:1px solid var(--line)}
.fork > div:last-child{border-right:0}
.fork p{color:var(--body);font-size:14.5px}
.fork .arrow{margin-top:auto}

/* ---------- sections ---------- */
.section{padding:72px 0;border-bottom:1px solid var(--line)}
.section.alt{background:var(--bg-alt)}
.section-head{margin-bottom:34px;display:flex;flex-direction:column;gap:10px}

.loop{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.loop-video{width:360px;max-width:100%;flex:none;border-radius:12px}
.steps{flex:1;min-width:320px;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;font-size:15px;color:var(--graphite)}
.steps ol,.steps ul{margin:0;padding:0;list-style:none}
.num{font-weight:600;font-size:12.5px;color:var(--green);width:22px;flex:none;padding-top:3px}
.steps b{font-weight:500;color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:10px;background:#fff}
.card p{color:var(--body);font-size:14.5px}

.timeline{display:flex;flex-direction:column}
.timeline > div{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.timeline > div:last-child{border-bottom:0}
.timeline p{color:var(--body);font-size:14.5px;margin-top:6px}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.person{display:flex;gap:16px;align-items:center}
.avatar{width:72px;height:72px;flex:none;border-radius:50%;border:1px solid var(--line);object-fit:cover}
.avatar-placeholder{border:1px dashed #c2c9c3;background:var(--bg-alt);display:flex;align-items:center;justify-content:center}
.avatar-placeholder::after{content:'';width:28px;height:28px;border-radius:50%;background:var(--line)}

/* image placeholders — delete once real photos are in */
.ph{border:1px solid var(--line);background:repeating-linear-gradient(45deg,#eef0ee,#eef0ee 8px,#e4e7e4 8px,#e4e7e4 16px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  font:400 11px ui-monospace,Menlo,monospace;color:#9aa09a}
.ph-band{height:280px}
.photo-band{width:100%;max-height:480px;overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover}
.ph-map{height:220px}
.ph-feature{height:280px}
.ph-thumb{width:120px;height:84px;flex:none}

/* ---------- CTA + footer ---------- */
.cta{background:var(--green-deep);padding:52px 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.65);margin-top:6px;font-size:14.5px}
.site-foot{background:var(--ink);color:var(--muted);padding:38px 0;font-size:13px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-foot strong{display:block;color:#fff;font-weight:500;font-size:17px;margin-bottom:4px}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:#fff}
.foot-contact{margin-top:10px;font-size:13px;line-height:1.8}
.foot-right{text-align:right;line-height:1.8}

/* ---------- page header (subpages) ---------- */
.page-head{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:64px 0 48px}
.page-head h1{font-size:clamp(28px,4vw,42px);margin:12px 0 14px}

/* ---------- services ---------- */
.svc{padding:52px 0;border-bottom:1px solid var(--line)}
.svc-no{font-weight:600;font-size:13px;color:var(--green);letter-spacing:.08em}
.chain{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.chain span{flex:1 1 120px;border:1px solid var(--graphite);padding:12px 8px;text-align:center;font-size:13px}
.chain span.out{border-color:var(--green);background:#eef7ef;color:var(--green-dark);font-weight:500}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line-soft);font-weight:400;color:var(--body)}
.spec th{color:var(--ink);font-weight:500;width:45%}
.pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pill{border:1px solid var(--line);padding:18px;font-size:14px;color:var(--graphite)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;padding:60px 0}
form{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:18px;flex-wrap:wrap}
.row > .field{flex:1 1 200px}
.field label{display:block;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--field);background:#fff;
  padding:11px 12px;font:300 15px Jost,sans-serif;color:var(--ink);border-radius:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:-1px}
.aside{display:flex;flex-direction:column;gap:20px}
.aside h3{font-size:16px}
.aside .lines{font-size:14px;line-height:1.9;color:var(--body)}
.aside .note{border-top:1px solid var(--line-soft);padding-top:14px;font-size:13px;color:var(--muted)}

/* ---------- blog ---------- */
.featured{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);margin-bottom:44px}
.featured .body{padding:34px 30px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.tag{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--green-dark)}
.meta{font-size:12.5px;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.filters a{border:1px solid var(--line);padding:6px 16px;font-size:13px;color:var(--body);border-radius:20px}
.filters a.is-active{border-color:var(--green);background:#eef7ef;color:var(--green-dark);font-weight:500}
.post-list{display:flex;flex-direction:column}
.post{display:flex;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.post h3{font-size:17px}
.center{display:flex;justify-content:center;margin-top:34px}

.coming-soon{max-width:520px;margin:0 auto;text-align:center;padding:40px 0}
.coming-soon h2{margin-bottom:14px}
.coming-soon .lead{margin-bottom:28px}
.subscribe-row{display:flex;gap:8px;max-width:400px;margin:0 auto}
.subscribe-row input{flex:1;border:1px solid var(--field);padding:11px 14px;font:300 15px Jost,sans-serif;color:var(--ink);border-radius:0}
.subscribe-row input:focus{outline:2px solid var(--green);outline-offset:-1px}
.subscribe-msg{margin-top:12px;font-size:13px;min-height:20px}
.subscribe-msg.ok{color:var(--green-dark)}
.subscribe-msg.err{color:#c0392b}

.form-msg{margin-top:8px;font-size:13.5px;min-height:20px}
.form-msg.ok{color:var(--green-dark)}
.form-msg.err{color:#c0392b}

.btn,.nav a,.filters a,.arrow{min-height:44px;display:inline-flex;align-items:center}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .wrap{padding:0 20px}
  .nav{position:absolute;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 18px;display:none}
  .nav a{padding:12px 0;width:100%}
  .site-head.open .nav{display:flex}
  .nav-toggle{display:block}
  .fork{grid-template-columns:1fr}
  .fork > div{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .contact-grid,.featured{grid-template-columns:1fr}
  .section{padding:52px 0}
  .foot-right{text-align:left}
}
@media (max-width:480px){
  .hero{min-height:400px}
  .hero h1{font-size:28px}
  .subscribe-row{flex-direction:column}
  .subscribe-row input,.subscribe-row button{width:100%}
  .row{flex-direction:column;gap:14px}
  .people{grid-template-columns:1fr}
  .person{flex-direction:column;text-align:center}
  .cards{grid-template-columns:1fr}
  .chain{flex-direction:column}
  .chain span{flex:none}
}