/* ============================================================
   IGM — India Gold Metaverse · Blog page (standalone)
   Self-contained stylesheet for blog.html: fonts, tokens, base,
   navbar + footer partials, the shared dark FAQ (with its white
   curve) and the Blog-only hero, featured card, category filter
   and blog-card grid. Shared boilerplate is kept identical to the
   sibling About pages so the page renders on its own — no
   dependency on assets/css/styles.css.
   Fonts: Satoshi + Clash Display (self-hosted) · Instrument Serif
   (Google Fonts, linked in the page <head>).
   ============================================================ */

/* ---------- fonts · tokens · base · shared .pill ----------
   Root-relative font URLs (leading slash) so Satoshi resolves from
   the site root, not from assets/css/ where this file lives. */
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/img/fonts/clashdisplay-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --neutral-50:  #ffffff;
  --neutral-100: #f9f9fb;
  --neutral-200: #eeeef1;
  --neutral-300: #c8c8d2;
  --neutral-400: #aeaeba;
  --neutral-500: #8a8a97;   /* Figma Neutral-500 (post-meta timestamps) */
  --neutral-600: #606070;
  --neutral-700: #3d3d4d;
  --neutral-800: #232330;
  --neutral-900: #0d0f1a;
  --neutral-950: #000000;
  --gray-500:    #6b7280;   /* breadcrumb separator, per Figma Gray-500 */
  --gold-50:     #f9f5ec;
  --gold-100:    #f0e6d1;
  --gold-200:    #e3d1a8;
  --gold-300:    #d6ba81;
  --gold-warm:   #cfb38d;  /* warm serif accent + category badge label */
  --gold-500:    #b9903f;
  --gold-600:    #a07f36;
  --gold-grad:   linear-gradient(100deg, #b9903f 0%, #e8cf8f 45%, #b9903f 100%);
  --blue-500:    #277ada;  /* FEATURED flag */
  --cream:       #fbf7ef;
  --sans:  "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --maxw: 1200px;
  /* Figma's spring (mass 1, stiffness 100, damping 15) solved and sampled as an
     easing curve: damping ratio .75, so it overshoots ~2.8% and settles in .82s.
     A cubic-bezier can't overshoot, hence linear(). */
  --spring: linear(
    0 0%, 0.0424 3.8%, 0.1441 7.7%, 0.2747 11.5%, 0.4131 15.4%, 0.5455 19.2%,
    0.6637 23.1%, 0.7637 26.9%, 0.8447 30.8%, 0.9073 34.6%, 0.9536 38.5%,
    0.9861 42.3%, 1.0075 46.2%, 1.0202 50%, 1.0265 53.8%, 1.0284 57.7%,
    1.0273 61.5%, 1.0245 65.4%, 1.0208 69.2%, 1.0169 73.1%, 1.0131 76.9%,
    1.0097 80.8%, 1.0069 84.6%, 1.0045 88.5%, 1.0027 92.3%, 1.0014 96.2%, 1 100%
  );
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  color: var(--neutral-900);
  background: #fff;
  line-height: 1.45;
  /* backstop for the full-bleed decorative curves. `hidden` on body alone relies on
     overflow propagating to the viewport, which some browsers don't honour — `clip`
     on both html and body kills the sideways scroll without making a scroll container */
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0%;font-size: 22px;
    line-height: 28px; }

