/* ═══════════════════════════════════════════════
   Reset Cleaning — Blog stylesheet
   Carries the site's existing design system (header, nav,
   footer, buttons, tokens) verbatim so reused markup renders
   identically, plus blog-specific additions (prose, breadcrumb,
   callouts, post cards). Plain static CSS — no framework.
═══════════════════════════════════════════════ */
:root{
  --linen:#F5F2EE;
  --stone:#C8B89A;
  --driftwood:#6B6259;
  --obsidian:#2C2825;
  --sage:#8FAF9F;
  --bg:#EDE8DF;
  --border:rgba(107,98,89,.16);
  --border-mid:rgba(107,98,89,.3);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--obsidian);
  font-family:'Raleway','Gill Sans','Gill Sans MT','Optima',Candara,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ─── HEADER ─── */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:60px;padding:0 56px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(237,232,223,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.logo-group{display:flex;flex-direction:column;gap:3px;}
.logo{
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-weight:400;font-size:.8rem;
  letter-spacing:.38em;text-transform:uppercase;
  color:var(--obsidian);text-decoration:none;line-height:1;
}
.logo-sub{
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-weight:300;font-size:.52rem;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--driftwood);opacity:.7;line-height:1;
}
.nav-services{position:relative;}
.nav-services-btn{
  display:flex;align-items:center;gap:7px;
  background:none;border:none;cursor:pointer;
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-weight:400;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--obsidian);padding:10px 0;transition:color .3s;
}
.nav-services-btn:hover{color:var(--driftwood);}
.nav-services-btn svg{transition:transform .3s;}
.nav-services-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-dropdown{
  display:none;position:absolute;
  top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--linen);border:1px solid var(--border-mid);
  list-style:none;min-width:240px;z-index:300;padding:8px 0;
}
.nav-dropdown.open{display:block;}
.nav-dropdown li a{
  display:block;padding:12px 24px;
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--obsidian);text-decoration:none;
  transition:background .2s,color .2s;white-space:nowrap;
}
.nav-dropdown li a:hover{background:rgba(200,184,154,.2);color:var(--driftwood);}
.btn-header{
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-weight:400;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--obsidian);text-decoration:none;
  padding:10px 28px;border:1px solid var(--border-mid);
  transition:background .3s,color .3s,border-color .3s;
}
.btn-header:hover{background:var(--obsidian);color:var(--linen);border-color:var(--obsidian);}

/* ─── SHARED LINK BUTTON ─── */
.btn{
  display:inline-block;
  padding:13px 38px;
  background:transparent;color:var(--obsidian);
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-weight:400;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--border-mid);
  position:relative;overflow:hidden;cursor:pointer;
  transition:color .45s,border-color .45s;
  white-space:nowrap;flex-shrink:0;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:var(--obsidian);
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.76,0,.24,1);z-index:0;
}
.btn:hover::after{transform:translateY(0);}
.btn:hover{color:var(--linen);border-color:var(--obsidian);}
.btn span{position:relative;z-index:1;}

/* ─── BREADCRUMB ─── */
.breadcrumb-bar{
  margin-top:60px;
  padding:16px 56px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--driftwood);
}
.breadcrumb-bar nav{opacity:.75;}
.breadcrumb-bar a{color:var(--driftwood);text-decoration:none;}
.breadcrumb-bar a:hover{opacity:1;color:var(--obsidian);}
.breadcrumb-sep{opacity:.4;margin:0 6px;}

/* ─── MAIN WRAP ─── */
.blog-main{max-width:1180px;margin:0 auto;padding:64px 56px 16px;}

