/* Shared stylesheet for blog posts — reuses abhilashhari.in's design tokens */

:root{
  --paper:#F3FAF8;
  --ink:#0A1A1F;
  --forest:#0E8C73;
  --teal:#0B5D5A;
  --indigo:#1B3A6B;
  --gold:#C9A227;
  --clay:#C9A227;
  --stone:#4F6B6B;
  --line:rgba(10,26,31,0.12);
  --paper-raised:#FFFFFF;
  --peacock-grad: linear-gradient(115deg, #0B5D5A 0%, #0E8C73 28%, #146B8C 55%, #1B3A6B 80%, #2C1F5E 100%);
  --peacock-grad-soft: linear-gradient(135deg, rgba(11,93,90,0.08) 0%, rgba(20,107,140,0.08) 45%, rgba(27,58,107,0.08) 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 85% -5%, rgba(20,107,140,0.10), transparent 45%),
    radial-gradient(circle at -5% 30%, rgba(11,93,90,0.08), transparent 40%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* ---------- NAV (matches homepage) ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,250,248,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; max-width:1120px; margin:0 auto; position:relative;
}
.logo{font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; letter-spacing:-0.01em;}
.logo span{background:var(--peacock-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-links{display:flex; gap:36px; list-style:none; font-size:0.95rem; font-weight:500;}
.nav-links a{text-decoration:none; color:var(--ink); position:relative; padding:4px 0;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--forest); transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.nav-cta{background:var(--peacock-grad); color:var(--paper) !important; padding:10px 22px; border-radius:100px; font-size:0.9rem; font-weight:600; text-decoration:none; transition:opacity .2s ease, transform .2s ease;}
.nav-cta:hover{opacity:0.88; transform:translateY(-1px);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; width:40px; height:40px; align-items:center; justify-content:center; flex-direction:column; gap:5px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- SHARED UI ---------- */
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--teal); font-weight:500; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:28px; height:2px; background:var(--peacock-grad); display:inline-block;}
.btn-primary{
  background:var(--ink); color:var(--paper); padding:15px 30px; border-radius:100px;
  text-decoration:none; font-weight:600; font-size:0.95rem; display:inline-flex; align-items:center; gap:8px;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{background:var(--peacock-grad); transform:translateY(-1px);}
.btn-secondary{
  border:1.5px solid var(--line); color:var(--ink); padding:15px 30px; border-radius:100px;
  text-decoration:none; font-weight:600; font-size:0.95rem; transition:border-color .2s ease, background .2s ease;
}
.btn-secondary:hover{border-color:var(--ink); background:var(--paper-raised);}

/* ---------- ARTICLE ---------- */
.post-back{
  display:block; padding:24px 0 0; font-family:'JetBrains Mono',monospace;
  font-size:0.85rem; color:var(--stone); text-decoration:none;
}
.post-back:hover{color:var(--forest);}
.post-hero{padding:24px 0 0;}
.post-hero .eyebrow{margin-bottom:18px;}
.post-hero h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.2rem, 4.6vw, 3.4rem);
  line-height:1.1; letter-spacing:-0.02em; margin-bottom:20px; max-width:780px;
}
.post-meta-row{
  display:flex; gap:24px; align-items:center; font-family:'JetBrains Mono',monospace;
  font-size:0.82rem; color:var(--stone); margin-bottom:36px; flex-wrap:wrap;
}
.post-cover{
  border-radius:18px; overflow:hidden; margin-bottom:48px;
  border:1px solid var(--line); aspect-ratio:16/9;
}
.post-cover img{width:100%; height:100%; object-fit:cover;}
.post-body{max-width:680px; margin:0 auto; padding-bottom:20px;}
.post-body p.lead{font-size:1.15rem; color:#3A4242; margin-bottom:28px;}
.post-body h2{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.6rem;
  letter-spacing:-0.01em; margin:44px 0 16px;
}
.post-body h3{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; margin:28px 0 12px;
}
.post-body p{margin-bottom:18px; color:#283131;}
.post-body ul, .post-body ol{margin:0 0 20px 22px; color:#283131;}
.post-body li{margin-bottom:8px;}
.post-body strong{color:var(--ink);}
.post-body blockquote{
  border-left:3px solid var(--forest); padding:4px 0 4px 20px; margin:28px 0;
  font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; color:var(--teal);
}

/* ---------- FAQ ---------- */
.post-faq{max-width:680px; margin:56px auto 0; border-top:1px solid var(--line); padding-top:40px;}
.faq-item{padding:20px 0; border-bottom:1px solid var(--line);}
.faq-item h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem; margin-bottom:8px;}
.faq-item p{color:#283131; margin:0;}

/* ---------- CTA BOX ---------- */
.post-cta{
  max-width:680px; margin:56px auto 0; padding:40px; border-radius:20px;
  background:var(--peacock-grad-soft); border:1px solid var(--line); text-align:center;
}
.post-cta h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem; margin-bottom:10px;}
.post-cta p{color:var(--stone); margin-bottom:24px;}

/* ---------- RELATED POSTS ---------- */
.post-related{max-width:920px; margin:64px auto 0;}
.post-related .eyebrow{justify-content:center;}
.related-head{text-align:center; margin-bottom:32px;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.related-card{
  display:block; text-decoration:none; color:inherit; padding:22px;
  border:1px solid var(--line); border-radius:16px; background:var(--paper-raised);
  transition:transform .2s ease, box-shadow .2s ease;
}
.related-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(10,26,31,0.25);}
.related-card .cat{font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.08em;}
.related-card h4{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; margin:10px 0 0; line-height:1.3;}

/* ---------- FOOTER ---------- */
footer{padding:32px 0; border-top:1px solid var(--line); margin-top:80px;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--stone);}

:focus-visible{outline:2px solid var(--forest); outline-offset:3px;}

/* ---------- SERVICE PAGE SPECIFIC ---------- */
.service-hero{padding:36px 0 0;}
.service-hero h1{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.1; letter-spacing:-0.02em; margin-bottom:16px; max-width:820px;}
.service-hero .sub{font-size:1.15rem; color:#3A4242; max-width:620px; margin-bottom:36px;}
.service-hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px;}
.service-cover-strip{
  border-radius:20px; padding:48px 40px; margin-bottom:56px;
  background:var(--peacock-grad-soft); border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.strip-stat{text-align:center;}
.strip-stat strong{display:block; font-family:'Fraunces',serif; font-size:2rem; font-weight:600; background:var(--peacock-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.strip-stat span{font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--stone); text-transform:uppercase; letter-spacing:0.08em;}

.section-label{font-family:'JetBrains Mono',monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--teal); font-weight:500; margin-bottom:20px; display:flex; align-items:center; gap:10px;}
.section-label::before{content:''; width:28px; height:2px; background:var(--peacock-grad); display:inline-block;}

.deliverables{max-width:860px; margin:0 auto 64px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.del-card{padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--paper-raised);}
.del-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem; margin-bottom:8px;}
.del-card p{font-size:0.95rem; color:#3A4242; margin:0;}

.process-steps{max-width:680px; margin:0 auto 64px;}
.step{display:flex; gap:24px; margin-bottom:36px; align-items:flex-start;}
.step-num{font-family:'Fraunces',serif; font-weight:600; font-size:2rem; background:var(--peacock-grad); -webkit-background-clip:text; background-clip:text; color:transparent; min-width:48px; line-height:1;}
.step-body h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; margin-bottom:6px;}
.step-body p{color:#283131; margin:0; font-size:0.97rem;}

.service-faq{max-width:680px; margin:0 auto 64px; border-top:1px solid var(--line); padding-top:40px;}
.service-cta{max-width:680px; margin:0 auto 0; padding:40px; border-radius:20px; background:var(--peacock-grad-soft); border:1px solid var(--line); text-align:center;}
.service-cta h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem; margin-bottom:10px;}
.service-cta p{color:var(--stone); margin-bottom:24px;}

.related-services{max-width:920px; margin:64px auto 0;}
.related-services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.rs-card{display:block; text-decoration:none; color:inherit; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--paper-raised); transition:transform .2s ease, box-shadow .2s ease;}
.rs-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(10,26,31,0.25);}
.rs-card .rs-num{font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--teal); margin-bottom:8px;}
.rs-card h4{font-family:'Fraunces',serif; font-weight:600; font-size:1rem; margin:0; line-height:1.3;}

