/* =============================================================================
   NETZERO AQUA — SHARED PAGE BLOCKS
   =============================================================================
   Requires css/na-system.css. Loaded by every page.

   The components here appear on two or more pages. Two rules keep this file
   from turning into a junk drawer:

     · A block moves in here the first time a second page needs it — not
       before, on speculation, and never by copy-paste into a page file.
     · A block that turns out to be page-specific after all moves back out.

   Contents
     A  inner-page hero                 every page except home
     B  process / journey steps         platform, bluesat, shrimp, carbon
     C  stats band                      home, projects
     D  dashboard panel and its parts   home, bluesat, shrimp, carbon
     E  impact metrics                  home, climate, shrimp
     F  project cards                   home, projects
     G  partner cards                   home, climate, shrimp, carbon
     H  closing CTA band                every page
     I  comparison table                bluesat, carbon
     J  radial gauges                   bluesat, shrimp
     K  architecture / flow diagrams    platform, bluesat, carbon, projects
     L  feature grid                    platform, shrimp, carbon
   ========================================================================== */

/* =============================================================================
   A — INNER-PAGE HERO
   =============================================================================
   Shorter than the home hero and always dark, so the transparent header has
   ground on every page. Two shapes: a copy column beside a graphic
   (.na-phero--split, the default) or centred copy alone.
   ========================================================================== */

.na-phero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--na-dark);
    color: #fff;
    padding-top: calc(var(--na-header-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
    padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.na-phero__media { position: absolute; inset: 0; z-index: -2; }
/* The photograph behind an inner hero is now the night aerial, which is
   already dark where the copy sits and bright only out to the right. It was
   being held at 55% under two near-opaque washes, which threw away the whole
   picture. It runs almost at full strength; the washes keep their job of
   grounding the header and the copy column, and give up the rest. */
.na-phero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 58% 64%;
    opacity: 0.92;
}
.na-phero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 36, 60,.78) 0%, rgba(0, 36, 60,.28) 44%, rgba(0, 24, 48,.92) 100%),
        linear-gradient(96deg, rgba(0, 36, 60,.94) 0%, rgba(0, 36, 60,.60) 52%, rgba(0, 36, 60,.14) 100%),
        radial-gradient(120% 90% at 82% 30%, rgba(76, 130, 255,.16) 0%, transparent 62%);
}

/* ---- centred heroes ----
   The two rules above are built around a hero whose copy sits in a LEFT-hand
   column: object-position pushes the frame down and right, away from the text,
   and the 96deg wash sits at 0.94 alpha down the left edge to hold that column.

   .na-phero--center puts the copy in the middle instead, and every centred
   hero runs the centre-composed photograph (img/site/projects-hero.webp —
   horizon across the middle, ponds running to both edges, sunrise at the far
   left). Against that pairing the inherited rules are actively wrong: the
   frame lands on the near bank, and the heaviest part of the wash falls on the
   sunrise, which is the one warm thing in the picture, while the copy in the
   middle gets the thinnest cover.

   So the centred variant re-aims both. Centre the frame; keep the vertical
   grounding, because the header at the top and the fold at the bottom do carry
   text; and pool the cover in the middle where the copy actually is. */

.na-phero--center .na-phero__media img {
    object-position: 50% 50%;
}

.na-phero--center .na-phero__media::after {
    background:
        /* top holds the glass header, bottom holds the fold */
        linear-gradient(180deg,
            rgba(0, 36, 60, .82) 0%,
            rgba(0, 36, 60, .30) 40%,
            rgba(0, 36, 60, .34) 60%,
            rgba(0, 24, 48, .94) 100%),
        /* an even centre pool, so the centred copy has a ground of its own
           without either edge being flattened */
        radial-gradient(78% 62% at 50% 52%,
            rgba(0, 36, 60, .62) 0%,
            rgba(0, 36, 60, .30) 55%,
            transparent 100%),
        /* the brand tint, moved off the right shoulder to the centre to match */
        radial-gradient(120% 90% at 50% 34%,
            rgba(76, 130, 255, .12) 0%, transparent 62%);
}

/* The same instrument grid as the home hero, so the pages feel like one site. */
.na-phero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(110% 80% at 72% 42%, #000 10%, transparent 70%);
    mask-image: radial-gradient(110% 80% at 72% 42%, #000 10%, transparent 70%);
    pointer-events: none;
}

.na-phero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}
.na-phero--center .na-phero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}
.na-phero--center .na-eyebrow { justify-content: center; }
.na-phero--center .na-btns { justify-content: center; }

.na-phero__copy { max-width: 40rem; }

.na-phero h1 {
    font-size: clamp(2.25rem, 1.7rem + 2.8vw, 3.875rem);
    /* The same pairing as the home hero: logo green carries the sentence, the
       <em> carries the logo blue. 7.97:1 on this ground.

       This rule is scoped to .na-phero and must stay that way. #3BD304
       measures 2.00:1 on white — it fails on every light section on these
       same pages. Green is legible here only because .na-phero is always
       dark (see the background declaration at the top of this block). Do not
       lift it to a bare `h1`. */
    color: var(--na-lime);
    letter-spacing: -0.032em;
    line-height: 1.04;
    margin-bottom: 1.125rem;
}
.na-phero h1 em { font-style: normal; color: var(--na-aqua); }
.na-phero h1 sup { font-size: 0.4em; top: -0.9em; }

.na-phero__lead {
    font-size: var(--na-t-lead);
    color: var(--na-on-dark-2);
    max-width: 36rem;
    margin-bottom: 2rem;
}
.na-phero--center .na-phero__lead { margin-inline: auto; }

@media (max-width: 1024px) {
    .na-phero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .na-phero .na-btns .na-btn { width: 100%; }
}

/* ---- Trust / ecosystem strip under a hero ---- */
.na-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 1.25rem 0;
}
.na-trust li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--na-on-dark-2);
}
.na-trust svg { width: 16px; height: 16px; color: var(--na-aqua); flex: none; }

