/* ============================================================
   NestUp — Case Study
   ============================================================ */

:root {
    --ns-ink: #0D1B2A;
    --ns-scrim-rgb: 13, 27, 42;
}

/* ══════════════════════════════════════════════
   NestUp — Hero
   ══════════════════════════════════════════════ */

.ns-scroll-container {
    position: relative;
    overflow: visible;
}

.ns-hero-track {
    position: relative;
    height: 200vh;
}

.ns-hero {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    will-change: transform, opacity, filter;
}

.ns-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ns-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 18%;
    background: var(--ns-ink);
    display: block;
}

.ns-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(var(--ns-scrim-rgb), 0.10) 0%,
            rgba(var(--ns-scrim-rgb), 0.25) 40%,
            rgba(var(--ns-scrim-rgb), 0.72) 70%,
            rgba(var(--ns-scrim-rgb), 0.88) 100%
    );
}

.ns-hero-content {
    position: relative;
    z-index: 1;
    padding: 0 5vw 6vh;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 100%;
    will-change: transform, opacity;
}

.ns-hero-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0;
}

.ns-hero-sub {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 200;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
    max-width: 50ch;
}

.ns-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin-top: 0.5rem;
}

.ns-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ns-meta-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.ns-meta-value {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.3;
}

@media (max-width: 760px) {
    .ns-hero-track { height: 200vh; }
    .ns-hero-content { padding: 0 6vw 5vh; }
    .ns-hero-meta { gap: 1.2rem 2rem; }
    .ns-hero-title { font-size: 2.4rem; }
}

/* =====================================================
   Brief Section
   ===================================================== */

.ns-brief {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-radius: 58px 58px 0 0;
    margin-top: -100vh;
    min-height: 100vh;
    padding: 8vh 80px 12vh;
    width: 100%;
}

.ns-brief-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0 8vw;
    align-items: start;
}

.ns-brief-left {
    position: sticky;
    top: 8rem;
}

.ns-brief-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ns-ink);
    margin: 0;
}

.ns-brief-right {
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem;
}

.ns-brief-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

.ns-brief-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ns-ink);
}

.ns-brief-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    max-width: 75ch;
}

.ns-brief-divider {
    border: none;
    border-top: 1px solid rgba(13, 27, 42, 0.12);
    margin: 0;
}

/* reveal-on-scroll — driven by JS toggling .is-visible */
.ns-brief-block.ns-block-animate {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.ns-brief-block.ns-block-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .ns-brief-inner {
        grid-template-columns: 1fr;
        gap: 3rem 0;
    }
    .ns-brief-left {
        position: static;
    }
}

@media (max-width: 768px) {
    .ns-hero-track { height: 200vh; }
    .ns-hero-meta { flex-wrap: wrap; }
    .ns-brief { padding: 8vh 6vw 10vh; border-radius: 32px 32px 0 0; }
}
/* =====================================================
   Idea behind the logo
   ===================================================== */

.ns-logo-story {
    position: relative;
    z-index: 2;
    background: #fff;
    max-width: 100%;
    margin: 0 auto;
    padding: 4vh 80px 12vh;
}

.ns-logo-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: stretch;
}

.ns-logo-card {
    background: var(--ns-ink);
    border-radius: 20px;
    padding: 40px;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.ns-logo-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 28px;
    margin: 0 0 18px;
}

.ns-logo-tagline {
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 18px;
}

.ns-logo-card p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.ns-logo-swatches {
    margin-top: 24px;
}

