.page-section { display: none; }
.page-section.active { display: block; }





/* unknown banner: blog */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }

  p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-light); }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold); color: var(--white); }

  /* NAV */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  .nav-spacer { flex: 1; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: var(--gold); }

  /* BLOCK 1: HERO */
  #block-1-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px 16px 56px;
    width: 100%;
  }

  .hero-inner .eyebrow { color: var(--gold-light); }

  .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: POST GRID */
  #block-2-posts {
    padding: 72px 0 96px;
    border-bottom: 1px solid var(--gray-border);
  }

  .post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  /* Each card is a flex column so the link always sits at the bottom */
  .post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-border);
    background: var(--white);
    transition: border-color 0.15s;
    text-decoration: none;
    color: inherit;
  }

  .post-card:hover { border-color: var(--gold-light); }

  .post-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--gold-pale);
    overflow: hidden;
    flex-shrink: 0;
  }

  .post-card-image.no-image {
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gray-mid) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .post-card-image.no-image::after {
    content: 'HPI';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--gold-light);
    letter-spacing: 0.2em;
  }

  .post-card-body {
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
  }

  .post-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .post-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold-pale);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
  }

  .post-card-author {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--darker);
  }

  .post-card-sep { color: #ccc; font-size: 0.8rem; }

  .post-card-date {
    font-size: 0.82rem;
    color: #999;
  }

  .post-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.2em;
    transition: color 0.15s;
  }

  .post-card-title:hover { color: var(--gold); }

  .post-card-excerpt {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.7;
    font-weight: 300;
    /* uniform 3-line excerpt height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
  }

  .post-card-link {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    transition: color 0.15s;
    text-decoration: none;
  }

  .post-card:hover .post-card-link { color: var(--gold-light); }
  .post-card:hover .post-card-title { color: var(--gold); }

  /* PRE-FOOTER */
  #block-3-prefooter {
    background: var(--darker);
    padding: 72px 0;
  }

  .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #block-3-prefooter .eyebrow { color: var(--gold-light); }

  #block-3-prefooter h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #block-3-prefooter p { color: rgba(255,255,255,0.65); }

  .btn.light {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  .btn.light:hover { background: var(--white); color: var(--darker); border-color: var(--white); }

  /* FOOTER */
  #block-4-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  .footer-left { flex: 1; min-width: 0; }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }
  .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  .footer-tagline { color: #888; margin-top: 8px; line-height: 1.6; }

  .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul li a { color: #999; text-decoration: none; transition: color 0.15s; font-size: 0.95rem; }
  .footer-col ul li a:hover { color: var(--gold-light); }

  .footer-bottom p { font-size: 0.82rem; color: #555; }


/* unknown banner: faq */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }
  h3 { font-size: 1.1rem; font-weight: 600; }

  p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-light); }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold); color: var(--white); }

  /* NAV */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  .nav-spacer { flex: 1; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: var(--gold); }

  /* BLOCK 1: HERO */
  #block-1-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 16px 64px;
    width: 100%;
  }

  .hero-inner .eyebrow { color: var(--gold-light); }

  .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: FAQ */
  #block-2-faq {
    background: var(--white);
    padding: 80px 0 100px;
    border-bottom: 1px solid var(--gray-border);
  }

  .faq-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 72px;
    align-items: start;
  }

  /* Sidebar */
  .faq-sidebar {
    position: sticky;
    top: 88px;
  }

  .faq-sidebar-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #888;
    font-weight: 500;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-border);
  }

  .faq-sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .faq-sidebar-nav li a {
    display: block;
    padding: 9px 12px 9px 14px;
    font-size: 0.95rem;
    color: #666;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.4;
  }

  .faq-sidebar-nav li a:hover {
    color: var(--gold);
    border-left-color: var(--gold-pale);
    background: var(--gray-light);
  }

  .faq-sidebar-nav li a.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: var(--gray-light);
    font-weight: 500;
  }

  /* FAQ content */
  .faq-content { display: flex; flex-direction: column; gap: 56px; }

  .faq-group { display: flex; flex-direction: column; gap: 0; }

  .faq-group-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold);
    font-weight: 500;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gold-pale);
    margin-bottom: 0;
  }

  /* Accordion items */
  .faq-item {
    border-bottom: 1px solid var(--gray-border);
  }

  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .faq-question::-webkit-details-marker { display: none; }

  .faq-question-text {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--darker);
    line-height: 1.4;
    transition: color 0.15s;
  }

  .faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--gray-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
  }

  .faq-icon::before,
  .faq-icon::after {
    content: '';
    position: absolute;
    background: var(--gold);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .faq-icon::before { width: 8px; height: 1px; }
  .faq-icon::after  { width: 1px; height: 8px; }

  details[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
  details[open] .faq-icon { background: var(--gold-pale); border-color: var(--gold-pale); }
  details[open] .faq-question-text { color: var(--gold); }

  .faq-answer {
    padding: 0 0 24px;
  }

  .faq-answer p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    max-width: 720px;
  }

  .faq-answer p + p { margin-top: 12px; }

  .faq-answer a { color: var(--gold); }
  .faq-answer a:hover { color: var(--gold-light); }

  /* PRE-FOOTER */
  #block-3-prefooter {
    background: var(--darker);
    padding: 72px 0;
  }

  .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #block-3-prefooter .eyebrow { color: var(--gold-light); }

  #block-3-prefooter h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #block-3-prefooter p { color: rgba(255,255,255,0.65); }

  .btn.light {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  .btn.light:hover { background: var(--white); color: var(--darker); border-color: var(--white); }

  /* FOOTER */
  #block-4-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  .footer-left { flex: 1; min-width: 0; }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-col ul li a:hover { color: var(--gold-light); }

  .footer-bottom p { font-size: 0.82rem; color: #555; }


/* unknown banner: media-kit */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }
  h3 { font-size: 1.1rem; font-weight: 600; }

  p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-light); }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold); color: var(--white); }

  /* NAV */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  .nav-spacer { flex: 1; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: var(--gold); }

  /* BLOCK 1: HERO */
  #block-1-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 16px 64px;
    width: 100%;
  }

  .hero-inner .eyebrow { color: var(--gold-light); }

  .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: MAIN CONTENT */
  #block-2-main {
    padding: 88px 0 100px;
    border-bottom: 1px solid var(--gray-border);
  }

  .media-kit-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 96px;
    align-items: start;
  }

  /* Left: intro */
  .media-kit-intro { display: flex; flex-direction: column; gap: 28px; }

  .media-kit-intro h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 300;
    color: var(--darker);
    line-height: 1.2;
  }

  .media-kit-intro p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.85;
  }

  .intro-divider {
    width: 40px;
    height: 1px;
    background: var(--gold);
  }

  .coverage-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--gray-border);
  }

  .coverage-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-border);
    font-size: 1.05rem;
    color: #555;
    line-height: 1.5;
  }

  .coverage-list li::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: 8px;
  }

  .media-note {
    padding: 20px 24px;
    border-left: 2px solid var(--gold-pale);
    background: var(--gray-light);
  }

  .media-note p {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
  }

  .media-note a { color: var(--gold); }

  /* Right: index */
  .media-kit-index {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .index-heading {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #888;
    font-weight: 500;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gold-pale);
    margin-bottom: 0;
  }

  .index-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--gray-border);
    margin-bottom: 32px;
  }

  .index-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  .index-list li:last-child { border-bottom: none; }

  .index-item-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--darker);
    line-height: 1.3;
  }

  .index-item-desc {
    font-size: 0.88rem;
    color: #888;
    line-height: 1.5;
  }

  .download-cta {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .download-cta p {
    font-size: 0.88rem;
    color: #888;
    line-height: 1.6;
  }

  .btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
  }
  .btn-download:hover { background: var(--gold); color: var(--white); }

  .btn-download svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: stroke 0.2s;
  }
  .btn-download:hover svg { stroke: var(--white); }

  /* PRE-FOOTER */
  #block-3-prefooter {
    background: var(--darker);
    padding: 72px 0;
  }

  .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #block-3-prefooter .eyebrow { color: var(--gold-light); }

  #block-3-prefooter h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #block-3-prefooter p { color: rgba(255,255,255,0.65); }

  .btn.light {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  .btn.light:hover { background: var(--white); color: var(--darker); border-color: var(--white); }

  /* FOOTER */
  #block-4-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  .footer-left { flex: 1; min-width: 0; }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-col ul li a:hover { color: var(--gold-light); }

  .footer-bottom p { font-size: 0.82rem; color: #555; }


/* unknown banner: newsletter */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }
  h3 { font-size: 1.1rem; font-weight: 600; }

  p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-light); }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold); color: var(--white); }

  /* NAV */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  .nav-spacer { flex: 1; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: var(--gold); }

  /* BLOCK 1: HERO */
  #block-1-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 16px 64px;
    width: 100%;
  }

  .hero-inner .eyebrow { color: var(--gold-light); }

  .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: SIGNUP */
  #block-2-signup {
    padding: 88px 0 100px;
    border-bottom: 1px solid var(--gray-border);
  }

  .signup-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 96px;
    align-items: start;
  }

  .signup-intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .signup-intro h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 300;
    color: var(--darker);
    line-height: 1.25;
  }

  .signup-intro p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.85;
  }

  .signup-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px;
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
  }

  .form-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }

  .form-field input {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--darker);
    background: var(--white);
    border: 1px solid var(--gray-border);
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.15s;
  }

  .form-field input:focus { border-color: var(--gold); }

  .form-submit {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    margin-top: 4px;
  }
  .form-submit:hover { background: var(--gold); color: var(--white); }

  .form-privacy {
    font-size: 0.82rem;
    color: #aaa;
    line-height: 1.5;
    text-align: center;
    margin-top: 14px;
  }

  /* PRE-FOOTER */
  #block-4-prefooter {
    background: var(--darker);
    padding: 72px 0;
  }

  .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #block-4-prefooter .eyebrow { color: var(--gold-light); }

  #block-4-prefooter h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #block-4-prefooter p { color: rgba(255,255,255,0.65); }

  .btn.light {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  .btn.light:hover { background: var(--white); color: var(--darker); border-color: var(--white); }

  /* FOOTER */
  #block-5-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  .footer-left { flex: 1; min-width: 0; }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-col ul li a:hover { color: var(--gold-light); }

  .footer-bottom p { font-size: 0.82rem; color: #555; }


/* unknown banner: sitemap */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }
  h3 { font-size: 1.1rem; font-weight: 600; }

  p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-light); }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold); color: var(--white); }

  /* NAV */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  .nav-spacer { flex: 1; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: var(--gold); }

  /* BLOCK 1: HERO */
  #block-1-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px 16px 56px;
    width: 100%;
  }

  .hero-inner .eyebrow { color: var(--gold-light); }

  .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: NESTED LIST */
  #block-2-sitemap {
    padding: 80px 0 100px;
    border-bottom: 1px solid var(--gray-border);
  }

  .sitemap-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
  }

  .sitemap-section {
    padding: 36px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  .sitemap-section:first-child,
  .sitemap-section:nth-child(2) {
    padding-top: 0;
  }

  .sitemap-section-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
  }

  .sitemap-section-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--darker);
    text-decoration: none;
    transition: color 0.15s;
  }

  .sitemap-section-title:hover { color: var(--gold); }

  .sitemap-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
  }

  .sitemap-section-desc {
    font-size: 0.92rem;
    color: #888;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  /* Nested list */
  .sitemap-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--gold-pale);
    margin-left: 4px;
  }

  .sitemap-list li {
    padding: 7px 0 7px 20px;
    border-bottom: 1px solid var(--gray-border);
  }

  .sitemap-list li:last-child { border-bottom: none; }

  .sitemap-list li a {
    font-size: 0.95rem;
    color: var(--body-text);
    text-decoration: none;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sitemap-list li a:hover { color: var(--gold); }

  .sitemap-list li a::before {
    content: '';
    width: 10px;
    height: 1px;
    background: var(--gray-border);
    flex-shrink: 0;
    transition: background 0.15s, width 0.15s;
  }

  .sitemap-list li a:hover::before {
    background: var(--gold);
    width: 14px;
  }

  /* BLOCK 3: TOPICS */
  #block-3-topics {
    background: var(--gray-light);
    padding: 72px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  .topics-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 72px;
    align-items: center;
  }

  .topics-left h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 300;
    margin-bottom: 10px;
  }

  .topics-left p {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.7;
  }

  .topics-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topic-pill {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--gray-border);
    background: var(--white);
    font-size: 0.92rem;
    color: var(--body-text);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
    font-weight: 400;
  }

  .topic-pill:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  /* BLOCK 4: MLC ADVISORY */
  #block-4-mlc {
    padding: 72px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  .mlc-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
    align-items: center;
  }

  .mlc-inner .eyebrow { margin-bottom: 10px; }

  .mlc-inner h2 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 300;
    color: var(--darker);
    margin-bottom: 14px;
  }

  .mlc-inner p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
  }

  /* PRE-FOOTER */
  #block-5-prefooter {
    background: var(--darker);
    padding: 72px 0;
  }

  .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #block-5-prefooter .eyebrow { color: var(--gold-light); }

  #block-5-prefooter h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #block-5-prefooter p { color: rgba(255,255,255,0.65); }

  .btn.light {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  .btn.light:hover { background: var(--white); color: var(--darker); border-color: var(--white); }

  /* FOOTER */
  #block-6-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  .footer-left { flex: 1; min-width: 0; }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-col ul li a:hover { color: var(--gold-light); }

  .footer-bottom p { font-size: 0.82rem; color: #555; }


/* unknown banner: contact */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }
  h3 { font-size: 1.1rem; font-weight: 600; }

  p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  a { color: var(--gold); text-decoration: none; }
  a:hover { color: var(--gold-light); }

  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold); color: var(--white); }

  /* NAV */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  .nav-spacer { flex: 1; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: var(--gold); }

  /* BLOCK 1: HERO */
  #block-1-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 16px 64px;
    width: 100%;
  }

  .hero-inner .eyebrow { color: var(--gold-light); }

  .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: CONTACT */
  #block-2-contact {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .contact-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 12px;
    padding-top: 20px;
    border-top: 2px solid var(--gold-pale);
  }

  .contact-info h3:first-child { padding-top: 0; border-top: none; }

  .contact-info p { color: #666; margin-bottom: 24px; }

  .contact-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
  }

  .contact-detail-item {
    font-size: 1rem;
    color: #555;
  }

  .contact-detail-item span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888;
    font-weight: 500;
  }

  .form-field input,
  .form-field textarea {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--darker);
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.15s;
    resize: none;
  }

  .form-field input:focus,
  .form-field textarea:focus { border-color: var(--gold); }

  .form-field textarea { min-height: 140px; }

  .form-submit {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
  }
  .form-submit:hover { background: var(--gold); color: var(--white); }

  /* PRE-FOOTER */
  #block-3-prefooter {
    background: var(--darker);
    padding: 72px 0;
  }

  .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #block-3-prefooter .eyebrow { color: var(--gold-light); }

  #block-3-prefooter h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #block-3-prefooter p { color: rgba(255,255,255,0.65); }

  .btn.light {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  .btn.light:hover { background: var(--white); color: var(--darker); border-color: var(--white); }

  /* FOOTER */
  #block-4-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  .footer-left { flex: 1; min-width: 0; }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-col ul li a:hover { color: var(--gold-light); }

  .footer-bottom p { font-size: 0.82rem; color: #555; }



/* === scoped: home === */


:root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  #page-home * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  #page-home h1,
#page-home h2,
#page-home h3,
#page-home h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--darker);
  }

  #page-home h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
  #page-home h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 300; }
  #page-home h3 { font-size: 1.1rem; font-weight: 600; }

  #page-home p { color: var(--body-text); font-size: 1.15rem; line-height: 1.8; }

  #page-home .eyebrow {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
  }

  #page-home a { color: var(--gold); text-decoration: none; }
  #page-home a:hover { color: var(--gold-light); }

  #page-home .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  #page-home .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }

  #page-home .btn:hover { background: var(--gold); color: var(--white); }

  #page-home .btn.dark {
    border-color: var(--darker);
    color: var(--darker);
  }

  #page-home .btn.dark:hover {
    background: var(--darker);
    color: var(--white);
  }

  #page-home .gold-rule {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 24px;
  }

  #page-home .text-link {
    font-size: 0.88rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--gold-pale);
    padding-bottom: 2px;
  }

  /* ── NAV ── */
  #page-home nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  #page-home .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  #page-home .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }

  #page-home .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  #page-home .nav-spacer { flex: 1; }

  #page-home .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  #page-home .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }

  #page-home .nav-links a:hover { color: var(--gold); }

  /* ── BLOCK 1: HERO ── */
  #page-home #block-1-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-border);
    overflow: hidden;
  }

  #page-home .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  #page-home .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      radial-gradient(ellipse at 15% 60%, rgba(161,139,88,0.12) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 30%, rgba(161,139,88,0.07) 0%, transparent 45%);
    z-index: 1;
  }

  #page-home .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 16px 80px;
    width: 100%;
  }

  #page-home .hero-inner .eyebrow { color: var(--gold-light); }

  #page-home .hero-headline {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.1;
    width: 100%;
    margin-bottom: 28px;
    font-weight: 300;
    color: var(--white);
  }

  #page-home .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 640px;
  }

  /* ── BLOCK 2: PROBLEM ── */
  #page-home #block-2-problem {
    background: var(--gray-light);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
    text-align: center;
  }

  #page-home .problem-intro {
    width: 100%;
    margin-bottom: 48px;
  }

  #page-home .problem-intro h2 {
    margin-bottom: 20px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
  }

  #page-home .problem-intro p {
    max-width: 720px;
    margin: 0 auto;
    color: #666;
  }

  #page-home .problem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    text-align: left;
  }

  #page-home .problem-card {
    background: var(--white);
    padding: 36px 32px;
    border-radius: 4px;
    border: 1px solid var(--gray-border);
  }

  #page-home .problem-icon {
    width: 56px;
    height: 56px;
    background: var(--gray-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
  }

  #page-home .problem-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 12px;
    line-height: 1.4;
  }

  #page-home .problem-card p {
    color: #777;
    line-height: 1.7;
  }

  /* ── BLOCK 3: ARCHITECTURE ── */
  #page-home #block-3-architecture {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .arch-intro { margin-bottom: 48px; }
  #page-home .arch-intro h2 { margin-bottom: 16px; width: 100%; }
  #page-home .arch-intro p { color: #666; }

  #page-home .layer-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-border);
    border: 1px solid var(--gray-border);
    margin-bottom: 40px;
  }

  #page-home .layer-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    background: var(--white);
  }

  #page-home .layer-num {
    background: var(--gray-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    border-right: 1px solid var(--gray-border);
    text-align: center;
  }

  #page-home .layer-num span {
    font-size: 2.4rem;
    color: var(--gold);
    font-weight: 300;
    line-height: 1;
    display: block;
  }

  #page-home .layer-num small {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    margin-top: 6px;
    display: block;
  }

  #page-home .layer-content { padding: 28px 36px; }

  #page-home .layer-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 6px;
  }

  #page-home .layer-content p {
    color: #777;
    line-height: 1.7;
  }

  /* ── BLOCK 4: QUOTE + IMAGE ── */
  #page-home #block-4-quote-image {
    background: var(--gray-light);
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .quote-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
  }

  #page-home .quote-side {
    padding: 72px 64px 72px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--gray-border);
  }

  #page-home .quote-mark {
    font-size: 5rem;
    color: var(--gold-pale);
    line-height: 0.6;
    margin-bottom: 24px;
    display: block;
    font-weight: 300;
  }

  #page-home blockquote {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.7;
    color: var(--darker);
    margin-bottom: 28px;
  }

  #page-home .quote-attr {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-weight: 500;
  }

  #page-home .quote-attr span {
    display: block;
    color: #aaa;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
    font-size: 0.88rem;
  }

  #page-home .image-side {
    background: var(--gray-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    overflow: hidden;
  }

  #page-home .image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* ── BLOCK 5: CREDIBILITY ── */
  #page-home #block-5-credibility {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .cred-intro { margin-bottom: 48px; }
  #page-home .cred-intro h2 { margin-bottom: 16px; width: 100%; }
  #page-home .cred-intro p { color: #666; }

  #page-home .cred-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gray-border);
    border: 1px solid var(--gray-border);
  }

  #page-home .cred-item {
    background: var(--white);
    padding: 40px 36px;
    text-align: center;
  }

  #page-home .cred-stat {
    font-size: 2.8rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 12px;
    font-weight: 300;
  }

  #page-home .cred-label {
    font-size: 1rem;
    color: #777;
    line-height: 1.5;
  }

  /* ── BLOCK 6: FIVE PILLARS ── */
  #page-home #block-6-five-pillars {
    background: var(--gray-light);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .pillars-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-bottom: 48px;
    gap: 48px;
  }

  #page-home .pillars-header-left h2 { margin-bottom: 12px; width: 100%; }
  #page-home .pillars-header-left p { color: #666; }

  #page-home .pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--gray-border);
    border: 1px solid var(--gray-border);
  }

  #page-home .pillar-card {
    background: var(--white);
    padding: 32px 24px;
    transition: background 0.2s;
  }

  #page-home .pillar-card:hover { background: var(--gray-light); }

  #page-home .pillar-num {
    font-size: 1.6rem;
    color: var(--gold-pale);
    margin-bottom: 16px;
    display: block;
    font-weight: 300;
  }

  #page-home .pillar-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    line-height: 1.4;
    margin-bottom: 10px;
  }

  #page-home .pillar-card p {
    color: #888;
    line-height: 1.6;
  }

  /* ── BLOCK 7: RESEARCH ── */
  #page-home #block-7-research {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .research-intro { margin-bottom: 48px; }
  #page-home .research-intro h2 { margin-bottom: 16px; width: 100%; }
  #page-home .research-intro p { color: #666; }

  #page-home .research-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gray-border);
    border: 1px solid var(--gray-border);
    margin-bottom: 40px;
  }

  #page-home .research-card { background: var(--gray-light); padding: 36px 32px; }

  #page-home .research-card-tag {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 12px;
    display: block;
  }

  #page-home .research-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 10px;
    line-height: 1.4;
  }

  #page-home .research-card p {
    color: #777;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  /* ── BLOCK 8: FAQ ── */
  #page-home #block-8-faq {
    background: var(--gray-light);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .faq-header { margin-bottom: 40px; }
  #page-home .faq-header h2 { margin-bottom: 12px; width: 100%; }
  #page-home .faq-header p { color: #666; }

  #page-home .faq-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-border);
    border: 1px solid var(--gray-border);
    margin-bottom: 36px;
  }

  #page-home .faq-item {
    background: var(--white);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s;
  }

  #page-home .faq-item:hover { background: var(--gray-light); }
  #page-home .faq-item p { color: var(--darker); }

  #page-home .faq-icon {
    width: 20px;
    height: 20px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 24px;
    font-size: 1rem;
    color: var(--gold);
    line-height: 1;
  }

  /* ── BLOCK 9: FOUNDERS ── */
  #page-home #block-9-founders {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-home .founders-header { margin-bottom: 48px; }
  #page-home .founders-header h2 { margin-bottom: 12px; width: 100%; }
  #page-home .founders-header p { color: #666; }

  #page-home .founders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  #page-home .founder-card {
    border: 1px solid var(--gray-border);
    padding: 36px;
    display: flex;
    gap: 24px;
    background: var(--gray-light);
  }

  #page-home .founder-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--gray-border);
  }

  #page-home .founder-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gray-mid);
    border: 2px solid var(--gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #aaa;
  }

  #page-home .founder-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 4px;
  }

  #page-home .founder-title {
    font-size: 0.82rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    display: block;
  }

  #page-home .founder-info p {
    color: #777;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  /* ── BLOCK 10: FOOTER ── */

  #page-home #block-10-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-home .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-home .footer-left { flex: 1; min-width: 0; }

  #page-home .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  #page-home .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-home .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  #page-home .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-home .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-home .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #page-home .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }

  #page-home .footer-col ul li a:hover { color: var(--gold-light); }

  #page-home .footer-bottom p {
    font-size: 0.82rem;
    color: #555;
  }