/* ─── BLOG INDEX HERO ─── */
.blog-intro{max-width:760px;margin-bottom:8px;}
.blog-eyebrow{
  font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--sage);margin-bottom:20px;
}
.blog-intro h1{
  font-family:'Cormorant',serif;font-weight:300;
  font-size:clamp(2.4rem,4vw,4rem);line-height:1.06;
  color:var(--obsidian);margin-bottom:24px;
}
.blog-intro h1 em{font-style:italic;color:var(--driftwood);}
.blog-intro p{
  font-size:.95rem;line-height:1.95;color:rgba(44,40,37,.6);
  letter-spacing:.01em;max-width:640px;
}

/* ─── POST CARD GRID (index) ─── */
.post-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border:1px solid var(--border);
  margin-top:48px;
}
.post-card{
  display:block;padding:36px 36px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--obsidian);
  background:var(--linen);
  transition:background .25s,color .25s;
}
.post-card:nth-child(2n){border-right:none;}
.post-card:hover{background:var(--obsidian);color:var(--linen);}
.post-card:hover .post-card-kicker{color:var(--stone);}
.post-card:hover .post-card-excerpt{color:rgba(245,242,238,.6);}
.post-card:hover .post-card-arrow{color:var(--sage);}
.post-card-kicker{
  font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--driftwood);opacity:.7;margin-bottom:14px;display:block;
  transition:color .25s;
}
.post-card h2{
  font-family:'Cormorant',serif;font-weight:400;
  font-size:1.45rem;line-height:1.22;margin-bottom:12px;color:inherit;
}
.post-card-excerpt{
  font-size:.82rem;line-height:1.8;color:rgba(44,40,37,.58);
  letter-spacing:.01em;margin-bottom:18px;transition:color .25s;
}
.post-card-arrow{font-size:.75rem;color:var(--sage);transition:color .25s;}

/* ─── ARTICLE ─── */
.article{max-width:760px;margin:0 auto;}
.article-eyebrow{
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage);margin-bottom:20px;
}
.article h1{
  font-family:'Cormorant',serif;font-weight:300;
  font-size:clamp(2.1rem,3.4vw,3.4rem);line-height:1.08;
  color:var(--obsidian);margin-bottom:28px;
}
.article h1 em{font-style:italic;color:var(--driftwood);}
.article-lead{
  font-size:1.02rem;line-height:1.9;color:rgba(44,40,37,.62);
  letter-spacing:.01em;font-style:italic;
  padding-bottom:32px;margin-bottom:8px;
  border-bottom:1px solid var(--border);
}
.article h2{
  font-family:'Cormorant',serif;font-weight:300;
  font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.12;
  color:var(--obsidian);margin:48px 0 18px;
}
.article h2 em{font-style:italic;color:var(--driftwood);}
.article h3{
  font-family:'Cormorant',serif;font-weight:400;
  font-size:1.2rem;color:var(--obsidian);
  margin:32px 0 12px;letter-spacing:.01em;
}
.article p{
  font-size:.92rem;line-height:1.95;color:rgba(44,40,37,.72);
  letter-spacing:.01em;margin-bottom:20px;
}
.article a{color:var(--driftwood);text-decoration:underline;text-underline-offset:2px;transition:color .2s;}
.article a:hover{color:var(--obsidian);}
.article strong{font-weight:500;color:var(--obsidian);}
.article ul,.article ol{margin:0 0 22px 0;padding-left:0;list-style:none;}
.article ul li,.article ol li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:.9rem;line-height:1.7;color:rgba(44,40,37,.72);letter-spacing:.01em;
}
.article ul li::before{
  content:'';position:absolute;left:4px;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--sage);
}
.article ol{counter-reset:steps;}
.article ol li{counter-increment:steps;padding-left:34px;}
.article ol li::before{
  content:counter(steps);position:absolute;left:0;top:0;
  font-family:'Cormorant',serif;font-size:.8rem;color:var(--driftwood);
  width:20px;text-align:right;line-height:1.9;
}

