/* ═══════════════════════════════════════
   CRUX — Sobre nosotros
   Editorial monograph aesthetic
   ═══════════════════════════════════════ */

/* ─────────────────────────────────────
   LOCAL TOKENS · scoped a esta página
   Solo warm accent — no contamina style.css.
   Dos usos máximos: CTA primario + dot del hero label.
   ───────────────────────────────────── */
.ns-hero,
.ns-cta {
    --crux-sand: #B5946A;
    --crux-sand-hover: #9E7E56;
}

/* ─────────────────────────────────────
   KEYFRAMES LOCALES
   ───────────────────────────────────── */
@keyframes heroRevealDiagonal {
    from {
        opacity: 0;
        transform: translate(-40px, 60px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* ─────────────────────────────────────
   HERO — Cinematic entrance
   ───────────────────────────────────── */
.ns-hero {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ns-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.section-media--ns-hero .section-media__image {
    object-position: center 35%;
}

.ns-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ns-hero__content {
    max-width: 820px;
    padding-top: clamp(8rem, 12vh, 11rem);
    padding-bottom: clamp(5rem, 10vh, 8rem);
}

.ns-hero__label {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ns-hero__label::before {
    display: none;
}

.ns-hero__heading {
    margin-bottom: 0;
    text-shadow: 0 1px 30px rgba(242, 239, 233, 0.4);
}

/* Three staggered lines — each bigger, building tension
   Override: monograph-scale + diagonal reveal motion
   (matching la diagonal intrinseca del fondo architectural) */
.ns-hero__heading .hero-line {
    display: block;
    overflow: visible;
}

.ns-hero__heading .hero-line__inner {
    transform: translate(-40px, 60px);
    animation-name: heroRevealDiagonal;
}

.ns-hero__heading .hero-line:nth-child(1) .hero-line__inner {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(3.6rem, 9vw, 9rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    animation-delay: 0.3s;
}

.ns-hero__heading .hero-line:nth-child(2) .hero-line__inner {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(3.6rem, 9vw, 9rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    animation-delay: 0.5s;
}

.ns-hero__heading .hero-line:nth-child(3) .hero-line__inner {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.8rem, 9.5vw, 9.5rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    animation-delay: 0.7s;
    color: var(--accent);
}

/* Vertical sidebar element — architectural detail */
.ns-hero__sidebar {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 1.2s forwards;
}

.ns-hero__sidebar-line {
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.ns-hero__sidebar-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-brand);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ─────────────────────────────────────
   MANIFESTO — Full-bleed typography wall
   ───────────────────────────────────── */
.ns-manifesto {
    padding: clamp(5rem, 12vh, 10rem) 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(56, 105, 171, 0.015) 0%, transparent 50%),
        linear-gradient(315deg, rgba(56, 105, 171, 0.01) 0%, transparent 50%);
}

.ns-manifesto__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(2rem, 6vw, 6rem);
    position: relative;
}

/* Giant background quotation mark */
.ns-manifesto__bg-mark {
    position: absolute;
    top: -0.35em;
    left: -0.05em;
    font-family: var(--font-display);
    font-size: clamp(14rem, 28vw, 26rem);
    font-weight: 300;
    color: var(--accent);
    opacity: 0.03;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.ns-manifesto__quote {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.8vw, 3.4rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--text);
    position: relative;
    max-width: 1200px;
}

.ns-manifesto__quote em {
    color: var(--accent);
    font-style: normal;
    font-weight: 400;
}

.ns-manifesto__quote strong {
    font-weight: 500;
    color: var(--text);
}

.ns-manifesto__dim {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ─────────────────────────────────────
   HISTORIA — Magazine spread
   ───────────────────────────────────── */
.ns-story {
    border-bottom: 1px solid var(--border);
}

/* Silueta Baleares — ilustracion vectorial decorativa de Historia.
   Estrategia unificada below-text: el SVG vive anclado a .ns-story__narrative
   y se posiciona SIEMPRE por debajo del texto (bottom negativo), sangrando al
   section-padding entre Historia y Equipo. Cero colision vertical con el
   texto; posibles solapes horizontales son irrelevantes porque verticalmente
   el island esta por debajo. Narrative es el unico anchor en todos los
   viewports — sin re-anchoring en mobile. */
.ns-story__narrative {
    position: relative;
}

.ns-story__island {
    position: absolute;
    left: auto;
    right: clamp(10px, 3vw, 40px);
    bottom: -210px;
    width: clamp(180px, 20vw, 220px);
    height: auto;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.ns-story__spread {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(4rem, 8vw, 8rem);
    align-items: start;
    position: relative;
    z-index: 1;
}

.ns-story__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-top: 0.8rem;
    margin-bottom: 2rem;
    max-width: 18ch;
}

.ns-story__body {
    max-width: 580px;
}

.ns-story__body p {
    color: var(--text-muted);
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.9;
    margin-bottom: 1.2rem;
}

.ns-story__body p:last-child {
    margin-bottom: 0;
}

/* Metrics column — large typographic counters */
.ns-story__metrics {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--border);
    padding-top: 0.5rem;
}

.ns-story__metric {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--border);
    transition: background 0.4s ease;
}

.ns-story__metric:last-child {
    border-bottom: none;
}

.ns-story__metric:hover {
    background: rgba(56, 105, 171, 0.03);
}

.ns-story__metric-value {
    font-family: var(--font-display);
    font-size: clamp(3rem, 4.5vw, 4.2rem);
    font-weight: 300;
    color: var(--accent);
    line-height: 0.95;
    letter-spacing: -0.025em;
}

/* "Baleares" es una palabra entre numeros — no escalar igual */
.ns-story__metric--word .ns-story__metric-value {
    font-size: clamp(2rem, 3vw, 2.8rem);
    letter-spacing: -0.015em;
}

.ns-story__metric-rule {
    width: 20px;
    height: 1px;
    background: var(--accent);
    opacity: 0.4;
    margin: 0.6rem 0 0.3rem;
    transition: width 0.4s var(--ease-out);
}

.ns-story__metric:hover .ns-story__metric-rule {
    width: 48px;
}

.ns-story__metric-label {
    font-family: var(--font-brand);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ─────────────────────────────────────
   EQUIPO — Bento grid
   ───────────────────────────────────── */
.ns-team {
    background:
        linear-gradient(180deg, rgba(56, 105, 171, 0.02) 0%, transparent 40%),
        linear-gradient(0deg, rgba(56, 105, 171, 0.015) 0%, transparent 30%);
}

.ns-team__header {
    max-width: 520px;
    margin-bottom: clamp(3rem, 6vh, 5rem);
}

.ns-team__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-top: 0.6rem;
    margin-bottom: 1rem;
}

.ns-team__lead {
    font-size: clamp(0.88rem, 1vw, 1rem);
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 420px;
}

/* Bento layout — lead card spans 2 rows */
.ns-team__bento {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: clamp(0.8rem, 1.4vw, 1.4rem);
}

.ns-team__card {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
}

.ns-team__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 56px rgba(19, 37, 60, 0.18);
}

/* Cards individuales — foto a sangre, cero padding/border/background.
   La aspect-ratio del card define la altura uniforme del row. */
.ns-team__card:not(.ns-team__card--lead) {
    aspect-ratio: 9 / 16;
    background: var(--bg-accent);
}

.ns-team__card:not(.ns-team__card--lead) .ns-team__photo {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
}

/* Foto real: rellena el card completo */
.ns-team__photo {
    position: relative;
    overflow: hidden;
    transition: transform 0.6s var(--ease-out);
}

.ns-team__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ns-team__card:hover .ns-team__photo {
    transform: scale(1.03);
}

/* Info overlay — rol sobre la foto (solo cards individuales).
   Gradient navy desde el borde inferior, rol en crema sobre fondo oscurecido. */
.ns-team__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1.1rem, 2vw, 1.8rem);
    background: linear-gradient(
        to top,
        rgba(19, 37, 60, 0.88) 0%,
        rgba(19, 37, 60, 0.48) 55%,
        transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.ns-team__role {
    font-family: var(--font-brand);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bg);
    opacity: 0.96;
    margin: 0;
}

/* Lead card — signature tipografica. Sin foto, sin silueta.
   Numeral gigante "IV" + triada de firma editorial. */
.ns-team__card--lead {
    grid-row: 1 / 3;
}

.ns-team__lead-mark {
    aspect-ratio: 9 / 16;
    background: var(--bg-accent);
    color: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.4rem, 2.5vw, 2.4rem);
    position: relative;
    overflow: hidden;
}

/* Decoracion diagonal sutil sobre el navy — eco del fondo architectural del hero */
.ns-team__lead-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
        linear-gradient(315deg, rgba(120, 183, 238, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Grano sutil local sobre el navy (refuerza la textura del site) */
.ns-team__lead-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
    z-index: 1;
}

.ns-team__lead-numeral {
    font-family: var(--font-display);
    font-size: clamp(8rem, 18vw, 14rem);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--bg);
    align-self: flex-end;
    position: relative;
    z-index: 2;
    transition: color 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.ns-team__card--lead:hover .ns-team__lead-numeral {
    color: var(--accent-deep);
    transform: translateX(-4px);
}

.ns-team__lead-triplet {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-brand);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bg);
    opacity: 0.62;
    position: relative;
    z-index: 2;
}

