/* =========================================================================
   Aslan redesign v2. Loaded on /redesign-v2/* and /redesign-v3/* after
   style.css and assets/redesign/redesign.css, so every --p-* token from the
   redesign is in scope. v3 adds next-v3.css on top of this file.

   The same world as the live redesign (paper, ink, green, Manrope, the lion),
   with three changes:
   1. One left edge. Section heads, grids and links share it; nothing is
      centered over a left-aligned grid.
   2. One vertical rhythm: --nx-y between sections, --nx-gap inside them.
   3. Real content in place of icon cards: stories, facts, rows.
   ========================================================================= */

:root {
    --nx-y: clamp(4rem, 8vw, 6.5rem);
    --nx-gap: clamp(1.25rem, 2.4vw, 2rem);
    --nx-head-gap: clamp(2rem, 4vw, 3rem);
    --p-blue: #28566b;
    --p-blue-deep: #1d4252;
    --p-blue-wash: #e4ecef;
}

body.next { overflow-x: clip; }
body.next main { overflow-x: clip; }
body.next img { max-width: 100%; height: auto; }
body.next h1, body.next h2, body.next h3 { text-wrap: balance; }
/* No paragraph ends on a lone word. */
body.next p, body.next dd, body.next li, body.next span { text-wrap: pretty; }

.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--p-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-md);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* The preview bar sits at the bottom so it never covers the nav. */
body.next .redesign-bar { top: auto; bottom: 14px; }

/* Header: one green action, five links. */
body.next .nav-links a { font-size: .9375rem; }
body.next .header .btn-primary { padding: .7rem 1.2rem; }

/* ---------- shared pieces ---------- */
.nx-section { padding: var(--nx-y) 0; position: relative; }
.nx-band {
    background: var(--p-white);
    border-top: 1px solid var(--p-line);
    border-bottom: 1px solid var(--p-line);
}
.nx-head { max-width: 680px; margin-bottom: var(--nx-head-gap); }
.nx-head h2 { margin: 0 0 .75rem; }
.nx-head p { font-size: 1.125rem; color: var(--p-ink-3); margin: 0; }
.nx-head-split {
    max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nx-gap);
}
.nx-head-split > div { max-width: 680px; }
.nx-head-split > .nx-link { flex-shrink: 0; margin-bottom: .35rem; }

.nx-accent { color: var(--p-accent); }

.nx-link {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 800; letter-spacing: -.01em; color: var(--p-accent); text-decoration: none;
}
.nx-link .nx-arrow { transition: transform 200ms var(--ease-out); }
.nx-link:hover .nx-arrow { transform: translateX(3px); }
.nx-arrow { flex-shrink: 0; }

.nx-art { display: block; width: 100%; height: auto; }

.nx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nx-chips a {
    display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem;
    border: 1px solid var(--p-line-2); border-radius: 999px; background: var(--p-white);
    color: var(--p-ink); font-weight: 600; font-size: .9375rem; text-decoration: none;
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.nx-chips a:hover { border-color: var(--p-accent); color: var(--p-accent-deep); background: var(--p-accent-wash); }

/* ---------- hero ---------- */
.nx-hero { padding: calc(76px + clamp(2.5rem, 6vw, 5rem)) 0 0; }
.nx-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.nx-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.02; margin: 0 0 1.5rem; max-width: 14ch; }
.nx-hero h1 .nx-accent { display: block; }
.nx-lead { font-size: clamp(1.125rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--p-ink-2); max-width: 36rem; margin: 0 0 2rem; }
.nx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.nx-hero-art { margin: 0; }
.nx-hero-lion { margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.nx-hero-lion img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; animation: nx-rise 900ms var(--ease-out) 150ms both; }
@keyframes nx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nx-hero-art .nx-art { filter: drop-shadow(0 18px 30px rgba(18, 22, 20, .12)); }
.nx-trades {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 1.25rem 0;
    border-top: 1px solid var(--p-line); color: var(--p-ink-3); font-size: .9375rem; font-weight: 600;
}

/* Inner-page hero: text only, smaller, same left edge. */
.nx-page-hero { padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) 0 clamp(2rem, 4vw, 3rem); }
.nx-page-hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.03; margin: 0 0 1.25rem; max-width: 18ch; }
.nx-page-hero .nx-lead { margin-bottom: 1.75rem; }
.nx-crumb { margin: 0 0 1.25rem; font-size: .875rem; font-weight: 600; color: var(--p-ink-3); }
.nx-crumb a { color: var(--p-ink-3); text-decoration: none; }
.nx-crumb a:hover { color: var(--p-accent); }
/* Text-only page heroes use the full width: heading left, intro and action right. */
.nx-page-hero > .container:not(.nx-page-hero-grid) {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(2rem, 6vw, 5rem); align-items: end;
}
.nx-page-hero > .container:not(.nx-page-hero-grid) > .nx-crumb { grid-column: 1 / -1; }
.nx-page-hero > .container:not(.nx-page-hero-grid) > h1 { grid-column: 1; grid-row: span 2; align-self: center; margin: 0; max-width: 12ch; }
.nx-page-hero > .container:not(.nx-page-hero-grid) > .nx-lead { grid-column: 2; margin-bottom: 1.5rem; }
.nx-page-hero > .container:not(.nx-page-hero-grid) > .nx-actions,
.nx-page-hero > .container:not(.nx-page-hero-grid) > .btn { grid-column: 2; justify-self: start; }
.nx-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* ---------- three ways in ---------- */
.nx-path-list { display: grid; }
.nx-path {
    display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--p-line);
}
.nx-path:last-child { border-bottom: 1px solid var(--p-line); }
.nx-path h3 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.nx-path p { margin: 0 0 1.1rem; color: var(--p-ink-3); max-width: 38rem; }

