/* ==========================================================
   MIND SPARK CONSULTANTS — SHARED STYLESHEET
   ========================================================== */
:root{
  --ink:#171A24;
  --ink-soft:#2B3040;
  --paper:#EDEFE5;
  --paper-2:#E3E6D8;
  --spark:#F2A93B;
  --ember:#E4572E;
  --slate:#454A5C;
  --mist:#9BA0AC;
  --line:rgba(23,26,36,0.14);
  --line-light:rgba(244,240,230,0.18);
  --display:'Fraunces', serif;
  --body:'Work Sans', sans-serif;
  --mono:'Space Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
section{position:relative;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
::selection{ background:var(--spark); color:var(--ink); }
:focus-visible{ outline:2px solid var(--spark); outline-offset:2px; }

/* ---------- Spark glyph, the signature mark ---------- */
.spark-mark{ display:inline-block; width:1em; height:1em; position:relative; }
.spark-mark svg{ width:100%; height:100%; display:block; }
.spark-svg{ background: none; }

/* ---------- Top nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(23,26,36,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-light);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  max-width:1180px; margin:0 auto;
  gap:24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  color:var(--paper);
  letter-spacing:0.01em;
  flex-shrink:0;
}
.brand .spark-mark{ color:var(--spark); width:20px; height:20px; }
.brand small{
  display:block; font-family:var(--mono); font-size:0.55rem;
  letter-spacing:0.12em; color:var(--mist); font-weight:400; text-transform:uppercase;
}
nav.primary{ display:flex; gap:22px; flex-wrap:wrap; }
nav.primary a{
  font-size:0.83rem; color:var(--paper); opacity:0.78;
  position:relative; padding:4px 0;
  transition:opacity .2s ease;
  font-weight:500; white-space:nowrap;
}
nav.primary a:hover{ opacity:1; }
nav.primary a.active{ opacity:1; color:var(--spark); }
nav.primary a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--spark); transition:width .25s ease;
}
nav.primary a:hover::after{ width:100%; }
.menu-toggle{ display:none; background:none; border:0; color:var(--paper); font-size:1.4rem; cursor:pointer; }

@media (max-width:980px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
    border-bottom:1px solid var(--line-light);
  }
  nav.primary.open{ max-height:520px; overflow-y:auto; }
  nav.primary a{ padding:14px 32px; opacity:1; border-bottom:1px solid var(--line-light); }
  nav.primary a::after{ display:none; }
  .menu-toggle{ display:block; }
}

/* ---------- Page header (non-home pages) ---------- */
.page-hero{
  background:
    radial-gradient(ellipse 800px 400px at 85% -20%, rgba(242,169,59,0.16), transparent 60%),
    var(--ink);
  color:var(--paper);
  padding:64px 0 56px;
}
.eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--spark);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow .rule{ width:36px; height:1px; background:var(--spark); }
h1.page-title{
  font-family:var(--display); font-weight:450; font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.08; letter-spacing:-0.01em; max-width:18ch;
}
.page-sub{ margin-top:18px; font-size:1rem; color:#C7CAD3; max-width:60ch; line-height:1.65; }

/* ---------- Section shells ---------- */
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.section-dark{ background:var(--ink); color:var(--paper); }
.section-alt{ background:var(--paper-2); }
.kicker{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ember); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.section-dark .kicker{ color:var(--spark); }
.kicker .rule{ width:28px; height:1px; background:currentColor; }
h2.title{
  font-family:var(--display); font-weight:450; font-size:clamp(1.7rem, 2.6vw, 2.4rem);
  line-height:1.16; letter-spacing:-0.01em; max-width:20ch;
}
h3.sub-title{
  font-family:var(--display); font-weight:450; font-size:1.4rem; line-height:1.25;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--body); font-weight:600; font-size:0.9rem;
  padding:13px 24px; border-radius:2px; display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer; border:1px solid transparent;
}
.btn-solid{ background:var(--spark); color:var(--ink); }
.btn-solid:hover{ background:#ffbf52; transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-light); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); transform:translateY(-2px); }
.btn-ghost-dark{ border-color:var(--line); color:var(--ink); }
.btn-ghost-dark:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ---------- Image placeholders ----------
   Used everywhere a real photo/graphic would go.
   Dashed frame + icon + caption describing the intended image. */
.img-ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(23,26,36,0.05) 0 10px, transparent 10px 20px),
    var(--paper-2);
  border:1px dashed var(--line);
  border-radius:2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:18px;
  overflow:hidden;
  color:var(--slate);
}
.img-ph.on-dark{
  background:
    repeating-linear-gradient(135deg, rgba(244,240,230,0.05) 0 10px, transparent 10px 20px),
    var(--ink-soft);
  border-color:var(--line-light);
  color:var(--mist);
}
.img-ph .ph-icon{ width:26px; height:26px; opacity:0.5; flex-shrink:0; }
.img-ph .ph-label{
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.02em; line-height:1.5;
  max-width:26ch; opacity:0.85;
}
.img-ph .ph-tag{
  position:absolute; top:1px; left:1px;
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--ink); color:var(--spark); padding:1px 1px; border-radius:1px;
}
.img-ph.on-dark .ph-tag{ background:var(--spark); color:var(--ink); }
.img-ph.ratio-16-9{ aspect-ratio:16/9; }
.img-ph.ratio-4-3{ aspect-ratio:4/3; }
.img-ph.ratio-1-1{ aspect-ratio:1/1; }
.img-ph.ratio-4-5{ aspect-ratio:4/5; }
.img-ph.ratio-21-9{ aspect-ratio:21/9; }

/* ---------- Cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--line);
}
.tag-pill{
  display:inline-flex; align-items:center; font-family:var(--mono); font-size:0.66rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ember);
  border:1px solid var(--ember); padding:4px 10px; border-radius:20px;
}

/* ---------- Breadcrumb / crumbs ---------- */
.crumbs{ font-family:var(--mono); font-size:0.7rem; color:var(--mist); letter-spacing:0.04em; }
.crumbs a:hover{ color:var(--spark); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--ink); color:var(--mist); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-light); }
.footer-grid h5{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper); margin-bottom:18px; }
.footer-grid li{ padding:5px 0; }
.footer-grid a{ font-size:0.86rem; color:var(--mist); transition:color .2s ease; }
.footer-grid a:hover{ color:var(--spark); }
.footer-brand{ font-family:var(--display); font-size:1.25rem; color:var(--paper); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.footer-brand .spark-mark{ color:var(--spark); width:18px; height:18px; }
.footer-grid p{ font-size:0.84rem; line-height:1.7; max-width:32ch; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:0.74rem; flex-wrap:wrap; gap:10px; }

@media (max-width:800px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}