.ns-team__lead-triplet span {
    display: block;
}

/* ─────────────────────────────────────
   FILOSOFÍA — Editorial statement wall
   ───────────────────────────────────── */
.ns-philosophy {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

.ns-philosophy .container {
    position: relative;
    z-index: 2;
}

.ns-philosophy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-accent);
    opacity: 0.68;
    pointer-events: none;
    z-index: 0;
}

.ns-philosophy::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 1;
}

.section-media--ns-philosophy .section-media__image {
    object-position: center 40%;
}

.ns-philosophy__header {
    margin-bottom: clamp(3rem, 6vh, 5rem);
}

.ns-philosophy__header .label {
    color: var(--accent-deep);
}

.ns-philosophy__header .label::before {
    background: var(--accent-deep);
}

.ns-philosophy__header .line-accent {
    background: var(--accent-deep);
}

.ns-philosophy__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    margin-top: 0.6rem;
    letter-spacing: -0.02em;
}

/* Statement wall — horizontal rows, NOT cards */
.ns-philosophy__wall {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.ns-philosophy__statement {
    display: grid;
    grid-template-columns: minmax(200px, 340px) 1fr;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: baseline;
    padding: clamp(2rem, 4vh, 3.5rem) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.4s ease, padding-left 0.4s var(--ease-out);
}

.ns-philosophy__statement:hover {
    background: rgba(255,255,255,0.02);
    padding-left: 1.5rem;
}

.ns-philosophy__statement-head {
    display: flex;
    align-items: baseline;
    gap: clamp(0.8rem, 1.5vw, 1.5rem);
}

.ns-philosophy__num {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 300;
    color: rgba(120, 183, 238, 0.2);
    line-height: 1;
    transition: color 0.4s ease;
    flex-shrink: 0;
}

.ns-philosophy__statement:hover .ns-philosophy__num {
    color: rgba(120, 183, 238, 0.5);
}

.ns-philosophy__statement-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}