/* === scoped: framework === */
/* BLOCK 1: HERO */
  #page-framework #block-1-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  #page-framework .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  #page-framework .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  #page-framework .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 16px 80px;
    width: 100%;
  }

  #page-framework .hero-inner .eyebrow { color: var(--gold-light); }

  #page-framework .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.1;
    width: 100%;
    margin-bottom: 24px;
    font-weight: 300;
    color: var(--white);
  }

  #page-framework .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
    width: 100%;
  }

  /* BLOCK 2: FOUR-LAYER DIAGRAM */
  #page-framework #block-2-architecture {
    background: var(--white);
    padding: 64px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-framework .arch-intro {
    margin-bottom: 64px;
  }

  #page-framework .arch-intro h2 {
    margin-bottom: 16px;
  }

  #page-framework .arch-intro p {
    width: 100%;
    color: #666;
  }

  #page-framework .diagram-layout {
    display: grid;
    grid-template-columns: 640px 1fr;
    gap: 72px;
    align-items: start;
  }

  #page-framework .diagram-svg-wrap {
    width: 640px;
    height: 640px;
    flex-shrink: 0;
  }

  #page-framework .legend {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #page-framework .legend-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-framework .legend-item:first-child { padding-top: 0; }
  #page-framework .legend-item:last-child { border-bottom: none; padding-bottom: 0; }

  #page-framework .legend-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
  }

  #page-framework .legend-marker.l1 { background: #3e3e3e; }
  #page-framework .legend-marker.l2 { background: #7e6937; }
  #page-framework .legend-marker.l3 { background: #c1ad80; }
  #page-framework .legend-marker.l4 { background: #ecddb9; border: 1px solid var(--gray-border); }

  #page-framework .legend-num {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
  }

  #page-framework .legend-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 6px;
    line-height: 1.3;
  }

  #page-framework .legend-desc {
    color: #777;
    line-height: 1.65;
  }

  #page-framework .legend-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }

  #page-framework .legend-bullets li {
    color: #777;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
  }

  #page-framework .legend-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background: var(--gold-light);
    border-radius: 50%;
  }

  /* BLOCK 3: SUSTAINABLE PERFORMANCE SYSTEM */
  #page-framework #block-3-sustainable {
    background: var(--gray-light);
    padding: 88px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-framework .sustainable-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  #page-framework .sustainable-left h2 {
    margin-bottom: 24px;
  }

  #page-framework .sustainable-left p {
    width: 100%;
    color: #666;
    margin-bottom: 16px;
  }

  #page-framework .sustainable-right {
    padding-top: 8px;
  }

  #page-framework .condition-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #page-framework .condition-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-framework .condition-item:first-child { border-top: 1px solid var(--gray-border); }

  #page-framework .condition-num {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-weight: 500;
    width: 24px;
    flex-shrink: 0;
    padding-top: 3px;
  }

  #page-framework .condition-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    margin-bottom: 3px;
  }

  #page-framework .condition-desc {
    color: #888;
    line-height: 1.6;
  }

  /* BLOCK 4: NAVIGATE THE FRAMEWORK */
  #page-framework #block-4-navigate {
    background: var(--white);
    padding: 88px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-framework .nav-intro {
    margin-bottom: 56px;
  }

  #page-framework .nav-intro h2 {
    margin-bottom: 16px;
  }

  #page-framework .nav-intro p {
    width: 100%;
    color: #666;
  }

  #page-framework .framework-list {
    list-style: none;
    display: flex;
    flex-direction: column;
  }

  #page-framework .framework-list-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--gray-border);
    text-decoration: none;
    transition: all 0.15s;
  }

  #page-framework .framework-list-item:first-child { border-top: 1px solid var(--gray-border); }
  #page-framework .framework-list-item:hover .item-title { color: var(--gold); }
  #page-framework .framework-list-item:hover .item-arrow { transform: translateX(4px); color: var(--gold); }

  #page-framework .item-num {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--gold-pale);
    line-height: 1;
  }

  #page-framework .item-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--darker);
    margin-bottom: 4px;
    transition: color 0.15s;
  }

  #page-framework .item-desc {
    color: #888;
    line-height: 1.6;
  }

  #page-framework .item-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--gold-light);
    transition: transform 0.2s ease, color 0.15s;
  }

  /* BLOCK 5: RESEARCH CALLOUT */
  #page-framework #block-5-research {
    background: var(--darker);
    padding: 72px 0;
    border-bottom: 1px solid #333;
  }

  #page-framework .research-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  #page-framework .research-callout-text .eyebrow { color: var(--gold-light); }

  #page-framework .research-callout-text h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #page-framework .research-callout-text p {
    color: rgba(255,255,255,0.60);
    width: 100%;
  }

  #page-framework .research-callout-cta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }

  /* FOOTER */
  #page-framework #block-6-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-framework .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-framework .footer-left { flex: 1; min-width: 0; }

  #page-framework .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  #page-framework .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-framework .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  #page-framework .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-framework .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-framework .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #page-framework .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }

  #page-framework .footer-col ul li a:hover { color: var(--gold-light); }

  #page-framework .footer-bottom p {
    font-size: 0.82rem;
    color: #555;
  }

