@charset "UTF-8";
/* ── SINGLE-PAGE SHARED ──────────────────────────────────────────────────────
   Patterns shared across article-layout, case-layout, and news-article-layout.
   Loaded via extraCssFiles before the page-specific cssFile.
   Do not add page-specific overrides here — keep those in article.css or
   case-study.css respectively.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── PAGE TRAIL (breadcrumb bar) ── */
.page-trail{position:sticky;top:calc(var(--nav-offset,92px) + 8px);z-index:140;margin-bottom:24px}
.page-trail__inner{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--b1);border-radius:999px;background:rgba(9,13,20,.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.page-trail__back{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:7px 11px;border-radius:999px;background:rgba(168,227,45,.08);border:1px solid rgba(168,227,45,.22);color:var(--lime-ink);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:border-color .15s,background .15s,color .15s,transform .15s;white-space:nowrap}
.page-trail__back:hover{color:#d6f781;border-color:rgba(168,227,45,.38);background:rgba(168,227,45,.14);transform:translateY(-1px)}
.page-trail__crumbs{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;flex:1 1 auto;overflow:hidden;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.page-trail__crumbs a{transition:color .15s;color:var(--text)}
.page-trail__crumbs a:hover{color:var(--mid)}
.page-trail__crumbs span{white-space:nowrap;flex:0 0 auto}
.page-trail__crumbs .page-trail__current{
  display:block;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  white-space:nowrap;
  line-height:1.35;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.page-trail__crumbs .page-trail__current::-webkit-scrollbar{display:none}
.page-trail__crumbs .page-trail__current:hover{
  overflow-x:auto;
  text-overflow:clip;
  cursor:grab;
}

/* ── HERO SHARED ── */
.hero-eyebrow{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:16px}
#hero .hero-h em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.02em;color:rgba(247,249,252,.72)}
#hero .hero-phrase{font-size:clamp(11.5px,1.05vw,14px);color:rgba(221,226,235,.86);line-height:1.65;max-width:42ch;margin:0}

/* ── BODY LAYOUT ── */
#body{max-width:1200px;margin:0 auto;padding:72px 56px 96px;display:grid;grid-template-columns:1fr 3fr;gap:64px;align-items:start}

/* ── LIGHT MODE ── */
html[data-theme="light"] #hero .hero-inner{
  border-color:rgba(15,23,42,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,246,253,.96));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 24px 54px rgba(15,23,42,.16);
}
html[data-theme="light"] #hero .hero-h{color:var(--n0)}
html[data-theme="light"] .page-trail{top:calc(var(--nav-offset,92px) + 20px)}
html[data-theme="light"] .page-trail__crumbs span:last-child{color:var(--mid)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #hero{padding:88px 28px 40px}
  #body{padding:56px 32px 80px;grid-template-columns:1fr;gap:40px}
}
@media(max-width:720px){
  .page-trail__inner{flex-direction:column;align-items:flex-start;border-radius:20px}
  .page-trail__crumbs{width:100%}
  #hero{padding:80px 16px 32px;height:auto;min-height:var(--hero-min-height)}
  .hero-inner{padding:18px 18px 20px;border-radius:20px}
  #hero .hero-phrase{font-size:12px;max-width:38ch}
  #body{padding:40px 20px 64px;gap:32px}
}
/* ── RELATED ENTRIES ── shared by case studies, news and insights (entry-layout.njk).
   Lived in article.css, so case studies rendered the block unstyled. */
#related{border-top:1px solid var(--b1);padding:48px 0 0}
.related-label{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:32px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{background:linear-gradient(180deg,rgba(17,24,36,.98),rgba(13,18,28,.98));border:1px solid var(--b1);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.related-card:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.related-image{aspect-ratio:16/9;position:relative}
.related-image-bg{position:absolute;inset:0}
.related-card.has-image .related-image-bg{background-color:#0e1723}
.related-card.no-image .related-body{padding-top:22px}
.related-body{padding:16px 18px 18px}
.related-cat{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.related-title{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:-.02em;color:var(--n0);line-height:1.35;margin-bottom:8px}
.related-excerpt{font-size:13.5px;line-height:1.65;color:var(--mid);margin-bottom:10px}
.related-link{font-size:11px;color:var(--dim)}

@media(max-width:1024px){.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.related-grid{grid-template-columns:1fr}}