.ns-logo-swatches img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.ns-logo-explore {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

.ns-logo-mark {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}

.ns-meanings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.ns-meaning-card {
    background: #F1F2F4;
    border-radius: 10px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.ns-meaning-glyph {
    color: var(--ns-ink);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 20px;
}

.ns-meaning-title {
    font-weight: 800;
    font-size: 13px;
    color: var(--ns-ink);
}

.ns-meaning-desc {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--ns-muted);
}

@media (max-width: 860px) {
    .ns-logo-story { padding: 4vh 6vw 8vh; }
    .ns-logo-grid { grid-template-columns: 1fr; }
    .ns-meanings { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================
   App Icon Mockup
   ===================================================== */

.ns-room {
    background: #fff;
    padding: 0 80px 12vh;
}

.ns-room-frame {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.ns-room-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 700px) {
    .ns-room { padding: 0 6vw 8vh; }
}

/* =====================================================
   Color Palette & Typography
   ===================================================== */

:root {
    --ns-indigo: #1A4D8F;
    --ns-sky: #DCEBFF;
    --ns-amber: #F5B940;
    --ns-emerald: #38A169;
    --ns-midnight: #1F2430;
    --ns-muted: #6E6E6E;
}

/* ══════════════════════════════════════════════
   STYLES — slides up over the showcase
   Opens with rounded top over the dark showcase
   ══════════════════════════════════════════════ */

.ns-styles {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    border-radius: 58px 58px 0 0;
    margin-top: -100vh;
    min-height: 100vh;
    padding: 10vh 80px 12vh;
    width: 100%;
}

.ns-styles-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.ns-styles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    min-height: 80vh;
}

.ns-palette {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(13, 27, 42, 0.08);
}

.ns-swatch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.1rem 1.4rem;
    flex: 1;
    min-height: 90px;
}

.ns-swatch--indigo   { background: var(--ns-indigo); }
.ns-swatch--sky      { background: var(--ns-sky); }
.ns-swatch--amber    { background: var(--ns-amber); }
.ns-swatch--emerald  { background: var(--ns-emerald); }
.ns-swatch--ink      { background: var(--ns-midnight); }

.ns-swatch-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.3;
}

.ns-swatch-hex {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.ns-swatch--indigo .ns-swatch-name,  .ns-swatch--indigo .ns-swatch-hex,
.ns-swatch--emerald .ns-swatch-name, .ns-swatch--emerald .ns-swatch-hex,
.ns-swatch--ink .ns-swatch-name,     .ns-swatch--ink .ns-swatch-hex {
    color: rgba(255, 255, 255, 0.92);
}

.ns-swatch--sky .ns-swatch-name,   .ns-swatch--sky .ns-swatch-hex,
.ns-swatch--amber .ns-swatch-name, .ns-swatch--amber .ns-swatch-hex {
    color: var(--ns-ink);
}

.ns-type-card {
    background: #ECEEF2;
    border-radius: 16px;
    padding: 2rem 2.2rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 24px rgba(13, 27, 42, 0.08);
    overflow: hidden;
}

.ns-type-name-row {
    display: flex;
    align-items: baseline;
    flex-direction: column;
}

.ns-type-family {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 3vw, 2.8rem);
    color: #0a0a0a;
    letter-spacing: -0.02em;
}

.ns-type-display {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 1.5rem 0;
}

.ns-type-icon {
    max-width: 60%;
    max-height: 100%;
    display: block;
}

.ns-type-rule {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 0.75rem 0;
}

.ns-type-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.ns-type-charset {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ns-muted);
    margin: 0;
    max-width: 36ch;
    opacity: 0.7;
    font-family: 'Roboto', sans-serif;
}

@media (max-width: 900px) {
    .ns-styles-grid { grid-template-columns: 1fr; }
    .ns-palette { flex-direction: row; flex-wrap: wrap; }
    .ns-swatch { flex: 1 1 30%; min-height: 90px; }
}

@media (max-width: 600px) {
    .ns-styles { border-radius: 32px 32px 32px 32px; padding: 8vh 6vw 10vh; }
}

/* =====================================================
   Beyond Colour
   ===================================================== */

.ns-beyond {
    background: #fff;
    padding: 0 80px 12vh;
}

.ns-beyond-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0 8vw;
    align-items: start;
}

.ns-beyond-heading {
    position: sticky;
    top: 8rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--ns-ink);
    margin: 0;
}

.ns-beyond-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    max-width: 75ch;
}

