/* ════════════════════════════════════════════
   Nationwide Caravan Buyer – Theme Styles
   Matching Figma Design
   ════════════════════════════════════════════ */

/* ──────────── 1. Custom Properties ──────────── */
:root {
    --ncb-primary: #4A6741;
    --ncb-primary-dark: #3B5535;
    --ncb-primary-light: #5B7E51;
    --ncb-white: #ffffff;
    --ncb-off-white: #f8f9fa;
    --ncb-gray-100: #f1f3f5;
    --ncb-gray-200: #e9ecef;
    --ncb-gray-300: #dee2e6;
    --ncb-gray-500: #adb5bd;
    --ncb-gray-700: #495057;
    --ncb-gray-900: #212529;
    --ncb-text: #333333;
    --ncb-text-light: #6c757d;
    --ncb-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --ncb-radius: 6px;
    --ncb-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    --ncb-transition: 0.3s ease;
}

/* ──────────── 2. Reset & Base ──────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    margin: 0 !important;
    padding: 0;
}

body {
    font-family: var(--ncb-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ncb-text);
    background: var(--ncb-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative; /* Ensure absolute header respects admin bar offsets if any */
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

body.admin-bar {
    padding-top: 0 !important;
}

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

a {
    color: var(--ncb-primary);
    text-decoration: none;
    transition: color var(--ncb-transition);
}

a:hover {
    color: var(--ncb-primary-dark);
}

h1, h2, h3, h4 {
    line-height: 1.3;
    color: var(--ncb-gray-900);
}

/* ──────────── 3. Layout ──────────── */
.ncb-container {
    max-width: 1230px; /* Expanded to match Figma content widths */
    margin: 0 auto;
    padding: 0 24px;
}

/* ──────────── 4. Header (Transparent Overlay) ──────────── */
.ncb-header {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* Consistent height and alignment across all pages */
    height: 100px; 
    padding-top: 0; 
}

/* Specific Header styles for new pages to match Figma */
.page-template-template-contact .ncb-header,
.page-template-template-about .ncb-header,
.page-template-template-privacy .ncb-header,
.page-template-template-terms .ncb-header {
    /* Ensure header sits on top of hero image correctly */
    background: transparent;
}

body.admin-bar .ncb-header {
    top: 0;
}

.ncb-header-inner {
    display: flex;
    align-items: center; /* Center vertically to match internal pages */
    justify-content: space-between;
    height: 100%; /* Fill the header height */
    /* Ensure the container lines up with the Grid */
    max-width: 1440px; /* Full layout width to allow spacing */
    margin: 0 auto;
    padding: 0 105px; /* Global Left Padding matches Figma '105px' */
}

/* Reset logo padding/margin */
.ncb-logo {
    margin-right: auto;
    /* Height 25px, Width 61px logic handled by text */
}

/* Limit desktop logo size */
.ncb-logo img, 
.ncb-logo .custom-logo {
    max-height: 80px;
    width: auto;
}

.ncb-logo-text {
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    font-weight: 500; /* Medium */
    color: var(--ncb-white) !important;
    text-transform: uppercase; /* Assuming LOGO is typed uppercase or transformed */
    text-decoration: none;
    letter-spacing: 0;
    line-height: 1; /* 100% */
    text-align: center;
    display: inline-block;
    /* Ensure dimensions if needed, though usually text flows */
    /* width: 61px; height: 25px; */
}

/* Nav */
.ncb-nav-list {
    list-style: none inside; /* Ensure bullets are inside if any */
    display: flex;
    /* Figma: Gap 40px */
    gap: 40px; 
    margin: 0;
    padding: 0;
    /* Exact sizing/position logic for right side */
    /* Button Top 38px vs Logo Top 33px = 5px offset */
    margin-top: 5px; 
}

.ncb-nav-list li {
    list-style: none !important; /* Force no bullets */
    margin: 0;
    padding: 0;
    display: block;
}

.ncb-nav-list li::before,
.ncb-nav-list li::after {
    content: none !important; /* Remove any pseudo-elements that might look like dots */
    display: none;
}

.ncb-nav-list li a {
    font-family: 'Hind Siliguri', sans-serif;
    color: var(--ncb-white);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    transition: opacity var(--ncb-transition);
    white-space: nowrap;
}

.ncb-nav-list li a:hover {
    color: var(--ncb-white);
    opacity: 0.8;
}

/* ──────────── 5. Hero Section (Homepage Only) ──────────── */
.home .ncb-hero {
    position: relative;
    min-height: 755px; 
    height: 755px;
    display: block;
    text-align: left; 
    color: var(--ncb-white);
    background: var(--ncb-primary);
    overflow: hidden;
}

.ncb-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ncb-hero-bg img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: left bottom;
}

/* Adjust header for internal pages (Get a Valuation etc.) */
body:not(.home) .ncb-header {
    position: relative; /* Stop floating on internal pages */
    background: #4D7A4D; /* Solid Color per request */
    padding-top: 0;
    width: 100%;
    height: 100px; /* Exact Height */
}

body:not(.home) .ncb-header-inner {
    height: 100%; /* Fill the 100px container */
    max-width: 1440px; /* Max width */
    margin: 0 auto;
    padding: 0 105px; /* Match global padding */
    /* Center vertically for internal pages */
    align-items: center; 
}

/* Ensure Nav buttons align vertically in the 100px header */
body:not(.home) .ncb-nav-list {
    align-items: center;
    height: auto; /* Allow natural height centered by parent */
    margin-top: 0; /* Remove homepage offset */
}

/* Overlay */
.ncb-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #212121;
    opacity: 0.1;
    z-index: 1;
}

.ncb-hero-content {
    /* Exact Positioning from Figma, adjusted to align with Logo Container */
    position: absolute;
    z-index: 2;
    top: 267px;
    
    /* Center container to match Header layout */
    left: 0; 
    right: 0;
    margin: 0 auto;
    max-width: 1440px; /* Matches .ncb-header-inner */
    padding-left: 105px; /* Matches .ncb-header-inner padding */
    pointer-events: none; /* Let clicks pass through container area if needed, but not on children */
    
    /* Height/Width */
    width: 100%;
    height: auto;
    
    /* Content Layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px; 
}

/* Ensure content is clickable */
.ncb-hero-content > * {
    pointer-events: auto;
    max-width: 696px; /* Restrict text width as per original design */
}

.ncb-hero h1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 58px;
    font-weight: 500;
    color: var(--ncb-white);
    margin: 0;
    letter-spacing: 0;
    line-height: 100%;
    /* Text Shadow to ensure readability on low opacity overlay */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    max-width: 100%; /* Ensure it can fit on one line */
}

