/* ==========================================================================
   Notara — shared site chrome
   Nav, mobile menu and photo hero. Loaded by every page.
   Page-specific styling stays in each page's own <style> block.
   ========================================================================== */

html { scroll-padding-top: 92px; }

:root {
  --teal-dark:    #04342C;
  --teal-primary: #0F6E56;
  --teal-bright:  #1D9E75;   /* brand green — decorative, or text on dark only */
  --teal-label:   #127A5F;   /* small uppercase labels on light: 5.3:1 on white */
  --teal-light:   #5DCAA5;
  --teal-pale:    #E1F5EE;
  --ink:          #1A1A18;
  --ink-muted:    #55605A;
  --rule:         #E4EBE8;
  --nav-h:        76px;
}

/* ===== NAV ===== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--rule);
}

.site-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal-primary);
  text-decoration: none;
}
.site-nav-logo-mark { height: 17px; width: auto; color: var(--teal-primary); flex-shrink: 0; }

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
}
.site-nav-links > li { position: relative; }

.site-nav-links > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 13px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 7px;
  transition: color 0.18s, background 0.18s;
}
.site-nav-links > li > a:hover,
.site-nav-links > li > a:focus-visible { color: var(--teal-primary); background: #F4F9F7; }
.site-nav-links > li > a[aria-current="page"] { color: var(--teal-primary); font-weight: 600; }

.site-nav-caret { flex-shrink: 0; transition: transform 0.26s cubic-bezier(0.22,1,0.36,1); }
.site-nav-dd:hover .site-nav-caret,
.site-nav-dd:focus-within .site-nav-caret { transform: rotate(180deg); }

/* --- dropdown panel --- */
.site-nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 560px;
  margin-top: 10px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 26px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(4,52,44,0.30), 0 2px 8px -2px rgba(4,52,44,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1),
              transform 0.22s cubic-bezier(0.22,1,0.36,1),
              visibility 0.22s;
}
/* keeps the pointer path from the trigger to the panel alive */
.site-nav-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

.site-nav-dd:hover .site-nav-menu,
.site-nav-dd:focus-within .site-nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.site-nav-menu-group { display: flex; flex-direction: column; gap: 2px; }
.site-nav-menu-label {
  font-family: 'Lexend', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-label);
  padding: 0 10px 8px;
}
.site-nav-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.18s;
}
.site-nav-menu a:hover, .site-nav-menu a:focus-visible { background: var(--teal-pale); }
.site-nav-menu a strong {
  display: block;
  font-family: 'Lexend', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.site-nav-menu a span {
  display: block;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* full-width row across the bottom of a dropdown panel */
.site-nav-menu-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.site-nav-menu-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-primary);
}
.site-nav-menu-foot a:hover { background: var(--teal-pale); }

/* --- nav CTA --- */
.site-nav-cta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.site-nav-cta .site-btn {
  font-family: 'Lexend', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 100px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.site-nav-cta .site-btn-quiet { color: var(--ink); padding: 11px 16px; }
.site-nav-cta .site-btn-quiet:hover { background: #F4F9F7; color: var(--teal-primary); }
.site-nav-cta .site-btn-solid { background: var(--teal-primary); color: #ffffff; }
.site-nav-cta .site-btn-solid:hover { background: #0a5a45; transform: translateY(-1px); }

/* --- hamburger --- */
.site-nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.site-nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ===== MOBILE MENU ===== */
.site-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #ffffff;
  padding: 88px 24px 40px;
  overflow-y: auto;
}
.site-mobile.open { display: block; }
.site-mobile-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 10px;
}
.site-mobile a {
  display: block;
  font-family: 'Lexend', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.site-mobile .site-mobile-sub {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink-muted);
  padding-left: 18px;
}
.site-mobile-label {
  font-family: 'Lexend', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-label);
  padding: 20px 4px 6px;
}
.site-mobile-cta {
  display: block;
  margin-top: 24px;
  background: var(--teal-primary);
  color: #ffffff !important;
  text-align: center;
  border-radius: 100px;
  border-bottom: none !important;
  padding: 15px 24px !important;
}

@media (max-width: 1080px) {
  .site-nav-links, .site-nav-cta { display: none; }
  .site-nav-burger { display: flex; }
}

/* ===== PHOTO HERO ===== */
.photo-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  background: var(--teal-dark);
  overflow: hidden;
}
.photo-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 62%;
}
.photo-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--teal-dark) 0%,
      rgba(4,52,44,0.96) 26%,
      rgba(4,52,44,0.82) 42%,
      rgba(4,52,44,0.45) 60%,
      rgba(4,52,44,0.12) 80%,
      rgba(4,52,44,0.00) 100%);
}
/* second pass: keeps the lower edge readable on short viewports */
.photo-hero-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,52,44,0.30) 0%, rgba(4,52,44,0) 38%, rgba(4,52,44,0.22) 100%);
}

