/* ============================================================
   IGM — India Gold Metaverse · Blog Details (article) page
   Self-contained stylesheet for blog-details.html: fonts, tokens,
   base, navbar + footer partials, the shared dark FAQ (with its
   white curve), plus the article-only header, long-form body
   (paragraphs, headings, gold callouts, an inline CTA card, a
   caratage table, an image carousel, a Key Takeaway pull-quote)
   and the "More like this" related-post grid (reusing the blog
   card from the listing page). Shared boilerplate mirrors the
   sibling pages so the page renders on its own.
   Fonts: Satoshi + Clash Display (self-hosted) · Instrument Serif
   (Google Fonts, linked in the page <head>).
   ============================================================ */

/* ---------- fonts · tokens · base ---------- */
@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;
  --neutral-600: #606070;
  --neutral-700: #3d3d4d;
  --neutral-800: #232330;
  --neutral-900: #0d0f1a;
  --neutral-950: #000000;
  --gray-500:    #6b7280;
  --gold-50:     #f9f5ec;
  --gold-100:    #f0e6d1;
  --gold-200:    #e3d1a8;
  --gold-300:    #d6ba81;
  --gold-warm:   #cfb38d;
  --gold-500:    #b9903f;
  --gold-600:    #a07f36;
  --gold-700:    #7e642a;   /* IGM-Gold-700 — article section headings */
  --blue-500:    #277ada;   /* inline links + FEATURED */
  /* gradient gold used on the article category badge */
  --gold-badge:  linear-gradient(135deg, #cfb38d 0%, #eab338 48%, #966827 100%);
  --sans:  "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  /* Figma spring — preserved from the sibling pages (governs .reveal easing feel) */
  --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;
  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; font-size: 22px; line-height: 28px; }

/* ---------- shared pill + buttons ---------- */
.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); }
.pill--outline { background:transparent; color:var(--gold-50); border:1px solid rgba(255,255,255,.12); }
.nav-logo-header-footer { height:90px; width:auto; padding-bottom:10px; }
.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; text-transform:uppercase; transition:opacity .2s, transform .2s; }
.btn:hover { opacity:.85; transform:translateY(-1px); }
.btn-dark { background:#000; color:#fff; }
.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; font-size:clamp(13px, 1.4vw, 16px); white-space:nowrap; font-weight:500; letter-spacing:.02em; 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); }
.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; 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; }
.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; }
.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; }
.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); }
.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); }
.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; }

/* the article sits on a light background, so the navbar takes the solid dark
   fill (Figma's "for light background" variant) instead of a transparent bar */
.blog-details-page .navbar { background: var(--neutral-950); }
.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); }