/* =============================================================================
   C — STATS BAND
   ========================================================================== */

.na-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--na-dark-line);
    border: 1px solid var(--na-dark-line);
    border-radius: var(--na-r);
    overflow: hidden;
}

.na-stat {
    background: var(--na-dark);
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) 1.5rem;
    text-align: center;
}

.na-stat__value {
    display: block;
    font-family: var(--na-font-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: #fff;
    margin-bottom: 0.5rem;
}
.na-stat__value .na-suffix { color: var(--na-aqua); }

.na-stat__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
}

@media (max-width: 720px) {
    .na-stats { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   D — DASHBOARD PANEL
   =============================================================================
   Built from real markup rather than a screenshot: it stays sharp at any
   density, reflows on a phone, and the same components can move into the
   product later. Every value in it is illustrative and is labelled as such
   under the panel.
   ========================================================================== */

/* The panel sits one step LIGHTER than the section it floats on (--na-dark on
   --na-dark-2), which is what separates it from the page without a drop
   shadow doing all the work. */
.na-dash {
    background: var(--na-dark);
    border: 1px solid var(--na-dark-line);
    border-radius: var(--na-r-lg);
    box-shadow: var(--na-shadow-xl);
    overflow: hidden;
    color: var(--na-on-dark);
}

.na-dash__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--na-dark-line);
    font-size: 0.8125rem;
}
.na-dash__dots { display: flex; gap: 6px; }
.na-dash__dots i {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}
.na-dash__title {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.na-dash__farm {
    margin-left: auto;
    color: var(--na-on-dark-3);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* ---- KPI row ---- */
.na-dash__kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--na-dark-line);
    border-bottom: 1px solid var(--na-dark-line);
}
.na-dash__kpi {
    background: var(--na-dark);
    padding: 1.125rem 1.25rem;
}
.na-dash__kpi b {
    display: block;
    font-family: var(--na-font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.na-dash__kpi > span {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    margin-top: 0.25rem;
}
.na-dash__kpi--score b { color: var(--na-aqua); }

/* Five KPIs instead of four. A modifier rather than an inline style: an
   inline grid-template-columns outranks every media query below it, which is
   exactly how this row ended up 528px wide on a 390px phone. */
.na-dash__kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .na-dash__kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .na-dash__kpis,
    .na-dash__kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .na-dash__kpis,
    .na-dash__kpis--5 { grid-template-columns: 1fr; }
}

/* ---- Body: map | charts | alerts ---- */
.na-dash__body {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.95fr;
    gap: 1px;
    background: var(--na-dark-line);
}
.na-dash__pane {
    background: var(--na-dark);
    padding: 1.25rem;
    min-width: 0;
}

.na-dash__paneHead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
}
.na-dash__paneHead b {
    margin-left: auto;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.75rem;
    color: var(--na-on-dark-2);
}

/* Two panes rather than three: a wide map beside its alert list. */
.na-dash__body--map { grid-template-columns: 1.45fr 1fr; }

@media (max-width: 1000px) {
    .na-dash__body { grid-template-columns: 1fr 1fr; }
    .na-dash__pane--alerts { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .na-dash__body--map { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .na-dash__body { grid-template-columns: 1fr; }
}

/* ---- Pond map ---- */
.na-pondmap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.na-pond {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: 6px;
    border: 1px solid currentColor;
    background: currentColor;
    display: grid;
    place-items: center;
    font-family: var(--na-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
}
.na-pond span {
    color: #fff;
    mix-blend-mode: normal;
    opacity: 0.92;
}
.na-pond--ok       { color: color-mix(in srgb, var(--na-ok) 42%, transparent); }
.na-pond--watch    { color: color-mix(in srgb, var(--na-watch) 42%, transparent); }
.na-pond--risk     { color: color-mix(in srgb, var(--na-risk) 48%, transparent); }
.na-pond--critical { color: color-mix(in srgb, var(--na-critical) 55%, transparent); }
.na-pond--nodata   { color: rgba(255, 255, 255, 0.07); }

/* The one pond the alerts panel is talking about. A ring, not a colour
   change, so status and selection never compete. */
.na-pond.is-flagged {
    box-shadow: 0 0 0 1.5px var(--na-critical), 0 0 18px rgba(220, 74, 69, 0.45);
}

.na-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.875rem;
    margin-top: 1rem;
    font-size: 0.6875rem;
    color: var(--na-on-dark-3);
    list-style: none;
    padding: 0;
}
.na-legend li { display: flex; align-items: center; gap: 0.4em; }
.na-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ---- Health meters ---- */
.na-meters { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.na-meter__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
}
.na-meter__row > span { color: var(--na-on-dark-2); }
.na-meter__row b {
    font-family: var(--na-font-display);
    font-size: 1rem;
    font-weight: 600;
}
.na-meter__track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.na-meter__fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--na-aqua-deep), var(--na-aqua));
    /* Width is set inline from the metrics file; the transition runs once,
       when the panel first enters the viewport. */
    width: 0;
    transition: width 1.1s var(--na-ease);
}
.na-meter--blue .na-meter__fill {
    background: linear-gradient(90deg, var(--na-blue-deep), var(--na-blue));
}