/* === scoped: research === */
/* BLOCK 1: HERO */
  #page-research #block-1-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  #page-research .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  #page-research .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  #page-research .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 88px 16px 72px;
    width: 100%;
  }

  #page-research .hero-inner .eyebrow { color: var(--gold-light); }

  #page-research .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  #page-research .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: PUBLISHED AND PLANNED */
  #page-research #block-2-papers {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-research .papers-intro {
    margin-bottom: 48px;
  }

  #page-research .papers-intro h2 { margin-bottom: 16px; }
  #page-research .papers-intro p { color: #666; }

  #page-research .papers-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  #page-research .paper-card {
    background: var(--gray-light);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #page-research .paper-card-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
  }

  #page-research .paper-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--darker);
    line-height: 1.3;
  }

  #page-research .paper-card p {
    color: #666;
    flex: 1;
  }

  /* BLOCK 3: RESEARCH SEQUENCE */
  #page-research #block-3-sequence {
    background: var(--gray-light);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-research .sequence-intro {
    margin-bottom: 48px;
  }

  #page-research .sequence-intro h2 { margin-bottom: 16px; }
  #page-research .sequence-intro p { color: #666; }

  #page-research .papers-list {
    list-style: none;
    display: flex;
    flex-direction: column;
  }

  #page-research .paper-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-research .paper-row:first-child { border-top: 1px solid var(--gray-border); }

  #page-research .paper-num {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--gold);
    line-height: 1;
  }

  #page-research .paper-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    margin-bottom: 4px;
  }

  #page-research .paper-desc {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.5;
  }

  #page-research .paper-status {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  #page-research .paper-status.published {
    background: rgba(161,139,88,0.12);
    color: var(--gold);
    border: 1px solid var(--gold-pale);
  }

  #page-research .paper-status.planned {
    background: var(--gray-mid);
    color: #888;
    border: 1px solid var(--gray-border);
  }

  /* BLOCK 4: METHOD AND APPROACH */
  #page-research #block-4-method {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-research .method-intro {
    margin-bottom: 48px;
  }

  #page-research .method-intro h2 { margin-bottom: 16px; }
  #page-research .method-intro p { color: #666; }

  #page-research .method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }

  #page-research .method-card {
    background: var(--gray-light);
    padding: 36px 28px;
    border-top: 2px solid var(--gold-pale);
  }

  #page-research .method-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 12px;
  }

  #page-research .method-card p { color: #666; }

  /* BLOCK 5: INDEPENDENCE CALLOUT */
  #page-research #block-5-independence {
    background: var(--darker);
    padding: 72px 0;
  }

  #page-research .independence-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #page-research .independence-inner .eyebrow { color: var(--gold-light); }

  #page-research .independence-inner h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #page-research .independence-inner p {
    color: rgba(255,255,255,0.65);
  }

  /* FOOTER */
  #page-research #block-6-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-research .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-research .footer-left { flex: 1; min-width: 0; }

  #page-research .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  #page-research .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-research .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  #page-research .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-research .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-research .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #page-research .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }

  #page-research .footer-col ul li a:hover { color: var(--gold-light); }

  #page-research .footer-bottom p {
    font-size: 0.82rem;
    color: #555;
  }