@media (max-width: 768px) {
    .ns-beyond { padding: 0 6vw 8vh; }
    .ns-beyond-inner { grid-template-columns: 1fr; gap: 1.25rem 0; }
}

/* =====================================================
   Sign Up/Login / Questionnaire
   ===================================================== */

.ns-walk {
    background: #fff;
    padding: 6vh 80px 12vh;
    overflow-x: hidden;
}

.ns-walk-tabs {
    width: 100%;
    margin: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ns-walk-tab {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 10px;
    background: #F1F3F6;
    color: #9AA5B1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.ns-walk-tab--active {
    background: #1A4D8F;
    color: #fff;
    font-weight: 800;
}

.ns-walk-connector {
    flex: none;
    width: 140px;
    height: 0;
    border-top: 2px dashed #cfd3d6;
    margin: 0 30px;
    margin: 0 30px;
}

.ns-walk-phones {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: center;
}

.ns-walk-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ns-walk-notes {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ns-walk-note {
    background: #EAF1FB;
    border: 1px solid #cfe0f5;
    border-radius: 14px;
    padding: 22px 24px;
}

.ns-walk-note-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    color: #1A4D8F;
    margin: 0 0 12px;
}

.ns-walk-note-quote {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    color: var(--ns-ink);
    margin: 0 0 12px;
}

.ns-walk-note-body {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ns-muted);
    margin: 0;
}

/* =====================================================
   Build Wealth with Confidence
   ===================================================== */

.ns-quote {
    background: #fff;
    padding: 12vh 80px;
    border-radius: 0 0 58px 58px;
    position: relative;
    z-index: 1;
}

.ns-quote-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.ns-quote-heading {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    color: #111827;
    margin: 0 0 32px;
}

.ns-quote-body {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.6;
    color: #6E6E6E;
    margin: 0;
}

@media (max-width: 768px) {
    .ns-quote { padding: 8vh 6vw; }
}

/* =====================================================
   Simple. Focused. Made for action.
   ===================================================== */

.ns-navpreview {
    background: #fff;
    padding: 10vh 80px 12vh;
}

.ns-navpreview-top {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0 6vw;
    align-items: start;
}

.ns-navpreview-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 1.5rem;
}

.ns-navpreview-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    max-width: 35ch;
}

.ns-navpreview-mockup img {
    width: 100%;
    height: auto;
    display: block;
}

.ns-navpreview-states { margin-top: 6vh; }

.ns-navpreview-states-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 1.25rem;
    display: block;
}

.ns-navstates-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .ns-navpreview { padding: 6vh 6vw 8vh; }
    .ns-navpreview-top { grid-template-columns: 1fr; gap: 2rem 0; }
}

/* =====================================================
   Feature Walkthrough
   ===================================================== */

.ns-features {
    position: relative;
    background: #fff;
}

.ns-features-track {
    position: relative;
    height: 500vh;
}

.ns-features-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    padding: 0 100px;
    display: flex;
    align-items: center;
}

.ns-feature-block {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 0 5vw;
    align-items: center;
    padding: 0 100px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.ns-feature-block.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ns-feature-left {
    position: relative;
}

.ns-feature-num {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(4.5rem, 7vw, 6.5rem);
    color: #1A4D8F;
    line-height: 1;
    margin-bottom: 1.75rem;
}

.ns-feature-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}

.ns-feature-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    max-width: 35ch;
    margin-bottom: 1.25rem;
    display: block;
    margin-top: 1.25rem;
}

.ns-feature-nav-img {
    display: block;
    width: 280px;
    height: auto;
}