/* ---------- 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 accordion arrow: the shared white Arrow-Vector chevron asset */
.faq summary::after {
  content:""; width:18px; height:10px; flex:none;
  background:center / contain no-repeat url("/assets/img/Arrow-Vector.png");
  transition:transform .2s;
}
.faq[open] summary::after { transform:rotate(180deg); }
.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-brand { display:flex; align-items:center; justify-content:center; }
.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-social a:hover { background:var(--gold-300); }
.footer-legal { margin-top:44px; font-size:12px; color:#9a9aa2; }
.footer-copy { margin-top:10px; font-size:12px; color:#7c7c85; }

/* ---------- scroll-reveal ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.visible { opacity:1; transform:none; }
.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 { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { transition:none; animation:none; opacity:1; transform:none; } }

/* ============================================================
   ARTICLE HEADER  (Figma 2780:2741)
   ============================================================ */
/* navbar is absolute; reserve its ~88px height + Figma's 24px top gap */
.article { padding: 112px 56px 0; }
.article__inner { max-width: 1328px; margin: 0 auto; }

/* breadcrumb */
.article-crumbs { display:flex; align-items:center; gap:8px; }
.article-crumbs a, .article-crumbs span { white-space:nowrap; }
.article-crumbs a { color:var(--neutral-600); font-size:12px; line-height:16px; }
.article-crumbs a:hover { color:var(--gold-600); }
.article-crumbs .sep { color:var(--gray-500); font-weight:300; font-size:16px; line-height:24px; }
.article-crumbs .current { color:var(--neutral-900); font-size:14px; font-weight:500; line-height:20px; overflow:hidden; text-overflow:ellipsis; }

/* header block */
.article-head { margin-top:100px; display:flex; flex-direction:column; align-items:center; gap:40px; padding:0 250px; text-align:center; }
.article-head__top { display:flex; flex-direction:column; align-items:center; gap:28px; width:100%; }
.article-cat {
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 15px; border-radius:34px;
  background:var(--gold-badge);
  border:1px solid var(--neutral-200);
  box-shadow:0 4px 4px rgba(0,0,0,.12);
  color:#fff; font-size:14px; line-height:24px;
}
.article-title { font-family:var(--serif); font-style:italic; font-weight:400; font-size:56px; line-height:66px; letter-spacing:1.12px; color:#292929; }
.article-meta { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.article-meta__author { display:flex; align-items:center; gap:8px; }
.article-meta__author img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:.889px solid var(--neutral-200); background:var(--neutral-200); }
.article-meta__by { display:flex; align-items:center; gap:4px; font-size:16px; }
.article-meta__by b { font-weight:500; color:var(--neutral-800); }
.article-meta__by span { font-weight:400; color:var(--neutral-600); }
.article-meta__dot { width:2px; height:2px; border-radius:50%; background:var(--neutral-300); }
.article-meta__read { font-size:16px; font-weight:500; line-height:24px; color:var(--neutral-600); }
.article-meta__date { font-size:16px; font-weight:400; line-height:22px; color:var(--neutral-600); }
.article-share { display:flex; align-items:center; gap:16px; }
.article-share a { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--neutral-500); font-size:18px; transition:color .18s; }
.article-share a:hover { color:var(--gold-600); }

/* hero image + caption + rule */
.article-hero { margin-top:80px; display:flex; flex-direction:column; align-items:center; gap:64px; }
/* 16:9 to match the post banners, which carry headline text edge to edge —
   a fixed height (600px, 300px on phones) cover-cropped that text off.
   Capped at 960px (= 540px tall): full-bleed at 1328px made it ~700px tall,
   a whole screen; 960 sits just wider than the 818px reading column below.
   Change the size here — the height follows from the 16:9 ratio. */
.article-hero__img { width:100%; max-width:960px; aspect-ratio:16 / 9; border-radius:4px; overflow:hidden; background:var(--neutral-200); }
.article-hero__img img { width:100%; height:100%; object-fit:cover; }
.article-hero__cap { max-width:1008px; padding:0 160px; text-align:center; font-family:var(--serif); font-style:italic; font-weight:400; font-size:28px; line-height:36px; color:var(--neutral-800); }
.article-hero__rule { width:800px; max-width:100%; height:1px; background:var(--neutral-200); }

/* ============================================================
   ARTICLE BODY  (Figma 2780:2786 — 778px reading column)
   ============================================================ */
/* 818 − 2×20 padding = 778 content column on desktop (box-sizing:border-box),
   while the 20px side padding keeps body text off the screen edges on mobile */
.article-body { max-width:818px; margin:80px auto 0; padding:0 20px 80px; }
.article-section { display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
/* section groups are separated by hairline rules with 60px of breathing room */
.article-section + .article-section,
.article-media + .article-section,
.article-section + .article-media,
.article-media + .article-media { margin-top:60px; }
.article-rule { width:100%; height:1px; background:var(--neutral-200); margin:60px 0; }

.article-h2 { font-family:var(--serif); font-style:normal; font-weight:400; font-size:32px; line-height:42px; color:var(--gold-700); }
.article-copy { display:flex; flex-direction:column; gap:32px; align-items:flex-start; width:100%; }
.article-copy p { font-size:18px; line-height:28px; color:var(--neutral-800); }
.article-copy a { color:var(--blue-500); text-decoration:underline; text-underline-offset:2px; }

/* gold left-bar callout */
.article-callout { display:flex; gap:16px; align-items:stretch; width:100%; }
.article-callout::before { content:""; flex:0 0 2px; width:2px; border-radius:24px; background:var(--gold-600); }
.article-callout p { padding:4px 0; font-size:18px; font-weight:500; line-height:26px; letter-spacing:-.09px; color:var(--gold-700); }

/* titled list (each item: lead-in + description) */
.article-list { display:flex; flex-direction:column; gap:24px; width:100%; }
.article-list li { list-style:none; }
.article-list b { display:block; font-size:18px; font-weight:500; line-height:26px; color:var(--neutral-900); margin-bottom:4px; }
.article-list span { font-size:18px; font-weight:400; line-height:28px; color:var(--neutral-600); }

/* inline CTA card (image + panel) */
.article-cta { display:flex; gap:4px; align-items:stretch; width:100%; }
.article-cta__img { flex:0 0 400px; width:400px; border-radius:4px; overflow:hidden; background:var(--neutral-200); }
.article-cta__img img { width:100%; height:100%; object-fit:cover; }
.article-cta__panel { flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:400px; padding:16px 20px; border:1px solid var(--neutral-200); border-radius:4px; }
.article-cta__label { display:flex; align-items:center; gap:8px; padding:8px 0; }
.article-cta__label i { width:7px; height:7px; border-radius:50%; border:.8px solid var(--neutral-300); }
.article-cta__label span { font-size:12px; line-height:14px; letter-spacing:-.12px; color:var(--neutral-500); }
.article-cta__text { display:flex; flex-direction:column; font-size:22px; line-height:28px; }
.article-cta__text b { font-weight:400; color:var(--neutral-800); }
.article-cta__text span { font-weight:400; color:var(--neutral-400); }
.article-cta__btn { align-self:flex-start; display:inline-flex; align-items:center; height:36px; padding:8px 16px; border-radius:160px; background:var(--neutral-800); color:#fff; font-size:14px; font-weight:500; line-height:20px; letter-spacing:.28px; text-transform:uppercase; transition:opacity .2s; }
.article-cta__btn:hover { opacity:.88; }

/* plain full-width media block */
.article-media { width:100%; }
.article-media__img { width:100%; height:400px; border-radius:4px; overflow:hidden; background:var(--neutral-200); }
.article-media__img img { width:100%; height:100%; object-fit:cover; }

/* image carousel */
.article-carousel { display:flex; align-items:center; gap:20px; width:100%; }
.article-carousel__btn { flex:0 0 36px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:0; border-radius:40px; background:rgba(238,238,241,.5); color:var(--neutral-700); font-size:16px; cursor:pointer; transition:background .18s; }
.article-carousel__btn:hover { background:var(--neutral-200); }
.article-carousel__main { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.article-carousel__img { width:100%; height:400px; border-radius:4px; overflow:hidden; background:var(--neutral-200); }
.article-carousel__img img { width:100%; height:100%; object-fit:cover; }
.article-carousel__cap { text-align:center; font-size:18px; font-weight:500; line-height:26px; letter-spacing:-.09px; color:var(--neutral-900); }

/* caratage table */
.article-table { width:680px; max-width:100%; border-radius:8px; overflow:hidden; border-collapse:collapse; }
.article-table th, .article-table td { text-align:left; padding:16px 0; font-size:16px; font-weight:500; line-height:24px; letter-spacing:-.08px; border-bottom:1px solid var(--neutral-200); }
.article-table th { color:var(--neutral-950); padding:20px 0; }
.article-table td { color:var(--neutral-600); }
.article-table th:not(:last-child), .article-table td:not(:last-child) { width:201px; padding-right:16px; }

/* Key Takeaway pull-quote */
.article-takeaway { display:flex; gap:16px; align-items:stretch; width:100%; }
.article-takeaway::before { content:""; flex:0 0 2px; width:2px; border-radius:24px; background:var(--gold-600); }
.article-takeaway__body { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.article-takeaway__tag { align-self:flex-start; position:relative; padding:8px 12px; font-family:var(--serif); font-style:normal; font-weight:400; font-size:24px; line-height:30px; color:#fff; }
/* the drawn gold highlight sitting behind the tag text */
.article-takeaway__tag::before { content:""; position:absolute; inset:-6px -8px; z-index:-1; border-radius:50%; background:var(--gold-badge); transform:rotate(-2deg); }
.article-takeaway__text { font-size:18px; font-weight:500; line-height:26px; letter-spacing:-.09px; color:var(--neutral-600); }

/* ============================================================
   MORE LIKE THIS  (Figma 2780:2938)  — reuses the listing card
   ============================================================ */
.more { position:relative; overflow:hidden; padding:140px 56px 0; }
.more__glow { position:absolute; top:120px; left:50%; width:1295px; max-width:120%; height:525px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(214,186,129,.28), rgba(214,186,129,0) 70%); pointer-events:none; }
.more__inner { position:relative; z-index:1; max-width:1328px; margin:0 auto; }
.more__title { text-align:center; font-family:var(--serif); font-style:italic; font-weight:400; font-size:44px; line-height:56px; color:var(--neutral-900); }
.more__grid { margin-top:52px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.more__dots { margin-top:40px; display:flex; justify-content:center; align-items:center; gap:5px; }
.more__dots span { width:6px; height:3px; border-radius:1px; background:var(--neutral-400); }
.more__dots span.is-active { width:26px; background:var(--neutral-600); }

/* blog card (shared with the listing page) */
.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); }
.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; }
.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; }
.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); }

/* ---------- dark FAQ shell (shared with About pages) ---------- */
.about-faq { position:relative; overflow:hidden; background:#060708; padding:132px 80px 60px; margin-top:140px; }
.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, .nav-right, .nav-subnav, .nav-subnav.is-open { 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); }
  .article-head { padding:0 40px; }
  .article-hero__cap { padding:0 40px; }
  /* CTA card stacks image over panel */
  .article-cta { flex-direction:column; }
  .article-cta__img { flex:0 0 auto; width:100%; height:260px; }
  .article-cta__panel { min-height:0; }
  .more__grid { grid-template-columns:1fr; max-width:412px; margin-inline:auto; }
}
@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; }
  .article { padding:96px 20px 0; }
  .article-head { margin-top:48px; padding:0; gap:24px; }
  .article-head__top { gap:20px; }
  .article-title { font-size:34px; line-height:42px; letter-spacing:.4px; }
  .article-meta { gap:8px 10px; }
  .article-hero { margin-top:40px; gap:24px; }
  .article-hero__cap { padding:0; font-size:20px; line-height:28px; }
  /* body scales down; the reading column keeps its own left-aligned type */
  .article-body { margin-top:40px; padding-bottom:56px; }
  .article-h2 { font-size:24px; line-height:32px; }
  .article-copy { gap:24px; }
  .article-copy p, .article-list b, .article-list span, .article-callout p { font-size:16px; line-height:24px; }
  .article-callout p { line-height:24px; }
  /* table overflows its column — let it scroll horizontally on phones */
  .article-table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* fit the table to the screen rather than scrolling it: at a fixed 560px the
     last column — the one the comparison is about — sat off-screen with no hint
     to swipe. Smaller type + dropping the 201px column widths lets three
     columns wrap legibly at 320px; the scroll wrapper stays as a fallback. */
  .article-table { width:100%; }
  .article-table th, .article-table td { font-size:14px; line-height:20px; padding:12px 0; }
  .article-table th:not(:last-child), .article-table td:not(:last-child) { width:auto; padding-right:12px; }
  /* carousel drops its side buttons on phones (per Figma mobile) */
  .article-carousel__btn { display:none; }
  .article-carousel__img, .article-media__img { height:220px; }
  .article-cta__img { height:220px; }
  .more { padding:100px 16px 0; }
  .more__title { font-size:28px; line-height:36px; }
  .about-faq { padding:108px 16px 24px; margin-top:100px; }
  .about-faq__title { font-size:24px; line-height:30px; }
  .about-faq__list .faq summary { font-size:16px; }
}