/* ─── PRO TIP CALLOUT (green) ─── */
.pro-tip{
  background:#EDF3EF;border-left:3px solid var(--sage);
  padding:22px 26px;margin:28px 0;
}
.pro-tip .callout-label{
  font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;
  color:#4f7d68;font-weight:500;margin-bottom:8px;display:block;
}
.pro-tip p{margin-bottom:0;font-size:.88rem;color:rgba(44,40,37,.72);}

/* ─── WORK WITH US CTA (orange) ─── */
.work-with-us{
  background:#FBF1E6;border:1px solid #E4C79C;
  padding:26px 30px;margin:36px 0;
}
.work-with-us .callout-label{
  font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;
  color:#B07A2E;font-weight:500;margin-bottom:10px;display:block;
}
.work-with-us p{font-size:.92rem;line-height:1.7;color:rgba(44,40,37,.78);margin-bottom:18px;}
.work-with-us p:last-child{margin-bottom:0;}

/* ─── RELATED ─── */
.related{margin-top:56px;padding-top:32px;border-top:1px solid var(--border);}
.related h2{
  font-family:'Cormorant',serif;font-weight:400;font-size:1.3rem;
  color:var(--obsidian);margin-bottom:16px;
}
.related ul{list-style:none;}
.related ul li{border-bottom:1px solid var(--border);}
.related ul li a{
  display:flex;align-items:center;gap:10px;padding:13px 0;
  font-size:.82rem;letter-spacing:.03em;color:var(--obsidian);
  text-decoration:none;transition:color .2s,padding-left .2s;
}
.related ul li a::before{content:'→';font-size:.7rem;color:var(--sage);flex-shrink:0;}
.related ul li a:hover{color:var(--driftwood);padding-left:4px;}

/* ─── FAQ inside article ─── */
.article .faq-q{
  font-family:'Cormorant',serif;font-weight:400;font-size:1.12rem;
  color:var(--obsidian);margin:26px 0 8px;
}

/* ─── FOOTER ─── */
footer{
  padding:32px 56px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  background:var(--bg);border-top:1px solid var(--border);
}
.flogo{
  font-family:'Raleway','Gill Sans','Optima',sans-serif;
  font-weight:400;font-size:.72rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--driftwood);
}
.ftag{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(107,98,89,.5);}

/* ─── WHATSAPP ─── */
.whatsapp-float{
  position:fixed;bottom:28px;right:28px;z-index:999;
  display:flex;align-items:center;gap:10px;
  background:var(--obsidian);color:var(--linen);
  text-decoration:none;padding:12px 20px 12px 16px;
  border:1px solid rgba(255,255,255,0.1);
  font-family:'Raleway',sans-serif;font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  transition:background .3s,color .3s;
}
.whatsapp-float:hover{background:var(--linen);color:var(--obsidian);}
.whatsapp-float svg{width:16px;height:16px;flex-shrink:0;}

/* ─── RESPONSIVE ─── */
@media(max-width:960px){
  header{padding:0 24px;}
  .breadcrumb-bar{padding:14px 24px;}
  .blog-main{padding:48px 28px 8px;}
  .post-grid{grid-template-columns:1fr;}
  .post-card{border-right:none;}
  footer{padding:28px 24px;flex-direction:column;gap:10px;text-align:center;}
  .nav-dropdown{left:auto;right:0;transform:none;min-width:210px;}
}
@media(max-width:520px){
  header{height:52px;}
  .logo{font-size:.7rem;letter-spacing:.24em;}
  .logo-sub{font-size:.46rem;}
  .btn-header{font-size:.55rem;padding:9px 20px;letter-spacing:.18em;}
  .nav-services-btn{font-size:.5rem;letter-spacing:.16em;}
  .blog-main{padding:40px 20px 8px;}
  .post-card{padding:28px 24px;}
  .whatsapp-float{padding:7px 12px 7px 9px;gap:6px;font-size:.35rem;letter-spacing:.15em;bottom:18px;right:18px;}
  .whatsapp-float svg{width:10px;height:10px;}
}