/* ---------- shared ---------- */
.pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #eeeef1;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-900);
}
.nav-logo-header-footer{
  height: 90px;
  width: auto;
  padding-bottom: 10px;
}
.pill--outline { background: transparent; color: var(--gold-50); border: 1px solid rgba(255,255,255,.12); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;   /* 0.28px @ 14px, per Figma buttons */
  text-transform: uppercase;
  transition: opacity .2s, transform .2s;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn-dark  { background: #000; color: #fff; }   /* Neutral-950, per Figma "Dark Solid" */
.btn-outline {
  background: rgba(255,255,255,.11);
  border: .8px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fafafa;
  height: 40px;
  padding: 0 12px;
  font-family: "Clash Display", var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 4px;
}
button.btn { border: none; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; }

/* ---------- navbar ---------- */
.navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px 40px;
}
.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(12px, min(2.2vw, 8.2vw - 72px), 48px);
  align-items: center;
}
.nav-left { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: clamp(12px, min(2.2vw, 8.2vw - 72px), 48px); }
.nav-link {
  color: #fafafa;
  /* 16px is the Figma size and holds from ~1392px up. Below that the four
     top-level items no longer clear the centred logo, so the label steps
     down rather than wrapping onto a second line and colliding with it. */
  font-size: clamp(13px, 1.4vw, 16px);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: .02em;      /* 0.32px @ 16px */
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link .chev { display: inline-block; margin-left: 3px; font-size: 13px; line-height: 1; opacity: .9; transform-origin: center; transition: transform .25s; }
.nav-link:hover { color: var(--gold-300); }

/* ---- offerings dropdown ---- */
.nav-item { position: relative; }
.nav-item.has-menu > .nav-link { cursor: pointer; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  width: max-content;   /* sized to its longest entry, so every item stays on one line */
  margin-top: 14px;
  padding: 8px;
  background: var(--neutral-50);
  border: 1px solid #eeeef1;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.nav-dropdown--about { min-width: 360px; padding: 14px; }
.nav-dropdown__group {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: start;
  padding: 10px 0;
}
.nav-dropdown__group + .nav-dropdown__group { border-top: 1px solid #eeeef1; }
.nav-dropdown__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-500);
  padding-top: 9px;      /* optically aligns the label with the first link row */
}
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%; left: 0;
  width: 100%; height: 16px;
}
.nav-item.has-menu:hover .nav-dropdown,
.nav-item.has-menu:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item.has-menu:hover > .nav-link .chev { transform: rotate(180deg); }
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--neutral-600);
  transition: background .18s, color .18s;
}
.nav-dropdown a:hover { background: #f4f4f6; color: var(--gold-500); }
.nav-dropdown a.is-active { color: var(--gold-500); }
/* logo sits at the far left; both menu groups follow it on the right (explicit
   columns because .nav-left comes before the logo in the markup) */
.nav-logo { grid-column: 1; grid-row: 1; text-align: left; color: #fff; }
.nav-right { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, min(2.2vw, 8.2vw - 72px), 48px); }
/* NEWS ROOM / EVENTS live in this column, so their panels hang from the right
   edge of the item — left-aligned they would run off the side of the viewport */
.nav-right .nav-dropdown { left: auto; right: 0; }

/* ---- second-row section nav (About-Us destinations) ---- */
.nav-subnav {
  max-width: 1360px;
  margin: 12px auto 0;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 44px;
}
.nav-subnav.is-open { display: flex; animation: subnav-in .22s ease both; }
@keyframes subnav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-subnav__link {
  color: var(--neutral-300);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .18s;
}
.nav-subnav__link:hover { color: var(--gold-300); }
.nav-subnav__link.is-active { color: var(--gold-500); }

/* ---- mobile: hamburger trigger + full-screen menu ---- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  justify-self: start;
  align-items: end;
}
.nav-burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.mobile-nav.is-open { visibility: visible; transform: translateX(0); }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #eeeef1;
}
.mobile-nav__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--neutral-900);
  cursor: pointer;
}
.mobile-nav__logo img { height: 40px; width: auto; }
.mobile-nav__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px; }

.mobile-acc { border-bottom: 1px solid #eeeef1; }
.mobile-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  background: none;
  border: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--neutral-900);
  cursor: pointer;
  font-family: 'Satoshi';
}
.mobile-acc__trigger .chev { font-size: 16px; line-height: 1; color: #9a9aa4; transition: transform .25s, color .25s; }
.mobile-acc.is-open .mobile-acc__trigger { color: var(--gold-500); }
.mobile-acc.is-open .mobile-acc__trigger .chev { color: var(--gold-500); transform: rotate(180deg); }
/* grid-rows 0fr -> 1fr is a smooth auto-height collapse with no JS measuring */
.mobile-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.mobile-acc.is-open .mobile-acc__panel { grid-template-rows: 1fr; }
.mobile-acc__panel-inner { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 2px; }
.mobile-acc__panel a {
  margin: 2px 0;
  padding: 12px 14px;
  background: #fff;
  font-size: 14px;
  color: #606070;
  font-family: 'Satoshi';
}
.mobile-acc__panel a:hover { color: var(--neutral-900); }
.mobile-nav__cta { margin: 16px 20px 24px; justify-content: center; }
body.mobile-nav-open { overflow: hidden; }

/* ---------- FAQ curve + shared dark FAQ accordion ---------- */
.faq-wave-top {
  position: absolute;
  top: -1px;
  left: -2px;
  width: calc(100% + 4px);
  max-width: none;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.faq {
  text-align: left;
  border-bottom: 1px solid #26262e;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  color: #fff;
  font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  transition: transform .2s;
}
.faq[open] summary::after { transform: rotate(180deg); }
/* questions read upright: the <em> wrapper is only there for the serif face */
.faq summary em { font-style: normal; }
.faq p {
  color: #b9b9c2;
  font-size: 14px;
  line-height: 1.65;
  padding: 0 0 22px;
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.7) 100%),
    url("assets/img/FooterBG.png") center / cover no-repeat,
    #000;
  color: #fff;
  padding: 70px 40px 40px;
  text-align: center;
}
.footer-logo-img { height: 44px; width: auto; margin: 0 auto; filter: brightness(0) invert(1); }
.footer-rule { border: 0; border-top: 1px solid #232329; max-width: 1000px; margin: 34px auto; }
/* five link columns since News Room and IGM at Events joined the footer; the
   1000px cap lines the grid up with the .footer-rule above it */
.footer-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  text-align: left;
}
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.footer-col a {
  display: block;
  font-size: 13px;
  color: #a2a2ab;
  margin-bottom: 9px;
}
.footer-col a:hover { color: var(--gold-300); }
/* a heading that is itself the link (Blogs) keeps the h4 look, not the grey sub-link style */
.footer-col h4 a { display: inline; font-size: inherit; color: inherit; margin: 0; }
.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 50px;
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #86868c;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.footer-brand{
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social a:hover { background: var(--gold-300); }
.footer-legal { margin-top: 44px; font-size: 12px; color: #9a9aa2; }
.footer-legal a:hover { color: #fff; }
.footer-copy { margin-top: 10px; font-size: 12px; color: #7c7c85; }

/* ---------- scroll-reveal + scrolled navbar + reduced motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible { opacity: 1; transform: none; position: relative; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px) scale(.97);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .24s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: .36s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: .48s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: .60s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: .72s; }
/* per-child reveal when a stagger group is taller than the viewport (mobile) */
.reveal-stagger > .visible { opacity: 1; transform: none; }
.navbar { transition: background .35s ease, backdrop-filter .35s ease; }
.navbar.scrolled {
  position: fixed;
  background: rgba(5, 5, 10, .65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { transition: none; animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   BLOG PAGE — hero, featured card, filter + blog-card grid
   The blog hero sits on a light background, so the navbar needs a
   solid dark fill (Figma's "for light background" variant) instead
   of the transparent bar the product pages use over a dark hero.
   ============================================================ */
.blog-page .navbar { background: var(--neutral-950); }

/* Navbar is position:absolute (out of flow), so the hero must reserve
   its height (~104px) plus the Figma's 24px top gap before the breadcrumb. */
.blog-hero { position: relative; overflow: hidden; padding: 128px 0 60px; }

/* gold radial glow bleeding down from behind the title (Figma: Gold-300 @ 30%) */
.blog-hero__glow {
  position: absolute;
  top: -76px; left: 50%;
  width: 957px; height: 353px;
  transform: translateX(-50%);
  background: var(--gold-300);
  opacity: .30;
  border-radius: 9999px;
  filter: blur(102px);
  pointer-events: none;
}
/* five large, faint circles as a staggered overlapping cluster that comes in
   from the top and cascades down-right, keeping the far-left clear and bleeding
   off the top edge — per Figma. Dense overlap makes the petal/vesica merges. */
/* .blog-hero__rings {
  position: absolute;
  top: 20px; left: 0;
  width: 1040px; height: 640px;
  z-index: 0;
  pointer-events: none;
} */
/* .blog-hero__rings span {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 9999px;
  border: .25px solid rgba(174, 174, 186, .40);   /* Neutral-400, faded
} */
/* .blog-hero__rings span:nth-child(1) { left: 120px; top: -140px; }
.blog-hero__rings span:nth-child(2) { left: 360px; top:  -50px; }
.blog-hero__rings span:nth-child(3) { left: 200px; top:  130px; }
.blog-hero__rings span:nth-child(4) { left: 470px; top:   50px; }
.blog-hero__rings span:nth-child(5) { left: 320px; top:  250px; } */

/* breadcrumb */
.blog-crumbs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 56px;
  margin-bottom: 64px;
}
.blog-crumbs a { color: var(--neutral-600); font-size: 12px; line-height: 16px; }
.blog-crumbs a:hover { color: var(--gold-600); }
.blog-crumbs .sep { color: var(--gray-500); font-weight: 300; font-size: 16px; }
.blog-crumbs .current { color: var(--neutral-900); font-size: 14px; font-weight: 500; line-height: 20px; }

/* hero heading + search */
.blog-hero__head {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 24px 0;
}
.blog-hero__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 60px; line-height: 76px; color: var(--neutral-900); }
.blog-hero__sub { color: var(--neutral-800); font-size: 16px; line-height: 22px; max-width: 560px; }
.blog-search {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 300px;
  height: 46px;
  padding: 4px 16px;
  border-radius: 24px;
  background: var(--neutral-50);
  box-shadow: 0 4px 9px rgba(0,0,0,.05);
  outline: 1px solid rgba(200,200,210,.20);
  outline-offset: -1px;
}
.blog-search i { color: var(--gold-600); font-size: 15px; }
.blog-search input {
  flex: 1 1 auto;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--neutral-900);
}
.blog-search input::placeholder { color: var(--neutral-900); opacity: 1; }

/* ---------- featured card + carousel dots ---------- */
.blog-featured-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 100px;
  padding: 0 24px;
}
.blog-featured {
  display: flex;
  width: 100%;
  max-width: 1040px;
  padding: 8px;
  gap: 8px;
  background: var(--neutral-100);
  border-radius: 6px;
}
.blog-featured__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* follow the 16:9 post banners instead of a fixed 300px height — those
     banners carry their headline text near the left edge, and cover-cropping
     into a fixed box sliced it off. flex-start stops the row's stretch from
     overriding the ratio when the copy column is taller. */
  aspect-ratio: 16 / 9;
  align-self: flex-start;
  border-radius: 4px;
  overflow: hidden;
  background: var(--neutral-200);   /* Figma image fill sits under the export */
}
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.blog-featured__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
.blog-featured__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-500);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 18px;
}
.blog-featured__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 38px; color: var(--neutral-900); }
.blog-featured__excerpt { color: var(--neutral-600); font-size: 16px; line-height: 22px; }