.photo-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 76px 24px;
}
.photo-hero-copy { max-width: 580px; }

.photo-hero-eyebrow {
  font-family: 'Lexend', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  margin-bottom: 14px;
}
.photo-hero h1 {
  font-family: 'Lexend', sans-serif;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: #ffffff;
  margin: 0 0 20px;
}
.photo-hero h1 .accent { color: var(--teal-light); }
.photo-hero-sub {
  font-size: 1.16rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.87);
  margin: 0 0 32px;
  max-width: 30em;
}
.photo-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--teal-primary);
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s, background 0.2s;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
}
.photo-hero-cta:hover { background: #F4FBF8; transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55); }
.photo-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.photo-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 26px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.photo-hero-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }

@media (max-width: 760px) {
  .photo-hero { min-height: 440px; }
  .photo-hero-media { object-position: 78% 60%; }
  .photo-hero-scrim {
    background: linear-gradient(180deg, rgba(4,52,44,0.88) 0%, rgba(4,52,44,0.74) 46%, rgba(4,52,44,0.52) 100%);
  }
  .photo-hero-scrim::after { background: none; }
  .photo-hero-inner { padding: 56px 22px; }
  .photo-hero-actions { flex-direction: column; align-items: stretch; }
  .photo-hero-actions a { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-menu, .site-nav-caret, .photo-hero-cta, .photo-hero-ghost { transition: none; }
}

/* ==========================================================================
   Shared page furniture — used by pages that don't carry their own <style>.
   Existing pages load their inline CSS after this file, so they are unaffected.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #1a2e25;
  background: #ffffff;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Lexend', sans-serif; line-height: 1.15; letter-spacing: -0.025em; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ===== COMPACT PAGE HERO (inner pages) ===== */
.np-hero {
  background: linear-gradient(160deg, #021712 0%, #04342C 58%, #063d33 100%);
  padding: 84px 0 76px;
  position: relative;
  overflow: hidden;
}
.np-hero::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,158,117,0.30) 0%, rgba(29,158,117,0) 68%);
  pointer-events: none;
}
.np-hero .container { position: relative; z-index: 1; }
.np-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(93,202,165,0.12);
  border: 1px solid rgba(93,202,165,0.24);
  padding: 7px 15px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.np-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.15rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  max-width: 17ch;
}
.np-hero h1.wide { max-width: 22ch; }
.np-hero-sub {
  font-size: 1.14rem;
  line-height: 1.62;
  color: rgba(255,255,255,0.80);
  max-width: 56ch;
}