.ns-philosophy__statement-body {
    font-family: var(--font-body);
    font-size: clamp(0.84rem, 0.95vw, 0.95rem);
    color: rgba(255,255,255,0.68);
    line-height: 1.8;
    font-weight: 300;
    max-width: 520px;
    transition: color 0.4s ease;
}

.ns-philosophy__statement:hover .ns-philosophy__statement-body {
    color: rgba(255,255,255,0.88);
}

/* Hero statement — pull-quote gigante, redistribuye jerarquia.
   La primera afirmacion 'Adopcion real' domina, las otras 3 actuan como items. */
.ns-philosophy__statement--hero {
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 2.5vw, 2rem);
    padding: clamp(2.4rem, 5vh, 4rem) 0 clamp(2.8rem, 6vh, 4.5rem);
    border-bottom: 2px solid rgba(120, 183, 238, 0.25);
    max-width: 880px;
}

.ns-philosophy__statement--hero .ns-philosophy__statement-head {
    gap: clamp(1.2rem, 2vw, 2rem);
    align-items: baseline;
}

.ns-philosophy__statement--hero .ns-philosophy__num {
    font-size: clamp(3.2rem, 5.5vw, 5rem);
    color: rgba(120, 183, 238, 0.35);
    font-weight: 300;
    letter-spacing: -0.03em;
}

.ns-philosophy__statement--hero:hover .ns-philosophy__num {
    color: rgba(120, 183, 238, 0.7);
}

.ns-philosophy__statement--hero .ns-philosophy__statement-title {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.ns-philosophy__statement--hero .ns-philosophy__statement-body {
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    color: rgba(255,255,255,0.88);
    line-height: 1.55;
    max-width: 720px;
    font-weight: 300;
}

.ns-philosophy__statement--hero:hover .ns-philosophy__statement-body {
    color: rgba(255,255,255,0.96);
}

/* ─────────────────────────────────────
   CTA
   ───────────────────────────────────── */
.ns-cta {
    border-top: 1px solid var(--border);
}

.ns-cta__inner {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 9vh, 7rem) clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(56, 105, 171, 0.04) 100%);
}

.ns-cta__inner .section-media {
    z-index: 0;
}

.ns-cta__inner .section-media__image {
    opacity: 0.12;
}

.ns-cta__body {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 580px;
    margin: 0 auto;
}

.ns-cta__heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    letter-spacing: -0.02em;
}

.ns-cta__heading em {
    color: var(--accent);
    font-style: normal;
    text-decoration: underline;
    text-decoration-color: var(--crux-sand);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.4s ease;
}

.ns-cta__text {
    color: var(--text-muted);
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.ns-cta__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ns-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-family: var(--font-brand);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}

.ns-cta__btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

/* Boton primario — unico uso pleno del warm accent.
   Cierra el arco cromatico (la pagina abre fria, cierra con tension calida). */
