:root {
  --ink: #171b1a;
  --ink-soft: #4f5753;
  --paper: #f6f4ee;
  --paper-2: #ebe7dc;
  --white: #fffdf8;
  --line: rgba(23, 27, 26, 0.14);
  --acid: #c8ff2e;
  --acid-deep: #9bd600;
  --sand: #d9cfbc;
  --charcoal: #212624;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow: 0 24px 70px rgba(20, 25, 23, 0.10);
  --shell: min(1180px, calc(100vw - 40px));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 8%, rgba(200, 255, 46, 0.12), transparent 28rem),
    var(--paper);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.6;
}

button, input { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }

.skip-link {
  position: absolute;
  top: -60px;
  left: 20px;
  z-index: 1000;
  background: var(--acid);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 244, 238, 0.9);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
}
.brand-copy small { color: var(--ink-soft); font-size: 11px; margin-top: 4px; }

.desktop-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.desktop-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--ink); }

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.resource-menu { display: none; position: relative; }
.resource-menu summary { list-style: none; cursor: pointer; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; }
.resource-menu summary::-webkit-details-marker { display: none; }
.resource-menu div { position: absolute; right: 0; top: 52px; min-width: 210px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.resource-menu div a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 650; }
.resource-menu div a:last-child { border-bottom: 0; }

.header-cta:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(23, 27, 26, .16);
}
.button.secondary { background: transparent; color: var(--ink); }
.button.acid { background: var(--acid); color: var(--ink); border-color: var(--acid); }

.hero {
  padding: 84px 0 46px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: end;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--acid-deep);
}
h1, h2, h3 {
  font-family: "Manrope", sans-serif;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.hero h1 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(46px, 7vw, 88px);
}
.hero h1 span {
  display: inline-block;
  padding: 0 .08em;
  background: linear-gradient(transparent 66%, var(--acid) 66%);
}
.hero-copy > p {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 19px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--charcoal);
  color: white;
  box-shadow: var(--shadow);
}
.hero-panel::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border: 72px solid var(--acid);
  border-radius: 50%;
  opacity: .95;
}
.hero-panel h2 { max-width: 360px; margin: 0 0 18px; font-size: 34px; }
.hero-panel p { max-width: 370px; color: rgba(255,255,255,.68); }
.panel-stat {
  position: absolute;
  left: 32px;
  bottom: 30px;
  z-index: 2;
}
.panel-stat strong {
  display: block;
  color: var(--acid);
  font-family: "Manrope", sans-serif;
  font-size: 50px;
  line-height: 1;
}
.panel-stat span { color: rgba(255,255,255,.72); font-size: 13px; }

.section { padding: 56px 0; }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 26px;
}
.section-heading h2 { max-width: 700px; margin: 0; font-size: clamp(32px, 5vw, 54px); }
.section-heading p { max-width: 430px; margin: 0; color: var(--ink-soft); }

.featured-card {
  display: grid;
  grid-template-columns: 1fr .9fr;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.featured-visual {
  position: relative;
  min-height: 360px;
  padding: 36px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent),
    var(--charcoal);
  color: white;
}
.featured-visual::before,
.featured-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.featured-visual::before {
  width: 250px;
  height: 250px;
  right: 54px;
  top: 54px;
  border: 48px solid var(--acid);
}
.featured-visual::after {
  width: 90px;
  height: 90px;
  right: 180px;
  top: 180px;
  background: var(--sand);
}
.featured-number {
  position: absolute;
  left: 36px;
  bottom: 24px;
  font-family: "Manrope", sans-serif;
  font-size: 88px;
  font-weight: 800;
  color: rgba(255,255,255,.12);
}
.featured-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 72px);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.featured-copy h3 { margin: 18px 0; font-size: clamp(30px, 4vw, 50px); }
.featured-copy p { color: var(--ink-soft); font-size: 17px; }

.controls-wrap {
  position: sticky;
  top: 78px;
  z-index: 30;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(246, 244, 238, .92);
  backdrop-filter: blur(18px);
}
.controls {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) 1.2fr;
  gap: 16px;
}
.search-box { position: relative; }
.search-box svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  color: var(--ink-soft);
}
.search-box input {
  width: 100%;
  height: 52px;
  padding: 0 18px 0 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: var(--white);
  color: var(--ink);
}
.search-box input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(200,255,46,.4); }