/* === scoped: blog === */
/* BLOCK 1: HERO */
  #page-blog #block-1-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  #page-blog .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  #page-blog .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  #page-blog .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 16px 64px;
    width: 100%;
  }

  #page-blog .hero-inner .eyebrow { color: var(--gold-light); }

  #page-blog .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  #page-blog .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: ARTICLE GRID */
  #page-blog #block-2-articles {
    background: var(--gray-light);
    padding: 72px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-blog .articles-intro {
    margin-bottom: 48px;
  }

  #page-blog .articles-intro h2 { margin-bottom: 12px; }
  #page-blog .articles-intro p { color: #666; }

  #page-blog .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }

  #page-blog .article-card {
    background: var(--white);
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
  }
  #page-blog .article-card:hover { background: #fdfcfa; }

  #page-blog .article-img {
    width: 100%;
    height: 200px;
    background: var(--gray-mid);
    flex-shrink: 0;
  }

  #page-blog .article-body {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
  }

  #page-blog .article-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
  }

  #page-blog .article-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--darker);
    line-height: 1.35;
  }

  #page-blog .article-excerpt {
    font-size: 0.95rem;
    color: #777;
    line-height: 1.65;
    flex: 1;
  }

  #page-blog .article-link {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-pale);
    padding-bottom: 2px;
    align-self: flex-start;
    margin-top: 8px;
    transition: border-color 0.15s;
  }
  #page-blog .article-link:hover { border-color: var(--gold); }

  /* BLOCK 3: FOOTER */

  #page-blog #block-3-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-blog .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-blog .footer-left { flex: 1; min-width: 0; }

  #page-blog .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  #page-blog .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-blog .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  #page-blog .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-blog .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-blog .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #page-blog .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }

  #page-blog .footer-col ul li a:hover { color: var(--gold-light); }

  #page-blog .footer-bottom p {
    font-size: 0.82rem;
    color: #555;
  }

