/* 
 * NewHayven Theme Styles
 * Component-specific CSS and theme overrides
 */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1A1A1A;
    line-height: 1.6;
    background-color: #FFFFFF;
}

a {
    color: #055E63;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

p {
    margin-bottom: 1rem;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Navigation */
nav ul {
    list-style: none;
}

nav a {
    color: #6B6B6B;
    transition: color 0.2s ease;
}

nav a:hover {
    color: #1A1A1A;
}

/* Buttons */
button, a[role="button"] {
    transition: all 0.2s ease;
    font-family: 'Jost', sans-serif;
    border-radius: 4px;
    cursor: pointer;
}

button:hover, a[role="button"]:hover {
    opacity: 0.9;
}

/* WordPress Specific */
.wp-block-image {
    margin: 1rem 0;
}

.wp-block-quote {
    border-left: 4px solid #055E63;
    padding-left: 1rem;
    margin: 1rem 0;
}

/* Utility Classes */
.container {
    max-width: 1423px;
    margin: 0 auto;
    padding: 0 120px;
}

/* Header Styles */
header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

header nav li {
    display: inline-block;
    margin: 0 20px;
}

/* Footer Styles */
footer {
    margin-top: 0;
}

footer a {
    color: rgba(255,255,255,0.6);
}

footer a:hover {
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 60px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 30px;
    }
    
    h1 {
        font-size: 48px !important;
    }
    
    h2 {
        font-size: 36px !important;
    }
}

/* ==========================================================================
   NewHayven — layout system & components (added)
   ========================================================================== */

/* Shared content width. Tweak --nh-maxw to widen/narrow every section at once. */
:root {
    --nh-maxw: 1200px;
}

.nh-container {
    max-width: var(--nh-maxw);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Hero — text aligns to the standard content width; image bleeds to the
   right edge of the viewport (flat right corner hugs the screen).
   -------------------------------------------------------------------------- */
.nh-hero {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 40px 40px 80px;
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

.nh-hero__text {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
    padding: 40px 48px 80px 32px;
}

.nh-hero__text-inner {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nh-hero__media {
    flex: 1 1 0;
    min-width: 0;
}

.nh-hero__media img {
    width: 100%;
    height: 871px;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
    box-shadow: 0px 4px 28px 16px rgba(0, 0, 0, 0.15);
    display: block;
}

@media (max-width: 980px) {
    .nh-hero {
        flex-direction: column;
        padding-left: 24px;
        padding-right: 24px;
    }
    .nh-hero__text {
        justify-content: flex-start;
        padding: 32px 0;
    }
    .nh-hero__text-inner {
        max-width: 100%;
    }
    .nh-hero__media {
        width: 100%;
    }
    .nh-hero__media img {
        height: auto;
        border-radius: 16px;
    }
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.nh-faq__item {
    border-bottom: 1px solid #E8E2D9;
}

.nh-faq__q {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    text-align: left;
}

.nh-faq__question {
    font-size: 20px;
    font-family: 'Playfair Display', serif;
    color: #1A1A1A;
}

.nh-faq__icon {
    flex-shrink: 0;
    color: #8B7355;
    font-size: 26px;
    line-height: 1;
    font-family: 'Jost', sans-serif;
    transition: transform 0.25s ease;
}

/* + rotates into an × when the item is open */
.nh-faq__item.is-open .nh-faq__icon {
    transform: rotate(45deg);
}

.nh-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nh-faq__a-inner {
    padding: 0 0 28px;
}

.nh-faq__a-inner p {
    font-size: 16px;
    line-height: 28px;
    color: #6B6B6B;
    margin-bottom: 16px;
}

.nh-faq__a-inner p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   CTA — keep heading/body legible over the image without re-tinting it
   -------------------------------------------------------------------------- */
.nh-cta {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #1A1A1A;
}

/* Tint over the footer image (images are saved without a baked-in tint) */
.nh-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    z-index: 0;
}

.nh-cta > * {
    position: relative;
    z-index: 1;
}

.nh-cta h2,
.nh-cta p {
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Responsive: stack the two-column sections on smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .nh-container[style*="display: flex"] {
        flex-direction: column;
    }
    .nh-container[style*="display: flex"] > div[style*="width: 398px"],
    .nh-container[style*="display: flex"] > div[style*="flex: 1 1 56%"],
    .nh-container[style*="display: flex"] > div[style*="flex: 1 1 44%"] {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* Our Story hero image is shorter than the homepage banner */
.nh-hero--story .nh-hero__media img {
    height: 620px;
}
@media (max-width: 980px) {
    .nh-hero--story .nh-hero__media img {
        height: auto;
    }
}

/* Services hero image is shorter than the homepage banner */
.nh-hero--services .nh-hero__media img {
    height: 440px;
}
@media (max-width: 980px) {
    .nh-hero--services .nh-hero__media img {
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Services — image card with overlaid number/title (tint applied in CSS so
   the source images don't need a baked-in tint)
   -------------------------------------------------------------------------- */
.nh-svc-card {
    position: relative;
    flex: 0 0 460px;
    max-width: 460px;
    min-height: 500px;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #04353A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.nh-svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
}

.nh-svc-card > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .nh-svc-card {
        flex: 1 1 100%;
        max-width: 100%;
        min-height: 380px;
    }
}

/* Services hero image */
.nh-hero--services .nh-hero__media img {
    height: 480px;
}
@media (max-width: 980px) {
    .nh-hero--services .nh-hero__media img {
        height: auto;
    }
}

/* Services: stack the image card above the body on small screens */
@media (max-width: 900px) {
    .nh-svc-card {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 360px !important;
    }
}

/* FAQ hero image (same crop as services) */
.nh-hero--faqs .nh-hero__media img {
    height: 480px;
}
@media (max-width: 980px) {
    .nh-hero--faqs .nh-hero__media img {
        height: auto;
    }
}

/* News: featured card stacks on small screens */
@media (max-width: 820px) {
    .nh-news-featured {
        flex-direction: column !important;
    }
    .nh-news-featured > * {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

/* Onboarding / Investors hero image */
.nh-hero--onboarding .nh-hero__media img,
.nh-hero--investors .nh-hero__media img {
    height: 480px;
}
@media (max-width: 980px) {
    .nh-hero--onboarding .nh-hero__media img,
    .nh-hero--investors .nh-hero__media img {
        height: auto;
    }
}

/* Stack two-column blocks (onboarding steps, investor profile, opportunity) */
@media (max-width: 860px) {
    .nh-2col {
        flex-direction: column !important;
    }
    .nh-2col > * {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

/* Consultation form */
.nh-label {
    display: block;
    color: #6B6B6B;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.68px;
    margin-bottom: 4px;
}
.nh-field {
    width: 100%;
    padding: 9px 16px;
    background: white;
    border: 1px solid #E8E2D9;
    border-radius: 0;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    color: #1A1A1A;
    box-sizing: border-box;
}
.nh-field:focus {
    outline: 2px solid #055E63;
    outline-offset: -1px;
}

/* News article body (single.php the_content output) */
.nh-article { color: #3A3A3A; font-size: 18px; line-height: 1.75; }
.nh-article p { margin: 0 0 24px; }
.nh-article h2 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 500; color: #1A1A1A; margin: 40px 0 16px; line-height: 1.2; }
.nh-article h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 500; color: #1A1A1A; margin: 32px 0 12px; line-height: 1.25; }
.nh-article ul, .nh-article ol { margin: 0 0 24px; padding-left: 24px; }
.nh-article li { margin-bottom: 8px; }
.nh-article a { color: #055E63; text-decoration: underline; }
.nh-article blockquote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 3px solid #DAAD28; color: #555; font-style: italic; }
.nh-article img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.nh-article figure { margin: 24px 0; }
.nh-article figcaption { font-size: 14px; color: #6B6B6B; font-style: italic; margin-top: 8px; }

/* Learn topic filter pills */
.nh-pill {
    padding: 8px 16px;
    border: 1px solid #C1C1C1;
    background: transparent;
    color: #242323;
    font-size: 16px;
    font-family: 'Jost', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
}
.nh-pill.is-active {
    background: #04353A;
    border-color: #04353A;
    color: #fff;
}
.nh-learn-card.is-hidden { display: none !important; }

/* Learn hero image */
.nh-hero--learn .nh-hero__media img { height: 480px; }
@media (max-width: 980px) {
    .nh-hero--learn .nh-hero__media img { height: auto; }
}

/* What We Do audience tabs */
.nh-hidden { display: none !important; }
.nh-wwd-tab {
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
    cursor: pointer;
}
.nh-wwd-tab.is-active {
    border-bottom-color: #802446;
    color: #802446;
}

/* What We Do: 3 columns x 2 rows (3 across, 2 down) */
.nh-wwd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
@media (max-width: 900px) {
    .nh-wwd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .nh-wwd-grid { grid-template-columns: 1fr; }
}

/* Services / Investors: stack the two-column row on tablet & smaller */
@media (max-width: 900px) {
    .nh-svc-row {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .nh-svc-row img {
        max-width: 100% !important;
    }
}

/* Investors: deployment 4-card grid + fit comparison stack on smaller screens */
@media (max-width: 1000px) {
    .nh-deploy-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .nh-fit-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
    .nh-deploy-grid { grid-template-columns: 1fr !important; }
}

/* Contact page hero — match other right-bound heroes but at a sensible height */
.nh-hero--contact .nh-hero__media img {
    height: 520px;
}

/* Consultation form: inputs sized to their container, with consistent padding */
.nh-consult-form input,
.nh-consult-form select,
.nh-consult-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* Contact section stacks on smaller screens */
@media (max-width: 900px) {
    .nh-contact-row {
        flex-direction: column !important;
    }
    .nh-contact-row > div {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Our Story hero: widen the text panel so the headline keeps to 2 lines and
   each stat sits on its own single line (number then short label). */
.nh-hero--story .nh-hero__text {
    flex: 1 1 60%;
}
.nh-hero--story .nh-hero__media {
    flex: 1 1 40%;
}
.nh-hero--story .nh-hero__text-inner {
    max-width: 780px;
}

/* ---------- Site header / navigation ---------- */
.nh-header {
    width: 100%;
    border-bottom: 1px solid #E8E2D9;
    background: white;
    position: relative;
}
.nh-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px 48px;
    max-width: 1440px;
    margin: 0 auto;
}
.nh-header__logo {
    display: inline-block;
    flex-shrink: 0;
}
.nh-header__logo img {
    height: 44px;
    width: auto;
    display: block;
}

/* Desktop nav links (centered between logo and CTAs) */
.nh-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.nh-nav a {
    color: #333333;
    font-size: 14px;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    letter-spacing: 0.14px;
    text-decoration: none;
    padding-bottom: 2px;
}
.nh-nav a.is-active {
    border-bottom: 2px solid #333333;
}

/* Desktop CTA cluster */
.nh-header__cta {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}
.nh-header__contact {
    padding: 14px 24px;
    color: #333333;
    font-size: 14px;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    letter-spacing: 0.38px;
    text-decoration: none;
}
.nh-header__convo {
    padding: 14px 22px;
    background: #1A1A1A;
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Hamburger button (hidden by default; visible below breakpoint) */
.nh-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.nh-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1A1A1A;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nh-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nh-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nh-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Slide-down mobile menu */
.nh-mobile-menu {
    border-top: 1px solid #E8E2D9;
    background: white;
    padding: 16px 24px 24px;
}
.nh-mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nh-mobile-menu nav a {
    padding: 14px 8px;
    color: #1A1A1A;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #F2EEE6;
}
.nh-mobile-menu__cta {
    margin-top: 12px;
    background: #1A1A1A;
    color: white !important;
    text-align: center;
    border-bottom: none !important;
    border-radius: 0;
}

/* Breakpoint: collapse nav into hamburger when there isn't room.
   The logo + 5 nav items + Contact + Start a Conversation button needs
   roughly 1100px to breathe; collapse below ~1100px. */
@media (max-width: 1100px) {
    .nh-nav,
    .nh-header__cta {
        display: none;
    }
    .nh-burger {
        display: flex;
        margin-left: auto; /* push hamburger to the right when nav is hidden */
    }
}

/* Tighter header padding on phones, but logo size stays the same */
@media (max-width: 560px) {
    .nh-header__inner {
        padding: 16px 20px;
    }
}

/* Phase step (Start a Conversation): when stacked on mobile, override the
   nh-2col 100% width (which was overflowing because the white card also has
   side margins) and remove the 48px row-gap that left a big empty band
   between the colored body text and the white "What to expect" card. */
@media (max-width: 860px) {
    .nh-step {
        gap: 0 !important;
    }
    .nh-step > div {
        width: auto !important;
    }
    .nh-step > div:first-child {
        padding: 32px !important;
    }
    .nh-step > div:last-child {
        margin: 0 24px 24px !important;
    }
}

/* ---------- Footer ---------- */
.nh-footer {
    background: #1A1A1A;
    color: white;
    padding: 80px 120px 40px;
}
.nh-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
}
.nh-footer__top {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 40px;
}
.nh-footer__brand {
    flex: 0 0 360px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nh-footer__brand img {
    height: 44px;
    width: auto;
    display: block;
    margin-bottom: 6px;
}
.nh-footer__brand p {
    color: rgba(255,255,255,0.65);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.nh-footer__cols {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.nh-footer__col h4 {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.12px;
    margin: 0 0 20px;
}
.nh-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nh-footer__col a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    text-decoration: none;
}
.nh-footer__col a:hover {
    color: white;
}
.nh-footer__bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.nh-footer__bottom p {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    margin: 0;
}
.nh-footer__badges {
    display: flex;
    gap: 24px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}

/* Footer responsive */
@media (max-width: 1024px) {
    .nh-footer {
        padding: 60px 40px 32px;
    }
    .nh-footer__top {
        flex-direction: column;
        gap: 48px;
    }
    .nh-footer__brand {
        flex: 0 0 auto;
        max-width: 100%;
    }
}
@media (max-width: 700px) {
    .nh-footer {
        padding: 48px 24px 24px;
    }
    .nh-footer__cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}
@media (max-width: 400px) {
    .nh-footer__cols {
        grid-template-columns: 1fr;
    }
}

/* ---------- Homepage split sections (We are not a commercial bank,
   The Right Fit / Not the Right Fit). On narrow screens, the two cards
   stack vertically. Because the parent wrapper holds border-radius +
   overflow:hidden, the rounded corners stay correct at top/bottom. */
@media (max-width: 860px) {
    .nh-split {
        flex-direction: column !important;
    }
    .nh-split > div {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Hero headings need to scale down on narrow screens — otherwise the big
   Playfair display (especially 98px on the homepage) overflows the viewport
   and the section's L/R padding appears to disappear. */
@media (max-width: 980px) {
    .nh-hero h1 {
        font-size: 56px !important;
        line-height: 1.1 !important;
    }
    .nh-hero__text p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}
@media (max-width: 560px) {
    .nh-hero h1 {
        font-size: 44px !important;
    }
}

/* Homepage hero specifically: stat row, button row, and the inner divider
   need to wrap and shrink on narrow viewports. */
@media (max-width: 720px) {
    .nh-hero__text-inner > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 24px !important;
    }
}

/* ---------- Our Story responsive ---------- */

/* "What drives everything we do" — image on top, mission/vision text below */
@media (max-width: 860px) {
    .nh-purpose-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
    }
    .nh-purpose-row > img {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-height: 240px !important;
        max-height: 360px !important;
    }
    .nh-purpose-row > div {
        flex: 0 0 auto !important;
    }
}

/* "The principles that guide us" — 5 wide → 2 → 1 */
@media (max-width: 980px) {
    .nh-values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 520px) {
    .nh-values-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Leadership cards — image on top, text below */
@media (max-width: 860px) {
    .nh-leader-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    .nh-leader-card > img {
        width: 100% !important;
        height: 480px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
        object-position: 50% 15% !important;
    }
    .nh-leader-card > div {
        padding: 32px !important;
    }
}

/* "Building momentum" — Financing card and Advisory card stack vertically */
@media (max-width: 860px) {
    .nh-momentum-grid {
        flex-direction: column !important;
    }
}

/* News hero: on mobile, tighten the section and rein in the "$40M+" stat
   block so the layout doesn't create the empty-looking band where a banner
   image would normally sit. Also kill the flex row-gap when stat wraps,
   and trim the next section's top padding so the hero meets the news list
   without a dead band. */
@media (max-width: 860px) {
    .nh-news-hero {
        padding: 32px 24px 24px !important;
    }
    .nh-news-hero > div {
        gap: 16px !important;
    }
    .nh-news-hero h1 {
        font-size: 44px !important;
    }
    .nh-news-stat {
        text-align: left !important;
        min-width: 0 !important;
        padding-top: 12px !important;
        border-top: 1px solid #E8E2D9;
        width: 100% !important;
    }
    .nh-news-list {
        padding-top: 24px !important;
    }
}

/* Sticky header — stays at the top while scrolling */
.nh-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Confidentiality + Right Fit: reduce the big vertical band between them */
@media (max-width: 860px) {
    .nh-confidentiality {
        padding: 24px 16px !important;
    }
    .nh-confidentiality > div > div {
        padding: 32px 24px !important;
        border-radius: 24px !important;
    }
}

/* Homepage hero stats: on mobile, give each fact its own full-width
   maroon-outlined box (matching the Capital Gap callout style), stacked
   one per row, with text left-aligned. */
@media (max-width: 860px) {
    .nh-hero-stats {
        flex-direction: column !important;
        gap: 12px !important;
        padding-top: 24px !important;
        border-top: 1px solid #E8E2D9 !important;
    }
    .nh-hero-stats > div {
        width: 100% !important;
        padding: 20px 20px !important;
        border: 2px solid #802446 !important;
        border-radius: 16px !important;
        background: white !important;
    }
}

/* Capital Gap callouts: stack on mobile, centered as a group */
@media (max-width: 860px) {
    .nh-capital-callouts {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}

/* Mobile heroes: image goes on TOP (above text) when stacked, and the image
   is shorter so 10% top + 10% bottom get cropped by object-fit:cover. */
@media (max-width: 980px) {
    .nh-hero {
        flex-direction: column-reverse;
    }
    .nh-hero__media img {
        height: 320px;
        object-fit: cover;
        object-position: center;
    }
}

/* Investor stat tiles: equal heights so they look like a real 2x2 grid */
.nh-invest-stat-grid > div {
    min-height: 160px;
}

/* News page: on mobile the section padding plus the floating stat block
   was creating a "banner-shaped empty band" look. Solution: hide the orphan
   stat block entirely on mobile, match the hero background to the list
   background so the two sections read as one continuous flow, and minimise
   the padding between heading and the first card. */
@media (max-width: 860px) {
    .nh-news-hero {
        background: #F5F0E8 !important;
        padding: 24px 24px 8px !important;
    }
    .nh-news-hero > div {
        gap: 0 !important;
    }
    .nh-news-hero h1 {
        font-size: 40px !important;
        margin-bottom: 12px !important;
    }
    .nh-news-hero p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    .nh-news-stat {
        display: none !important;
    }
    .nh-news-list {
        padding: 8px 24px 40px !important;
    }
}

/* ---------- News page (rebuilt mobile-first) ---------- */

/* News hero (white band with heading + $40M+ stat) */
.nh-news-hero {
    background: white;
    padding: 32px 24px 24px;
}
.nh-news-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.nh-news-hero__head h1 {
    margin: 0 0 12px;
    font-size: 40px;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    line-height: 1.1;
    color: #802446;
}
.nh-news-hero__head h1 .italic {
    color: #055E63;
    font-style: italic;
}
.nh-news-hero__head p {
    margin: 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
}
.nh-news-hero__stat {
    padding-top: 16px;
    border-top: 1px solid #E8E2D9;
}
.nh-news-hero__stat-num {
    color: #055E63;
    font-size: 40px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 4px;
}
.nh-news-hero__stat p {
    margin: 0;
    color: #333333;
    font-size: 14px;
}

/* News list (cream band with the featured article + grid) */
.nh-news {
    background: #F5F0E8;
    padding: 32px 24px 56px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Featured card — stacks vertically on mobile (image first), no min-height */
.nh-news__featured {
    background: white;
    border: 1px solid #E8E2D9;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.nh-news__featured-media {
    width: 100%;
}
.nh-news__featured-media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.nh-news__featured-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.nh-news__featured-body h2 {
    margin: 0;
    color: #1A1A1A;
    font-size: 24px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    line-height: 1.2;
}
.nh-news__featured-body p {
    margin: 0;
    color: #333333;
    font-size: 15px;
    line-height: 1.55;
}

/* "All coverage" divider */
.nh-news__divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #E8E2D9;
}
.nh-news__divider-label {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14px;
}
.nh-news__count {
    color: #333333;
    font-size: 12px;
    font-style: italic;
}

/* Article grid — single column on mobile */
.nh-news__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Standard article card */
.nh-news__card {
    background: white;
    border: 1px solid #E8E2D9;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.nh-news__card-media img,
.nh-news__media-empty {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.nh-news__media-empty {
    background: #E8E2D9;
}
.nh-news__card-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.nh-news__card-body h3 {
    margin: 0;
    color: #1A1A1A;
    font-size: 22px;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    line-height: 1.25;
}
.nh-news__card-body p {
    margin: 0;
    color: #333333;
    font-size: 15px;
    line-height: 1.55;
}

/* Card meta + badge */
.nh-news__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.nh-news__date {
    color: #C1B6A6;
    font-size: 13px;
}
.nh-news__badge {
    padding: 4px 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nh-news__badge--latest {
    background: #EFF1F0;
    color: #04353A;
}

/* Card footer (rule + CTA + optional source) */
.nh-news__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}
.nh-news__rule {
    height: 1px;
    background: #E8E2D9;
}
.nh-news__cta {
    color: #1B4D3E;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nh-news__source {
    color: #333333;
    font-size: 12px;
    font-style: italic;
}
.nh-news__empty {
    color: #333333;
    font-size: 16px;
}

/* Tablet (>= 600px): grid becomes 2 columns, hero pads up */
@media (min-width: 600px) {
    .nh-news-hero {
        padding: 40px 32px 32px;
    }
    .nh-news-hero__head h1 {
        font-size: 52px;
    }
    .nh-news-hero__head p {
        font-size: 16px;
    }
    .nh-news {
        padding: 40px 32px 64px;
    }
    .nh-news__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
}

/* Desktop (>= 900px): hero head + stat go side-by-side; featured card
   goes side-by-side; article grid is 3 columns. */
@media (min-width: 900px) {
    .nh-news-hero {
        padding: 48px 40px 40px;
    }
    .nh-news-hero__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }
    .nh-news-hero__head {
        flex: 1 1 auto;
    }
    .nh-news-hero__head h1 {
        font-size: 64px;
    }
    .nh-news-hero__stat {
        flex: 0 0 auto;
        padding-top: 0;
        border-top: none;
        text-align: right;
    }
    .nh-news {
        padding: 48px 40px 80px;
        gap: 40px;
    }
    .nh-news__featured {
        flex-direction: row;
    }
    .nh-news__featured-media {
        flex: 1 1 50%;
    }
    .nh-news__featured-media img {
        height: 100%;
        min-height: 360px;
    }
    .nh-news__featured-body {
        flex: 1 1 50%;
        padding: 40px;
        gap: 20px;
    }
    .nh-news__featured-body h2 {
        font-size: 28px;
    }
    .nh-news__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Wide-screen hero treatment is now baked into the base .nh-hero rule
   (max-width: 1720px + centered + symmetric padding) so the image always
   floats with space on both sides, at every desktop size. */