.category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 700;
}
.pill:hover,
.pill.active { background: var(--ink); color: white; border-color: var(--ink); }

.results-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 26px 0;
  color: var(--ink-soft);
  font-size: 14px;
}
.results-line strong { color: var(--ink); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.article-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(23, 27, 26, .25);
}
.card-visual {
  position: relative;
  min-height: 150px;
  padding: 20px;
  overflow: hidden;
  background: var(--paper-2);
}
.card-visual::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -25px;
  top: -36px;
  border: 30px solid var(--acid);
  border-radius: 50%;
}
.card-visual::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  right: 72px;
  top: 52px;
  background: var(--ink);
  border-radius: 50%;
}
.card-index {
  position: relative;
  z-index: 2;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--ink-soft);
}
.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.card-body h3 { margin: 14px 0 12px; font-size: 24px; }
.card-body p { margin: 0; color: var(--ink-soft); }
.card-link {
  margin-top: auto;
  padding-top: 22px;
  font-weight: 800;
}
.card-link span { color: var(--acid-deep); }

.empty-state {
  grid-column: 1 / -1;
  padding: 70px 30px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.empty-state h3 { margin: 0 0 10px; font-size: 30px; }
.empty-state p { margin: 0; color: var(--ink-soft); }

.category-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.category-map a {
  min-height: 190px;
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--charcoal);
  color: white;
  text-decoration: none;
}
.category-map a:nth-child(even) { background: var(--paper-2); color: var(--ink); }
.category-map strong {
  display: block;
  margin-bottom: 42px;
  color: var(--acid);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
}
.category-map a:nth-child(even) strong { color: var(--acid-deep); }
.category-map h3 { margin: 0 0 8px; font-size: 25px; }
.category-map p { margin: 0; color: currentColor; opacity: .68; }

.cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: clamp(32px, 6vw, 68px);
  border-radius: var(--radius-lg);
  background: var(--acid);
}
.cta-panel h2 { margin: 0 0 12px; max-width: 760px; font-size: clamp(34px, 5vw, 58px); }
.cta-panel p { margin: 0; max-width: 700px; color: rgba(23,27,26,.7); font-size: 17px; }

.article-hero {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--line);
}
.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 40px;
  color: var(--ink-soft);
  font-size: 13px;
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }
.article-hero h1 {
  max-width: 980px;
  margin: 18px 0 24px;
  font-size: clamp(44px, 7vw, 82px);
}
.article-standfirst {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 2.4vw, 24px);
}
.article-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-top: 38px;
}
.author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--acid);
  font-weight: 800;
}
.author span { display: block; color: var(--ink-soft); font-size: 12px; }
.copy-link {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}
.copy-link:hover { background: var(--white); }