/* === scoped: about === */
/* BLOCK 1: HERO */
  #page-about #block-1-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #555;
  }

  #page-about .hero-bg {
    position: absolute;
    inset: 0;
    background: #3e3e3e;
    z-index: 0;
  }

  #page-about .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 10% 70%, rgba(161,139,88,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 20%, rgba(161,139,88,0.06) 0%, transparent 45%);
    z-index: 1;
  }

  #page-about .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 16px 64px;
    width: 100%;
  }

  #page-about .hero-inner .eyebrow { color: var(--gold-light); }

  #page-about .hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.1;
  }

  #page-about .hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
  }

  /* BLOCK 2: WHY HPI EXISTS */
  #page-about #block-2-why {
    background: var(--gray-light);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-about .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 40px;
  }

  #page-about .why-col h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 16px;
    padding-top: 20px;
    border-top: 2px solid var(--gold-pale);
  }

  #page-about .why-col p { margin-bottom: 16px; color: #555; }
  #page-about .why-col p:last-child { margin-bottom: 0; }

  /* BLOCK 3: INTELLECTUAL LINEAGE */
  #page-about #block-3-lineage {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-about .lineage-intro { margin-bottom: 48px; }
  #page-about .lineage-intro h2 { margin-bottom: 16px; }
  #page-about .lineage-intro p { color: #666; }

  #page-about .discipline-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
  }

  #page-about .discipline-card {
    background: var(--gray-light);
    padding: 32px 24px;
    border-top: 2px solid var(--gold-pale);
  }

  #page-about .discipline-num {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
  }

  #page-about .discipline-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 10px;
    line-height: 1.3;
  }

  #page-about .discipline-desc {
    font-size: 0.95rem;
    color: #777;
    line-height: 1.65;
  }

  /* BLOCKS 4 AND 5: BIO BLOCKS */
  #page-about .bio-section {
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-about .bio-section.gray { background: var(--gray-light); }
  #page-about .bio-section.white { background: var(--white); }

  #page-about .bio-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 40px;
  }

  #page-about .bio-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border: 1px solid var(--gray-border);
  }

  #page-about .bio-name {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 400;
    color: var(--darker);
    margin-bottom: 6px;
  }

  #page-about .bio-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 24px;
    display: block;
  }

  #page-about .bio-body p {
    color: #555;
    margin-bottom: 16px;
  }
  #page-about .bio-body p:last-of-type { margin-bottom: 24px; }

  #page-about .bio-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }

  /* BLOCK 6: MLC ADVISORY */
  #page-about #block-6-mlc {
    background: var(--gray-light);
    padding: 64px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-about .mlc-strip {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #page-about .mlc-text .eyebrow { margin-bottom: 12px; }
  #page-about .mlc-text h2 { margin-bottom: 16px; }
  #page-about .mlc-text p { color: #666; }

  /* BLOCK 7: CONTACT */
  #page-about #block-7-contact {
    background: var(--white);
    padding: 80px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-about .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 40px;
  }

  #page-about .contact-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--darker);
  }

  #page-about .contact-info p { color: #666; margin-bottom: 16px; }

  #page-about .contact-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
  }

  #page-about .contact-detail-item {
    font-size: 0.95rem;
    color: #555;
  }

  #page-about .contact-detail-item span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
  }

  #page-about .contact-form { display: flex; flex-direction: column; gap: 16px; }

  #page-about .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  #page-about .form-field { display: flex; flex-direction: column; gap: 6px; }

  #page-about .form-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888;
    font-weight: 500;
  }

  #page-about .form-field input,