/* ---- Trend chart ---- */
.na-chart { display: block; width: 100%; height: auto; }
.na-chart__line {
    fill: none;
    stroke: var(--na-aqua);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.na-chart__area { fill: url(#naChartFill); }
.na-chart__grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.na-chart__dot  { fill: var(--na-aqua); }

.na-chart__axis {
    display: flex;
    justify-content: space-between;
    font-family: var(--na-font-mono);
    font-size: 0.625rem;
    color: var(--na-on-dark-3);
    margin-top: 0.5rem;
}

/* ---- Alerts ---- */
.na-alerts { display: grid; gap: 0.625rem; list-style: none; margin: 0; padding: 0; }
.na-alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--na-dark-line);
    border-left-width: 3px;
}
.na-alert--critical { border-left-color: var(--na-critical); }
.na-alert--watch    { border-left-color: var(--na-watch); }
.na-alert--ok       { border-left-color: var(--na-ok); }

.na-alert__body { min-width: 0; }
.na-alert b {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.na-alert span {
    display: block;
    font-size: 0.75rem;
    color: var(--na-on-dark-3);
    line-height: 1.45;
}

.na-carbon {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: rgba(76, 130, 255, 0.09);
    border: 1px solid rgba(76, 130, 255, 0.24);
}
.na-carbon > span {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    margin-bottom: 0.3rem;
}
.na-carbon b {
    font-family: var(--na-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--na-aqua);
    letter-spacing: -0.02em;
}
.na-carbon em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--na-on-dark-2);
    margin-left: 0.3em;
}

/* =============================================================================
   E — IMPACT METRICS
   ========================================================================== */

.na-impact__item {
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem) 1.25rem;
    text-align: center;
    border-radius: var(--na-r);
    border: 1px solid var(--na-line);
    background: var(--na-surface);
}
.na-impact__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    font-family: var(--na-font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--na-ink);
}
.na-impact__dir {
    font-size: 0.5em;
    font-weight: 700;
    margin-left: 0.22em;
}
.na-impact__dir--up   { color: var(--na-ok); }
.na-impact__dir--down { color: var(--na-blue); }
.na-impact__label {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: var(--na-ink-2);
}

/* =============================================================================
   F — PROJECT CARDS
   ========================================================================== */

.na-project {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.na-project__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--na-dark-3);
}
.na-project__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--na-slow) var(--na-ease);
}
.na-project:hover .na-project__media img { transform: scale(1.05); }

.na-project__status {
    position: absolute;
    top: 0.875rem; left: 0.875rem;
    z-index: 1;
    background: rgba(0, 24, 48, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0.35em 0.7em;
    border-radius: var(--na-r-pill);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}
.na-project__status i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--na-watch);
}
.na-project__status--dev      i { background: var(--na-blue); }
.na-project__status--planning i { background: var(--na-nodata); }

.na-project__body {
    padding: 1.375rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.na-project__place {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--na-ink-3);
    margin-bottom: 0.4rem;
    display: block;
}
.na-project__body h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.na-project__meta {
    list-style: none;
    margin: 0.75rem 0 0;
    /* pushes the table and CTA to the card floor so a row aligns */
    margin-top: auto;
    padding: 0.875rem 0 0;
    border-top: 1px solid var(--na-line);
    display: grid;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--na-ink-2);
}
.na-project__meta li { display: flex; justify-content: space-between; gap: 1rem; }
.na-project__meta b { font-weight: 600; color: var(--na-ink); text-align: right; }
.na-project__body .na-link { margin-top: 1.125rem; }

/* =============================================================================
   G — PARTNER CARDS
   =============================================================================
   The specification is blunt: do not display an organisation's logo without a
   genuine relationship. So this renders as named, described relationships the
   company can stand behind, and the logo wall waits for permissions.
   ========================================================================== */

.na-partners__note {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--na-ink-3);
}

.na-partner {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem 1.25rem;
    border: 1px dashed var(--na-line-2);
    border-radius: var(--na-r);
    background: var(--na-surface);
    text-align: center;
    align-items: center;
}
.na-partner span {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-aqua-text);
}
.na-partner b {
    font-family: var(--na-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--na-ink);
}
.na-partner em {
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--na-ink-3);
}

/* =============================================================================
   H — CLOSING CTA BAND
   ========================================================================== */

.na-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--na-dark);
    color: #fff;
    text-align: center;
}
.na-cta__media { position: absolute; inset: 0; z-index: -2; }
.na-cta__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 60%;
}
.na-cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 36, 60, 0.92), rgba(0, 24, 48, 0.96)),
        radial-gradient(80% 120% at 50% 0%, rgba(76, 130, 255, 0.22), transparent 60%);
}

.na-cta h2 {
    font-size: var(--na-t-h1);
    max-width: 22ch;
    margin-inline: auto;
}
.na-cta p {
    font-size: var(--na-t-lead);
    color: var(--na-on-dark-2);
    max-width: 40rem;
    margin: 0 auto 2.25rem;
}
.na-cta .na-btns { justify-content: center; }

@media (max-width: 480px) {
    .na-cta .na-btns .na-btn { width: 100%; }
}

/* =============================================================================
   B — PROCESS / JOURNEY STEPS
   =============================================================================
   The spec asks for the same shape on four pages: a numbered sequence that
   must read as ONE journey, not as N independent cards. What does that work is
   the connector — a hairline that runs between the step markers and stops at
   the last one — plus arrowheads that all point the same way.

   Horizontal on desktop, vertical on mobile, from one block of markup:

       <ol class="na-flow na-flow--5">
         <li class="na-flow__step"> <span class="na-flow__dot">01</span> … </li>
   ========================================================================== */

.na-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
    counter-reset: naflow;
}
.na-flow--3 { grid-template-columns: repeat(3, 1fr); }
.na-flow--4 { grid-template-columns: repeat(4, 1fr); }
.na-flow--5 { grid-template-columns: repeat(5, 1fr); }
.na-flow--6 { grid-template-columns: repeat(6, 1fr); }
.na-flow--7 { grid-template-columns: repeat(7, 1fr); }

.na-flow__step { position: relative; padding-top: 0.25rem; }

.na-flow__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--na-dark);
    border: 1px solid var(--na-dark-line-2);
    color: var(--na-aqua);
    font-family: var(--na-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    transition: background var(--na-normal) var(--na-ease),
                transform var(--na-normal) var(--na-ease),
                box-shadow var(--na-normal) var(--na-ease);
}
.na-section--light .na-flow__dot,
.na-section--white .na-flow__dot {
    background: var(--na-surface);
    border-color: var(--na-line-2);
    color: var(--na-aqua-text);
}