.article-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  justify-content: center;
  gap: 72px;
  padding: 64px 0 80px;
}
.toc {
  position: sticky;
  top: 120px;
  align-self: start;
}
.toc h2 {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: .02em;
}
.toc a {
  display: block;
  padding: 8px 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.article-content {
  font-size: 18px;
  line-height: 1.78;
}
.article-content > p:first-child {
  margin-top: 0;
  font-size: 22px;
  color: var(--ink);
}
.article-content h2 {
  scroll-margin-top: 120px;
  margin: 60px 0 18px;
  font-size: 38px;
}
.article-content h3 { margin: 36px 0 12px; font-size: 26px; }
.article-content p { color: #343b38; }
.article-content ul,
.article-content ol { padding-left: 24px; }
.article-content li { margin: 10px 0; color: #343b38; }
.article-content blockquote {
  margin: 42px 0;
  padding: 26px 28px;
  border-left: 5px solid var(--acid);
  background: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
}
.article-content .framework {
  margin: 40px 0;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--charcoal);
  color: white;
}
.article-content .framework h3 { margin-top: 0; color: var(--acid); }
.article-content .framework p,
.article-content .framework li { color: rgba(255,255,255,.78); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.related-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
}
.related-card h3 { margin: 12px 0; font-size: 22px; }
.related-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.about-page { padding: 80px 0; }
.about-intro {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 60px;
  align-items: start;
}
.about-intro h1 { margin: 0; font-size: clamp(46px, 7vw, 82px); }
.about-intro p { color: var(--ink-soft); font-size: 20px; }
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 60px;
}
.principle {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.principle strong { color: var(--acid-deep); }
.principle h2 { margin: 28px 0 12px; font-size: 27px; }
.principle p { margin: 0; color: var(--ink-soft); }

.site-footer {
  margin-top: 70px;
  padding: 62px 0 24px;
  background: var(--charcoal);
  color: white;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr .7fr .8fr;
  gap: 60px;
}
.footer-brand .brand-mark { width: 62px; height: 62px; padding: 7px; border-radius: 50%; background: var(--acid); }
.footer-brand .brand-copy small { color: rgba(255,255,255,.5); }
.footer-grid p { max-width: 430px; color: rgba(255,255,255,.58); }
.footer-grid h3 { margin: 0 0 16px; font-size: 14px; color: var(--acid); letter-spacing: .05em; }
.footer-grid > div > a:not(.brand) {
  display: block;
  margin: 9px 0;
  color: rgba(255,255,255,.67);
  text-decoration: none;
}
.footer-grid > div > a:hover { color: white; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  font-size: 12px;
}

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .resource-menu { display: block; }
  .header-inner { grid-template-columns: 1fr auto; }
  .hero-grid,
  .featured-card,
  .about-intro { grid-template-columns: 1fr; }
  .hero-panel { min-height: 330px; }
  .article-grid,
  .category-map,
  .principles { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; gap: 30px; }
  .toc { position: static; padding: 20px; border-radius: var(--radius-md); background: var(--paper-2); }
  .related-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .header-cta { display: none; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: 48px; }
  .controls { grid-template-columns: 1fr; }
  .controls-wrap { position: static; }
  .article-grid,
  .category-map,
  .principles { grid-template-columns: 1fr; }
  .section-heading,
  .article-meta-row,
  .footer-bottom { align-items: flex-start; flex-direction: column; display: flex; }
  .featured-copy { padding: 32px; }
  .featured-visual { min-height: 280px; }
  .cta-panel { grid-template-columns: 1fr; }
  .article-hero { padding-top: 48px; }
  .article-hero h1 { font-size: 46px; }
  .article-layout { padding-top: 40px; }
  .article-content { font-size: 17px; }
  .article-content h2 { font-size: 31px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
}

/* =========================================================
   V15 refinement overrides
   ========================================================= */

/* Match the main SABD site header dimensions exactly. */
:root{--shell:min(1260px,calc(100% - 54px));--header:78px}
html body, html body *{letter-spacing:0!important}
html body{font-kerning:normal}
.site-header{height:var(--header)}
.header-inner{height:100%;min-height:0;grid-template-columns:1fr auto 1fr;gap:38px}
.brand{gap:12px}
.brand-mark{width:52px;height:52px;flex:0 0 52px}
.brand-copy{line-height:1}
.brand-copy strong{font-size:15px;line-height:1;font-weight:800}
.brand-copy small{margin-top:7px;font-size:9px;font-weight:700;text-transform:uppercase}
.desktop-nav{justify-self:center;gap:31px}
.desktop-nav a{padding:27px 0 24px;font-size:13px;font-weight:700}
.header-cta{justify-self:end;gap:18px;padding:13px 18px;font-size:12px;font-weight:800}

/* Use Seamus's portrait in the small article author position. */
.author-avatar{display:block;width:46px;height:46px;padding:0;overflow:hidden;border-radius:50%;background:#171b1a}
.author-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}

/* Bring the Resource footer into the same four-column system as the site. */
.footer-grid{grid-template-columns:1.15fr .45fr .82fr 1.18fr;gap:48px}
.footer-grid>div:first-child{grid-column:auto}
.sabd-social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sabd-social-links a,.sabd-social-pending{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:rgba(255,255,255,.64);font-size:11px;font-weight:700}
.sabd-social-links a:hover{border-color:#fff;color:#fff}
.sabd-social-pending{opacity:.48;cursor:default}

/* Newsletter capture inside the dark Resource footer. */
.sabd-newsletter-form{display:grid;gap:10px;width:100%}
.sabd-newsletter-form strong{display:block;color:#fff;font-size:16px;line-height:1.25}
.sabd-newsletter-form>p:not(.sabd-newsletter-status){margin:0;color:rgba(255,255,255,.58);font-size:12px;line-height:1.55}
.sabd-newsletter-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:3px}
.sabd-newsletter-row input{min-width:0;height:44px;padding:0 13px;border:1px solid rgba(255,255,255,.22);border-radius:0;background:rgba(255,255,255,.06);color:#fff;font:500 12px/1 var(--body);outline:none}
.sabd-newsletter-row input::placeholder{color:rgba(255,255,255,.42)}
.sabd-newsletter-row input:focus{border-color:#fff}
.sabd-newsletter-row button{height:44px;padding:0 15px;border:1px solid var(--acid);background:var(--acid);color:var(--ink);font:800 11px/1 var(--body);cursor:pointer}
.sabd-newsletter-row button:hover{background:#fff;border-color:#fff}
.sabd-newsletter-row button:disabled{opacity:.55;cursor:wait}
.sabd-newsletter-consent{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;color:rgba(255,255,255,.50);font-size:10px;line-height:1.45;cursor:pointer}
.sabd-newsletter-consent input{margin:2px 0 0;accent-color:var(--acid)}
.sabd-newsletter-status{min-height:16px!important;margin:0!important;color:rgba(255,255,255,.6)!important;font-size:10px!important;line-height:1.4!important}
.sabd-newsletter-status.is-success{color:var(--acid)!important;font-weight:700}
.sabd-newsletter-status.is-error{color:#ffb9ae!important}
.sabd-subscribe-toast{position:fixed;z-index:190;right:22px;bottom:22px;width:min(380px,calc(100vw - 44px));padding:17px 18px;background:var(--ink);color:#fff;border-left:4px solid var(--acid);box-shadow:0 18px 55px rgba(0,0,0,.25);font-size:13px;line-height:1.5}

@media(max-width:1020px){
  :root{--shell:min(100% - 36px,1260px)}
  .header-inner{grid-template-columns:1fr auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:42px 54px}
  .footer-grid>div:first-child{grid-column:auto}
}
@media(max-width:700px){
  :root{--shell:min(100% - 28px,1180px);--header:70px}
  .brand-copy{display:none}
  .brand-mark{width:48px;height:48px;flex-basis:48px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .sabd-newsletter-row{grid-template-columns:1fr}
  .sabd-newsletter-row button{width:100%}
}


/* V16 hero background refinement */
.resources-hero{position:relative;overflow:hidden;isolation:isolate;padding:88px 0 46px;background:#08111d;color:#fff;}
.resources-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../assets/backgrounds/resources-hero-biotech.webp") right center/cover no-repeat;opacity:.74;}
.resources-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(8,17,29,.96) 0%, rgba(8,17,29,.88) 38%, rgba(8,17,29,.72) 70%, rgba(8,17,29,.58) 100%);}
.resources-hero .eyebrow,.resources-hero .hero-copy>p{color:rgba(255,255,255,.78);}
.resources-hero .eyebrow::before{background:rgba(189,255,59,.9);}
.resources-hero h1 span{background:linear-gradient(transparent 68%, rgba(189,255,59,.55) 68%);}
.resources-hero .button.secondary{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px);}
.resources-hero .button.secondary:hover{background:rgba(255,255,255,.12);}
.resources-hero .hero-panel{background:linear-gradient(180deg, rgba(10,20,35,.84) 0%, rgba(10,20,35,.74) 100%);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:0 22px 70px rgba(0,0,0,.28);}
.resources-hero .hero-panel::after{border-color:rgba(189,255,59,.88);opacity:.34;}
.resources-hero .hero-panel p,.resources-hero .panel-stat span{color:rgba(255,255,255,.72);}
.resources-hero .panel-stat strong{color:#fff;}
@media(max-width:720px){.resources-hero::before{background-position:70% center;opacity:.58}.resources-hero::after{background:linear-gradient(180deg, rgba(8,17,29,.94) 0%, rgba(8,17,29,.82) 45%, rgba(8,17,29,.72) 100%);}}



/* V17 background refinements */
.resources-hero{position:relative;overflow:hidden;isolation:isolate;background:#08111d;color:#fff;z-index:0;}
.resources-hero::before{content:"";position:absolute;inset:0;z-index:0;background:url("../assets/backgrounds/services-hero-biotech.webp") 76% center/cover no-repeat;opacity:.22;filter:saturate(.88) brightness(.92);} 
.resources-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(8,17,29,.98) 0%, rgba(8,17,29,.92) 38%, rgba(8,17,29,.84) 70%, rgba(8,17,29,.76) 100%);} 
.resources-hero > .shell,.resources-hero .hero-grid,.resources-hero .hero-copy,.resources-hero .hero-actions,.resources-hero .hero-panel,.resources-hero h1,.resources-hero p,.resources-hero .button{position:relative;z-index:3;}
.resources-hero .hero-panel{background:linear-gradient(180deg, rgba(10,20,35,.82) 0%, rgba(10,20,35,.70) 100%);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:0 22px 70px rgba(0,0,0,.25);} 
.resources-hero .hero-panel::after{opacity:.26;} 
.resources-hero .eyebrow,.resources-hero .hero-copy>p,.resources-hero .panel-stat span,.resources-hero .hero-panel p{color:rgba(255,255,255,.78);} 
.resources-hero h1 span{position:relative;z-index:4;background:linear-gradient(transparent 68%, rgba(189,255,59,.52) 68%);} 
.resources-hero .button.secondary{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.18);} 
.resources-hero .button.secondary:hover{background:rgba(255,255,255,.10);} 
@media(max-width:720px){
  .resources-hero::before{background-position:72% center;opacity:.16;} 
  .resources-hero::after{background:linear-gradient(180deg, rgba(8,17,29,.97) 0%, rgba(8,17,29,.90) 46%, rgba(8,17,29,.82) 100%);} 
}



/* V20 CLEAN RESOURCE LAYERING + LOGO FIX */
.resources-hero{position:relative;overflow:hidden;isolation:isolate;z-index:0;}
.resources-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0 !important;
  background:url("../assets/backgrounds/services-hero-biotech.webp") 76% center/cover no-repeat;
  opacity:.34 !important;
  filter:saturate(.88) brightness(.94);
  pointer-events:none;
}
.resources-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1 !important;
  background:linear-gradient(90deg,rgba(8,17,29,.97),rgba(8,17,29,.89) 42%,rgba(8,17,29,.68));
  pointer-events:none;
}
.resources-hero > .shell,
.resources-hero .hero-grid,
.resources-hero .hero-panel,
.resources-hero .hero-actions,
.resources-hero h1,
.resources-hero p{position:relative;z-index:3 !important;}
.resources-hero .hero-panel::after{z-index:0;}
.resources-hero .hero-panel > *{position:relative;z-index:2;}

.footer-brand .brand-mark{
  width:64px !important;
  height:auto !important;
  aspect-ratio:486 / 469;
  flex:0 0 64px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.footer-brand .brand-mark img{width:100% !important;height:auto !important;object-fit:contain !important;}


/* V21 stronger resource hero background */
.resources-hero::before{opacity:.41 !important;}
@media(max-width:720px){.resources-hero::before{opacity:.29 !important;}}


/* V22: +15% resource background strength and heading balance */
.resources-hero::before{opacity:.47 !important;}

.resources-hero h1,
.resources-hero h2,
.resource-category-hero h1,
.article-hero h1,
.section-heading h2,
.featured-card h2,
.article-card h3,
.category-map h3,
.related-card h3,
h1,h2,h3{
  text-wrap:balance;
}

@media(max-width:720px){
  .resources-hero::before{opacity:.33 !important;}
}


/* V23 resources hero layering correction */
.resources-hero{position:relative;isolation:isolate;z-index:0;}
.resources-hero::before{z-index:-2 !important;opacity:.33 !important;}
.resources-hero::after{z-index:-1 !important;}
.resources-hero > .shell,.resources-hero .hero-grid,.resources-hero .hero-copy,.resources-hero .hero-actions,.resources-hero .hero-panel,.resources-hero h1,.resources-hero p,.resources-hero .button{position:relative;z-index:5 !important;}
.resources-hero .hero-panel{position:relative;z-index:6 !important;isolation:isolate;overflow:hidden;}
.resources-hero .hero-panel::after{z-index:1 !important;opacity:.9 !important;}
.resources-hero .hero-panel > *,.resources-hero .panel-stat{position:relative;z-index:2 !important;}
@media(max-width:720px){.resources-hero::before{opacity:.24 !important;}}


/* V24 RESOURCE TYPE + LAYER SYSTEM */
h1,h2,h3{word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:balance;}
p,li{word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:pretty;}

.resources-hero{isolation:isolate !important;position:relative !important;background:#08111d !important;}
.resources-hero::before{
  z-index:-2 !important;
  opacity:.47 !important;
  pointer-events:none !important;
}
.resources-hero::after{
  z-index:-1 !important;
  pointer-events:none !important;
}
.resources-hero > .shell{position:relative !important;z-index:3 !important;}
.resources-hero .hero-grid{
  grid-template-columns:1fr !important;
  gap:24px !important;
  align-items:start !important;
  max-width:920px;
}
.resources-hero .hero h1,
.resources-hero h1{
  max-width:15ch;
  font-size:clamp(50px,6.2vw,84px);
  line-height:.98;
}
.resources-hero .hero-copy{
  max-width:64ch;
}
.resources-hero .hero-copy>p{
  max-width:64ch;
  margin:0 0 24px;
  line-height:1.65;
}

/* The knowledge panel is an opaque foreground surface. The page image cannot bleed over/through its green graphic. */
.resources-hero .hero-panel{
  position:relative !important;
  z-index:5 !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#0a1423 !important;
  backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.resources-hero .hero-panel::after{
  z-index:0 !important;
  border-color:rgba(200,255,46,.46) !important;
  opacity:1 !important;
}
.resources-hero .hero-panel > *,
.resources-hero .panel-stat{
  position:relative !important;
  z-index:2 !important;
}

/* Resource section headings follow the same left-aligned editorial rhythm */
.resources-hero + .section .section-heading,
.section-heading{
  display:grid;
  grid-template-columns:1fr !important;
  gap:20px !important;
  align-items:start !important;
  max-width:900px;
}
.section-heading h2{max-width:19ch;text-wrap:balance;}
.section-heading p{max-width:64ch;text-wrap:pretty;}

@media(max-width:720px){
  .resources-hero::before{opacity:.33 !important;}
  .resources-hero h1{font-size:clamp(44px,12vw,60px);max-width:15ch;}
}


/* V25 RESOURCE GRID + TRUE FOREGROUND LAYERING */
h1,h2,h3{ text-wrap:pretty !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; }
p,li{ text-wrap:pretty !important; }
.resources-hero{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#08111d !important;
}
.resources-hero::before{
  z-index:0 !important;
  opacity:.47 !important;
  pointer-events:none !important;
}
.resources-hero::after{
  z-index:1 !important;
  pointer-events:none !important;
}
.resources-hero > .shell{
  position:relative !important;
  z-index:3 !important;
}
.resources-hero .hero-grid{
  width:var(--shell) !important;
  max-width:none !important;
  margin-inline:auto !important;
  display:block !important;
}
.resources-hero .hero-grid>div:first-child{max-width:880px;}
.resources-hero h1{
  max-width:15ch !important;
  margin:0 !important;
  font-size:clamp(50px,5.8vw,80px) !important;
  line-height:.99 !important;
}
.resources-hero h1 .resource-hero-line,
.resources-hero h1>span{display:block;}
.resources-hero .hero-copy{
  max-width:62ch !important;
  margin-top:25px !important;
}
.resources-hero .hero-copy>p{font-size:17px !important;line-height:1.66 !important;}

/* Opaque panel = background art can never sit over/through the green graphics. */
.resources-hero .hero-panel{
  position:relative !important;
  z-index:4 !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#0a1726 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.resources-hero .hero-panel::after{
  z-index:1 !important;
  border-color:var(--acid) !important;
  opacity:.92 !important;
}
.resources-hero .hero-panel>*{
  position:relative !important;
  z-index:2 !important;
}
.resources-hero h1>span:last-child{
  position:relative !important;
  z-index:3 !important;
  width:max-content;
  max-width:100%;
  background:linear-gradient(transparent 68%, var(--acid) 68%) !important;
}
.resources-hero .panel-stat strong{color:var(--acid) !important;}

@media(max-width:720px){
  .resources-hero h1{font-size:clamp(42px,11vw,58px) !important;max-width:16ch !important;}
  .resources-hero::before{opacity:.34 !important;}
}


/* V26 resource hero accent + foreground correction */
.resources-hero h1{
  max-width:22ch !important;
  font-size:clamp(48px,5.25vw,74px) !important;
  line-height:1 !important;
}
.resources-hero h1 > span,
.resources-hero h1 .resource-hero-line{
  display:table !important;
  width:auto !important;
  max-width:100% !important;
  background:none !important;
  padding:0 !important;
}
.resources-hero h1 > span:last-child{
  position:relative !important;
  z-index:3 !important;
  background:linear-gradient(transparent 70%, var(--acid) 70%) !important;
}
.resources-hero .hero-panel{
  position:relative !important;
  z-index:5 !important;
  background:#0a1726 !important;
  isolation:isolate !important;
}
.resources-hero .hero-panel::after{
  z-index:0 !important;
  opacity:1 !important;
  border-color:var(--acid) !important;
}
.resources-hero .hero-panel > *,
.resources-hero .panel-stat{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:720px){
  .resources-hero h1{font-size:clamp(42px,11vw,58px) !important;max-width:18ch !important;}
}


/* V27 quick fix: remove highlight from "Use it better." on resources hero */
.resources-hero h1 > span:last-child{background:none !important; box-shadow:none !important;}


/* V28 Resource hero stat removal cleanup */
.resources-hero .panel-stat{display:none !important;}
.resources-hero .hero-panel{padding-bottom:32px !important;}


/* V29: raise resources hero background image opacity by ~15% */
.resources-hero::before{opacity:.54 !important;}
@media(max-width:720px){.resources-hero::before{opacity:.39 !important;}}


/* V30 header logo + navigation sizing */
.header-inner{min-height:94px;gap:28px;}
.site-header .brand-mark{
  width:73px !important;
  height:70px !important;
  flex:0 0 73px !important;
}
.site-header .brand-mark img{
  width:100% !important;
  height:auto !important;
  max-height:70px !important;
  object-fit:contain !important;
}
.desktop-nav{gap:26px;}
@media(max-width:700px){
  .header-inner{min-height:86px;}
  .site-header .brand-mark{width:67px !important;height:65px !important;flex-basis:67px !important;}
  .site-header .brand-mark img{max-height:65px !important;}
}


/* =========================================================
   V33 RESOURCE UI CONSISTENCY SYSTEM
   ========================================================= */
:root{
  --ink:#171b1a;
  --ink-soft:#4f5652;
  --paper:#f4f1e8;
  --paper-2:#ece7dc;
  --acid:#c8ff2e;
  --charcoal:#222927;
  --shell:min(1260px,calc(100% - 54px));
  --header:94px;
  --hero-bg:#08111d;
  --hero-h1:clamp(52px,5.25vw,74px);
  --section-h2:clamp(40px,4.35vw,62px);
}
body{background:var(--paper);font-size:16px;line-height:1.6;}
.shell{width:var(--shell);margin-inline:auto;}

/* Same header as the main site, Resource Hub label retained. */
.site-header{height:var(--header) !important;min-height:0 !important;background:rgba(244,241,232,.94) !important;border-bottom:1px solid rgba(23,27,26,.16) !important;backdrop-filter:blur(18px);}
.header-inner{width:var(--shell) !important;height:100% !important;min-height:0 !important;margin-inline:auto !important;display:grid !important;grid-template-columns:1fr auto 1fr !important;gap:28px !important;align-items:center !important;}
.brand{gap:12px;}
.brand-copy{line-height:1 !important;}
.brand-copy strong{font-family:"Manrope",sans-serif !important;font-size:15px !important;line-height:1 !important;font-weight:800 !important;letter-spacing:-.02em !important;}
.brand-copy small{margin-top:7px !important;color:#626965 !important;font-size:9px !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.12em !important;}
.desktop-nav{justify-self:center !important;display:flex !important;align-items:center !important;gap:27px !important;}
.desktop-nav a{position:relative !important;padding:31px 0 28px !important;color:#4f5652 !important;font-size:13px !important;font-weight:700 !important;text-decoration:none !important;}
.desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:21px;height:2px;background:var(--acid);transition:.25s;}
.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--ink) !important;}
.desktop-nav a:hover::after,.desktop-nav a[aria-current="page"]::after{right:0;}
.header-cta{justify-self:end !important;min-height:auto !important;padding:13px 18px !important;border-radius:999px !important;background:var(--ink) !important;color:#fff !important;font-size:12px !important;font-weight:800 !important;}
.header-cta:hover{background:var(--acid) !important;color:var(--ink) !important;}

/* Resources top hero now sits on the exact same visual system. */
.resources-hero{padding:90px 0 72px !important;background-color:var(--hero-bg) !important;color:#fff !important;}
.resources-hero::after{background:linear-gradient(90deg,rgba(8,17,29,.98) 0%,rgba(8,17,29,.91) 40%,rgba(8,17,29,.75) 72%,rgba(8,17,29,.62) 100%) !important;}
.resources-hero .hero-grid{width:var(--shell) !important;margin-inline:auto !important;display:block !important;}
.resources-hero .hero-grid>div:first-child{max-width:920px !important;}
.resources-hero h1{
  max-width:16ch !important;
  margin:0 !important;
  font-family:"Manrope",sans-serif !important;
  font-size:var(--hero-h1) !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  text-wrap:pretty !important;
}
.resources-hero h1>span{display:block !important;width:auto !important;background:none !important;padding:0 !important;}
.resources-hero .hero-copy{max-width:62ch !important;margin-top:26px !important;}
.resources-hero .hero-copy>p{max-width:62ch !important;margin:0 0 26px !important;color:rgba(255,255,255,.74) !important;font-size:17px !important;line-height:1.66 !important;}
.resources-hero .button{min-height:50px !important;padding:0 20px !important;border-radius:999px !important;font-size:12px !important;font-weight:800 !important;}
.resources-hero .button.secondary{color:#fff !important;border-color:rgba(255,255,255,.28) !important;background:rgba(255,255,255,.05) !important;}
.resources-hero .hero-panel{margin-top:0 !important;background:#0a1726 !important;}

/* Resource category/article typography follows the same hierarchy. */
.article-hero h1,.resource-category-hero h1{font-size:var(--hero-h1) !important;font-weight:700 !important;line-height:1 !important;letter-spacing:-.045em !important;text-wrap:pretty !important;}
.section-heading h2,.about-intro h2,.cta-panel h2{font-size:var(--section-h2) !important;font-weight:700 !important;line-height:1.03 !important;letter-spacing:-.04em !important;text-wrap:pretty !important;}
.section-heading p,.about-intro p,.cta-panel p,.article-standfirst{font-size:17px;line-height:1.66;}

@media(max-width:1020px){
  :root{--shell:min(100% - 36px,1260px);}
  .desktop-nav{display:none !important;}
  .header-cta{display:none !important;}
  .header-inner{grid-template-columns:1fr auto !important;}
}
@media(max-width:700px){
  :root{--shell:min(100% - 28px,1260px);--hero-h1:clamp(43px,12vw,58px);--section-h2:clamp(38px,10.5vw,52px);}
  .resources-hero{padding:66px 0 60px !important;}
  .resources-hero h1{max-width:17ch !important;}
  .brand-copy{display:none !important;}
}


/* FINAL: personal footer portrait treatment */
.site-footer .footer-portrait-mark{display:grid;place-items:center;width:66px;height:66px;flex:0 0 66px;padding:4px;border:2px solid var(--acid);border-radius:50%;background:#171b1a;overflow:hidden;box-sizing:border-box}
.site-footer .footer-portrait-mark img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 34%}
@media(max-width:720px){.site-footer .footer-portrait-mark{width:58px;height:58px;flex-basis:58px}}


/* FINAL: portrait removed */
.author{gap:0!important;}