#page-about .form-field textarea {
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    color: var(--darker);
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.15s;
    resize: none;
  }

  #page-about .form-field input:focus,
#page-about .form-field textarea:focus { border-color: var(--gold); }

  #page-about .form-field textarea { min-height: 120px; }

  #page-about .form-submit {
    font-family: "DM Sans", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
  }
  #page-about .form-submit:hover { background: var(--gold); color: var(--white); }

  /* FOOTER */
  #page-about #block-8-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-about .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-about .footer-left { flex: 1; min-width: 0; }

  #page-about .footer-logo { font-size: 1rem; color: var(--white); font-weight: 500; }
  #page-about .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-about .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  #page-about ..footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-about .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #888;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-about .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

  #page-about .footer-col ul a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.15s;
  }
  #page-about .footer-col ul a:hover { color: var(--gold-light); }

  #page-about .footer-bottom { display: flex; align-items: center; justify-content: space-between; }
  #page-about .footer-copy { font-size: 0.88rem; color: #666; }

  /* PRE-FOOTER CALLOUT */
  #page-about #block-pre-footer {
    background: var(--darker);
    padding: 72px 0;
  }

  #page-about .pre-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }

  #page-about #block-pre-footer .eyebrow { color: var(--gold-light); }

  #page-about #block-pre-footer h2 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }

  #page-about #block-pre-footer p { color: rgba(255,255,255,0.65); }

  #page-about #block-7-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-about .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-about .footer-left { flex: 1; min-width: 0; }

  #page-about .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }

  #page-about .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-about .footer-tagline {
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
  }

  #page-about .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-about .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-about .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #page-about .footer-col ul li a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
  }

  #page-about .footer-col ul li a:hover { color: var(--gold-light); }

  #page-about .footer-bottom p {
    font-size: 0.82rem;
    color: #555;
  }