.na-flow__step:hover .na-flow__dot {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px var(--na-aqua-glow);
}

/* The connector. Drawn from each marker to the next, and suppressed on the
   last step so the line does not run off into nothing. */
.na-flow__step::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 44px;
    right: calc(-1 * clamp(1rem, 0.6rem + 1.4vw, 1.75rem));
    height: 1px;
    background: linear-gradient(90deg, var(--na-dark-line-2), rgba(255,255,255,.08));
}
.na-section--light .na-flow__step::before,
.na-section--white .na-flow__step::before {
    background: linear-gradient(90deg, var(--na-line-2), var(--na-line));
}
.na-flow__step:last-child::before { display: none; }

.na-flow h3 {
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.na-flow p {
    font-size: 0.875rem;
    color: var(--na-ink-2);
    margin: 0;
}
.na-section--dark .na-flow p,
.na-section--deep .na-flow p { color: var(--na-on-dark-2); }

.na-flow__kpi {
    display: block;
    margin-top: 0.625rem;
    font-family: var(--na-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--na-aqua-text);
}
.na-section--dark .na-flow__kpi,
.na-section--deep .na-flow__kpi { color: var(--na-aqua); }

@media (max-width: 1100px) {
    .na-flow--5, .na-flow--6, .na-flow--7 { grid-template-columns: repeat(3, 1fr); }
    .na-flow--4 { grid-template-columns: repeat(2, 1fr); }
    /* On a wrapped grid the horizontal connector lies about the order, so it
       goes away rather than pointing at the wrong neighbour. */
    .na-flow__step::before { display: none; }
}
@media (max-width: 720px) {
    .na-flow--3, .na-flow--4, .na-flow--5,
    .na-flow--6, .na-flow--7 { grid-template-columns: 1fr; }

    /* Vertical: the connector returns, now running down the left gutter. */
    .na-flow { gap: 0; }
    .na-flow__step {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 1rem;
        padding-bottom: 1.75rem;
    }
    .na-flow__dot { margin-bottom: 0; grid-row: 1 / span 3; }
    .na-flow__step::before {
        display: block;
        top: 44px;
        bottom: 0;
        left: 21px;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, var(--na-dark-line-2), rgba(255,255,255,.06));
    }
    .na-section--light .na-flow__step::before,
    .na-section--white .na-flow__step::before {
        background: linear-gradient(180deg, var(--na-line-2), var(--na-line));
    }
    .na-flow__step:last-child { padding-bottom: 0; }
}

/* ---- B2. Vertical data-flow chain -----------------------------------------
   Satellite → Data → AI → Insight → Alert → Decision. A compact stack used
   inside a panel, where .na-flow would be too heavy. */

.na-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    text-align: center;
}
.na-chain li {
    position: relative;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--na-dark-line);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--na-on-dark-2);
    margin-bottom: 1.5rem;
}
.na-chain li:last-child { margin-bottom: 0; }
.na-chain li:last-child::after { display: none; }

/* The arrow between links, drawn in CSS so there is no glyph to go missing. */
.na-chain li::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 1.5rem;
    background: var(--na-dark-line-2);
    transform: translateX(-50%);
}
.na-chain li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 1rem);
    width: 6px; height: 6px;
    border-right: 1px solid var(--na-aqua);
    border-bottom: 1px solid var(--na-aqua);
    transform: translateX(-50%) rotate(45deg);
}
.na-chain li:last-child::before { display: none; }

.na-chain li.is-hub {
    background: rgba(76, 130, 255, 0.12);
    border-color: rgba(76, 130, 255, 0.34);
    color: var(--na-aqua);
}

/* =============================================================================
   R — RADIAL CYCLE
   =============================================================================
   Six labelled nodes on a ring around a core. Used for the six climate levers
   and for the carbon-intelligence cycle. The point of drawing it as a ring
   rather than a row is the argument it makes: these are one system, and the
   last one leads back to the first.
   Six nodes on a ring around a core. Each node is placed by rotating it out
   from the centre and then counter-rotating its contents so the text stays
   upright — one --a custom property per node, no per-node coordinates to
   maintain.
   -------------------------------------------------------------------------- */

.na-circle {
    position: relative;
    aspect-ratio: 1;
    width: min(100%, 460px);
    margin-inline: auto;
}

.na-circle__ring {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(76, 130, 255, 0.28);
}
.na-circle__ring::after {
    content: "";
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.na-circle__core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 1rem;
    background: radial-gradient(circle at 50% 35%,
                rgba(76, 130, 255, 0.22), rgba(0, 36, 60, 0.9) 70%);
    border: 1px solid rgba(76, 130, 255, 0.34);
}
.na-circle__core b {
    display: block;
    font-family: var(--na-font-display);
    font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 1rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: #fff;
}
.na-circle__core span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--na-aqua);
}

/* Placed by explicit --x/--y percentages OF THE CONTAINER rather than by
   rotate+translate. A percentage inside translate() resolves against the
   element's own box, not its parent, so the rotate-and-push approach put every
   node at 1.58 label-heights from the centre — which is not a circle, and in
   practice landed the top label inside the core. Six fixed angles do not need
   trigonometry at runtime; the six coordinate pairs are in the markup. */
.na-circle__node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 30%;
    transform: translate(-50%, -50%);
}
.na-circle__label {
    display: block;
    text-decoration: none;
    padding: 0.55rem 0.4rem 0.6rem;
    border-radius: 12px;
    background: rgba(0, 24, 48, 0.78);
    border: 1px solid var(--na-dark-line);
    text-align: center;
    transition: border-color var(--na-normal) var(--na-ease),
                transform var(--na-normal) var(--na-ease),
                background var(--na-normal) var(--na-ease);
}
.na-circle__node:hover .na-circle__label,
.na-circle__node:focus-within .na-circle__label {
    border-color: var(--na-aqua);
    background: rgba(76, 130, 255, 0.14);
    transform: scale(1.06);
}
.na-circle__label b {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-aqua);
}
/* The number, not a tagline: at this size a three-word description wrapped to
   three lines and made the ring illegible. The descriptions are on the cards
   below, where there is room to read them. */