/* ---------- stories ---------- */
.nx-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-story {
    display: flex; flex-direction: column; gap: .85rem;
    background: var(--p-paper); border: 1px solid var(--p-line); border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.nx-band .nx-story { background: var(--p-paper); }
.nx-story-meta {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .65rem; margin: 0; min-width: 0;
    font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--p-ink-3);
}
.nx-story-meta > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-story-icon {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md);
    background: var(--p-accent-wash); color: var(--p-accent);
}
.nx-story-icon svg { width: 20px; height: 20px; }
.nx-story-status { margin-left: auto; flex-shrink: 0; white-space: nowrap; color: var(--p-ink-4); }
.nx-story-status.is-live { color: var(--p-accent); }
.nx-story-status.is-live::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; margin-right: .4rem; vertical-align: 1px;
}
.nx-story-title { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.03em; line-height: 1.2; }
.nx-story-for { margin: -.35rem 0 0; font-size: .9375rem; color: var(--p-ink-3); }
.nx-story-beats { margin: 0; display: grid; gap: .85rem; }
.nx-story-beats dt { font-size: .8125rem; font-weight: 800; color: var(--p-ink); margin: 0 0 .15rem; }
.nx-story-beats dd { margin: 0; font-size: .9688rem; line-height: 1.55; color: var(--p-ink-2); }
.nx-story .nx-link { margin-top: auto; padding-top: .35rem; font-size: .9375rem; }
.nx-story .work-points { margin: 0; padding-left: 1.1rem; color: var(--p-ink-2); }

/* Full stories on industry pages: one per row, beats side by side. */
.nx-story-list { display: grid; gap: var(--nx-gap); }
.nx-story-list .nx-story { background: var(--p-white); }
.nx-story-list .nx-story-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-gap); margin-top: .35rem; }
.nx-story-list .nx-story-beats > div { border-top: 2px solid var(--p-accent); padding-top: .85rem; }

/* ---------- why / facts / stats ---------- */
.nx-why-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nx-why-grid .nx-head { margin-bottom: 0; }
.nx-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-gap) clamp(1.5rem, 3vw, 2.5rem); }
.nx-facts > div { border-top: 2px solid var(--p-ink); padding-top: 1rem; }
.nx-facts dt { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--p-ink); }
.nx-facts dd { margin: 0; color: var(--p-ink-3); line-height: 1.55; }

.nx-stats {
    list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-gap);
}
.nx-stats li { padding: 1.5rem 0 0; border-top: 1px solid var(--p-line-2); }
.nx-stats strong {
    display: block; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em;
    color: var(--p-accent); margin-bottom: .5rem;
}
.nx-stats span { color: var(--p-ink-3); font-size: .9688rem; }

.nx-pillars { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-pillars > div { padding-top: 1.25rem; border-top: 3px solid var(--p-accent); }
.nx-pillars dt { font-weight: 800; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 .5rem; color: var(--p-ink); }
.nx-pillars dd { margin: 0; color: var(--p-ink-3); line-height: 1.55; }

/* ---------- from discovery to ownership ---------- */
.nx-steps { list-style: none; margin: 0 0 var(--nx-head-gap); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-step { position: relative; padding-right: .5rem; }
.nx-step-mark {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--p-accent); color: var(--p-on-accent); font-weight: 800; font-size: 1rem;
    box-shadow: 0 0 0 6px var(--p-paper); margin-bottom: 1.25rem;
}
.nx-band .nx-step-mark { box-shadow: 0 0 0 6px var(--p-white); }
/* The rail runs from this marker to the next one, through their centers. */
.nx-step:not(:last-child)::after {
    content: ''; position: absolute; top: 21px; left: 44px; right: calc(-1 * var(--nx-gap));
    height: 2px; background: var(--p-line-2);
}
.nx-step-when { margin: 0 0 .3rem; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--p-accent); }
.nx-step h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.nx-step p:last-child { margin: 0; color: var(--p-ink-3); font-size: .9688rem; line-height: 1.55; }

/* ---------- rows (industries, services) ---------- */
.nx-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--p-line); }
.nx-rows li { border-top: 1px solid var(--p-line); }
.nx-rows a {
    display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; gap: .5rem var(--nx-gap); align-items: center;
    padding: 1.25rem 0; text-decoration: none; color: var(--p-ink);
    transition: color 160ms var(--ease-out);
}
.nx-row-title { font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.03em; }
.nx-row-line { color: var(--p-ink-3); }
.nx-rows .nx-arrow { color: var(--p-ink-4); transition: transform 200ms var(--ease-out), color 160ms; }
.nx-rows a:hover { color: var(--p-accent-deep); }
.nx-rows a:hover .nx-arrow { color: var(--p-accent); transform: translateX(4px); }

/* ---------- people ---------- */
.nx-people-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.nx-people-grid .nx-head { margin-bottom: 0; }
.nx-people-grid .nx-head p { margin-bottom: 1.25rem; }
.nx-faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.nx-faces img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--p-paper-deep); margin-bottom: .6rem; }
.nx-faces strong { display: block; font-size: .9688rem; letter-spacing: -.02em; }
.nx-faces span { display: block; font-size: .8125rem; color: var(--p-ink-3); line-height: 1.35; }

/* ---------- closing band ---------- */
.nx-cta { background: var(--p-accent); color: var(--p-on-accent); position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.nx-cta::after {
    content: ''; position: absolute; right: -4%; top: 50%; width: min(40vw, 480px); aspect-ratio: 1; transform: translateY(-50%);
    background: url('../brand/aslan-lion-800.png') center / contain no-repeat;
    opacity: .08; pointer-events: none;
}
.nx-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--nx-gap) clamp(2rem, 5vw, 4rem); align-items: center; }
.nx-cta h2 { color: #fff; margin: 0 0 .75rem; font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; }
.nx-cta p { color: var(--p-on-accent-2); margin: 0; max-width: 34rem; font-size: 1.125rem; }
.nx-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.nx-cta .btn-primary { background: #fff; border-color: #fff; color: var(--p-accent-ink); }
.nx-cta .btn-primary:hover { background: var(--p-accent-wash); border-color: var(--p-accent-wash); color: var(--p-accent-ink); }
.nx-cta-phone { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nx-cta-phone:hover { color: #fff; }

/* ---------- services page ---------- */
.nx-group { padding: var(--nx-y) 0; border-top: 1px solid var(--p-line); }
.nx-group:first-of-type { border-top: 0; }
.nx-group-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nx-group-grid .nx-head { margin-bottom: 1.5rem; }
.nx-group-art { max-width: 340px; }
.nx-service-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--p-line); }
.nx-service-list li { border-top: 1px solid var(--p-line); }
.nx-service-list a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: center;
    padding: 1.15rem 0; text-decoration: none; color: var(--p-ink);
}
.nx-service-list strong { font-size: 1.2rem; letter-spacing: -.03em; }
.nx-service-list span { grid-column: 1; color: var(--p-ink-3); font-size: .9688rem; }
.nx-service-list .nx-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--p-ink-4); transition: transform 200ms var(--ease-out), color 160ms; }
.nx-service-list a:hover strong { color: var(--p-accent-deep); }
.nx-service-list a:hover .nx-arrow { color: var(--p-accent); transform: translateX(4px); }