/* ===== CONTENT ===== */
.page-section { padding: 72px 0; }
.page-section.tinted { background: #F5FAF8; }
.page-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: #10241C; margin-bottom: 16px; }
.page-section h3 { font-size: 1.14rem; font-weight: 600; color: #10241C; margin-bottom: 8px; }
.page-section p { color: #41564C; margin-bottom: 16px; max-width: 68ch; }
.page-section ul.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.page-section ul.ticks li { position: relative; padding-left: 30px; color: #41564C; max-width: 66ch; }
.page-section ul.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--teal-pale);
  box-shadow: inset 0 0 0 1.5px var(--teal-bright);
}
.lead { font-size: 1.12rem; color: #34493F; }

/* ===== CARD GRID ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; margin-top: 34px; }
.card {
  display: block;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 26px 24px;
  transition: border-color 0.25s, box-shadow 0.35s cubic-bezier(0.22,1,0.36,1), transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
a.card:hover { border-color: var(--teal-light); box-shadow: 0 20px 44px -22px rgba(4,52,44,0.34); transform: translateY(-3px); }
.card-eyebrow {
  font-family: 'Lexend', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-label);
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.96rem; color: #55655C; margin: 0; }
.card-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-family: 'Lexend', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--teal-primary);
}

/* ===== PLACEHOLDER (pages with no content yet) ===== */
.placeholder { padding: 84px 0 96px; }
.placeholder-box {
  max-width: 640px;
  border: 1px dashed #CBDDD5;
  border-radius: 18px;
  background: #F7FBF9;
  padding: 40px 36px;
}
.placeholder-box h2 { font-size: 1.35rem; margin-bottom: 10px; }
.placeholder-box p { color: #55655C; margin-bottom: 18px; }

/* ===== CTA BAND ===== */
.cta-band { background: linear-gradient(150deg, #04342C 0%, #0a5343 100%); padding: 68px 0; text-align: center; }
.cta-band h2 { color: #ffffff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.78); margin: 0 auto 28px; max-width: 52ch; }
.cta-band-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #ffffff; color: var(--teal-primary);
  font-family: 'Lexend', sans-serif; font-size: 1rem; font-weight: 600;
  padding: 15px 30px; border-radius: 100px;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), background 0.2s;
}
.cta-band-btn:hover { background: #F4FBF8; transform: translateY(-2px); }

/* ===== FOOTER ===== */
.footer { background: #021712; padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .logo {
  font-family: 'Lexend', sans-serif; font-size: 1.3rem; font-weight: 700;
  color: #ffffff; display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.footer-brand p { font-size: 0.92rem; color: rgba(255,255,255,0.60); line-height: 1.65; max-width: 320px; }
.footer-col .footer-heading {
  font-family: 'Lexend', sans-serif; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.66); margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a { font-size: 0.92rem; color: rgba(255,255,255,0.62); transition: color 0.2s; }
.footer-col ul li a:hover { color: #34d399; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07); padding-top: 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.62); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .np-hero { padding: 60px 0 56px; }
  .page-section { padding: 52px 0; }
}

/* ==========================================================================
   INSIGHTS — article pages, the insights index, and the email signup band.
   ========================================================================== */

/* ===== ARTICLE HERO ===== */
.article-hero { padding: 76px 0 64px; }
.article-hero h1 { max-width: 20ch; margin-bottom: 20px; }
.article-hero .np-hero-sub { max-width: 60ch; margin-bottom: 26px; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.62);
}
.article-meta a { color: rgba(255,255,255,0.82); text-decoration: underline; text-underline-offset: 3px; }
.article-meta a:hover { color: #6ee7b7; }
.article-meta .sep { color: rgba(255,255,255,0.55); }

/* ===== BREADCRUMB ===== */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 20px;
}
.crumbs a { color: rgba(255,255,255,0.78); }
.crumbs a:hover { color: #6ee7b7; }
.crumbs svg { flex-shrink: 0; opacity: 0.5; }

/* ===== ARTICLE LAYOUT ===== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 56px;
  align-items: start;
  padding: 64px 0 24px;
}

/* ===== TABLE OF CONTENTS ===== */
.article-toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  border-left: 2px solid var(--rule);
  padding-left: 20px;
}
.article-toc-label {
  font-family: 'Lexend', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-label);
  margin-bottom: 14px;
}
.article-toc ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.article-toc a {
  display: block;
  font-size: 0.89rem;
  line-height: 1.45;
  color: #55655C;
  transition: color 0.18s;
}
.article-toc a:hover { color: var(--teal-primary); }
.article-toc a.current { color: var(--teal-primary); font-weight: 600; }

/* ===== PROSE ===== */
.prose { max-width: 68ch; }
.prose > p, .prose > ul, .prose > ol { color: #3B5148; margin-bottom: 20px; }
.prose > p:first-of-type { font-size: 1.14rem; line-height: 1.62; color: #2C4239; }

.prose h2 {
  font-size: clamp(1.42rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: #10241C;
  margin: 48px 0 16px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.16rem;
  font-weight: 600;
  color: #10241C;
  margin: 32px 0 10px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.prose a {
  color: var(--teal-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: rgba(15,110,86,0.35);
  transition: text-decoration-color 0.18s;
}
.prose a:hover { text-decoration-color: var(--teal-primary); }

.prose strong { color: #10241C; font-weight: 600; }

.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 9px; padding-left: 4px; }
.prose li::marker { color: var(--teal-bright); }

.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--teal-light);
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2C4239;
}
.prose blockquote p { margin-bottom: 10px; }
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }

/* ===== CALLOUT ===== */
.callout {
  margin: 32px 0;
  padding: 24px 26px;
  background: #F5FAF8;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal-bright);
  border-radius: 4px 14px 14px 4px;
}
.callout-label {
  font-family: 'Lexend', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-label);
  margin-bottom: 10px;
}
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }
.callout ul { margin-bottom: 0; }

/* a plainer, quieter box — used for legal and scope disclaimers */
.callout.plain {
  background: #FAFBFB;
  border-left-color: #C3D2CB;
  font-size: 0.94rem;
}
.callout.plain .callout-label { color: #60716A; }
.callout.plain p { color: #55655C; }

/* ===== TABLES ===== */
.table-wrap { overflow-x: auto; margin: 30px 0; border: 1px solid var(--rule); border-radius: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 520px; }
.prose thead th {
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10241C;
  background: #F5FAF8;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.prose tbody td {
  padding: 14px 18px;
  color: #41564C;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody th {
  text-align: left;
  padding: 14px 18px;
  color: #10241C;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose tbody tr:last-child th { border-bottom: none; }

/* ===== FAQ ===== */
.faq { margin-top: 14px; border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  padding: 19px 0;
  font-family: 'Lexend', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #10241C;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-right: 2px solid var(--teal-bright);
  border-bottom: 2px solid var(--teal-bright);
  transform: rotate(45deg);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.faq details > div { padding: 0 0 20px; color: #41564C; max-width: 66ch; }
.faq details > div p { margin-bottom: 12px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ===== ARTICLE FOOTER — author + next reads ===== */
.article-foot { max-width: 68ch; margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--rule); }
.author-card { display: flex; gap: 18px; align-items: flex-start; }
.author-mark {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lexend', sans-serif; font-size: 1.05rem; font-weight: 700;
}
.author-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.author-card p { font-size: 0.94rem; color: #55655C; margin-bottom: 10px; }

/* ===== EMAIL SIGNUP ===== */
.signup { background: linear-gradient(150deg, #04342C 0%, #0a5343 100%); padding: 60px 0; }
.signup-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.signup-eyebrow {
  font-family: 'Lexend', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #6ee7b7;
  margin-bottom: 14px;
}
.signup h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: #ffffff; margin-bottom: 12px; }
.signup > .container > .signup-inner > p { color: rgba(255,255,255,0.76); max-width: 50ch; margin: 0 auto 28px; }

.signup-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.signup-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  color: #10241C;
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 14px 22px;
}
.signup-form input[type="email"]::placeholder { color: #8A9A92; }
.signup-form input[type="email"]:focus-visible { outline: none; border-color: var(--teal-light); box-shadow: 0 0 0 4px rgba(93,202,165,0.28); }
.signup-form button {
  flex-shrink: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--teal-primary);
  background: #ffffff;
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.2s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.signup-form button:hover:not(:disabled) { background: #E7F7F1; transform: translateY(-1px); }
.signup-form button:disabled { opacity: 0.62; cursor: default; }

/* honeypot — off-screen rather than display:none so bots still fill it */
.signup-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.signup-note { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-top: 16px; }
.signup-status {
  font-size: 0.95rem;
  margin-top: 16px;
  min-height: 1.4em;
  color: #6ee7b7;
}
.signup-status.error { color: #FCA5A5; }

/* light variant, for use inside a page body rather than as a full band */
.signup.inline { background: #F5FAF8; border: 1px solid var(--rule); border-radius: 18px; padding: 36px 30px; margin: 44px 0; }
.signup.inline .signup-inner { text-align: left; }
.signup.inline .signup-eyebrow { color: var(--teal-label); }
.signup.inline h2 { font-size: 1.3rem; color: #10241C; }
.signup.inline p { color: #55655C; margin: 0 0 22px; max-width: 46ch; }
.signup.inline .signup-form { margin: 0; max-width: 460px; }
.signup.inline .signup-form input[type="email"] { border-color: var(--rule); }
.signup.inline .signup-form button { background: var(--teal-primary); color: #ffffff; }
.signup.inline .signup-form button:hover:not(:disabled) { background: #0a5a45; }
.signup.inline .signup-note { color: #7B8B83; }
.signup.inline .signup-status { color: var(--teal-primary); }
.signup.inline .signup-status.error { color: #B91C1C; }

/* ===== INSIGHTS INDEX ===== */
.post-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.post-item {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
}
.post-item:first-child { border-top: 1px solid var(--rule); }
.post-item:hover h2 { color: var(--teal-primary); }
.post-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.84rem;
  color: #60716A;
  margin-bottom: 10px;
}
.post-item-topic {
  font-family: 'Lexend', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-label);
  background: var(--teal-pale);
  padding: 4px 10px;
  border-radius: 100px;
}
.post-item h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  color: #10241C;
  margin-bottom: 10px;
  max-width: 30ch;
  transition: color 0.2s;
}
.post-item p { font-size: 1rem; color: #55655C; max-width: 62ch; margin-bottom: 12px; }

/* ===== RELATED ===== */
.related { margin-top: 46px; }
.related-label {
  font-family: 'Lexend', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-label);
  margin-bottom: 18px;
}

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .article-toc {
    position: static;
    border-left: none;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
    margin-bottom: 36px;
    order: -1;
  }
  .article-toc ul { gap: 9px; }
}

@media (max-width: 620px) {
  .signup-form { flex-direction: column; }
  .signup-form button { width: 100%; }
  .article-hero { padding: 56px 0 48px; }
  .prose h2 { margin-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after, .signup-form button, .post-item h2 { transition: none; }
}

/* ==========================================================================
   Homepage / landing sections
   ========================================================================== */

/* --- section header rail: heading left, action right --- */
.rail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.rail-eyebrow {
  font-family: 'Lexend', sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-label);
  margin-bottom: 12px;
}
.rail h2 {
  font-family: 'Lexend', sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: #10241C;
  max-width: 20ch;
}
.rail-note { color: #4C5F57; max-width: 42ch; font-size: 1.02rem; }
.rail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal-primary);
  border: 1.5px solid var(--rule);
  border-radius: 100px;
  padding: 11px 22px;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.rail-link:hover { border-color: var(--teal-light); background: var(--teal-pale); }

/* --- big statement band --- */
.statement { padding: 92px 0; border-bottom: 1px solid var(--rule); }
.statement-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.statement h2 {
  font-family: 'Lexend', sans-serif;
  font-size: clamp(1.85rem, 3.7vw, 2.9rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #10241C;
}
.statement h2 em { font-style: normal; color: var(--teal-primary); }
.statement-body p { font-size: 1.08rem; color: #45584F; margin-bottom: 16px; }
.statement-body p:last-child { margin-bottom: 0; }

/* --- service tiles --- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); gap: 18px; }
.tile {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 24px 22px;
  transition: border-color 0.25s, box-shadow 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.tile:hover { border-color: var(--teal-light); box-shadow: 0 22px 48px -26px rgba(4,52,44,0.36); transform: translateY(-3px); }
.tile-kicker {
  font-family: 'Lexend', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-label); margin-bottom: 12px;
}
.tile h3 { font-family: 'Lexend', sans-serif; font-size: 1.12rem; font-weight: 600; color: #10241C; margin-bottom: 8px; }
.tile p { font-size: 0.96rem; color: #55655C; line-height: 1.58; margin-bottom: 16px; flex: 1; }
.tile-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Lexend', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--teal-primary);
}
.tile:hover .tile-go svg { transform: translateX(3px); }
.tile-go svg { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }

/* --- numbered pillars --- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.pillar-num {
  font-family: 'Lexend', sans-serif;
  font-size: 0.8rem; font-weight: 700;
  color: var(--teal-label);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--teal-pale);
}
.pillar h3 { font-family: 'Lexend', sans-serif; font-size: 1.15rem; font-weight: 600; color: #10241C; margin-bottom: 10px; }
.pillar p { font-size: 0.99rem; color: #4C5F57; line-height: 1.62; }

/* --- case study / story cards --- */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.story {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--rule);
  transition: box-shadow 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.story:hover { box-shadow: 0 26px 56px -28px rgba(4,52,44,0.42); transform: translateY(-4px); }
.story-top {
  background: linear-gradient(145deg, #04342C 0%, #0b5a48 100%);
  padding: 26px 24px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.story-top::after {
  content: '';
  position: absolute; right: -60px; top: -70px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(93,202,165,0.30) 0%, rgba(93,202,165,0) 70%);
}
.story-tag {
  position: relative; z-index: 1;
  font-family: 'Lexend', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #6ee7b7; margin-bottom: 14px;
}
.story-metric {
  position: relative; z-index: 1;
  font-family: 'Lexend', sans-serif;
  font-size: 1.5rem; font-weight: 700; line-height: 1.18;
  letter-spacing: -0.02em;
}
.story-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.story-body h3 { font-family: 'Lexend', sans-serif; font-size: 1.06rem; font-weight: 600; color: #10241C; margin-bottom: 8px; }
.story-body p { font-size: 0.95rem; color: #55655C; line-height: 1.58; margin-bottom: 16px; flex: 1; }

/* --- insight cards --- */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.insight {
  display: flex; flex-direction: column;
  border-top: 3px solid var(--teal-bright);
  background: #ffffff;
  padding: 22px 0 0;
  transition: border-color 0.25s;
}
.insight:hover { border-color: var(--teal-primary); }
.insight:hover h3 { color: var(--teal-primary); }
.insight-meta {
  display: flex; gap: 10px; align-items: center;
  font-family: 'Lexend', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 12px;
}
.insight-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #B7C7C0; }
.insight h3 {
  font-family: 'Lexend', sans-serif; font-size: 1.1rem; font-weight: 600;
  line-height: 1.32; color: #10241C; margin-bottom: 10px;
  transition: color 0.2s;
}
.insight p { font-size: 0.95rem; color: #55655C; line-height: 1.56; flex: 1; }
.insight-soon {
  grid-column: 1 / -1;
  border: 1px dashed #CBDDD5;
  border-radius: 16px;
  background: #F7FBF9;
  padding: 34px 32px;
  text-align: center;
}
.insight-soon h3 { font-family: 'Lexend', sans-serif; font-size: 1.15rem; color: #10241C; margin-bottom: 8px; }
.insight-soon p { color: #55655C; margin: 0 auto; max-width: 48ch; }

/* --- np-split feature (why us) --- */
.np-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.np-split-facts { display: flex; flex-direction: column; gap: 2px; }
.np-split-fact { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.np-split-fact:last-child { border-bottom: none; }
.np-split-fact-k {
  font-family: 'Lexend', sans-serif; font-size: 1.5rem; font-weight: 700;
  color: var(--teal-primary); line-height: 1.1; min-width: 92px;
  letter-spacing: -0.02em;
}
.np-split-fact-v { font-size: 0.98rem; color: #4C5F57; line-height: 1.55; }

@media (max-width: 900px) {
  .statement-inner, .np-split { grid-template-columns: 1fr; gap: 30px; }
  .statement { padding: 62px 0; }
  .rail h2 { max-width: none; }
}

/* Escape-dismissed dropdown: must beat the :hover / :focus-within rule above. */
.site-nav-dd.is-dismissed .site-nav-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.site-mobile:focus { outline: none; }

/* ==========================================================================
   Section bands
   Sections separate by full-bleed colour, not tint. White against #F5FAF8 is
   1.05:1 — invisible on a bright display. These are 13.7:1 and 6.2:1.
   Layout alternates white / band so no two colour bands ever touch.
   ========================================================================== */
.band-dark { background: var(--teal-dark); }
.band-teal { background: #0F6E56; }

.band-dark h2, .band-teal h2,
.band-dark h3, .band-teal h3 { color: #ffffff; }
.band-dark p,  .band-teal p  { color: rgba(255,255,255,0.86); }

.band-dark .rail-eyebrow { color: #6ee7b7; }
.band-teal .rail-eyebrow { color: #A7F3D0; }   /* 4.8:1 — #6ee7b7 is only 4.1 here */

.band-dark .rail-note, .band-teal .rail-note { color: rgba(255,255,255,0.86); }

.band-dark .rail-link, .band-teal .rail-link {
  color: #ffffff;
  border-color: rgba(255,255,255,0.42);
}
.band-dark .rail-link:hover, .band-teal .rail-link:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
}

.band-dark .pillar-num { color: #6ee7b7; border-bottom-color: rgba(255,255,255,0.20); }
.band-teal .pillar-num { color: #A7F3D0; border-bottom-color: rgba(255,255,255,0.28); }

.band-dark .np-split-fact, .band-teal .np-split-fact { border-bottom-color: rgba(255,255,255,0.16); }
.band-dark .np-split-fact-k { color: #6ee7b7; }
.band-teal .np-split-fact-k { color: #A7F3D0; }
.band-dark .np-split-fact-v, .band-teal .np-split-fact-v { color: rgba(255,255,255,0.86); }

.band-dark .statement h2 em, .band-teal .statement h2 em { color: #6ee7b7; }
.band-dark .lead, .band-teal .lead { color: rgba(255,255,255,0.88); }

/* inline prose links, readable on either ground */
.inline-link { color: var(--teal-primary); font-weight: 600; }
.band-dark .inline-link, .band-teal .inline-link,
.page-section.tinted .inline-link { color: #6ee7b7; }

/* Inner content pages: the alternating section is a band too. */
.page-section.tinted {
  background: var(--teal-dark);
  border-top: none;
  border-bottom: none;
}
.page-section.tinted h2, .page-section.tinted h3 { color: #ffffff; }
.page-section.tinted p { color: rgba(255,255,255,0.86); }
.page-section.tinted .lead { color: rgba(255,255,255,0.88); }
.page-section.tinted ul.ticks li { color: rgba(255,255,255,0.90); }
.page-section.tinted ul.ticks li::before {
  background: rgba(110,231,183,0.16);
  box-shadow: inset 0 0 0 1.5px #6ee7b7;
}
.page-section.tinted .card { background: #ffffff; }

/* standalone section heading (outside a .rail) */
.section-h2 {
  font-family: 'Lexend', sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: #10241C;
  margin-bottom: 18px;
}
.band-dark .section-h2, .band-teal .section-h2 { color: #ffffff; }

/* The band text rules above must not leak into cards sitting ON a band —
   those keep their own white ground, so their text stays dark. */
.band-dark .tile h3, .band-teal .tile h3,
.band-dark .card h3, .band-teal .card h3,
.band-dark .story-body h3, .band-teal .story-body h3,
.band-dark .insight h3, .band-teal .insight h3,
.band-dark .insight-soon h3, .band-teal .insight-soon h3 { color: #10241C; }

.band-dark .tile p, .band-teal .tile p,
.band-dark .card p, .band-teal .card p,
.band-dark .story-body p, .band-teal .story-body p,
.band-dark .insight p, .band-teal .insight p,
.band-dark .insight-soon p, .band-teal .insight-soon p { color: #55655C; }

.band-dark .tile-kicker, .band-teal .tile-kicker,
.band-dark .card-eyebrow, .band-teal .card-eyebrow { color: var(--teal-label); }
.band-dark .tile-go, .band-teal .tile-go,
.band-dark .card-more, .band-teal .card-more { color: var(--teal-primary); }

/* story card header keeps its own dark gradient */
.band-dark .story-tag, .band-teal .story-tag { color: #6ee7b7; }
.band-dark .story-metric, .band-teal .story-metric { color: #ffffff; }

/* Same guard for the inner-page band: cards keep their own white ground. */
.page-section.tinted .card h3 { color: #10241C; }
.page-section.tinted .card p { color: #55655C; }
.page-section.tinted .card-eyebrow { color: var(--teal-label); }
.page-section.tinted .card-more { color: var(--teal-primary); }

/* ===== FAQ BLOCK (service pages) ===== */
.faq-block { max-width: 760px; margin-top: 28px; }
.faq-block details {
  border-top: 1px solid var(--rule);
  padding: 0;
}
.faq-block details:last-child { border-bottom: 1px solid var(--rule); }
.faq-block summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 34px 22px 4px;
  position: relative;
  font-family: 'Lexend', sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: #04342C;
  transition: color 0.2s;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary:hover { color: var(--teal-primary); }
.faq-block summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--teal-primary);
  border-bottom: 2px solid var(--teal-primary);
  transform: rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.faq-block details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-block details > div p {
  padding: 0 4px 24px;
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.7;
  color: #4C6A60;
  max-width: 68ch;
}

/* ==========================================================================
   Article figure — photo with an attached caption panel.
   The caption is a real editorial note, not a decorative bar: it carries the
   point of the section it sits in, so the image earns its place on the page.
   ========================================================================== */
.figure-card {
  margin: 44px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--teal-dark);
  box-shadow: 0 24px 54px -30px rgba(4,52,44,0.45);
}
.figure-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.figure-card figcaption {
  position: relative;
  padding: 24px 28px 26px 34px;
  background: var(--teal-dark);
}
/* the accent bar, as on the reference */
.figure-card figcaption::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 27px;
  bottom: 27px;
  width: 3px;
  border-radius: 2px;
  background: var(--teal-light);
}
.figure-card figcaption strong {
  display: block;
  font-family: 'Lexend', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}
.figure-card figcaption span {
  display: block;
  font-size: 0.97rem;
  line-height: 1.62;
  color: rgba(255,255,255,0.86);
  max-width: 64ch;
}

@media (max-width: 640px) {
  .figure-card { margin: 32px 0; border-radius: 12px; }
  .figure-card figcaption { padding: 20px 20px 22px 28px; }
  .figure-card figcaption::before { left: 14px; top: 22px; bottom: 22px; }
}

/* ==========================================================================
   Insights index — 3-across card grid (photo / title / one line)
   ========================================================================== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin-top: 34px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s,
              box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),
              transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.post-card:hover {
  border-color: var(--teal-light);
  box-shadow: 0 24px 50px -26px rgba(4,52,44,0.38);
  transform: translateY(-4px);
}
.post-card-media {
  position: relative;
  background: var(--teal-dark);
  overflow: hidden;
}
.post-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-topic {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #04342C;
  background: rgba(255,255,255,0.94);
  padding: 5px 10px;
  border-radius: 100px;
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}
.post-card-body h2 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: #10241C;
  margin: 0 0 9px;
  transition: color 0.2s;
}
.post-card:hover .post-card-body h2 { color: var(--teal-primary); }
.post-card-body p {
  font-size: 0.94rem;
  line-height: 1.58;
  color: #55655C;
  margin: 0 0 16px;
  flex: 1;
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #60716A;
}
.post-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #B7C7C0; }

@media (max-width: 980px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* two-up featured insight cards on the homepage */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}
.post-card-body h3 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #10241C;
  margin: 0 0 9px;
  transition: color 0.2s;
}
.post-card:hover .post-card-body h3 { color: var(--teal-primary); }
@media (max-width: 720px) {
  .featured-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SITE FOOTER — solid brand panel, logo, link columns, social row
   ========================================================================== */
.site-footer {
  background: var(--teal-dark);
  padding: 62px 0 34px;
}
.ft-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Lexend', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 46px;
}
.ft-logo .site-nav-logo-mark { color: #ffffff; height: 17px; }

.ft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.ft-heading {
  font-family: 'Lexend', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 18px;
}
.ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ft-col a {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.80);   /* 9.2:1 on #04342C */
  text-decoration: none;
  transition: color 0.2s;
}
.ft-col a:hover, .ft-col a:focus-visible { color: #6ee7b7; }

/* social row */
.ft-socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 52px 0 10px;
}
.ft-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.42);
  color: #ffffff;
  transition: background 0.2s, border-color 0.2s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.ft-social svg { width: 17px; height: 17px; }
.ft-social:hover {
  background: rgba(255,255,255,0.14);
  border-color: #ffffff;
  transform: translateY(-2px);
}

.ft-bottom {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.ft-bottom p { font-size: 0.85rem; color: rgba(255,255,255,0.62); margin: 0; }

@media (max-width: 860px) {
  .site-footer { padding: 46px 0 28px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ft-logo { margin-bottom: 34px; }
  .ft-socials { margin: 38px 0 6px; }
}
@media (max-width: 520px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
}