.na-circle__label span {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--na-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    color: var(--na-on-dark-3);
}

/* Below 720px the ring stops being legible — the labels overlap and the core
   text shrinks past readable. It becomes a plain two-column list, which says
   the same thing without pretending to be a diagram. */
@media (max-width: 720px) {
    .na-circle {
        aspect-ratio: auto;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }
    .na-circle__ring { display: none; }
    .na-circle__core {
        position: static;
        transform: none;
        width: auto;
        aspect-ratio: auto;
        grid-column: 1 / -1;
        border-radius: var(--na-r);
        padding: 1rem;
    }
    .na-circle__node { position: static; transform: none; width: auto; }
    .na-circle__label { height: 100%; }
}

/* =============================================================================
   I — COMPARISON TABLE
   =============================================================================
   "Traditional vs BlueSat", "Before vs After". A real <table> so it is
   readable by a screen reader and copy-pasteable, restyled to look like two
   columns of cards, and turned into stacked pairs on a phone.
   ========================================================================== */

.na-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    border: 1px solid var(--na-line);
    border-radius: var(--na-r);
    overflow: hidden;
    background: var(--na-surface);
}
.na-section--dark .na-compare,
.na-section--deep .na-compare {
    background: var(--na-dark-3);
    border-color: var(--na-dark-line);
}

.na-compare th, .na-compare td {
    padding: 0.9rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--na-line);
    vertical-align: top;
}
.na-section--dark .na-compare th,
.na-section--dark .na-compare td,
.na-section--deep .na-compare th,
.na-section--deep .na-compare td { border-bottom-color: var(--na-dark-line); }

.na-compare tr:last-child th,
.na-compare tr:last-child td { border-bottom: 0; }

.na-compare thead th {
    font-family: var(--na-font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-ink-3);
    background: var(--na-surface-2);
}
.na-section--dark .na-compare thead th,
.na-section--deep .na-compare thead th {
    background: rgba(255,255,255,.03);
    color: var(--na-on-dark-3);
}

/* The right-hand column is ours, so it carries the aqua edge and the weight. */
.na-compare .na-compare__ours {
    background: var(--na-aqua-wash);
    font-weight: 600;
    color: var(--na-ink);
    box-shadow: inset 1px 0 0 rgba(76, 130, 255, 0.28);
}
.na-section--dark .na-compare .na-compare__ours,
.na-section--deep .na-compare .na-compare__ours {
    background: rgba(76, 130, 255, 0.08);
    color: #fff;
}
.na-compare tbody th {
    font-weight: 500;
    color: var(--na-ink-2);
}
.na-section--dark .na-compare tbody th,
.na-section--deep .na-compare tbody th { color: var(--na-on-dark-2); }

@media (max-width: 640px) {
    .na-compare, .na-compare tbody, .na-compare tr,
    .na-compare th, .na-compare td { display: block; }
    .na-compare thead { display: none; }
    .na-compare tr { border-bottom: 1px solid var(--na-line); padding: 0.5rem 0; }
    .na-compare tr:last-child { border-bottom: 0; }
    .na-compare th, .na-compare td { border: 0; padding: 0.35rem 1.25rem; }
    .na-compare tbody th { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
    /* Without the header row the reader loses which column is which, so each
       cell names its own column. */
    .na-compare td::before {
        content: attr(data-col) " · ";
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--na-ink-3);
    }
    .na-compare .na-compare__ours { box-shadow: none; border-radius: 8px; margin: 0 1rem; }
}

/* =============================================================================
   J — RADIAL GAUGE
   =============================================================================
   An SVG ring whose dash offset is set from a data attribute. Deliberately
   not a canvas: it scales, it prints, and it costs no JavaScript to draw —
   only to animate.
   ========================================================================== */

.na-gauges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}
/* One per row, for a narrow side column. */
.na-gauges--stack { grid-template-columns: 1fr; }

.na-gauge { text-align: center; }
.na-gauge svg { width: 100%; max-width: 116px; margin-inline: auto; display: block; }
.na-gauge__track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 8; }
.na-section--light .na-gauge__track,
.na-section--white .na-gauge__track { stroke: var(--na-line); }

.na-gauge__bar {
    fill: none;
    stroke: var(--na-aqua);
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    /* circumference of r=50 is 314.16; JS sets the offset on entry */
    stroke-dasharray: 314.16;
    stroke-dashoffset: 314.16;
    transition: stroke-dashoffset 1.2s var(--na-ease);
}
.na-gauge--watch .na-gauge__bar { stroke: var(--na-watch); }
.na-gauge--risk  .na-gauge__bar { stroke: var(--na-risk); }
.na-gauge--high  .na-gauge__bar { stroke: var(--na-critical); }

.na-gauge__value {
    font-family: var(--na-font-display);
    font-size: 26px;
    font-weight: 600;
    fill: currentColor;
    text-anchor: middle;
    letter-spacing: -0.02em;
}
.na-gauge__of {
    font-family: var(--na-font-body);
    font-size: 11px;
    fill: currentColor;
    opacity: 0.55;
    text-anchor: middle;
}
.na-gauge__label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
}
.na-section--light .na-gauge__label,
.na-section--white .na-gauge__label { color: var(--na-ink-3); }

.na-gauge__state {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.15rem;
    color: var(--na-aqua);
}
.na-gauge--watch .na-gauge__state { color: var(--na-watch-text); }
.na-gauge--risk  .na-gauge__state { color: var(--na-risk-text); }
.na-gauge--high  .na-gauge__state { color: var(--na-critical-text); }