/* ---------- service detail ---------- */
.nx-familiar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-familiar li {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: var(--p-ink);
    padding: 1.25rem 0 0; border-top: 2px solid var(--p-ink);
}
.nx-build { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-gap) clamp(1.5rem, 3vw, 2.5rem); }
.nx-build > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .1rem .85rem; }
.nx-build > div::before {
    content: ''; grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: .15rem; border-radius: 50%;
    background: var(--p-accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007f2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.nx-build dt { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
.nx-build dd { margin: 0; color: var(--p-ink-3); line-height: 1.55; }
.nx-two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nx-two .nx-head { margin-bottom: 0; }
.nx-faq { border-bottom: 1px solid var(--p-line); }
.nx-faq details { border-top: 1px solid var(--p-line); }
.nx-faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: 1.15rem 0; font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; color: var(--p-ink);
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after { content: '+'; font-size: 1.5rem; font-weight: 600; color: var(--p-accent); transition: transform 200ms var(--ease-out); }
.nx-faq details[open] summary::after { transform: rotate(45deg); }
.nx-faq details p { margin: 0 0 1.25rem; color: var(--p-ink-2); max-width: 44rem; }

/* ---------- about ---------- */
.nx-origin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.nx-origin p { font-size: 1.125rem; line-height: 1.65; color: var(--p-ink-2); }
.nx-origin p:first-of-type { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; color: var(--p-ink); font-weight: 600; letter-spacing: -.02em; }
.nx-team { display: grid; gap: 0; border-bottom: 1px solid var(--p-line); }
.nx-member {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--p-line);
}
.nx-member img, .nx-member-initial {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--p-paper-deep);
}
.nx-member-initial { display: grid; place-items: center; font-size: 3.5rem; font-weight: 800; color: var(--p-accent); background: var(--p-accent-wash); }
.nx-member h3 { margin: 0 0 .2rem; font-size: 1.5rem; }
.nx-member-title { margin: 0 0 .85rem; color: var(--p-accent); font-weight: 800; font-size: .9375rem; }
.nx-member-bio { margin: 0 0 .75rem; color: var(--p-ink-2); max-width: 44rem; }
.nx-member details summary { cursor: pointer; font-weight: 800; color: var(--p-accent); list-style: none; display: inline-flex; gap: .4rem; align-items: center; }
.nx-member details summary::-webkit-details-marker { display: none; }
.nx-member details[open] summary { margin-bottom: .75rem; }
.nx-member details p { margin: 0 0 .85rem; color: var(--p-ink-2); max-width: 44rem; }
.nx-member-links { display: flex; gap: 1.25rem; margin-top: .5rem; font-weight: 600; font-size: .9375rem; }

/* ---------- industries ---------- */
.nx-industry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-industry {
    display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.4rem, 2.6vw, 2rem);
    background: var(--p-white); border: 1px solid var(--p-line); border-radius: var(--radius-lg);
    text-decoration: none; color: var(--p-ink);
    transition: border-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.nx-industry:hover { border-color: var(--p-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--p-ink); }
.nx-industry h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 0; }
.nx-industry > p { margin: 0; color: var(--p-ink-3); }
.nx-industry ul { list-style: none; margin: .25rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--p-line); display: grid; gap: .45rem; }
.nx-industry li { display: flex; gap: .6rem; align-items: baseline; font-size: .9375rem; color: var(--p-ink-2); }
.nx-industry li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--p-accent); transform: translateY(-2px); }
.nx-industry .nx-link { margin-top: auto; padding-top: .5rem; }
.nx-industry:last-child:nth-child(odd) { grid-column: 1 / -1; }

.nx-heard { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-heard li {
    position: relative; padding: 1.25rem 0 0 2.1rem; border-top: 2px solid var(--p-ink);
    font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.45; color: var(--p-ink);
}
.nx-heard li::before {
    content: '\201C'; position: absolute; left: 0; top: .85rem;
    font-size: 2.6rem; line-height: 1; font-weight: 800; color: var(--p-accent);
}
.nx-empty { padding: 1.5rem; border: 1px dashed var(--p-line-2); border-radius: var(--radius-lg); color: var(--p-ink-3); }

/* ---------- footer ---------- */
.next-footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) !important; gap: clamp(2rem, 4vw, 3rem); }
.next-footer-grid .footer-brand p { max-width: 22rem; margin-bottom: 1.25rem; }
.next-footer-grid .footer-heading { font-size: .75rem; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .nx-story-grid { grid-template-columns: 1fr; }
    .nx-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .nx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
    .nx-step:nth-child(2)::after { display: none; }
    .nx-why-grid, .nx-people-grid, .nx-group-grid, .nx-two, .nx-origin { grid-template-columns: 1fr; }
    .nx-story-list .nx-story-beats { grid-template-columns: 1fr; }
    .next-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .nx-group-art { max-width: 260px; }
}