.ns-cta__btn--primary {
    background: var(--crux-sand);
    border-color: var(--crux-sand);
    color: #fff;
}

.ns-cta__btn--primary:hover {
    background: var(--crux-sand-hover);
    border-color: var(--crux-sand-hover);
    color: #fff;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1100px) {
    .ns-story__spread {
        grid-template-columns: 1fr 320px;
    }
    /* .ns-story__island: sin override en 1100 — el base already cubre este rango */
    .ns-team__bento {
        grid-template-columns: 1fr 1fr;
    }
    .ns-team__card--lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .ns-team__lead-mark {
        aspect-ratio: 16 / 5;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: clamp(1.4rem, 2.5vw, 2.6rem) clamp(1.8rem, 3.5vw, 3rem);
    }
    .ns-team__lead-numeral {
        align-self: center;
        font-size: clamp(5rem, 12vw, 9rem);
    }
    .ns-team__lead-triplet {
        text-align: right;
        gap: 0.3rem;
    }
    .ns-team__lead-mark::after {
        background-size: 36px 36px;
    }
    .ns-philosophy__statement {
        grid-template-columns: minmax(160px, 260px) 1fr;
    }
}

@media (max-width: 900px) {
    /* Mobile/tablet — micro-colofon anclado a la misma narrativa (sin
       re-anchoring). Tamano de marca de agua (44-64 px) y opacidad
       reducida (0.18) para evitar efecto pegote. Bleed controlado al
       gap entre narrative y metricas (3rem = 48px) para no tocar ni
       texto del ultimo parrafo ni el contenedor de metricas. */
    .ns-story__island {
        right: clamp(1rem, 4vw, 2rem);
        bottom: -30px;
        width: clamp(44px, 10vw, 64px);
        opacity: 0.18;
    }
    .ns-story__spread {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .ns-story__metrics {
        border-left: none;
        border-top: 1px solid var(--border);
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .ns-story__metric {
        border-bottom: none;
        border-right: 1px solid var(--border);
    }
    .ns-story__metric:nth-child(2),
    .ns-story__metric:nth-child(4) {
        border-right: none;
    }
    .ns-story__metric:nth-child(1),
    .ns-story__metric:nth-child(2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 768px) {
    .ns-hero {
        min-height: auto;
    }

    .ns-hero__content {
        text-align: center;
        padding-top: clamp(7rem, 14vh, 10rem);
        padding-bottom: clamp(4rem, 8vh, 6rem);
    }

    .ns-hero__label {
        justify-content: center;
    }

    .ns-hero__heading .hero-line:nth-child(1) .hero-line__inner,
    .ns-hero__heading .hero-line:nth-child(2) .hero-line__inner {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
    }

    .ns-hero__heading .hero-line:nth-child(3) .hero-line__inner {
        font-size: clamp(2.4rem, 11vw, 3.5rem);
    }

    .ns-hero__sidebar {
        display: none;
    }

    .ns-manifesto__quote {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
    }

    .ns-manifesto__bg-mark {
        font-size: 12rem;
    }

    .ns-team__header {
        text-align: center;
    }

    .ns-team__header .label {
        justify-content: center;
    }

    .ns-team__lead {
        margin: 0 auto;
    }

    .ns-team__bento {
        grid-template-columns: 1fr 1fr;
    }

    .ns-team__lead-mark {
        aspect-ratio: 4 / 3;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: clamp(1.2rem, 3vw, 2rem);
    }
    .ns-team__lead-numeral {
        align-self: flex-end;
        font-size: clamp(6rem, 22vw, 11rem);
    }
    .ns-team__lead-triplet {
        text-align: left;
    }

    .ns-philosophy__statement {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .ns-philosophy__statement:hover {
        padding-left: 0.8rem;
    }

    .ns-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ns-cta__btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ns-story__metrics {
        grid-template-columns: 1fr;
    }

    .ns-story__metric {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .ns-story__metric:last-child {
        border-bottom: none;
    }

    .ns-team__bento {
        gap: 0.6rem;
    }

    .ns-team__info {
        padding: 0.7rem 0.9rem;
    }

    .ns-team__role {
        font-size: 0.58rem;
        letter-spacing: 0.2em;
    }

    .ns-team__lead-numeral {
        font-size: clamp(5rem, 26vw, 9rem);
    }

    .ns-team__lead-triplet {
        font-size: 0.62rem;
        letter-spacing: 0.2em;
    }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .ns-hero__sidebar {
        animation: none;
        opacity: 1;
    }
    .ns-hero__heading .hero-line__inner {
        animation: none;
        transform: translate(0, 0);
        opacity: 1;
    }
    .ns-team__card:hover .ns-team__photo,
    .ns-team__card:hover,
    .ns-team__card--lead:hover .ns-team__lead-numeral {
        transform: none;
    }
}