/* =============================================================================
   K — ARCHITECTURE DIAGRAMS
   =============================================================================
   Three-column data-sources → engine → outputs, and the stacked layer tower.
   Both are markup rather than images: they stay sharp, they reflow, and the
   copy inside them is text a search engine can read.
   ========================================================================== */

.na-arch {
    display: grid;
    grid-template-columns: 1fr auto 1.15fr auto 1fr;
    gap: 0;
    align-items: stretch;
}

.na-arch__col {
    background: var(--na-dark-3);
    border: 1px solid var(--na-dark-line);
    border-radius: var(--na-r);
    padding: 1.5rem 1.25rem;
}
.na-arch__col--engine {
    background: linear-gradient(180deg, rgba(76, 130, 255,.10), rgba(76, 130, 255,.03));
    border-color: rgba(76, 130, 255, 0.28);
}

.na-arch h3 {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    margin-bottom: 1rem;
}
.na-arch__col--engine h3 { color: var(--na-aqua); }

.na-arch ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.na-arch li {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--na-dark-line);
    font-size: 0.8125rem;
    color: var(--na-on-dark-2);
}
.na-arch__col--engine li {
    background: rgba(76, 130, 255,.10);
    border-color: rgba(76, 130, 255,.22);
    color: #fff;
    text-align: center;
    font-weight: 500;
}

.na-arch__foot {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px dashed rgba(76, 130, 255,.34);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--na-on-dark-3);
}

/* The arrow columns between the three panels. */
.na-arch__arrow {
    display: grid;
    place-items: center;
    padding-inline: 0.75rem;
    color: var(--na-aqua);
}
.na-arch__arrow svg { width: 24px; height: 24px; }

@media (max-width: 940px) {
    .na-arch { grid-template-columns: 1fr; gap: 0; }
    .na-arch__arrow { padding: 0.75rem 0; transform: rotate(90deg); }
}

/* ---- K2. Stacked intelligence tower --------------------------------------- */

.na-tower {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
    perspective: 1200px;
}
.na-tower li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.125rem;
    border-radius: 12px;
    background: linear-gradient(100deg, rgba(76, 130, 255,.13), rgba(76, 130, 255,.03));
    border: 1px solid rgba(76, 130, 255, 0.24);
    color: #fff;
    transition: transform var(--na-normal) var(--na-ease),
                border-color var(--na-normal) var(--na-ease),
                box-shadow var(--na-normal) var(--na-ease);
}
.na-tower li:hover {
    transform: translateX(6px);
    border-color: var(--na-aqua);
    box-shadow: var(--na-glow);
}
.na-tower__n {
    font-family: var(--na-font-mono);
    font-size: 0.75rem;
    color: var(--na-aqua);
    flex: none;
}
.na-tower__t {
    font-family: var(--na-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.na-tower__s {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--na-on-dark-3);
    text-align: right;
}

/* Each layer sits slightly narrower than the one above, so the stack reads as
   depth rather than as a list. Not applied below 640px, where the inset would
   eat the text. */
@media (min-width: 641px) {
    .na-tower li:nth-child(1) { margin-inline: 0 3rem; }
    .na-tower li:nth-child(2) { margin-inline: 0.75rem 2.25rem; }
    .na-tower li:nth-child(3) { margin-inline: 1.5rem 1.5rem; }
    .na-tower li:nth-child(4) { margin-inline: 2.25rem 0.75rem; }
    .na-tower li:nth-child(5) { margin-inline: 3rem 0; }
}

/* ---- K3. Radial hub: a centre with labelled satellites -------------------- */

.na-hub {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}
.na-hub__core {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.25rem;
    border-radius: var(--na-r);
    background: linear-gradient(180deg, rgba(76, 130, 255,.16), rgba(76, 130, 255,.04));
    border: 1px solid rgba(76, 130, 255,.34);
}
.na-hub__core b {
    display: block;
    font-family: var(--na-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--na-aqua);
    letter-spacing: 0.02em;
}
.na-hub__core span {
    font-size: 0.75rem;
    color: var(--na-on-dark-2);
}
.na-hub__node {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--na-dark-line);
    transition: border-color var(--na-normal) var(--na-ease),
                transform var(--na-normal) var(--na-ease);
}
.na-hub__node:hover {
    border-color: var(--na-dark-line-2);
    transform: translateY(-3px);
}
.na-hub__node b {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-aqua);
    margin-bottom: 0.2rem;
}
.na-hub__node span { font-size: 0.8125rem; color: var(--na-on-dark-2); }

@media (max-width: 420px) { .na-hub { grid-template-columns: 1fr; } }

/* =============================================================================
   L — FEATURE GRID
   =============================================================================
   The compact capability card used for 6- and 8-up grids. Lighter than
   .na-card: an icon, a title, two lines, no CTA.
   ========================================================================== */

.na-feat {
    padding: 1.375rem 1.25rem;
    border-radius: var(--na-r);
    border: 1px solid var(--na-line);
    background: var(--na-surface);
    transition: transform var(--na-normal) var(--na-ease),
                border-color var(--na-normal) var(--na-ease),
                box-shadow var(--na-normal) var(--na-ease);
}
.na-feat:hover {
    transform: translateY(-3px);
    border-color: var(--na-aqua-deep);
    box-shadow: var(--na-shadow);
}
.na-section--dark .na-feat,
.na-section--deep .na-feat {
    background: var(--na-dark-3);
    border-color: var(--na-dark-line);
}
.na-section--dark .na-feat:hover,
.na-section--deep .na-feat:hover {
    border-color: var(--na-dark-line-2);
    box-shadow: var(--na-glow);
}
.na-feat .na-ico { width: 38px; height: 38px; margin-bottom: 0.875rem; }
.na-feat .na-ico svg { width: 18px; height: 18px; }
.na-feat h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.na-feat p { font-size: 0.875rem; color: var(--na-ink-2); margin: 0; }
.na-section--dark .na-feat p,
.na-section--deep .na-feat p { color: var(--na-on-dark-2); }