@media (max-width: 768px) {
    .nx-hero-grid, .nx-page-hero-grid { grid-template-columns: 1fr; }
    .nx-page-hero > .container:not(.nx-page-hero-grid) { grid-template-columns: 1fr; }
    .nx-page-hero > .container:not(.nx-page-hero-grid) > * { grid-column: 1 !important; grid-row: auto !important; }
    .nx-page-hero > .container:not(.nx-page-hero-grid) > h1 { margin-bottom: 1.25rem; max-width: none; }
    .nx-hero-art { max-width: 420px; }
    .nx-hero-lion { justify-self: start; max-width: 140px; order: -1; }
    .nx-pillars { grid-template-columns: 1fr; }
    .nx-head-split { display: block; }
    .nx-head-split > .nx-link { margin-top: 1rem; }
    .nx-path { grid-template-columns: 1fr; gap: 1rem; }
    .nx-path-art { max-width: 240px; }
    .nx-facts, .nx-build { grid-template-columns: 1fr; }
    .nx-stats { grid-template-columns: 1fr; gap: 0; }
    .nx-stats li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: 1.1rem 0; }
    .nx-stats strong { font-size: 2.4rem; margin: 0; }
    .nx-familiar, .nx-heard { grid-template-columns: 1fr; }
    .nx-industry-grid { grid-template-columns: 1fr; }
    .nx-rows a { grid-template-columns: minmax(0, 1fr) auto; }
    .nx-row-title { grid-column: 1; }
    .nx-row-line { grid-column: 1; font-size: .9375rem; }
    .nx-rows .nx-arrow { grid-column: 2; grid-row: 1 / span 2; }
    .nx-cta-inner { grid-template-columns: 1fr; }
    .nx-member { grid-template-columns: 96px minmax(0, 1fr); }
    .nx-member h3 { font-size: 1.3rem; }

    /* The steps go vertical: marker on the left, rail down through the markers. */
    .nx-steps { grid-template-columns: 1fr; row-gap: 0; }
    .nx-step { padding: 0 0 2rem 64px; }
    .nx-step:last-child { padding-bottom: 0; }
    .nx-step-mark { position: absolute; left: 0; top: 0; margin: 0; }
    .nx-step:not(:last-child)::after,
    .nx-step:nth-child(2)::after { display: block; top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
    .nx-step-when { padding-top: .6rem; }
}

@media (max-width: 600px) {
    .next-footer-grid { grid-template-columns: 1fr !important; }
    .nx-hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
    .nx-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .nx-hero-lion img { animation: none; }
    .nx-link .nx-arrow, .nx-rows a, .nx-industry, .nx-faq summary::after { transition: none; }
}

.nx-story-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .nx-story-grid-2 { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================
   Round 2 (2026-10-08 feedback): no lone words, no empty columns, team modal,
   book-a-call on one screen.
   ========================================================================= */

/* Short copy is balanced, so every line carries its share and none ends alone. */
body.next .nx-lead, body.next .nx-head p, body.next .nx-pillars dd, body.next .nx-facts dd,
body.next .nx-build dd, body.next .nx-story-for, body.next .nx-cta p, body.next .nx-row-line,
body.next .nx-path p, body.next .nx-member-bio, body.next .nx-faq details p, body.next .nx-trades,
body.next .nx-service-list span, body.next .nx-industry > p, body.next .nx-heard li,
body.next .nx-familiar li, body.next .nx-book-note, body.next .nx-checks li,
body.next .footer-brand p, body.next .work-cta p, body.next .hero .lead { text-wrap: balance; }

/* The live /work page under the new skin: room between the board and its close. */
body.next .work-cta { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Story: lead sentence left, the rest right. No column left empty. */
.nx-origin { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
.nx-origin-lead { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; color: var(--p-ink); text-wrap: balance; }
.nx-origin-body p, .nx-origin-body p:first-of-type { font-weight: 400; letter-spacing: normal; font-size: 1.125rem; line-height: 1.65; color: var(--p-ink-2); margin: 0 0 1rem; text-wrap: pretty; }
.nx-origin-body p:last-child { margin: 0; }

/* Where we are: heading and facts side by side, both columns full. */
.nx-where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nx-gap) clamp(2rem, 5vw, 4rem); align-items: start; }
.nx-where .nx-head { margin: 0; }

/* Services: each group's list in two columns under its heading. */
.nx-group .nx-head-split { margin-bottom: 1.25rem; }
.nx-service-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); border-bottom: 0; }
.nx-service-cols li { border-top: 1px solid var(--p-line); }
.nx-service-cols li:nth-last-child(-n+2) { border-bottom: 1px solid var(--p-line); }
.nx-service-cols li:last-child:nth-child(odd) { border-bottom: 1px solid var(--p-line); }

.nx-build-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-faq-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); border-bottom: 0; }
.nx-faq-2 details { border-bottom: 1px solid var(--p-line); border-top: 0; }
.nx-faq-2 details:nth-child(-n+2) { border-top: 1px solid var(--p-line); }

/* ---------- team cards + modal ---------- */
.nx-team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.nx-person { display: flex; flex-direction: column; }
.nx-person img, .nx-person .nx-member-initial { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--p-paper-deep); margin-bottom: 1rem; }
.nx-person h3 { margin: 0 0 .15rem; font-size: 1.25rem; }
.nx-person .nx-member-title { margin: 0 0 .65rem; font-size: .875rem; }
.nx-person .nx-member-bio { font-size: .9375rem; line-height: 1.5; margin: 0 0 .85rem; }
.nx-person .nx-bio-open { margin-top: auto; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .9375rem; }

