
:root{
  --bg:#fafafa;
  --text:#23272b;
  --muted:#6c7278;
  --line:#e7e7e7;
  --panel:#ffffff;
  --ink:#111111;
  --soft:#f1f1f1;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.75}
.container{max-width:1120px;margin:auto;padding:0 24px}

header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.brand{font-weight:650;font-size:18px;letter-spacing:.2px}
.tagline{font-size:12px;color:var(--muted);margin-top:2px}
nav a{margin-left:18px;text-decoration:none;color:#555;font-weight:500;font-size:14px}
nav a:hover{color:#000}

.section{padding:64px 0}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.hero img{width:100%;border-radius:var(--radius);display:block}

h1{font-size:38px;font-weight:620;margin:0 0 14px;letter-spacing:-.2px;line-height:1.18}
h2{font-size:26px;font-weight:620;margin:0 0 12px;letter-spacing:-.1px;line-height:1.25}
h3{font-size:18px;font-weight:620;margin:0 0 10px}
.small{font-size:14px;color:var(--muted)}
.kicker{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.lede{font-size:18px;color:#444;max-width:76ch}

.card{background:var(--panel);border:1px solid #ededed;border-radius:var(--radius);padding:28px}
.stack > * + *{margin-top:18px}

.btn{display:inline-block;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;margin-top:14px;font-weight:600;font-size:14px}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.split img{width:100%;border-radius:var(--radius);display:block}

/* About page: profile card */
.profile-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.profile-meta{padding:14px 16px;border-top:1px solid var(--line);text-align:center}
.profile-name{font-weight:650;color:var(--ink);letter-spacing:-.2px}
.profile-title{margin-top:4px;color:var(--muted);font-weight:600}
.profile-sub{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}

.cta{background:var(--soft);padding:34px;border-radius:var(--radius)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;color:#444}
hr{border:none;border-top:1px solid var(--line);margin:22px 0}

footer{border-top:1px solid var(--line);background:var(--panel);padding:40px 0;text-align:center;margin-top:56px;color:var(--muted);font-size:14px}

/* Editorial article layout */
.article-shell{padding:56px 0}
.article-container{max-width:780px;margin:auto}
.article-header{margin-bottom:22px}
.article-category{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.article-meta{font-size:13px;color:var(--muted);margin-top:10px}
.article-deck{font-size:20px;color:#4a4f55;margin-top:18px;line-height:1.55}
.article-hero{width:100%;border-radius:var(--radius);display:block;margin:18px 0 0}
.article-container p{margin:18px 0}
.article-container h2{margin-top:52px}
.article-container h3{margin-top:30px}
.pull-quote{font-size:22px;line-height:1.45;font-weight:520;margin:38px 0;padding-left:18px;border-left:3px solid var(--ink);color:#202427}
.callout{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px;margin:26px 0}
.callout strong{display:block;margin-bottom:8px}
.related{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.related a{color:var(--ink);text-decoration:none}
.related a:hover{text-decoration:underline}
.post-card a{color:var(--ink);text-decoration:none}
.post-card a:hover{text-decoration:underline}
blockquote{margin:18px 0;padding:10px 0 10px 16px;border-left:3px solid var(--line);color:#444}

@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  h1{font-size:34px}
}

/* Client Journey hero image */
.journey-hero{margin:24px 0 18px;}
.journey-hero img{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:block;
}
.journey-hero figcaption{
  margin-top:10px;
  font-size:.95rem;
  color:var(--muted, #667085);
}
@media (max-width: 800px){
  .journey-hero img{max-height:260px;}
}


/* Insights hero image */
.insights-hero{
  margin:24px 0 28px;
}
.insights-hero img{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:block;
}
@media (max-width:800px){
  .insights-hero img{max-height:260px;}
}


/* --- Article readability upgrades (premium editorial) --- */

.article-shell{padding:64px 0}

.article-container{max-width:840px}

.article-header{margin-bottom:28px}

.article-deck{max-width:70ch}

.article-content{font-size:18px}

.article-container p,
.article-container li{font-size:18px; line-height:1.9; color:#2a2f34}

.article-container ul,
.article-container ol{margin:18px 0 18px 22px}

.article-container li{margin:10px 0}

.article-container h2{margin-top:58px; margin-bottom:14px}

.article-container h3{margin-top:34px; margin-bottom:10px}

.section-break{border:none;border-top:1px solid var(--line);margin:38px 0}

.pull-quote{margin:44px 0; padding-left:20px}

.callout{margin:34px 0; padding:20px 20px}

@media(max-width:980px){
  .article-shell{padding:52px 0}
  .article-content{font-size:17px}
  .article-container p,
  .article-container li{font-size:17px}
}



/* --- Global hero image consistency --- */
.journey-hero img,
.insights-hero img,
.hero img{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:block;
}


footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2)}
footer a:hover{border-bottom-color:rgba(0,0,0,.5)}