/* ---- L2. Benefit card with a headline figure ------------------------------ */

.na-benefit {
    padding: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    border-radius: var(--na-r);
    border: 1px solid var(--na-line);
    background: var(--na-surface);
}
.na-section--dark .na-benefit,
.na-section--deep .na-benefit {
    background: var(--na-dark-3);
    border-color: var(--na-dark-line);
}
.na-benefit__value {
    display: block;
    font-family: var(--na-font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--na-aqua-text);
    margin-bottom: 0.625rem;
}
.na-section--dark .na-benefit__value,
.na-section--deep .na-benefit__value { color: var(--na-aqua); }
.na-benefit h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.na-benefit p { font-size: 0.875rem; color: var(--na-ink-2); margin: 0; }
.na-section--dark .na-benefit p,
.na-section--deep .na-benefit p { color: var(--na-on-dark-2); }

/* =============================================================================
   M — SPLIT PANEL
   =============================================================================
   Image on one side, a data panel on the other. Used by the featured project
   and the "what you get" blocks.
   ========================================================================== */

.na-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-radius: var(--na-r-lg);
    overflow: hidden;
    border: 1px solid var(--na-dark-line);
    background: var(--na-dark-3);
}
.na-split__media { position: relative; min-height: 320px; }
.na-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.na-split__body { padding: clamp(1.75rem, 1.3rem + 2vw, 3rem); color: #fff; }

.na-split__facts {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--na-dark-line);
    border: 1px solid var(--na-dark-line);
    border-radius: var(--na-r-sm);
    overflow: hidden;
}
.na-split__facts li { background: var(--na-dark-3); padding: 0.875rem 1rem; }
.na-split__facts b {
    display: block;
    font-family: var(--na-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.na-split__facts span {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    margin-top: 0.2rem;
}

@media (max-width: 860px) {
    .na-split { grid-template-columns: 1fr; }
    .na-split__media { min-height: 220px; }
}

/* =============================================================================
   N — BEFORE / AFTER
   =============================================================================
   Two states with the improvement between them. The spec asks for a draggable
   slider; a drag reveal needs two photographs of the SAME farm before and
   after, which do not exist yet. Until they do this is the honest version:
   two labelled columns with the deltas down the middle, which carries the
   same argument and does not pretend to a comparison we cannot evidence.
   ========================================================================== */

.na-ba {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
    align-items: start;
}

.na-ba__side {
    border-radius: var(--na-r);
    border: 1px solid var(--na-line);
    background: var(--na-surface);
    overflow: hidden;
}
.na-section--dark .na-ba__side,
.na-section--deep .na-ba__side {
    background: var(--na-dark-3);
    border-color: var(--na-dark-line);
}
.na-ba__side img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.na-ba__inner { padding: 1.25rem; }
.na-ba__side h3 { font-size: 1.0625rem; margin-bottom: 0.75rem; }

.na-ba__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.na-ba__list li { display: flex; gap: 0.6em; align-items: baseline; color: var(--na-ink-2); }
.na-section--dark .na-ba__list li { color: var(--na-on-dark-2); }
.na-ba__list li::before { content: "✕"; color: var(--na-critical); font-size: 0.8em; flex: none; }
.na-ba__side--after .na-ba__list li::before { content: "✓"; color: var(--na-ok); }

.na-ba__deltas {
    align-self: center;
    display: grid;
    gap: 0.5rem;
    min-width: 180px;
}
.na-ba__delta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.875rem;
    border-radius: var(--na-r-pill);
    background: var(--na-aqua-wash);
    border: 1px solid rgba(76, 130, 255, 0.24);
    font-size: 0.8125rem;
}
.na-section--dark .na-ba__delta,
.na-section--deep .na-ba__delta { background: rgba(76, 130, 255,.08); }
.na-ba__delta span { color: var(--na-ink-2); }
.na-section--dark .na-ba__delta span { color: var(--na-on-dark-2); }
.na-ba__delta b {
    font-family: var(--na-font-display);
    font-weight: 600;
    color: var(--na-aqua-text);
    white-space: nowrap;
}
.na-section--dark .na-ba__delta b,
.na-section--deep .na-ba__delta b { color: var(--na-aqua); }

@media (max-width: 940px) {
    .na-ba { grid-template-columns: 1fr; }
    .na-ba__deltas { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* =============================================================================
   O — DONUT CHART
   =============================================================================
   Emissions by source. One SVG, segments drawn with stroke-dasharray so no
   library is needed and the legend stays real text.
   ========================================================================== */

.na-donut {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
    align-items: center;
}
.na-donut svg { width: 180px; height: 180px; flex: none; }
.na-donut__seg { fill: none; stroke-width: 22; }
.na-donut__hole {
    font-family: var(--na-font-display);
    text-anchor: middle;
    fill: currentColor;
}
.na-donut__hole tspan.v { font-size: 20px; font-weight: 600; }
.na-donut__hole tspan.l { font-size: 9px; opacity: 0.6; letter-spacing: 0.12em; }

.na-donut__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.na-donut__key li {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 0.65rem;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--na-on-dark-2);
}
.na-donut__key i { width: 10px; height: 10px; border-radius: 3px; }
.na-donut__key b { font-family: var(--na-font-mono); font-weight: 500; color: #fff; }

@media (max-width: 520px) {
    .na-donut { grid-template-columns: 1fr; justify-items: center; }
    .na-donut__key { width: 100%; }
}

/* =============================================================================
   P — TIMELINE
   =============================================================================
   Scaling ladder and project timelines. A vertical rail with markers.
   ========================================================================== */

.na-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
    height: 220px;
}
.na-ladder li {
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, rgba(76, 130, 255,.16), rgba(76, 130, 255,.02));
    border: 1px solid rgba(76, 130, 255,.22);
    border-bottom: 0;
}
.na-ladder li:nth-child(1) { height: 42%; }
.na-ladder li:nth-child(2) { height: 54%; }
.na-ladder li:nth-child(3) { height: 66%; }
.na-ladder li:nth-child(4) { height: 78%; }
.na-ladder li:nth-child(5) { height: 90%; }
.na-ladder li:nth-child(6) { height: 100%; }
.na-ladder b {
    display: block;
    font-family: var(--na-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.na-ladder span {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    margin-top: 0.2rem;
}
/* Wrapped onto two rows the stepped heights stop meaning anything, and the
   fixed container height clips them. Both go. */
@media (max-width: 760px) {
    .na-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
    .na-ladder li { height: auto !important; border-radius: 12px; border-bottom: 1px solid rgba(76, 130, 255,.22); }
}
@media (max-width: 420px) {
    .na-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   Q — PHONE MOCKUP
   ========================================================================== */

.na-phone {
    width: 232px;
    margin-inline: auto;
    border-radius: 30px;
    padding: 10px;
    background: var(--na-dark-2);
    border: 1px solid var(--na-dark-line);
    box-shadow: var(--na-shadow-xl);
}
.na-phone__screen {
    border-radius: 22px;
    background: var(--na-dark);
    border: 1px solid var(--na-dark-line);
    padding: 1rem 0.875rem 1.25rem;
    color: #fff;
}
.na-phone__brand {
    font-family: var(--na-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--na-aqua);
    text-align: center;
    margin-bottom: 1rem;
}

/* =============================================================================
   S — SOLUTION CARDS
   ========================================================================== */

.na-sol {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.na-sol__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--na-dark-3);
}
.na-sol__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--na-slow) var(--na-ease);
}
.na-sol--hoverable:hover .na-sol__media img { transform: scale(1.05); }

.na-sol__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 36, 60, 0.05) 0%,
        rgba(0, 36, 60, 0.55) 100%);
}