.ncb-hero p {
    font-size: 20px;
    opacity: 1;
    margin-top: -40px;
    font-weight: 400;
    max-width: 100%;
}

/* Button overrides for Hero specifically */
.ncb-hero .ncb-btn {
    margin-top: 10px; /* Push button down slightly */
}

/* Mountains in CTA Section now */
.ncb-cta-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
    overflow: hidden;
}

.ncb-cta-mountains img {
    width: 100%;
    height: auto;
    opacity: 0.35; /* Adjust as needed for the mountain visibility on green */
    display: block;
    min-width: 1000px;
}

/* ──────────── 6. Buttons ──────────── */
.ncb-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: var(--ncb-radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--ncb-transition);
    cursor: pointer;
    border: 2px solid transparent;
}

.ncb-btn-white {
    background: var(--ncb-white);
    color: var(--ncb-primary);
    border-color: var(--ncb-white);
}

.ncb-btn-white:hover {
    background: transparent;
    color: var(--ncb-white);
    border-color: var(--ncb-white);
}

.ncb-btn-primary {
    background: var(--ncb-primary);
    color: var(--ncb-white);
    border-color: var(--ncb-primary);
}

.ncb-btn-primary:hover {
    background: var(--ncb-primary-dark);
    border-color: var(--ncb-primary-dark);
}

/* ──────────── 7. How It Works ──────────── */
.ncb-how-it-works {
    padding: 80px 0;
    background: var(--ncb-white);
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 25px;
    color: #212121;
}

.ncb-section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

.ncb-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    max-width: 100%; /* Fill container width */
    margin: 0 auto;
}

.ncb-step-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    gap: 32px; /* Figma gap between icon and text */
}

.ncb-step-card:first-child {
    align-items: center;
    text-align: center;
    padding-left: 0;
}

.ncb-step-card:last-child {
    align-items: center;
    text-align: center;
    padding-right: 0;
}

.ncb-step-card p {
    max-width: 280px;
    margin: 0 auto;
}

.ncb-step-icon {
    width: 105px;
    height: 105px;
    background: #4D7A4D;
    border-radius: 5px; /* Square with slight rounding per Figma */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.ncb-step-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    /* Force white icons on green background */
    filter: brightness(0) invert(1);
}

/* Dashed arrow between steps */
.ncb-step-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 147px;
    padding-top: 30px; /* Center arrow with the larger icon */
}

.ncb-step-divider svg {
    width: 147px;
    height: 40px;
}

/* Header */
.ncb-menu-toggle {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
}

.ncb-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--ncb-white);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* ──────────── 8. Why Sell ──────────── */
.ncb-why-sell {
    padding: 100px 0 220px; /* Increased bottom padding to separate gallery from floating CTA */
    background: var(--ncb-off-white);
}

.ncb-why-sell-grid {
    display: flex; /* Changed to flex to respect fixed width gallery */
    align-items: center; /* Vertically center content */
    justify-content: flex-end; /* Push everything to the right if possible, or space-between with large gap */
    gap: 150px; /* Increased Gap significantly */
}

/* Gallery */
.ncb-gallery {
    /* Exact Width from Figma (600px top image width) */
    width: 600px;
    flex-shrink: 0;
    
    display: grid;
    /* Two columns for bottom images (285px each + 30px gap = 600px) */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px; /* Gap between rows and columns */
}

.ncb-gallery-item {
    border-radius: 5px; /* Updated Radius */
    overflow: hidden;
    position: relative;
    background: var(--ncb-gray-200);
}

.ncb-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top Image: Span 2 columns, Height 232px */
.ncb-gallery-item.ncb-gallery-lg {
    grid-column: 1 / -1;
    height: 232px;
}

/* Bottom Images: Height 171px */
.ncb-gallery-item:not(.ncb-gallery-lg) {
    height: 171px;
}

/* Content */
.ncb-why-content {
    padding-top: 0; /* Remove top padding to rely on flex centering */
    margin-left: auto; /* Push to the right */
    max-width: 450px; /* Limit width if needed, or remove for full remaining width */
}


/* Content */
.ncb-why-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
}

.ncb-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ncb-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--ncb-gray-700);
    padding: 10px 0;
}

.ncb-check-icon {
    color: var(--ncb-primary);
    flex-shrink: 0;
}

/* ──────────── 8b. How it Works Page ──────────── */

/* Hero Banner */
.ncb-hiw-hero {
    position: relative;
    width: 100%;
    height: 341px;
    overflow: hidden;
    background: #212121; /* Dark background shows through transparent image */
}

.ncb-hiw-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ncb-hiw-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%; /* Show the van area in the middle-bottom */
}

.ncb-hiw-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 60% dark overlay = image visible at ~40% */
    z-index: 1;
}

.ncb-hiw-hero-content {
    position: absolute;
    z-index: 2;
    width: auto;
    height: 67px;
    left: max(24px, calc((100vw - 1440px) / 2 + 105px));
    top: 137px; /* 237px from top of page minus 100px header */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.ncb-hiw-hero-content h1 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 58px;
    line-height: 67px;
    color: #FFFFFF;
    margin: 0;
}

/* Steps Section */
.ncb-hiw-steps {
    background: #FFFFFF;
    padding: 100px 0 120px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.ncb-hiw-steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    max-width: 1230px;
    margin: 0 auto;
}

.ncb-hiw-step-card:first-child {
    align-items: center;
    text-align: center;
}

.ncb-hiw-step-card:last-child {
    align-items: center;
    text-align: center;
}

.ncb-hiw-step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    width: 280px;
    flex-shrink: 0;
}

.ncb-hiw-step-icon {
    width: 105px;
    height: 105px;
    background: #4D7A4D;
    border-radius: 5px; /* Square with slight rounding per Figma */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ncb-hiw-step-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* White icons */
}

.ncb-hiw-step-card p {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 25px;
    color: #212121;
    margin: 0;
}

/* Arrows between steps */
.ncb-hiw-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 147px;
    padding-top: 45px; /* Center arrow with icon vertically */
}

.ncb-hiw-arrow svg {
    width: 147px;
    height: 40px;
}