/* ROUTER */
#page-about .page-section { display: none; }
#page-about .page-section.active { display: block; }
#page-about nav .nav-links a.active { color: var(--gold); }




/* === scoped: post === */

  :root {
    --gold:        #a18b58;
    --gold-light:  #c1ad80;
    --gold-pale:   #ecddb9;
    --dark:        #3e3e3e;
    --darker:      #2a2a2a;
    --white:       #ffffff;
    --gray-light:  #f5f4f1;
    --gray-mid:    #e8e6e1;
    --gray-border: #dddad4;
    --body-text:   #404041;
  }

  #page-post * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--body-text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.7;
  }

  #page-post h1,
#page-post h2,
#page-post h3,
#page-post h4 {
    font-family: 'DM Sans', sans-serif;
    line-height: 1.2;
    color: var(--darker);
  }

  #page-post p { color: var(--body-text); font-size: 1.1rem; line-height: 1.85; }

  #page-post a { color: var(--gold); text-decoration: none; }
  #page-post a:hover { color: var(--gold-light); }

  #page-post .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }

  /* NAV */
  #page-post nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    height: 64px;
    display: flex;
    align-items: center;
  }

  #page-post .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  #page-post .nav-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--darker);
    letter-spacing: 0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  #page-post .nav-logo sup { font-size: 0.5em; vertical-align: super; }
  #page-post .nav-spacer { flex: 1; }

  #page-post .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }

  #page-post .nav-links a {
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
  }
  #page-post .nav-links a:hover,
#page-post .nav-links a.active { color: var(--gold); }

  /* POST HEADER */
  #page-post #post-header {
    background: var(--gray-light);
    border-bottom: 1px solid var(--gray-border);
    padding: 48px 0 40px;
  }

  #page-post .post-meta-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  #page-post .back-link {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: color 0.15s;
    padding: 5px 12px;
    border: 1px solid var(--gold-pale);
    background: var(--white);
  }
  #page-post .back-link:hover { background: var(--gold-pale); color: var(--gold); }

  #page-post .post-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  #page-post .post-category {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    color: var(--gold);
    border: 1px solid var(--gold-pale);
    padding: 4px 10px;
    text-decoration: none;
    transition: background 0.15s;
  }
  #page-post .post-category:hover { background: var(--gold-pale); }

  #page-post .post-title {
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 600;
    color: var(--darker);
    line-height: 1.15;
    margin-bottom: 24px;
    max-width: 860px;
  }

  #page-post .post-byline {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #page-post .byline-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold-pale);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
  }

  #page-post .byline-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--darker);
  }

  #page-post .byline-sep {
    color: #ccc;
    margin: 0 4px;
  }

  #page-post .byline-date {
    font-size: 0.88rem;
    color: #999;
  }

  /* POST LAYOUT */
  #page-post #post-body {
    padding: 56px 0 80px;
  }

  #page-post .post-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 72px;
    align-items: start;
  }

  /* MAIN CONTENT */
  #page-post .post-main { display: flex; flex-direction: column; gap: 0; }

  #page-post .post-hero-image {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    margin-bottom: 40px;
    background: var(--gray-mid);
    display: block;
  }

  /* Summary block */
  #page-post .post-summary {
    background: var(--gray-light);
    border-left: 3px solid var(--gold);
    padding: 24px 28px;
    margin-bottom: 32px;
  }

  #page-post .post-summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
  }

  #page-post .post-summary p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    font-weight: 300;
  }

  /* In brief */
  #page-post .post-in-brief {
    border: 1px solid var(--gray-border);
    padding: 24px 28px;
    margin-bottom: 40px;
  }

  #page-post .post-in-brief-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 16px;
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gold-pale);
  }

  #page-post .post-in-brief ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #page-post .post-in-brief ul li {
    font-size: 1rem;
    color: #555;
    line-height: 1.65;
    padding-left: 18px;
    position: relative;
    font-weight: 300;
  }

  #page-post .post-in-brief ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-pale);
    border: 1px solid var(--gold-light);
  }

  #page-post .post-in-brief ul li strong {
    color: var(--darker);
    font-weight: 600;
  }

  /* Article note */
  #page-post .post-article-note {
    font-size: 0.95rem;
    color: #888;
    font-style: italic;
    margin-bottom: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--gray-border);
    line-height: 1.7;
  }

  #page-post .post-article-note a { color: var(--gold); font-style: normal; font-weight: 500; }

  /* Body content */
  #page-post .post-content { display: flex; flex-direction: column; gap: 0; }

  #page-post .post-content-section {
    padding: 28px 0;
    border-bottom: 1px solid var(--gray-border);
  }

  #page-post .post-content-section:last-child { border-bottom: none; }

  #page-post .post-content-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 16px;
    line-height: 1.3;
  }

  #page-post .post-content-section h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 600;
    color: var(--darker);
    margin-bottom: 16px;
    line-height: 1.3;
  }

  #page-post .post-content-section p {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.85;
    margin-bottom: 16px;
    font-weight: 300;
  }

  #page-post .post-content-section p:last-child { margin-bottom: 0; }

  #page-post .post-content-section a { color: var(--gold); font-weight: 500; }
  #page-post .post-content-section a:hover { color: var(--gold-light); }

  #page-post .post-content-section em { font-style: italic; }
  #page-post .post-content-section strong { font-weight: 600; color: var(--darker); }

  /* Post end actions */
  #page-post .post-end-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--gray-border);
    margin-top: 48px;
  }

  #page-post .post-end-link {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--gold-pale);
    background: var(--white);
    transition: background 0.15s;
  }
  #page-post .post-end-link:hover { background: var(--gold-pale); color: var(--gold); }

  /* Author card */
  #page-post .post-author-card {
    margin-top: 40px;
    padding: 32px;
    background: var(--gray-light);
    border-top: 2px solid var(--gold-pale);
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  #page-post .author-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold-pale);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
  }

  #page-post .author-card-body { flex: 1; }

  #page-post .author-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--darker);
    display: block;
    margin-bottom: 4px;
  }

  #page-post .author-card-role {
    font-size: 0.75rem;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }

  #page-post .author-card-bio {
    font-size: 0.98rem;
    color: #666;
    line-height: 1.75;
    margin-bottom: 14px;
  }

  #page-post .author-card-link {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
  }
  #page-post .author-card-link:hover { color: var(--gold-light); }

  /* Post navigation */
  #page-post .post-nav {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--gray-border);
    overflow: hidden;
  }

  #page-post .post-nav-item {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    background: var(--white);
    transition: background 0.15s;
  }

  #page-post .post-nav-item.prev { border-right: 1px solid var(--gray-border); }
  #page-post .post-nav-item.next { align-items: flex-end; text-align: right; }
  #page-post .post-nav-item:hover { background: var(--gray-light); }

  #page-post .post-nav-item,