.na-sol__tag {
    position: absolute;
    z-index: 1;
    left: 1rem; right: 1rem; bottom: 0.875rem;
    font-family: var(--na-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}
.na-sol__tag sup { font-size: 0.55em; top: -0.7em; }

.na-sol__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}
.na-sol__body h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.na-sol__body p  { flex: 1; }
.na-sol__body .na-link { margin-top: 0.75rem; }


/* =============================================================================
   THE POSTER FIGURE — .na-figure
   =============================================================================
   For the branded overview graphics: Smart Aquaculture Farm, Climate-Smart
   Shrimp, the RAS/Biofloc demonstration, the processing digital twin.

   These are not photographs. They are posters, and their content — the process
   flow, the icon captions, the KPI labels — is TEXT BAKED INTO PIXELS. That has
   two consequences this component exists to handle:

     1. It does not survive being shrunk. In a 380px card slot the labels are
        about three pixels tall. So the figure spans the content column and the
        image is never cropped: `height: auto` on a 3:2 source, no object-fit,
        no aspect-ratio box. What the designer drew is what renders.

     2. It does not survive a screen reader, a translation tool, or a search
        engine. So every use carries a real <figcaption> holding the points that
        matter, and a descriptive alt. The caption is not decoration — it is the
        accessible copy of the poster, and a figure added without one is a
        regression, not a shortcut.

   The frame is an <a> to the image file itself. On a phone that is the only way
   to read the small type, and it needs no JavaScript to work.
   ========================================================================== */

.na-figure {
    margin: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 0;
}

.na-figure__frame {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--na-r-lg);
    border: 1px solid var(--na-dark-line);
    background: var(--na-dark-3);
    line-height: 0;                      /* kills the inline-image gap */
    transition: border-color var(--na-normal) var(--na-ease),
                box-shadow var(--na-normal) var(--na-ease);
}

.na-figure__frame:hover,
.na-figure__frame:focus-visible {
    border-color: var(--na-dark-line-2);
    box-shadow: 0 18px 44px rgba(0, 24, 48, 0.28);
}

.na-figure__frame:focus-visible {
    outline: 2px solid var(--na-aqua);
    outline-offset: 3px;
}

/* No aspect-ratio box and no object-fit: the poster sets its own height and is
   never cropped. See note 1 above. */
.na-figure__frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* The affordance that the poster can be opened at full size. Sits over the
   image rather than below it, so it costs no vertical space on a phone, where
   it matters most. */
.na-figure__zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--na-r-pill, 999px);
    background: rgba(0, 24, 48, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-family: var(--na-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;                /* the whole frame is the target */
}

.na-figure__zoom svg { width: 13px; height: 13px; }

.na-figure figcaption {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    max-width: 75ch;
}

/* The caption inherits its colour from the section, so one component reads
   correctly on the light, white, dark and deep grounds alike. */
.na-section--light .na-figure figcaption,
.na-section--white .na-figure figcaption { color: var(--na-ink-2, #475569); }

.na-section--dark .na-figure figcaption,
.na-section--deep .na-figure figcaption { color: var(--na-on-dark-3); }

/* A qualifier on a figure whose numbers are not yet measured. Used on the
   processing digital twin: the plant is at concept stage, and the site's rule
   is that figures stay targets until validated data exists. */
.na-figure__note {
    display: inline-block;
    margin-right: 0.45rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(180, 83, 9, 0.12);
    border: 1px solid rgba(180, 83, 9, 0.32);
    color: #B45309;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.na-section--dark .na-figure__note,
.na-section--deep .na-figure__note {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.4);
    color: #FCD34D;
}

@media (max-width: 640px) {
    .na-figure__zoom { right: 0.5rem; bottom: 0.5rem; font-size: 0.7rem; }
    .na-figure figcaption { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
    .na-figure__frame { transition: none; }
}