/* ──────────── 8c. FAQ Page ──────────── */

/* FAQ Hero */
.ncb-faq-hero {
    position: relative;
    width: 100%;
    height: 341px;
    overflow: hidden;
    background: #212121;
}
.ncb-faq-hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 176%;
    z-index: 0;
}
.ncb-faq-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
}
.ncb-faq-hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.ncb-faq-hero-content {
    position: absolute;
    z-index: 2;
    width: auto;
    height: 67px;
    left: max(24px, calc((100vw - 1440px) / 2 + 105px));
    top: 137px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ncb-faq-hero-content h1 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 58px;
    line-height: 67px;
    color: #FFFFFF;
    margin: 0;
}

/* FAQ Accordion Section */
.ncb-faq-section {
    background: #FFFFFF;
    padding: 94px 0 80px;
}
.ncb-faq-grid {
    display: flex;
    gap: 30px;
    max-width: 1230px;
    margin: 0 auto;
}
.ncb-faq-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.ncb-faq-item {
    background: #F9F9F7;
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.3s ease;
}
.ncb-faq-item.active {
    background: #4D7A4D;
}
.ncb-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 25px;
    color: #212121;
    text-align: left;
    gap: 10px;
}
.ncb-faq-item.active .ncb-faq-question {
    color: #FFFFFF;
}
.ncb-faq-chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.ncb-faq-item.active .ncb-faq-chevron {
    transform: rotate(180deg);
}
.ncb-faq-item.active .ncb-faq-chevron path {
    stroke: #FFFFFF;
}
.ncb-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.ncb-faq-item.active .ncb-faq-answer {
    max-height: 300px;
}
.ncb-faq-answer p {
    padding: 0 30px 30px;
    margin: 0;
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #7A7A7A;
}
.ncb-faq-item.active .ncb-faq-answer p {
    color: rgba(255,255,255,0.8);
}

/* FAQ Reviews Section */
.ncb-faq-reviews {
    position: relative;
    width: 100%;
    height: 601px;
    overflow: visible; /* Allow card to extend below */
    background: #212121;
    margin-bottom: 230px; /* Space before CTA so card doesn't overlap */
}
.ncb-faq-reviews-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
}
.ncb-faq-reviews-bg img {
    width: 100%;
    height: 160%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 1;
}
.ncb-faq-reviews-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #212121;
    opacity: 0.1;
    z-index: 1;
}
.ncb-faq-reviews-content {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    padding: 0 105px;
}
.ncb-faq-reviews-content h2 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 100%;
    color: #FFFFFF;
    margin: 0;
    position: absolute;
    left: 784px; /* Aligned with card (740px + 44px) */
    top: 197px;
    width: 134px;
    height: 40px;
}
.ncb-review-slider-wrapper {
    position: absolute;
    left: 740px; /* Center card with Figma offset, minus nav button space */
    top: 278px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 3;
}
.ncb-review-nav {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.ncb-review-nav:hover {
    opacity: 1;
}

.ncb-review-prev {
    width: 34px;
    height: 34px;
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_85_282)"><path d="M15 12H3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 16L3 12L7 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_85_282"><rect width="24" height="24" fill="white" transform="matrix(-1 0 0 1 24 0)"/></clipPath></defs></svg>') no-repeat center;
    background-size: contain;
}

.ncb-review-next {
    width: 34px;
    height: 34px;
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_85_277)"><path d="M9 12H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 16L21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 3C10.8181 3 9.64778 3.23279 8.55585 3.68508C7.46392 4.13738 6.47177 4.80031 5.63604 5.63604C4.80031 6.47177 4.13738 7.46392 3.68508 8.55585C3.23279 9.64778 3 10.8181 3 12C3 13.1819 3.23279 14.3522 3.68508 15.4442C4.13738 16.5361 4.80031 17.5282 5.63604 18.364C6.47177 19.1997 7.46392 19.8626 8.55585 20.3149C9.64778 20.7672 10.8181 21 12 21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_85_277"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>') no-repeat center;
    background-size: contain;
}

.ncb-review-nav svg {
    display: none;
}
.ncb-review-card {
    background: #FFFFFF;
    border-radius: 10px;
    width: 495px;
    height: 388px;
    padding: 40px 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
}
.ncb-review-quote {
    align-self: flex-end;
    margin-bottom: -5px;
}
.ncb-review-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
}
.ncb-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ncb-review-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ncb-review-name {
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #212121;
}
.ncb-review-stars {
    display: flex;
    gap: 8px;
    color: #FFC83B;
    font-size: 20px;
}
.ncb-review-text {
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #7A7A7A;
    text-align: center;
    margin: 0;
}

/* ──────────── 9. CTA Section (Floating Box) ──────────── */
.ncb-cta {
    background: var(--ncb-primary);
    width: 1230px; /* Exact Width per Figma */
    max-width: 95vw; /* Responsive override */
    height: 190px; /* Exact Height per Figma */
    margin: 0 auto;
    /* Boxed layout specific overrides */
    border-radius: 24px; /* Increased radius per user request */
    position: relative;
    z-index: 20; /* Sit above footer and prev section */
    
    /* Overlap Logic: Half in upper, Half in lower (190 / 2 = 95) */
    margin-top: -95px;    
    margin-bottom: -95px; 

    /* Inner Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px; /* Internal spacing */
    box-sizing: border-box;
    overflow: hidden; /* Clip the mountains */
}

/* Ensure overrides don't force full width on this specific element now */
body .ncb-cta {
    max-width: 1230px !important;
    border-radius: 10px !important;
    box-shadow: none;
    left: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ncb-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ncb-cta h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--ncb-white);
    margin: 0;
}

/* Mountains in CTA Section now */
.ncb-cta-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    /* Flex center to replicate "left: 392px" in 1230px box (approx center) */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.ncb-cta-mountains img {
    /* Exact sizing from Figma */
    width: 656px;
    height: 179px;
    /* Do not force stretch */
    object-fit: fill; 
    opacity: 0.6;
    display: block;
    mix-blend-mode: multiply;
}

/* ──────────── 10. Page Content ──────────── */
.ncb-page-content {
    /* More top padding for internal pages so content isn't under header */
    padding: 140px 0 50px; 
    min-height: 80vh; /* Increase min height */
}