.nx-bio {
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: min(920px, calc(100vw - 2rem)); max-height: min(86vh, 760px); padding: 0; border: 0; overflow: visible;
    border-radius: var(--radius-xl); background: var(--p-white); color: var(--p-ink); box-shadow: var(--shadow-xl);
}
.nx-bio::backdrop { background: rgba(15, 43, 25, .55); backdrop-filter: blur(4px); }
.nx-bio[open] { animation: nx-rise 260ms var(--ease-out); }
.nx-bio-body {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
    padding: clamp(1.5rem, 4vw, 2.75rem); max-height: min(86vh, 760px); overflow-y: auto; border-radius: inherit;
}
.nx-bio-body img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); position: sticky; top: 0; }
.nx-bio-body h2 { margin: 0 0 .2rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.nx-bio-body p { color: var(--p-ink-2); line-height: 1.65; margin: 0 0 1rem; text-wrap: pretty; }
.nx-bio-body .nx-member-title { color: var(--p-accent); font-weight: 800; margin-bottom: 1.25rem; }
.nx-bio-close {
    position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: var(--p-paper-deep); color: var(--p-ink); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.nx-bio-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; border: 0; cursor: pointer; background: var(--p-accent); color: #fff; box-shadow: var(--shadow-md);
    transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.nx-bio-nav:hover { background: var(--p-accent-deep); }
.nx-bio-prev { left: -76px; }
.nx-bio-next { right: -76px; }
.nx-bio-count { position: absolute; bottom: -2.25rem; left: 0; right: 0; text-align: center; margin: 0; color: #fff; font-weight: 600; font-size: .875rem; }

/* ---------- book a call ---------- */
.nx-book { padding: calc(76px + clamp(2rem, 5vw, 4rem)) 0 var(--nx-y); }
.nx-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nx-book h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.02; margin: 0 0 1.25rem; }
.nx-book h1 .nx-accent { display: block; }
.nx-book-sub { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-3); margin: 2rem 0 .75rem; }
.nx-checks { list-style: none; margin: 0; padding: 0; }
.nx-checks li { position: relative; padding: .7rem 0 .7rem 2rem; border-top: 1px solid var(--p-line); font-weight: 600; color: var(--p-ink); }
.nx-checks li::before {
    content: ''; position: absolute; left: 0; top: .9rem; width: 20px; height: 20px; border-radius: 50%;
    background: var(--p-accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007f2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.nx-book-team { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.nx-book-team ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nx-book-team li + li { margin-left: -12px; }
.nx-book-team img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--p-paper); }
.nx-book-team p { margin: 0; font-weight: 600; color: var(--p-ink-2); font-size: .9375rem; }
.nx-book-card { background: var(--p-white); border: 1px solid var(--p-line); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-lg); }
.nx-book-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 .3rem; }
.nx-book-note { margin: 0 0 1.25rem; color: var(--p-ink-3); font-size: .9375rem; }
.nx-form { display: grid; gap: .9rem; }
.nx-form .nx-book-note { margin: 0; text-align: center; }
.nx-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.nx-form label { display: block; font-weight: 700; font-size: .875rem; color: var(--p-ink); }
.nx-form label input, .nx-form label textarea { display: block; margin-top: .35rem; }
.nx-form label small { font-weight: 500; color: var(--p-ink-4); margin-left: .3rem; }
.nx-form input, .nx-form textarea {
    width: 100%; min-height: 48px; padding: .75rem .9rem; font: inherit; font-weight: 500; font-size: 1rem; color: var(--p-ink);
    background: var(--p-paper); border: 1px solid var(--p-line-2); border-radius: var(--radius-md);
}
.nx-form input:focus, .nx-form textarea:focus { outline: 0; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-mist); background: #fff; }
.nx-form .btn { width: 100%; margin-top: .25rem; }
.nx-form-error { background: #f7e3df; color: #a8231b; padding: .75rem 1rem; border-radius: var(--radius-md); font-weight: 600; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1100px) {
    .nx-bio-prev { left: .5rem; } .nx-bio-next { right: .5rem; }
    .nx-bio-nav { top: auto; bottom: -4.25rem; transform: none; }
    .nx-bio-prev { left: calc(50% - 64px); } .nx-bio-next { right: calc(50% - 64px); left: auto; }
    .nx-bio-count { bottom: -2.75rem; display: none; }
}
@media (max-width: 1024px) {
    .nx-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-build-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-book-grid, .nx-where { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .nx-origin { grid-template-columns: 1fr; }
    .nx-service-cols, .nx-faq-2, .nx-build-4 { grid-template-columns: 1fr; }
    .nx-service-cols li:nth-last-child(-n+2) { border-bottom: 0; }
    .nx-service-cols li:last-child { border-bottom: 1px solid var(--p-line); }
    .nx-faq-2 details:nth-child(2) { border-top: 0; }
    .nx-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-bio-body { grid-template-columns: 1fr; }
    .nx-bio-body img { position: static; max-width: 160px; }
    .nx-bio { max-height: 78vh; }
    .nx-bio-body { max-height: 78vh; }
    .nx-form-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Round 3: every screen. Shared fixes for the live pages shown under this
   skin, then the new components (why band, phases, pricing).
   ========================================================================= */

/* Legacy pages (guides, AI training, locations, privacy...): one left edge.
   Their centered heads sat over left-aligned content; now nothing floats. */
body.next .section-header { text-align: left; margin-left: 0; margin-right: 0; max-width: 720px; }
body.next .section-header p { margin-left: 0; margin-right: 0; }
body.next .hero { text-align: left; }
body.next .hero .hero-content, body.next .hero .container > * { margin-left: 0; margin-right: auto; text-align: left; }
body.next .hero .lead, body.next .hero p { margin-left: 0; }
body.next .hero-buttons, body.next .hero .btn-group { justify-content: flex-start; }
body.next .text-center { text-align: left; }
body.next .text-center .btn-group, body.next .text-center .hero-buttons { justify-content: flex-start; }
body.next .hero-badge { display: none; }
body.next .section-tag { display: none; }
/* Guide articles: a readable column with real space before each heading. */
body.next .article-content, body.next .resource-content, body.next .guide-content { max-width: 760px; margin-left: 0; }
body.next .article-content { margin-left: 0 !important; }
body.next .article-content h2 { margin: 3rem 0 .75rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
body.next .article-content h2:first-child { margin-top: 0; }
body.next .article-content h3 { margin: 1.75rem 0 .4rem; font-size: 1.2rem; }
body.next .article-content p, body.next .article-content li { font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
body.next .article-content ul, body.next .article-content ol { margin: .5rem 0 1rem; padding-left: 1.25rem; }

/* Industry rows: one line each, same height. */
.nx-row-title { white-space: nowrap; }
.nx-rows a { min-height: 84px; }

/* Rotating trade word in the hero. */
.nx-rotate {
    display: block; color: var(--p-accent); white-space: nowrap;
    transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.nx-rotate.is-out { opacity: 0; transform: translateY(.18em); }
.nx-hero h1 { max-width: 15ch; }

/* ---------- why band (home) ---------- */
.nx-why2 { background: var(--p-accent-ink); color: #fff; overflow: hidden; }
.nx-why2::after {
    content: ''; position: absolute; left: -10%; bottom: -30%; width: min(55vw, 640px); aspect-ratio: 1;
    background: url('../brand/aslan-lion-800.png') center / contain no-repeat;
    opacity: .05; pointer-events: none;
}
.nx-why2-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.nx-why2 h2 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.05; margin: 0 0 1.25rem; }
.nx-why2-accent { color: #6fe293; }
.nx-why2-copy p { color: rgba(238, 244, 239, .76); font-size: 1.125rem; margin: 0 0 2rem; max-width: 34rem; text-wrap: balance; }
.nx-why2 .btn-primary { background: #fff; border-color: #fff; color: var(--p-accent-ink); }
.nx-why2 .btn-primary:hover { background: var(--p-accent-wash); border-color: var(--p-accent-wash); }
.nx-why2-tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nx-why2-tiles > div {
    padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.nx-why2-tiles > div:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.nx-why2-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--p-accent); color: #fff; margin-bottom: 1.1rem; }
.nx-why2-tiles dt { color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; margin: 0 0 .4rem; }
.nx-why2-tiles dd { margin: 0; color: rgba(238, 244, 239, .72); line-height: 1.5; font-size: .9688rem; text-wrap: balance; }

/* ---------- process phases ---------- */
.nx-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nx-phase {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; border-top: 1px solid var(--p-line); position: relative;
}
.nx-phase:last-child { border-bottom: 1px solid var(--p-line); }
.nx-phase-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.nx-phase-head .nx-step-mark { margin: 0; }
.nx-phase h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0 0 .6rem; }
.nx-phase-head p:last-child { margin: 0; color: var(--p-ink-2); font-size: 1.0625rem; max-width: 36rem; text-wrap: pretty; }
.nx-phase-label { margin: 0 0 .35rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-3); }
.nx-phase .nx-checks li:first-child { border-top: 0; }

/* ---------- pricing ---------- */
.nx-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-gap); }
.nx-included li { padding: 1.25rem 0 0 2.1rem; border-top: 2px solid var(--p-ink); position: relative; }
.nx-included li::before {
    content: ''; position: absolute; left: 0; top: 1.35rem; width: 22px; height: 22px; border-radius: 50%;
    background: var(--p-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.nx-included strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.nx-included span { color: var(--p-ink-3); line-height: 1.5; text-wrap: balance; display: block; }

.nx-compare { border: 1px solid var(--p-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--p-white); }
.nx-compare-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
.nx-compare-row > span { padding: 1rem 1.25rem; border-top: 1px solid var(--p-line); color: var(--p-ink-3); }
.nx-compare-row > span:first-child { font-weight: 800; color: var(--p-ink); }
.nx-compare-row .nx-compare-us { background: var(--p-accent-wash); color: var(--p-accent-ink); font-weight: 600; }
.nx-compare-headrow > span { border-top: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--p-ink-3); }
.nx-compare-headrow .nx-compare-us { background: var(--p-accent); color: #fff; }

@media (max-width: 1024px) {
    .nx-why2-grid { grid-template-columns: 1fr; }
    .nx-included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-phase { grid-template-columns: 1fr; }
    .nx-phase-gets { padding-left: calc(44px + 1.25rem); }
}
@media (max-width: 768px) {
    .nx-row-title { white-space: normal; }
    .nx-rows a { min-height: 0; }
    .nx-why2-tiles, .nx-included { grid-template-columns: 1fr; }
    .nx-phase-gets { padding-left: 0; }
    .nx-compare-row { grid-template-columns: 1fr 1fr; }
    .nx-compare-row > span:first-child { grid-column: 1 / -1; padding-bottom: .25rem; }
    .nx-compare-row > span:not(:first-child) { border-top: 0; padding-top: .5rem; font-size: .9375rem; }
    .nx-compare-headrow > span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nx-rotate, .nx-why2-tiles > div { transition: none; } }

/* ---------- inner-page hero with a card ---------- */
.nx-hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.nx-hero-text h1 { max-width: 16ch; }
.nx-hero-text .nx-lead { max-width: 34rem; }
.nx-hero-card {
    background: var(--p-white); border: 1px solid var(--p-line); border-radius: var(--radius-xl);
    padding: clamp(1.25rem, 2.4vw, 1.75rem); box-shadow: var(--shadow-lg);
}
.nx-hero-card-label { margin: 0 0 .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-3); }
.nx-hero-card ul { list-style: none; margin: 0; padding: 0; }
.nx-hero-card li { border-top: 1px solid var(--p-line); }
.nx-hero-card li:first-child { border-top: 0; }
.nx-hero-card li > a, .nx-hero-card li > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; text-decoration: none; color: var(--p-ink); }
.nx-hc-text strong { display: block; font-size: 1rem; letter-spacing: -.015em; line-height: 1.3; }
.nx-hc-text span { display: block; font-size: .8125rem; color: var(--p-ink-3); margin-top: .15rem; text-wrap: balance; }
.nx-hero-card a .nx-arrow { color: var(--p-ink-4); transition: transform 200ms var(--ease-out), color 160ms; }
.nx-hero-card a:hover strong { color: var(--p-accent-deep); }
.nx-hero-card a:hover .nx-arrow { color: var(--p-accent); transform: translateX(3px); }
.nx-hero-card li > span:not(.nx-hc-text)::before { content: ''; flex-shrink: 0; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); }
.nx-hero-card li > span:not(.nx-hc-text) { justify-content: flex-start; }

/* Equal rows: every group has five services; rows share one height. */
.nx-service-cols li { display: flex; }
.nx-service-cols a { flex: 1; min-height: 88px; }
.nx-path { min-height: 220px; }

@media (max-width: 768px) { .nx-hero-split { grid-template-columns: 1fr; } .nx-path { min-height: 0; } .nx-service-cols a { min-height: 0; } }

/* Multi-column rows share one grid, so every title and every description
   starts on the same line whatever its length. Narrow columns wrap "pretty",
   not "balance": balance made them ragged. */
.nx-pillars, .nx-build-4, .nx-why2-tiles, .nx-included { grid-auto-rows: auto; }
.nx-pillars > div, .nx-build-4 > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: .5rem; align-content: start; }
.nx-build-4 > div { grid-template-columns: 28px minmax(0, 1fr); }
.nx-pillars dt, .nx-pillars dd, .nx-build dt, .nx-build dd { margin: 0; }
body.next .nx-pillars dd, body.next .nx-build dd, body.next .nx-facts dd, body.next .nx-why2-tiles dd, body.next .nx-included span { text-wrap: pretty; }
.nx-why2-tiles > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.nx-why2-tiles dt { align-self: end; }
@media (max-width: 1024px) {
    .nx-pillars > div, .nx-build-4 > div, .nx-why2-tiles > div { grid-row: auto; grid-template-rows: none; }
}

.nx-head { max-width: 860px; }
.nx-head-split h2:last-child { margin-bottom: 0; }
.nx-head-split { align-items: center; }

/* Legacy pages that center with inline styles (AI training, locations):
   same left edge as everything else. */
body.next main [style*="text-align: center"], body.next main [style*="text-align:center"] { text-align: left !important; }
body.next main [style*="margin: 0 auto"] { margin-left: 0 !important; }
body.next .hero .hero-content { max-width: 900px !important; }
body.next .hero h1 { text-wrap: balance; }
body.next .hero .lead { max-width: 40rem; }
body.next .hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.nx-head.nx-head-split { max-width: none; }
.nx-why2-accent { display: block; }
/* Rows: tighter. */
.nx-rows a { min-height: 0; padding: 1rem 0; }
.nx-after-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
body.next-v3 .nx-after-hero { padding-top: clamp(2.5rem, 5vw, 4rem); }
.nx-after-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
body.next-v3 .nx-after-hero { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* /work under the new skin: room under the nav, one-line intro, filters close. */
body.next .hero-work { padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) 0 clamp(1rem, 2vw, 1.5rem) !important; }
body.next .hero-work h1 { margin-bottom: .75rem; }
body.next .hero-work .lead, body.next .hero-work p { max-width: 44rem; text-wrap: pretty; }
body.next .section-work { padding-top: clamp(1rem, 2vw, 1.5rem) !important; }

/* Pricing compare: check for us, red x for subscriptions. */
.nx-compare-row .nx-yes, .nx-compare-row .nx-no { display: flex; align-items: center; gap: .65rem; }
.nx-yes::before, .nx-no::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.nx-yes::before { background-color: var(--p-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.nx-no::before { background-color: #f7e3df; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8231b' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); }
.nx-compare-row .nx-compare-them { color: #8a2a22; }
.nx-compare-headrow > span:last-child { color: #a8231b; }

/* Illustrations with their own colored backgrounds sit in rounded frames. */
.nx-path-art .nx-art, .nx-hero-art .nx-art { border-radius: var(--radius-xl); }
.nx-hero-art .nx-art { filter: none !important; box-shadow: var(--shadow-lg); }
.nx-path-art .nx-art { border: 1px solid var(--p-line); }

/* Services page: each group opens with its illustration beside the title. */
.nx-group-top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; margin-bottom: 1.5rem; }
.nx-group-top h2 { margin: 0; }
.nx-group-top .nx-group-art { max-width: none; }
.nx-group-art .nx-art { border-radius: var(--radius-lg); border: 1px solid var(--p-line); }
@media (max-width: 600px) { .nx-group-top { grid-template-columns: 1fr; } .nx-group-top .nx-group-art { max-width: 220px; } }
.nx-now .nx-story { background: var(--p-white); }

/* Industry cards open with their illustration. */
.nx-industry { padding-top: clamp(.75rem, 1.5vw, 1rem); }
.nx-industry-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: .5rem; }

/* /work under the new skin: no intro line, no NDA footnote in the stories. */
body.next .hero-work .lead, body.next .work-panel-nda { display: none; }

/* Bigger lion in the home hero. */
.nx-hero-lion { max-width: 560px; }
@media (min-width: 769px) { .nx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 768px) { .nx-hero-lion { max-width: 180px; } }

/* A lone last industry card: image beside the text, not a giant banner. */
.nx-industry:last-child:nth-child(odd) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.nx-industry:last-child:nth-child(odd) .nx-industry-art { grid-row: 1 / span 5; margin: 0; aspect-ratio: 3 / 2; }
.nx-industry:last-child:nth-child(odd) > :not(.nx-industry-art) { grid-column: 2; }
@media (max-width: 768px) { .nx-industry:last-child:nth-child(odd) { display: flex; } .nx-industry:last-child:nth-child(odd) .nx-industry-art { aspect-ratio: 16 / 9; } }

/* Tile titles wrap naturally, not balanced into odd halves. */
body.next .nx-why2-tiles dt, body.next .nx-why2-tiles dd { text-wrap: pretty; }

/* Sound familiar: three quote cards. */
.nx-familiar li {
    position: relative; border-top: 0; padding: 2.75rem 1.5rem 1.5rem; border-radius: var(--radius-lg);
    background: var(--p-white); border: 1px solid var(--p-line); box-shadow: var(--shadow-sm);
    font-size: clamp(1.1rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.4; text-wrap: pretty;
}
.nx-familiar li::before {
    content: '\201C'; position: absolute; left: 1.4rem; top: .55rem;
    font-size: 3.2rem; line-height: 1; font-weight: 800; color: var(--p-accent);
}
@media (min-width: 769px) { .nx-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.nx-hero h1 { max-width: none; }
.nx-hero-lion { max-width: 500px; }
body.next .nx-familiar li { text-wrap: pretty; }
body.next .nx-hero h1 .nx-rotate { display: block; white-space: nowrap; }
@media (max-width: 600px) { body.next .nx-hero h1 { font-size: min(10.4vw, 2.6rem); } body.next .nx-hero h1 .nx-rotate { white-space: nowrap; font-size: 1em; } }

/* Why tiles: plain top-down flow, same gaps in every tile. */
.nx-why2-tiles > div { display: block; grid-row: auto; grid-template-rows: none; }
.nx-why2-tiles dt { align-self: auto; line-height: 1.3; }
.nx-why2-icon { margin-bottom: 1rem; }

/* ---------- team portraits: cut-outs in a green frame ---------- */
.nx-portrait {
    position: relative; display: block; width: 100%; aspect-ratio: 640 / 618; overflow: hidden;
    border-radius: var(--radius-lg); isolation: isolate;
    background: radial-gradient(120% 90% at 50% 100%, #1d4a2c 0%, var(--p-accent-ink, #0f2b19) 70%);
    transition: background-color 260ms var(--ease-out);
}
.nx-portrait::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 260ms var(--ease-out);
    background: radial-gradient(120% 90% at 50% 100%, #19a34a 0%, var(--p-accent) 70%);
}
.nx-portrait::after {
    content: ''; position: absolute; right: -18%; top: -10%; width: 80%; aspect-ratio: 1; z-index: -1;
    background: url('../brand/aslan-lion-800.png') center / contain no-repeat;
    opacity: .07;
}
.nx-portrait img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
    margin: 0 !important; border-radius: 0 !important; background: none !important; aspect-ratio: auto !important;
    transform-origin: 50% 100%; transition: transform 320ms var(--ease-out);
}
.nx-portrait-photo img { object-position: center top; }
.nx-portrait-initial { display: grid; place-items: center; color: #fff; font-size: 3rem; font-weight: 800; }
a:hover .nx-portrait::before, .nx-faces li:hover .nx-portrait::before, .nx-person:hover .nx-portrait::before { opacity: 1; }
a:hover .nx-portrait img, .nx-faces li:hover .nx-portrait img, .nx-person:hover .nx-portrait img { transform: translateY(-4px) scale(1.04); }

.nx-faces .nx-portrait { margin-bottom: .6rem; }
.nx-person .nx-portrait { margin-bottom: 1rem; }
.nx-bio-body .nx-portrait { position: sticky; top: 0; }
.nx-book-team li .nx-portrait { width: 48px; height: 48px; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--p-paper); }
.nx-book-team li .nx-portrait::after { display: none; }
@media (prefers-reduced-motion: reduce) { .nx-portrait img, .nx-portrait::before { transition: none; } }
.nx-book-team li .nx-portrait img { transform: scale(1.9); transform-origin: 50% 22%; }

/* The lion is on the home hero at every size (not on the other heroes). */
.nx-hero-lion { display: block !important; }
@media (max-width: 768px) {
    .nx-hero-lion { order: -1; justify-self: start; width: 120px; max-width: 120px; margin-bottom: .5rem; }
}

/* More room from the screen edge on phones and small tablets. */
@media (max-width: 768px) {
    body.next .container { padding-left: 24px; padding-right: 24px; }
}

/* More room from the screen edge on phones and small tablets. */
@media (max-width: 768px) {
    body.next .container { padding-left: 24px; padding-right: 24px; }
}

/* Story cards side by side share their rows, so every label, title and
   paragraph starts on the same line in all three. */
@media (min-width: 1025px) {
    .nx-story-grid > .nx-story { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: 0; align-content: start; }
    .nx-story-grid > .nx-story .nx-story-beats { display: contents; }
    .nx-story-grid > .nx-story .nx-story-meta { margin-bottom: 1rem; }
    .nx-story-grid > .nx-story .nx-story-title { margin-bottom: .35rem; align-self: start; }
    .nx-story-grid > .nx-story .nx-story-for { margin: 0 0 1rem; }
    .nx-story-grid > .nx-story .nx-story-beats > div { margin-bottom: 1rem; }
    .nx-story-grid > .nx-story .nx-link { align-self: end; }
    .nx-story-grid { row-gap: 0; }
}

/* A soft green glow behind the hero lion. */
.nx-hero-lion { position: relative; isolation: isolate; }
.nx-hero-lion::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 52%;
    width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 160, 60, .30), rgba(0, 127, 42, .12) 55%, rgba(0, 127, 42, 0) 100%);
    filter: blur(8px);
    animation: nx-glow 6s ease-in-out infinite;
}
@keyframes nx-glow { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .nx-hero-lion::before { animation: none; } }
.nx-hero-lion img { mix-blend-mode: normal; }
@media (min-width: 1025px) { .nx-story-grid > .nx-story { margin-bottom: var(--nx-gap); } }

/* Featured project cards on the home page: short and even. */
@media (min-width: 1025px) {
    .nx-story-grid > .nx-story-card { grid-row: span 4; }
}
.nx-story-card .nx-story-title { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-bottom: .6rem; }
.nx-story-line { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.5; color: var(--p-ink-2); text-wrap: pretty; }

/* Featured cards: text flows under its own title; only the links align. */
.nx-story-grid > .nx-story-card { display: flex !important; flex-direction: column; grid-row: auto !important; margin-bottom: 0 !important; }
.nx-story-card .nx-story-meta { margin-bottom: 1rem; }
.nx-story-card .nx-link { margin-top: auto; padding-top: .25rem; }
@media (min-width: 1025px) { .nx-story-grid:has(.nx-story-card) { row-gap: var(--nx-gap); } }
.nx-story-card .nx-link { align-self: flex-start; margin-left: 0; }
@media (min-width: 1025px) { .nx-story-grid > .nx-story.nx-story-card .nx-link { align-self: flex-start; } }

/* Every featured title is two lines and every line two lines, so the cards
   share one rhythm: aligned, with no gap under a short title. */
.nx-story-card .nx-story-title { max-width: 13ch; line-height: 1.2; min-height: 2.4em; text-wrap: balance; }
.nx-story-card .nx-story-line { min-height: 3em; }
@media (max-width: 1024px) { .nx-story-card .nx-story-title, .nx-story-card .nx-story-line { min-height: 0; max-width: none; } }