.ns-feature-right {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ns-feature-frame {
    width: 100%;
}

.ns-feature-frame img {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
}

.ns-features-scrollbar {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 72vh;
    background: #DCDEE2;
    border-radius: 999px;
    overflow: hidden;
    z-index: 2;
}

.ns-features-scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20%;
    background: #1A4D8F;
    border-radius: 999px;
    transform: translateY(0%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 900px) {
    .ns-features-track { height: 350vh; }
    .ns-features-sticky { padding: 0 6vw; }
    .ns-feature-block { grid-template-columns: 1fr; gap: 1.5rem 0; padding: 0 6vw 0 3.5rem; align-content: center; }
    .ns-features-scrollbar { left: 6vw; height: 36vh; }
}

/* =====================================================
   NestUp — Designed for Everyday Financial Confidence
   ===================================================== */

.ns-purpose {
    background: #fff;
    padding: 14vh 80px;
}

.ns-purpose-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0 8vw;
    align-items: start;
}

.ns-purpose-left {
    position: sticky;
    top: 8rem;
}

.ns-purpose-right {
    padding-top: 0.25rem;
}

.ns-purpose-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}

.ns-purpose-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    max-width: 75ch;
}

@media (max-width: 768px) {
    .ns-purpose { padding: 8vh 6vw; }
    .ns-purpose-inner { grid-template-columns: 1fr; gap: 1.5rem 0; }
}

/* =====================================================
   Smarter Insights. Stronger Finances.
   AI assistant (Quill) feature panel
   ===================================================== */

.ns-assistant {
    background: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 80px;
}

.ns-assistant-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 5vw;
    align-items: center;
}

.ns-assistant-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}

.ns-assistant-heading-line {
    display: block;
}

.ns-assistant-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    margin-bottom: 1.25rem;
    display: block;
    margin-top: 1.25rem;
}

.ns-assistant-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.75rem;
    margin-bottom: 1.75rem;
}

.ns-assistant-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ns-assistant-feature-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ns-assistant-feature-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ns-ink);
    margin: 0 0 0.25rem;
}

.ns-assistant-feature-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ns-muted);
    margin: 0;
    max-width: 26ch;
}

.ns-assistant-ask {
    background: #F1F2F4;
    border-radius: 14px;
    padding: 1.25rem 1.5rem 1.5rem;
}

.ns-assistant-ask-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ns-ink);
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ns-assistant-ask-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ns-assistant-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.ns-assistant-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid rgba(13, 27, 42, 0.1);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: var(--ns-ink);
}

.ns-assistant-chip-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.ns-assistant-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ns-assistant-phones {
    width: 100%;
}

.ns-assistant-phones img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}

/* =====================================================
   My Role
   ===================================================== */

.ns-role {
    background: #fff;
    padding: 8vh 80px 12vh;
    width: 100%;
    border-radius: 0 0 58px 58px;
    position: relative;
    z-index: 1;
}

.ns-role-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0 8vw;
    align-items: start;
}

.ns-role-left {
    position: sticky;
    top: 8rem;
}

.ns-role-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}

.ns-role-right {
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem;
}

.ns-role-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

.ns-role-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}

.ns-role-body {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
    max-width: 75ch;
}

.ns-role-divider {
    border: none;
    border-top: 1px solid rgba(13, 27, 42, 0.12);
    margin: 0;
}

@media (max-width: 768px) {
    .ns-role { padding: 8vh 6vw 10vh; }
    .ns-role-inner { grid-template-columns: 1fr; gap: 3rem 0; }
    .ns-role-left { position: static; }
}

/* =====================================================
   NestUp — Showcase (full-bleed lifestyle mockup)
   ===================================================== */

.ns-closing-scroll {
    position: relative;
    overflow: visible;
}

.ns-showcase-track {
    position: relative;
    height: 200vh;
}

.ns-showcase {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100vh;
    margin-top: -50px;
    overflow: hidden;
    line-height: 0;
}

.ns-showcase img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .ns-showcase-track { height: auto; }
    .ns-showcase { position: relative; height: 60vh; margin-top: 0; }
}

/* NEXT PROJECT — moved to shared /style.css component, see /assets/next-project.js */

/* =====================================================
   NestUp — Closing
   ===================================================== */

.ns-closing {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-radius: 58px 58px 58px 58px;
    margin-top: -100vh;
    margin-bottom: -29px;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .ns-closing { border-radius: 32px 32px 32px 32px; }
}