/* carousel dots — first bar active (wide, dark), the rest short + light */
.blog-dots { display: flex; align-items: center; gap: 5px; }
.blog-dots span { width: 6px; height: 3px; border-radius: 1px; background: var(--neutral-400); }
.blog-dots span.is-active { width: 26px; background: var(--neutral-600); }

/* shared post meta + author + read-more (featured and grid cards) */
.blog-meta { display: flex; align-items: center; gap: 10px; }
.blog-meta__read { color: var(--neutral-600); font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 18px; }
.blog-meta__dot { width: 2px; height: 2px; border-radius: 50%; background: var(--neutral-300); }
.blog-meta__date { color: var(--neutral-500); font-size: 12px; line-height: 16px; }
.blog-foot { display: flex; align-items: center; gap: 20px; }
.blog-author { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.blog-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--neutral-300); }
.blog-author span { color: var(--neutral-700); font-size: 14px; line-height: 20px; }
.blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--neutral-800);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: .72px;
  transition: gap .2s;
}
.blog-readmore i { font-size: 12px; }
.blog-readmore:hover { gap: 8px; color: var(--gold-600); }

/* category badge shown bottom-right on card imagery */
.blog-badge {
  position: absolute;
  right: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 6px;
  border-radius: 2px;
  background: var(--gold-50);
  outline: 1px solid var(--gold-100);
  outline-offset: -1px;
  color: var(--gold-warm);
  font-size: 14px;
  line-height: 24px;
}