@media(max-width:880px){
  .deliverables{grid-template-columns:1fr;}
  .service-cover-strip{grid-template-columns:1fr;}
  .related-services-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .service-cover-strip{padding:28px 20px;}
  .service-cta{padding:28px 20px;}
}

@media (max-width: 880px){
  .nav-toggle{display:flex;}
  .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px -20px rgba(10,26,31,0.25);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .25s ease; padding:0 32px;
  }
  .nav-links.is-open{max-height:400px; opacity:1; visibility:visible; padding:12px 32px 20px;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:1.02rem;}
  .nav-links li:last-child a{border-bottom:none;}
  .related-grid{grid-template-columns:1fr;}
}
@media (max-width: 480px){
  .wrap{padding:0 20px;}
  .post-cta{padding:28px 20px;}
}

/* ---------- SERVICE PAGES ---------- */
.svc-hero{padding:24px 0 0; text-align:left;}
.svc-hero h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.2rem, 4.6vw, 3.4rem);
  line-height:1.1; letter-spacing:-0.02em; margin-bottom:20px; max-width:740px;
}
.svc-hero .svc-sub{font-size:1.15rem; color:#3A4242; max-width:620px; margin-bottom:32px;}
.svc-hero-ctas{display:flex; gap:16px; margin-bottom:56px; flex-wrap:wrap;}

.svc-section{max-width:780px; margin:0 auto 56px;}
.svc-section h2{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.6rem;
  letter-spacing:-0.01em; margin-bottom:20px;
}
.svc-includes{list-style:none; display:grid; gap:14px;}
.svc-includes li{
  display:flex; gap:14px; align-items:flex-start; padding:16px 20px;
  border:1px solid var(--line); border-radius:14px; background:var(--paper-raised);
}
.svc-includes li::before{
  content:''; flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E8C73' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.svc-includes p{margin:0; color:#283131;}
.svc-includes strong{display:block; color:var(--ink); margin-bottom:4px;}

.svc-process{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; max-width:980px; margin:0 auto 56px;}
.svc-process .dot{width:10px; height:10px; border-radius:50%; background:var(--peacock-grad); margin-bottom:14px;}
.svc-process h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; margin-bottom:8px;}
.svc-process p{color:var(--stone); font-size:0.92rem; margin:0;}

.svc-pricing-note{
  max-width:680px; margin:0 auto 56px; padding:24px 28px; border-radius:16px;
  background:var(--peacock-grad-soft); border:1px solid var(--line); color:#283131;
}

@media (max-width: 880px){
  .svc-process{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .svc-process{grid-template-columns:1fr;}
  .svc-hero-ctas{flex-direction:column;}
}