#page-post .post-nav-item:hover { color: inherit; text-decoration: none; }

  #page-post .post-nav-item .post-nav-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #bbb;
    font-weight: 500;
    display: block;
  }

  #page-post .post-nav-item .post-nav-title {
    font-size: 1rem;
    color: var(--darker);
    line-height: 1.5;
    font-weight: 400;
    display: block;
  }

  #page-post .post-nav-item:hover .post-nav-title { color: var(--gold); }

  /* SIDEBAR */
  #page-post .post-sidebar {
    position: sticky;
    top: 88px;
  }

  #page-post .sidebar-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #888;
    font-weight: 500;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold-pale);
    margin-bottom: 0;
    display: block;
  }

  #page-post .sidebar-latest {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
  }

  #page-post .sidebar-post-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-border);
    text-decoration: none;
  }

  #page-post .sidebar-post-item:last-child { border-bottom: none; }

  #page-post .sidebar-post-date {
    font-size: 0.72rem;
    color: var(--gold);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  #page-post .sidebar-post-title {
    font-size: 0.92rem;
    color: var(--darker);
    line-height: 1.45;
    font-weight: 400;
    transition: color 0.15s;
  }

  #page-post .sidebar-post-item:hover .sidebar-post-title { color: var(--gold); }

  /* FOOTER */
  #page-post #post-footer {
    background: var(--darker);
    padding: 48px 0 32px;
    border-top: 1px solid #333;
  }

  #page-post .footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid #444;
    margin-bottom: 32px;
  }

  #page-post .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 12px;
  }
  #page-post .footer-logo sup { font-size: 0.5em; vertical-align: super; }

  #page-post .footer-tagline { color: #888; margin-top: 8px; line-height: 1.6; }

  #page-post .footer-links { display: flex; gap: 48px; flex-shrink: 0; }

  #page-post .footer-col h4 {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #666;
    font-weight: 500;
    margin-bottom: 16px;
  }

  #page-post .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #page-post .footer-col ul li a { color: #999; text-decoration: none; transition: color 0.15s; font-size: 0.95rem; }
  #page-post .footer-col ul li a:hover { color: var(--gold-light); }

  #page-post .footer-bottom p { font-size: 0.82rem; color: #555; }




/* =================================================================
   v2 — responsive overrides + min-width fixes
   Appended after extraction; do not relocate above the scoped blocks.
   ================================================================= */

/* Allow grid + flex children to shrink below their intrinsic content.
   Without this, long titles or unbreakable strings expand columns and
   blow out the container. */
.post-grid > *,
.post-card,
.post-card-body,
.post-card-title,
.post-card-excerpt,
.problem-grid > *,
.pillars-grid > *,
.research-grid > *,
.founders-grid > *,
.method-grid > *,
.papers-split > *,
.cred-strip > *,
.layer-row,
.layer-content,
.framework-list-item,
.post-layout > *,
.post-main,
.post-sidebar,
.footer-top > *,
.footer-left,
.footer-links {
	min-width: 0;
}
.post-card-title,
.post-card-excerpt,
.article-title,
.post-title,
.hero-headline,
.hero-sub,
h1, h2, h3, h4, p {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Prevent any rogue absolute / inline element from forcing horizontal scroll */
html, body { overflow-x: hidden; }
.container { width: 100%; }

/* Tablet: drop multi-column grids to 2 cols */
@media (max-width: 1024px) {
	.post-grid,
	.problem-grid,
	.research-grid,
	.papers-split,
	.method-grid,
	.founders-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.pillars-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.cred-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.quote-image-grid,
	.sustainable-grid,
	.diagram-layout {
		grid-template-columns: 1fr !important;
	}
	.diagram-svg-wrap { width: 100% !important; height: auto !important; }
	.post-layout {
		grid-template-columns: 1fr !important;
	}
	.pillars-header,
	.research-callout,
	.independence-inner,
	.pre-footer-inner {
		grid-template-columns: 1fr !important;
		display: grid !important;
		gap: 24px !important;
	}
}

/* Phone: single column everywhere */
@media (max-width: 640px) {
	.post-grid,
	.problem-grid,
	.research-grid,
	.papers-split,
	.method-grid,
	.founders-grid,
	.pillars-grid,
	.cred-strip {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.footer-top {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.footer-links {
		flex-wrap: wrap;
		gap: 32px !important;
	}
	.nav-inner { padding: 0 16px; }
	.nav-links { gap: 16px !important; }
	.nav-links a { font-size: 0.88rem !important; }
	.hero-inner { padding: 64px 16px 48px !important; }
	.post-meta-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.post-categories { flex-wrap: wrap; gap: 6px; }
	.layer-row { grid-template-columns: 1fr !important; }
	.layer-num {
		flex-direction: row !important;
		justify-content: flex-start !important;
		gap: 12px;
		padding: 16px !important;
		border-right: none !important;
		border-bottom: 1px solid var(--gray-border);
	}
	.framework-list-item { grid-template-columns: 32px 1fr auto !important; gap: 16px !important; }
}


/* =================================================================
   v2 — alias #hpi-footer to source's #block-N-footer styling.
   Custom ID means the source's #block-N-footer rule wouldn't match
   our footer; this one-liner gives it the same dark background +
   padding + border treatment the source intends.
   ================================================================= */
#hpi-footer.hpi-v2-footer {
	background: var(--darker);
	padding: 48px 0 32px;
	border-top: 1px solid #333;
}

/* =================================================================
   v2 — defensive dark-bg lock. Source design intent is dark for
   every footer/prefooter/research/independence callout. Using
   !important + attribute selectors so any stale white-override
   from earlier theme versions is overridden in the cascade.
   ================================================================= */
[id^="block-"][id$="-research"],
[id^="block-"][id$="-prefooter"],
[id^="block-"][id$="-independence"],
[id^="block-"][id$="-footer"],
#block-pre-footer,
#hpi-footer.hpi-v2-footer {
	background: var(--darker) !important;
}