/* Specific to Valuation Page Mountain SVG alignment */
.page-get-a-valuation .ncb-valuation-mountains {
    position: fixed; /* Stick to viewport like footer */
    bottom: 63px; /* Allow footer space (height 63px) so it sits ON TOP of footer visual line */
    left: 0;
    width: 509px;
    height: 179px;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

.page-get-a-valuation .ncb-page-content {
    padding-top: 100px; /* Adjust top padding if needed, previously 140px global */
    /* Ensure content pushes footer down past the SVG at top:681px + height:179px = 860px */
    min-height: 900px; /* Keep content area large enough */
    position: relative;
    z-index: 5; /* Sit above mountains */
}

/* Elementor full-width page – no container restriction */
.ncb-elementor-page {
    padding: 0;
    margin: 0;
    min-height: 60vh;
}

.ncb-elementor-page .elementor-section.elementor-section-stretched {
    max-width: 100vw !important;
}

body.elementor-page .ncb-page-content {
    padding: 0;
    max-width: none;
}

/* ──────────── 11. Footer ──────────── */
.ncb-footer {
    background: var(--ncb-off-white);
    /* Default padding for homepage/other pages */
    padding: 140px 0 24px; 
    border-top: 1px solid var(--ncb-gray-200);
    margin-top: 0;
}

.ncb-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.ncb-footer-left p {
    margin: 0;
    color: #7A7A7A;
    font-size: 14px;
}

.ncb-footer-right {
    display: flex;
    gap: 24px;
}

.ncb-footer-right a {
    text-decoration: none;
    color: #7A7A7A;
    font-size: 14px;
    transition: color 0.3s;
}

.ncb-footer-right a:hover {
    color: var(--ncb-primary);
}

@media (max-width: 992px) {
    .ncb-footer {
        padding-top: 60px;
        padding-bottom: 120px !important; /* Increased significantly to prevent cutoff */
        height: auto;
    }

    .ncb-footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        padding-bottom: 0;
    }
    
    .ncb-footer-right {
        order: 1; /* Links first */
        display: flex; 
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    .ncb-footer-left {
        order: 2; /* Copyright second */
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px; /* Add padding to copyright container */
        border-top: 1px solid #e5e5e5;
        display: block !important;
    }

    .ncb-footer-right a {
        display: block;
        padding: 10px;
        font-size: 16px;
        color: #555;
    }
    
    .ncb-footer-left p {
        font-size: 14px;
        color: #333 !important;
        display: block !important;
        margin: 0;
        line-height: 1.6;
    }
    
    .ncb-footer-left a {
        color: #333 !important;
    }
}

/* ──────────── 13. Contact Us Page ──────────── */
.ncb-contact-hero {
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left aligned per Figma */
    position: relative;
    background-size: cover;
    background-position: center;
}

.ncb-contact-hero h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ncb-contact-section {
    padding: 80px 0;
    background: #f9f9f9; /* Light gray background */
}

.ncb-contact-grid {
    display: flex;
    gap: 60px;
}

.ncb-contact-info {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ncb-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ncb-contact-icon {
    width: 90px;
    height: 90px;
    background: var(--ncb-primary);
    border-radius: 4px; /* Slight radius */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ncb-contact-icon img {
    width: 32px;
    height: 32px;
}

.ncb-contact-details h3 {
    font-size: 20px;
    font-weight: 700;
    color: #212121;
    margin: 0 0 8px 0;
}

.ncb-contact-details p {
    font-size: 16px;
    color: #7A7A7A;
    margin: 0;
    line-height: 1.5;
}

.ncb-contact-form-wrapper {
    flex: 1;
}

.ncb-contact-form-wrapper h2 {
    font-size: 32px;
    font-weight: 700;
    color: #212121;
    margin-bottom: 40px;
    text-align: left;
}

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

.ncb-form-group input,
.ncb-form-group textarea {
    width: 100%;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB; /* Very light border */
    border-radius: 4px;
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 16px;
    color: #212121;
    box-sizing: border-box;
}

.ncb-form-group input::placeholder,
.ncb-form-group textarea::placeholder {
    color: #B0B0B0;
}

.ncb-form-row {
    display: flex;
    gap: 20px;
}

.ncb-form-row .ncb-form-group {
    flex: 1;
}

.ncb-contact-form .ncb-btn {
    align-self: flex-start;
    min-width: 150px;
    border-radius: 4px;
}

/* ──────────── 14. About Us Page ──────────── */
.ncb-about-hero {
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background-size: cover;
    background-position: center;
}

.ncb-about-hero .ncb-hero-content-container,
.ncb-contact-hero .ncb-hero-content-container,
.ncb-privacy-hero .ncb-hero-content-container,
.ncb-terms-hero .ncb-hero-content-container {
    position: relative;
    z-index: 2;
    padding-top: 100px; /* Offset for header */
}

.ncb-about-hero h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ncb-about-section {
    padding: 80px 0;
    background: #fff;
}

.ncb-about-grid {
    display: flex;
    gap: 60px;
    align-items: center;
}

.ncb-about-content {
    flex: 1;
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.ncb-about-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ncb-about-img-main img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.ncb-about-img-row {
    display: flex;
    gap: 20px;
}

.ncb-about-img-secondary {
    flex: 1;
}

.ncb-about-img-secondary img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ──────────── 15. Privacy & Terms Pages ──────────── */
.ncb-privacy-hero,
.ncb-terms-hero {
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background-size: cover;
    background-position: center;
}

.ncb-privacy-hero h1,
.ncb-terms-hero h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ncb-privacy-section,
.ncb-terms-section {
    padding: 80px 0;
    background: #fff;
}

.ncb-privacy-section .ncb-page-content,
.ncb-terms-section .ncb-page-content {
    padding: 0;
    min-height: auto;
    max-width: 900px; /* Readable width */
    margin: 0 auto; /* Center text block if desired, or remove for left align */
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .ncb-contact-grid,
    .ncb-about-grid {
        flex-direction: column;
    }
    
    .ncb-contact-info {
        flex: auto;
        width: 100%;
    }
    
    .ncb-contact-card {
        align-items: center;
    }
    
    .ncb-form-row {
        flex-direction: column;
    }
}
/*
   "Box of steps":
   width: 1231;
   height: 100;
   top: 130px; 
   left: 105px;
   radius: 0;
*/
.page-get-a-valuation .cpe-form-wrapper {
    /* Main wrapper to act as positioning context */
    max-width: 100% !important;
    width: 100% !important; 
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    /* We don't want absolute otherwise content below it goes weird, 
       but if we follow spec strictly we might need to. 
       Let's try pushing it down first to match top: 130px (reduced from 180px) */
    padding-top: 130px !important; 
}

/* Hide the page title on valuation page */
.page-get-a-valuation h1.entry-title,
.page-get-a-valuation .elementor-heading-title {
    display: none !important;
}

/* The "Box" container for steps (.cpe-stepper) */
.page-get-a-valuation .cpe-stepper {
    /* Dimensions from Figma within the container space */
    width: 1231px !important;
    height: 100px !important;
    
    /* Position Absolute relative to page content */
    position: absolute !important;
    top: 130px !important; /* Reduced from 180px */
    /* Center it based on page width */
    left: 50% !important;
    transform: translateX(-50%) !important;
       
    /* Style Resets */
    background: #fff !important; /* White background per image */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0px 4px 10px 0px #BABABA40 !important; /* Specific shadow requested */
    margin: 0 !important;
    overflow: visible !important;
    
    /* Layout Inner Items */
    display: flex !important;
    align-items: center !important;
    /* Inner padding to match 'Text part' diff: 133px (inner) vs 105px (outer) = 28px left pad */
    padding: 0 0 !important; 
}

/* Hide the page title on valuation page */
.page-get-a-valuation .ncb-page-content > h1,
.page-get-a-valuation .ncb-page-content .elementor-heading-title,
.page-get-a-valuation h1 {
    display: none !important;
}

/* Inner Text/Step Items */
.page-get-a-valuation .cpe-stepper-item {
    
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    /* Full height to allow bottom border to sit at bottom of container */
    height: 100% !important; 
    padding: 0 !important;
    position: relative !important;
    gap: 12px !important;
}

/* Vertical Separator Line between steps */
.page-get-a-valuation .cpe-stepper-item:not(:last-child)::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    right: 0; 
    top: 50%;
    transform: translateY(-50%);
    width: 1px; 
    height: 40px; /* Specific height for vertical separator */
    background: #e0e0e0 !important; /* Light gray separator */
    z-index: 10;
}

/* Remove old horizontal line attempt */
.page-get-a-valuation .cpe-stepper-item:not(:last-child)::before {
    display: none !important;
}

/* Ensure no other lines/borders interfere */
.page-get-a-valuation .cpe-stepper-item:not(:last-child) {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Form Panel Position - Push down below the floating stepper */
.page-get-a-valuation .cpe-step-panel {
    margin-top: 120px !important; /* Adjusted margin */
    max-width: 1231px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 50px !important;
}


/* Ensure SVG stays behind if they overlap, or adjusting top to avoid overlap */
/* User asked for footer to be BELOW SVG. SVG bottom is 860px. Figma said Footer Top 825px which is overlap. 
   I set Top to 860px to honor "Below SVG" request while keeping it close to Figma values. */

.ncb-footer p {
    font-size: 14px;
    color: var(--ncb-text-light);
    margin: 0;
}

/* Kill WP default bottom margin/padding */
.ncb-page-content {
    padding: 50px 0 0;
    min-height: 60vh;
    margin-bottom: 0;
}

body.page .ncb-page-content {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Override WordPress wrappers that may constrain full-width sections */
body .ncb-hero,
body .ncb-how-it-works,
body .ncb-why-sell {
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.site-content,
.entry-content,
.wp-site-blocks,
.page-content,
main {
    overflow: visible !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ──────────── 12. Responsive ──────────── */
/* Changed breakpoint from 768px to 1200px to ensure consistent mobile experience on tablets/small laptops */
@media (max-width: 1200px) {

    /* Force Footer to Bottom on Mobile/Desktop by using Flexbox */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    .ncb-page-content,
    .site-content,
    .ncb-why-sell-wrapper,
    .ncb-how-it-works-hero, /* Just in case this page has similar issue */
    main {
        flex: 1 0 auto;
        width: 100%; /* Ensure full width */
    }
    
    .ncb-footer {
        flex-shrink: 0;
        width: 100%;
    }

    /* Unified Header Container */
    .ncb-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 78px !important;
        padding: 0 !important;
        background: transparent;
        z-index: 10000;
        overflow: visible !important; /* Ensure content isn't clipped */
    }

    body:not(.home) .ncb-header {
        position: relative;
        background: #4D7A4D; /* Green Background for internal pages */
    }

    .ncb-header-inner {
        display: flex !important;
        flex-direction: row !important; /* Ensure row direction unless specified */
        height: 78px !important;
        padding: 0 16px !important; /* Increased padding slightly, but not too much */
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 10001;
        position: relative;
        box-sizing: border-box; /* Ensure padding is included in width */
    }

    /* Specific Valuation Page Header Override */
    .page-get-a-valuation .ncb-header-inner {
        padding: 0 24px !important; /* Increase padding specifically for this page */
    }
    .ncb-logo {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
        z-index: 10002;
        max-width: 60%; /* Ensure it doesn't take full width */
        flex-shrink: 0;
    }
    
    .ncb-logo a {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .ncb-logo-text {
        color: #ffffff !important; 
        font-size: 20px !important; /* Adjusted slightly to ensure fit */
        line-height: 1;
        display: block !important;
    }
    
    /* Menu Toggle Visibility */
    .ncb-menu-toggle {
        display: flex !important; 
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        margin: 0;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10004; /* Keep above nav */
        flex-shrink: 0;
    }

    /* Hamburger Animation to X */
    .ncb-menu-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .ncb-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .ncb-menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    
    .ncb-menu-toggle span {
        background-color: #ffffff !important; /* Explicitly white */
        display: block !important;
        height: 3px;
        width: 100%;
        border-radius: 3px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Remove older conflicting rules */

    /* Ensure Logo Image scales correctly if set */
    .ncb-logo img.custom-logo {
        height: auto;
        max-height: 50px; /* Keep logo visible when header is taller */
        width: auto;
        max-width: min(210px, 56vw); /* Avoid clipping on very small widths */
        display: block; /* Remove inline spacing */
    }

    .ncb-nav {
        display: block; /* Always component, use transform to hide */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--ncb-primary-dark);
        padding: 118px 30px 40px; /* Top padding clears taller header */
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
        z-index: 10003; /* Above logo (10002), below toggle (10004) */
        
        /* Slide Transition */
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        visibility: hidden;
    }
    
    /* When active, slide in */
    .ncb-nav.active {
        transform: translateX(0);
        visibility: visible;
    }
    
    /* Optional backdrop */
    .ncb-nav.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: -100vw;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: -1;
    }

    /* Adjust for Homepage Transparent Header specifically - Keep unified for slide-out */
    body.home .ncb-nav {
        top: 0;
        background: var(--ncb-primary-dark); /* Solid bg for readability */
    }

    .ncb-nav-list {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start !important; /* Force left align in menu */
        margin-top: 0;
    }

    .ncb-nav-list li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 8px;
    }
    
    .ncb-nav-list li:last-child {
        border-bottom: none;
    }

    /* Home Header - Prevent logo/menu disappearing on small widths */
    body.home .ncb-header {
        position: absolute !important;
        top: 0;
        left: 0;
        z-index: 10020 !important;
    }

    body.home .ncb-header-inner {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.home .ncb-logo,
    body.home .ncb-logo a,
    body.home .ncb-menu-toggle,
    body.home .ncb-menu-toggle span {
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.home .ncb-menu-toggle {
        display: flex !important;
    }

    body.home .ncb-logo {
        display: block !important;
        max-width: calc(100% - 56px);
    }

    /* FAQ Section Mobile Fixes */
    .ncb-faq-grid {
        flex-direction: column !important;
        padding: 0 20px !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .ncb-faq-col {
        width: 100% !important;
        gap: 20px !important;
    }

    .ncb-faq-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* FAQ Reviews Mobile Fixes - Simple Center Layout */
    .ncb-faq-reviews {
        height: auto !important;
        min-height: 0;
        position: relative;
        padding-bottom: 50px !important; /* Provide space for buttons */
        margin-bottom: 0 !important; /* Let flow handle spacing */
        display: block !important;
        background: transparent !important; /* Remove black background */
    }

    .ncb-faq-reviews-bg {
        width: 100% !important;
        height: 220px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 0;
    }
    
    .ncb-faq-reviews-bg img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 1 !important; /* Ensure image is fully visible so white text is readable */
    }

    .ncb-faq-reviews-overlay {
        display: none !important;
    }

    .ncb-faq-reviews-content {
        position: static !important; /* Allow h2 absolute to relate to section */
        z-index: 2;
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        pointer-events: auto;
    }

    .ncb-faq-reviews-content h2 {
        position: absolute !important;
        top: 65px !important; /* Position clearly on top of image */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        text-align: center;
        margin: 0 !important;
        transform: none !important;
        z-index: 100 !important; /* Very high z-index */
        pointer-events: auto;
        color: #FFFFFF !important;
        font-size: 35px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
        display: block !important;
        visibility: visible !important;
    }

    .ncb-review-slider-wrapper {
        position: relative !important;
        top: auto !important;
        margin-top: 180px !important; /* Push card down to clear the title area */
        left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 24px !important;
        pointer-events: auto;
        margin-bottom: 50px !important;
    }

    .ncb-review-card {
        grid-column: 1 / -1 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: calc(100% - 40px) !important;
        max-width: 353px !important;
        height: auto !important;
        min-height: 388px !important;
        border-radius: 10px !important;
        background: #FFFFFF !important;
        padding: 40px 24px !important; /* Restore standard padding */
        box-sizing: border-box !important;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    
    /* Buttons positioned below the relative wrapper */
    .ncb-review-prev {
        grid-column: 1 / 2 !important;
        justify-self: end !important;
        order: 2 !important;
        position: static !important;
        top: auto !important;
        margin: 0 10px 0 0 !important;
        left: auto !important;
        transform: none !important;
        background: url('data:image/svg+xml;utf8,<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.25 17H4.25" stroke="%234D7A4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.9165 22.6667L4.24984 17L9.9165 11.3334" stroke="%234D7A4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 4.25C18.6744 4.25 20.3323 4.57979 21.8792 5.22054C23.4261 5.86128 24.8317 6.80044 26.0156 7.98439C27.1996 9.16834 28.1387 10.5739 28.7795 12.1208C29.4202 13.6677 29.75 15.3256 29.75 17C29.75 18.6744 29.4202 20.3323 28.7795 21.8792C28.1387 23.4261 27.1996 24.8317 26.0156 26.0156C24.8317 27.1996 23.4261 28.1387 21.8792 28.7795C20.3323 29.4202 18.6744 29.75 17 29.75" stroke="%234D7A4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center !important;
        width: 34px !important;
        height: 34px !important;
        border: none !important;
        border-radius: 0 !important; 
        display: block !important;
        z-index: 20;
    }
     
    .ncb-review-next {
        grid-column: 2 / 3 !important;
        justify-self: start !important;
        order: 2 !important;
        position: static !important;
        top: auto !important;
        margin: 0 0 0 10px !important;
        left: auto !important;
        transform: none !important;
        background: url('data:image/svg+xml;utf8,<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.375 16.5H28.875" stroke="%234D7A4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.375 22L28.875 16.5L23.375 11" stroke="%234D7A4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.5 4.125C14.8749 4.125 13.2657 4.44509 11.7643 5.06699C10.2629 5.68889 8.89868 6.60043 7.74955 7.74955C6.60043 8.89868 5.68889 10.2629 5.06699 11.7643C4.44509 13.2657 4.125 14.8749 4.125 16.5C4.125 18.1251 4.44509 19.7343 5.06699 21.2357C5.68889 22.7371 6.60043 24.1013 7.74955 25.2504C8.89868 26.3996 10.2629 27.3111 11.7643 27.933C13.2657 28.5549 14.8749 28.875 16.5 28.875" stroke="%234D7A4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center !important;
        width: 34px !important;
        height: 34px !important;
        border: none !important;
        border-radius: 0 !important;
        display: block !important;
        z-index: 20;
    }
    
    .ncb-review-nav svg {
        display: none !important;
    }

    /* Home Hero Mobile Framing (zoom-out + caravan visibility) */
    .home .ncb-hero {
        min-height: 420px;
        height: 420px;
    }

    .home .ncb-hero .ncb-hero-bg img {
        object-fit: cover !important;
        object-position: left bottom !important;
    }

    /* Remove Older Hero adjustments that might conflict */

    .ncb-hero-content {
        position: absolute;
        top: 130px;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        padding: 0 19px; /* Equal spacing on left and right */
        margin: 0;
        
        display: flex;
        flex-direction: column;
        align-items: center; /* Center align items in container, but text-align left */
        gap: 40px;
    }

    .ncb-hero h1 {
        font-size: 36px;
        text-align: center; /* Center text title per screenshot usually? recent screenshot shows centered title! */
        width: 100%;
        margin: 0;
    }

    .ncb-hero p {
        text-align: center;
        width: 100%;
        margin: 0;
    }

    /* Fullwidth Button */
    .ncb-hero .ncb-btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 16px;
        margin-top: 0;
        box-sizing: border-box; /* Ensure padding doesn't break width */
    }

    /* How It Works */
    .ncb-how-it-works {
        padding: 60px 0; /* Adjust vertical padding */
    }

    .ncb-steps {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 393px; /* Match design width */
        margin: 0 auto;
        gap: 0; /* Remove gap as we control spacing with elements */
    }

    .ncb-step-card:first-child,
    .ncb-step-card:last-child {
        align-items: center;
        text-align: center;
        padding: 0;
    }

    .ncb-step-card {
        width: 100%;
        max-width: 266px; /* Figma: 266px */
        /* height: 162px;  Remove fixed height to avoid text overflow */
        min-height: 162px; /* Use min-height instead */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Center content vertically if fixed height */
        gap: 32px; /* Figma gap */
        padding: 0;
        margin-bottom: 0;
        text-align: center; /* Ensure text is centered */
    }
    
    .ncb-step-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 0; /* Reset */
    }

    .ncb-step-card p {
        font-size: 18px;
        color: var(--ncb-primary-dark);
        margin: 0;
        line-height: 1.4;
    }

    /* Dashed Arrows */
    .ncb-step-divider {
        display: flex;
        width: 100%;
        height: 120px; /* Explicit height for rotated SVG */
        transform: none; /* Don't rotate container */
        margin: -20px 0; /* Pull layers closer since SVG has whitespace */
        justify-content: center;
        align-items: center;
    }
    
    .ncb-step-divider svg {
        width: 120px;
        height: 40px;
        transform: rotate(90deg); /* Rotate SVG inside */
    }

    /* Why Sell */
    .ncb-why-sell {
        padding: 60px 0;
    }

    /* ── How it Works Page (Mobile) ── */
    .ncb-hiw-hero {
        height: 200px;
    }
    
    .ncb-hiw-hero-content {
        left: 24px;
        top: 60px;
        width: auto;
    }
    
    .ncb-hiw-hero-content h1 {
        font-size: 36px;
        line-height: 1.2;
    }
    
    .ncb-hiw-steps {
        padding: 60px 0 80px;
    }
    
    .ncb-hiw-steps-row {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .ncb-hiw-step-card:first-child,
    .ncb-hiw-step-card:last-child {
        align-items: center;
        text-align: center;
    }

    .ncb-hiw-step-card {
        width: 100%;
        max-width: 266px;
    }
    
    .ncb-hiw-step-icon {
        width: 80px;
        height: 80px;
    }
    
    .ncb-hiw-step-icon img {
        width: 40px;
        height: 40px;
    }
    
    .ncb-hiw-step-card p {
        font-size: 18px;
    }
    
    /* Arrows pointing down on mobile */
    .ncb-hiw-arrow {
        width: 100%; /* Full width container */
        height: 120px; /* Increased height */
        padding-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0; /* Add vertical margin */
    }
    
    .ncb-hiw-arrow svg {
        width: 100px; /* Increased size */
        height: auto;
        transform: rotate(90deg);
    }

    .ncb-why-sell-grid {
        flex-direction: column; /* Image first, Content second */
        gap: 40px;
        align-items: stretch; /* Force full width alignment */
        margin-top: 100px; /* Increased top margin for better spacing */
    }

    .ncb-why-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .ncb-why-content h2 {
        text-align: left !important;
    }

    .ncb-gallery {
        width: 100%;
        max-width: 100%;
        padding: 0; /* Remove padding to align with container edge */
        gap: 10px;
    }

    .ncb-gallery-item.ncb-gallery-lg {
        height: 200px;
        width: 100%; /* Ensure full width */
    }

    /* Hide bottom images on mobile */
    .ncb-gallery-item:not(.ncb-gallery-lg) {
        display: none;
    }

    /* CTA Box Mobile Fixes */
    .ncb-cta {
        margin: 0 auto -50px auto !important; /* Center horizontally */
        width: calc(100% - 40px) !important; /* Forces 20px gap on each side */
        max-width: 353px;
        height: auto !important;
        min-height: 267px;
        border-radius: 10px;
        padding: 30px 20px;
        text-align: center;
        position: relative;
        top: 0;
        transform: translateY(-30px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        left: 0 !important;
        right: 0 !important;
    }

    /* How It Works - Icon Size */
    .ncb-step-icon {
        width: 80px; /* Increased from 64px */
        height: 80px;
        margin-bottom: 0;
    }
    
    .ncb-step-icon img {
        width: 40px; /* Increased size */
        height: 40px;
    }

    /* Dashed Arrows - Curved Style Pointing Down */
    .ncb-step-divider {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80px;
        margin: -10px 0;
        position: relative;
        flex-direction: column;
    }

    /* Remove pseudo elements */
    .ncb-step-divider::before,
    .ncb-step-divider::after {
        display: none !important;
    }

    /* Show SVG again with correct rotation */
    .ncb-step-divider svg {
        display: block !important;
        /* Match Figma: 60x11 rotated 90deg */
        width: 60px;
        height: 11px;
        transform: rotate(90deg) !important; /* Override any other query */
        transform-origin: center center;
        opacity: 1;
    }
    
    /* Match Figma dashed style */
    .ncb-step-divider svg path {
        stroke: #7A7A7A !important;
        stroke-width: 2px !important;
        stroke-dasharray: 4 4 !important;
    }
    
    .ncb-step-divider svg polygon {
        fill: #7A7A7A !important;
    }

    .ncb-cta-inner {
        flex-direction: column;
        gap: 30px;
        z-index: 2;
    }

    .ncb-cta h2 {
        font-size: 30px;
        margin-bottom: 0;
        line-height: 1.2;
        color: #fff;
    }

    .ncb-cta .ncb-btn {
        width: 100%;
        max-width: 280px;
        background: #fff;
        color: var(--ncb-primary);
        font-weight: 600;
        padding: 14px 20px;
        height: auto;
    }
    
    .ncb-cta-mountains {
        opacity: 1; /* Fully visible container */
        height: 100%;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex; /* Ensure alignment works */
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
    }
    
    .ncb-cta-mountains img {
        width: 100%;
        height: auto;
        min-height: 100px; /* Ensure visibility */
        object-fit: contain; /* Don't crop awkwardly */
        object-position: bottom;
        opacity: 0.8; /* Much bolder mountains */
    }

    /* Adjust Why Sell Padding */
    .ncb-why-sell {
        padding: 60px 0 100px;
    }

    .ncb-why-content {
        padding: 0 24px;
        text-align: center;
    }
    
    .ncb-checklist {
        display: inline-block; /* Make the list shrink to fit content */
        text-align: left; /* Align items to left internally */
        margin: 0 auto; /* Center the list block */
        max-width: 100%;
    }

    .ncb-checklist li {
        justify-content: flex-start; /* Ensure icon and text are left aligned */
        text-align: left; 
    }

    .ncb-hero-content {
        padding: 40px 20px 30px;
    }

    /* Home Hero Mobile - Move CTA higher inside image */
    body.home .ncb-hero-content {
        top: 88px !important;
        padding: 12px 19px 22px !important;
        gap: 22px !important;
    }

    body.home .ncb-hero .ncb-btn {
        margin-top: -4px;
    }

    .ncb-hero h1 {
        font-size: 30px;
    }

    .ncb-hero p {
        font-size: 16px;
    }

    .ncb-hero-mountains img {
        opacity: 0.25;
    }

    /* How It Works */
    .ncb-how-it-works {
        padding: 50px 0;
    }

    .ncb-section-title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    .ncb-steps {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .ncb-step-card {
        padding: 12px 0;
    }

    .ncb-step-divider {
        width: 100%;
        height: 120px; /* Increased height for better spacing */
        transform: none; 
        padding-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0; /* Add vertical margin */
    }
    
    .ncb-step-divider svg {
        width: 100px; /* Increased size */
        height: auto;
        transform: rotate(90deg); 
    }

    /* Why Sell */
    .ncb-why-sell {
        padding: 50px 0;
    }

    .ncb-why-sell-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* CTA */
    .ncb-cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .ncb-cta h2 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .ncb-header {
        height: 72px !important;
    }

    .ncb-header-inner {
        height: 72px !important;
        padding: 0 14px !important;
    }

    .ncb-logo img.custom-logo {
        max-height: 44px;
        max-width: min(180px, 58vw);
    }

    .ncb-nav {
        padding-top: 108px;
    }

    .home .ncb-hero {
        min-height: 380px;
        height: 380px;
    }

    .home .ncb-hero .ncb-hero-bg img {
        object-fit: cover !important;
        object-position: left bottom !important;
    }

    body.home .ncb-hero-content {
        top: 74px !important;
        padding: 8px 16px 18px !important;
        gap: 16px !important;
    }

    body.home .ncb-logo {
        max-width: calc(100% - 52px);
    }

    .ncb-hero h1 {
        font-size: 26px;
    }

    .ncb-gallery-item {
        min-height: 120px;
    }

    .ncb-gallery-item.ncb-gallery-lg {
        min-height: 160px;
    }
}
/* FIX STYLES */ .page-get-a-valuation .ncb-footer { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; width: 100% !important; height: 63px !important; padding: 0 !important; display: flex !important; z-index: 1000 !important; } .page-get-a-valuation .ncb-valuation-mountains { position: fixed; bottom: 63px; left: 0; width: 509px; height: 179px; opacity: 0.1; z-index: 0; pointer-events: none; } 
.page-get-a-valuation .cpe-stepper {
    top: 20px !important; /* Extremely close to header now */
}
.page-get-a-valuation .cpe-form-wrapper {
    /* Box ends at 20px (top) + 100px (height) = 120px. 
       Need padding > 120px to start content below it. */
    padding-top: 140px !important; 
}

/* Adjust vertical separator to be strictly on the RIGHT of the item */
.page-get-a-valuation .cpe-stepper-item:not(:last-child)::after {
    right: 0 !important;
    left: auto !important; /* Ensure it's not sticking to left */
}

/* Make sure no ::before is creating a left border */
.page-get-a-valuation .cpe-stepper-item::before {
    display: none !important;
}

/* Mobile Fixes - Valuation Page */
@media (max-width: 1200px) {
    .page-get-a-valuation .cpe-form-wrapper {
        padding-top: 96px !important;
    }

    .page-get-a-valuation .cpe-stepper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 12px 16px !important;
        padding: 12px 4px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0;
        align-items: stretch !important; /* Ensure items stretch full height */
    }

    .page-get-a-valuation .cpe-stepper-item {
        flex: 1 !important; /* Distribute space evenly (works for 3 or 4 items) */
        width: auto !important;
        min-width: 0 !important;
        min-height: 56px;
        padding: 6px 4px !important;
        text-align: center;
        justify-content: flex-start !important; /* Align top */
        align-items: center !important;
        flex-direction: column !important; /* Stack number and text */
        gap: 6px !important;
    }

    .page-get-a-valuation .cpe-step-label {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important; /* Allow wrapping */
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    .page-get-a-valuation .cpe-stepper-item:not(:last-child)::after {
        height: 28px !important;
        right: 0 !important;
    }

    .page-get-a-valuation .cpe-step-panel {
        margin-top: 24px !important;
        max-width: 100% !important;
        padding: 0 16px !important;
    }

    .page-get-a-valuation .cpe-actions {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    .page-get-a-valuation .cpe-actions .cpe-btn,
    .page-get-a-valuation .cpe-actions .cpe-btn-outline {
        width: 100% !important;
        max-width: none !important;
    }

    .page-get-a-valuation .ncb-valuation-mountains {
        display: none !important;
    }

    .page-get-a-valuation .ncb-footer {
        position: relative !important;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 63px;
        padding: 16px 0 !important;
        display: block !important;
        z-index: 5 !important;
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    .page-get-a-valuation .cpe-stepper {
        width: calc(100% - 16px) !important;
        margin: 0 8px 12px !important;
    }

    .page-get-a-valuation .cpe-stepper-item {
        flex: -1 0 33.3333% !important;
        width: 33.3333% !important;
        min-height: 52px;
        padding: 6px 4px !important;
    }
}