/* ── FOOTER REVEAL: keep footer above the pinned brief sheet ── */
#maeven-footer {
    position: relative;
    z-index: 0;
}



/* ══════════════════════════════════════════════
   RESPONSIVE — mobile
   Consolidated overrides; last in the file so they
   win over the per-section queries above.
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Two sections were completely invisible. Each is a white card
       pulled up by -100vh to slide over a pinned, viewport-tall section
       on desktop; unpinned here those sections are only 269px and 487px
       tall, so the card covered them outright:
         .ns-styles  buried .ns-room     (the app-icon shot)
         .ns-closing buried .ns-showcase (the tablet dashboard shot)
       `relative`, not `static`, so z-index survives for the footer tuck. ── */
    .ns-styles {
        position: relative;
        top: auto;
        margin-top: 0;
        min-height: 0;
    }
    .ns-closing {
        position: relative;
        top: auto;
        margin-top: 0;
        min-height: 0;
    }

    /* ── STYLES: palette and type specimen side by side rather than
       stacked, so the whole section fits a screen and the next heading
       comes into view with it. The ≤900 rule collapses this to 1fr and
       the fixed 80vh squeezed the swatches, so both are overridden. ── */
    .ns-styles-grid {
        grid-template-columns: 1fr 1fr;
        min-height: 0;
        gap: 0.75rem;
    }
    .ns-palette { flex-direction: column; }
    .ns-swatch { flex: 1 1 auto; min-height: 62px; padding: 0.6rem 0.75rem; }
    .ns-swatch-name { font-size: 0.8rem; line-height: 1.2; }
    .ns-swatch-hex  { font-size: 0.6rem; margin-top: 0.1rem; }

    .ns-type-card { padding: 1rem 0.9rem 0.85rem; border-radius: 14px; }
    .ns-type-family { font-size: 1.45rem; }
    .ns-type-display { padding: 0.75rem 0; }
    .ns-type-icon { max-width: 78%; }
    .ns-type-rule { margin: 0.5rem 0; }
    /* the specimen string barely breaks; at this width it only reads as
       texture, so keep it small and let it wrap anywhere */
    .ns-type-footer { flex-direction: column; align-items: flex-start; }
    .ns-type-charset {
        max-width: none;
        font-size: 0.55rem;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* ── .ns-assistant kept 80px gutters AND a two-column grid, so its
       columns hit their min-content floor and pushed 15px past the
       viewport — the heading, body and right-hand features were all
       cut off at the screen edge. ── */
    .ns-assistant {
        height: auto;
        display: block;
        padding: 8vh 6vw;
    }
    .ns-assistant-inner { grid-template-columns: 1fr; gap: 2.5rem 0; }
    .ns-assistant-features { grid-template-columns: 1fr; }

    /* ── .ns-walk never got a mobile block (bloom and rfs both have one).
       The two tabs plus a 140px connector with 60px of margins far
       exceeded 330px, and .ns-walk-notes stayed a 3-column grid — the
       whole section ran past the edge and was clipped by its own
       overflow-x: hidden. ── */
    .ns-walk { padding-left: 6vw; padding-right: 6vw; }
    .ns-walk-tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 36px;
    }
    .ns-walk-tab { font-size: 14px; padding: 12px 18px; white-space: normal; }
    .ns-walk-connector { display: none; }
    .ns-walk-phones { margin-bottom: 36px; }
    /* one note per row instead of three cramped columns */
    .ns-walk-notes { grid-template-columns: 1fr; gap: 14px; }

    /* ── These headings stay `sticky; top: 8rem` after their grids
       collapse to one column, so they drift over their own body copy. ── */
    .ns-beyond-heading,
    .ns-purpose-left { position: static; }

    /* ── .ns-quote and .ns-role kept the desktop 58px while .ns-brief,
       .ns-styles and .ns-closing all drop to 32px here. ── */
    .ns-quote { border-radius: 0 0 32px 32px; }
    .ns-role  { border-radius: 0 0 32px 32px; }
}