/* ---------- filter + grid section ---------- */
.blog-list {
  padding: 80px 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  background: linear-gradient(180deg, rgba(238,238,241,.6) 0%, rgba(238,238,241,0) 100%);
}
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.blog-filter {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 48px;
  background: var(--neutral-200);
  box-shadow: 0 4px 7px rgba(0,0,0,.04) inset;
  color: var(--neutral-700);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.blog-filter:hover { color: var(--neutral-900); }
.blog-filter.is-active {
  background: var(--neutral-950);
  box-shadow: 0 4px 11px rgba(0,0,0,.10), 0 4px 8px rgba(255,255,255,.38) inset;
  color: var(--gold-200);
}

.blog-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--neutral-50);
  border-radius: 4px;
  overflow: hidden;
}
.blog-card__media {
  position: relative;
  height: 276px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--neutral-200);   /* Figma Neutral-200 image fill under the export */
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px;
}
.blog-card__head { display: flex; flex-direction: column; gap: 16px; }
.blog-card__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 38px; color: var(--neutral-900); }
.blog-card__excerpt { color: var(--neutral-600); font-size: 16px; line-height: 22px; }

/* Load More — outlined dark, per Figma */
.blog-loadmore {
  height: 48px;
  padding: 0 24px;
  border: .8px solid var(--neutral-950);
  border-radius: 4px;
  background: none;
  color: var(--neutral-900);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.blog-loadmore:hover { background: var(--neutral-950); color: #fff; }

/* ---------- dark FAQ shell (shared with About pages) ---------- */
.about-faq { position: relative; overflow: hidden; background: #060708; padding: 132px 80px 60px; }
.about-faq__inner { max-width: 1000px; margin: 0 auto; }
.about-faq__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; }
.about-faq__title {
  color: var(--gold-50);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 56px;
  letter-spacing: .44px;
}
.about-faq__list .faq summary { font-family: var(--serif); font-style: italic; font-size: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-left { display: none; }
  .nav-subnav, .nav-subnav.is-open { display: none; }
  .nav-right { display: none; }
  .nav-logo { grid-column: 1; grid-row: 1; }
  .nav-burger { display: flex; grid-column: 3; grid-row: 1; justify-self: end; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  /* featured card stacks; blog grid collapses to one column */
  .blog-featured { flex-direction: column; }
  .blog-featured__media { width: 100%; flex: none; align-self: stretch; }
  .blog-list { padding: 60px 40px; }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .navbar { padding: 14px 20px; }
  /* .footer-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; } */
  /* two CSS columns instead of that 3-row grid: grid rows are shared across
     both columns, so News Room / Blogs / Academy were pushed down to line up
     with the taller About Us / Offerings / Events beside them, leaving big
     gaps on the right. Multicol stacks each side independently; the forced
     break at the 4th block keeps the same 3 | 3 split in DOM order */
  .footer-grid { display: block; columns: 2; column-gap: 30px; }
  .footer-col { break-inside: avoid; margin-bottom: 30px; }
  .footer-col:nth-child(4) { -webkit-column-break-before: always; break-before: column; }
  .blog-hero { padding-top: 108px; }
  .blog-crumbs { padding: 0 20px; margin-bottom: 40px; }
  .blog-hero__title { font-size: 40px; line-height: 50px; }
  .blog-hero__rings { display: none; }   /* rings crowd the heading on phones */
  .blog-featured-wrap { margin-top: 56px; }
  .blog-list { padding: 48px 16px; gap: 36px; }
  .blog-card__title, .blog-featured__title { font-size: 24px; line-height: 32px; }
  .blog-card__body { gap: 20px; }
  .about-faq { padding: 108px 16px 24px; }
  .about-faq__title { font-size: 24px; line-height: 30px; }
  .about-faq__list .faq summary { font-size: 16px; }
}