/* =============================================================================
   NETZERO AQUA — ABOUT PAGE
   =============================================================================
   Requires na-system.css and na-blocks.css.

   Built to the Page 08 spec, which cuts About down to three questions and
   nothing else:

       WHO ARE WE?  →  WHY DO WE EXIST?  →  WHO IS BUILDING IT?

   Two deliberate departures from the spec, both about consistency with the
   rest of the site rather than disagreement with it:

   1. COLOUR. The spec names #062033, #F3F4F2 and #071D2B. Those are "dark
      navy, soft white, deep navy" — which is what --na-dark, --na-page and
      --na-dark-2 already are, to within a couple of percent. Introducing three
      near-miss hexes would make this the only page whose navy is subtly wrong
      next to every other page, which is worse than the colours being exactly
      as specified. The rhythm the spec asks for — navy, light, deep navy,
      dark footer — is followed exactly.

   2. TYPE. The spec asks for 64–88px headlines and 22–26px body. This page
      does go bigger than the rest of the site, because the spec is right that
      About should open like a statement rather than another content section —
      but it tops out at 76px rather than 88px, which is where the headline
      stops fitting the measure on a 1440px screen without breaking to four
      lines.
   ========================================================================== */

/* =============================================================================
   01 — ABOUT US
   =============================================================================
   The spec asks for 85–100vh. min() rather than a bare vh so a short laptop
   window does not force the copy into a scroll of its own, and so the section
   never grows taller than its content needs on a very tall monitor.
   ========================================================================== */

.na-ahero {
    min-height: min(92vh, 880px);
    align-content: center;
}

.na-ahero .na-phero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

/* The site-wide 40rem measure is set for a 62px headline. At 76px it breaks
   this one to five lines, so the About column gets a little more room. */
.na-ahero .na-phero__copy { max-width: 46rem; }

.na-ahero h1 {
    font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem);   /* 40 → 76px */
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin-bottom: 1.5rem;
}

.na-ahero .na-phero__lead {
    font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);  /* 18 → 22px */
    line-height: 1.6;
    max-width: 34rem;
}
.na-ahero .na-phero__lead + .na-phero__lead { margin-top: -0.5rem; }

/* ---- technology tags -------------------------------------------------------
   Rendered from a data array, per the spec. One row on desktop separated by
   middots; a wrapped set of chips once the row stops fitting.
   -------------------------------------------------------------------------- */

.na-techtags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 1.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.na-techtags li {
    position: relative;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--na-on-dark-2);
    white-space: nowrap;
}

/* The separator is a pseudo-element on the item, not a character in the
   markup — so a wrapped row never starts with an orphan middot. */
.na-techtags li + li::before {
    content: "";
    position: absolute;
    left: -0.68rem;
    top: 50%;
    width: 3px; height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: var(--na-aqua);
}

@media (max-width: 560px) {
    .na-techtags { gap: 0.5rem; }
    .na-techtags li {
        padding: 0.4rem 0.75rem;
        border-radius: var(--na-r-pill);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--na-dark-line);
        font-size: 0.6875rem;
    }
    .na-techtags li + li::before { display: none; }
}

/* ---- hero visual -----------------------------------------------------------
   The spec is explicit: cinematic, dark, premium, minimal, and NOT loaded with
   dashboard elements. So this is one photograph, one vertical chain of four
   words, and nothing else.
   -------------------------------------------------------------------------- */

.na-avisual {
    position: relative;
    border-radius: var(--na-r-lg);
    overflow: hidden;
    border: 1px solid var(--na-dark-line);
    aspect-ratio: 4 / 5;
    max-height: 620px;
    justify-self: end;
    width: 100%;
}
.na-avisual img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.na-avisual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 36, 60, 0.55) 0%, rgba(0, 24, 48, 0.88) 100%),
        radial-gradient(90% 60% at 50% 30%, rgba(76, 130, 255, 0.14), transparent 70%);
}

.na-avisual__chain {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    list-style: none;
    margin: 0;
}
.na-avisual__chain li {
    position: relative;
    font-family: var(--na-font-display);
    font-size: clamp(0.75rem, 0.65rem + 0.35vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    text-align: center;
    padding-bottom: 2.75rem;
}
.na-avisual__chain li:last-child {
    padding-bottom: 0;
    color: var(--na-aqua);
}
/* The connector between links, drawn in CSS so there is no glyph to go
   missing and no image to load. */
.na-avisual__chain li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 2.4rem);
    width: 1px;
    height: 1.9rem;
    background: linear-gradient(180deg, rgba(76, 130, 255, 0.7), rgba(76, 130, 255, 0.12));
    transform: translateX(-50%);
}

/* The pond dots that open the chain, above "Aquaculture farm". They live in
   their own link so the connector spacing stays even down the whole chain. */
.na-avisual__ponds { line-height: 0; }
.na-avisual__dots {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}
.na-avisual__dots i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(76, 130, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(76, 130, 255, 0.12);
}

/* na-blocks.css stacks .na-phero__inner at 1024px, but it does so with a
   single-class selector — which the two-column rule above outranks, media
   query or not. The stack has to be restated here or the About hero keeps its
   desktop columns all the way down to 360px, breaking the headline mid-word. */
@media (max-width: 1024px) {
    .na-ahero .na-phero__inner { grid-template-columns: 1fr; }
    .na-ahero .na-phero__copy { max-width: 40rem; }
    .na-avisual { justify-self: stretch; aspect-ratio: 16 / 10; max-height: 380px; }

    /* The box gets shorter but the chain does not, so the last link falls out
       of the bottom. Tighten the links to match. */
    .na-avisual__chain li { padding-bottom: 1.75rem; }
    .na-avisual__chain li:not(:last-child)::after {
        top: calc(100% - 1.55rem);
        height: 1.15rem;
    }
}

/* =============================================================================
   02 — WHY WE EXIST
   =============================================================================
   The Intelligence Gap. One vertical argument with a hinge in the middle:
   everything above Netzero AQUA is the problem and is drawn muted; everything
   below is the resolution and is drawn in full contrast. That contrast IS the
   diagram — without it this is just a list of words with arrows.
   ========================================================================== */

.na-gap {
    display: grid;
    justify-items: center;
    gap: 0;
    max-width: 40rem;
    margin-inline: auto;
    margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    text-align: center;
}

.na-gap__node {
    position: relative;
    font-family: var(--na-font-display);
    font-size: clamp(0.8125rem, 0.72rem + 0.4vw, 0.9375rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-ink-3);
    padding: 0.75rem 1.5rem;
    border-radius: var(--na-r-pill);
    background: var(--na-surface);
    border: 1px solid var(--na-line);
}

/* The problem half. Progressively quieter as visibility drops — the diagram
   dims as the farm's picture of itself dims. */
.na-gap__node--start { color: var(--na-ink); }
.na-gap__node--dim   { color: var(--na-ink-3); opacity: 0.78; }
.na-gap__node--dimmer{ color: var(--na-ink-3); opacity: 0.6; border-style: dashed; }

/* The resolution half. */
.na-gap__node--lit {
    color: var(--na-ink);
    border-color: var(--na-aqua-deep);
    box-shadow: 0 6px 20px rgba(76, 130, 255, 0.18);
}

.na-gap__arrow {
    width: 1px;
    height: 2rem;
    background: linear-gradient(180deg, var(--na-line-2), var(--na-line));
    position: relative;
}
.na-gap__arrow::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 6px; height: 6px;
    border-right: 1px solid var(--na-line-2);
    border-bottom: 1px solid var(--na-line-2);
    transform: translate(-50%, 1px) rotate(45deg);
}

/* The three-way branch: water, feed, energy. */
.na-gap__branch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.na-gap__branch span {
    font-family: var(--na-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--na-ink-3);
    padding: 0.3rem 0.75rem;
    border-radius: var(--na-r-pill);
    border: 1px dashed var(--na-line-2);
}

/* The hinge. A full-width rule above and below, exactly as the spec draws it. */
.na-gap__hinge {
    width: 100%;
    margin: 1.75rem 0;
    padding: 1.25rem 1rem;
    border-block: 2px solid var(--na-aqua-deep);
    background: linear-gradient(180deg, rgba(76, 130, 255, 0.10), transparent);
}
.na-gap__hinge b {
    display: block;
    font-family: var(--na-font-display);
    font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--na-ink);
}

/* The three outcomes. */
.na-gap__out {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}
.na-gap__out li {
    font-family: var(--na-font-display);
    font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1.0625rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--na-ink);
    padding: 0.6rem 1.125rem;
    border-radius: var(--na-r-pill);
    background: var(--na-aqua-wash);
    border: 1px solid rgba(76, 130, 255, 0.34);
}

/* =============================================================================
   03 — OUR TEAM
   =============================================================================
   Name, role, one line of expertise, LinkedIn. The spec's rule is explicit:
   no long biographies, no spinning cards.
   ========================================================================== */

.na-team__intro {
    max-width: 40rem;
    font-size: var(--na-t-lead);
    color: var(--na-on-dark-2);
}

/* ---- shared photo treatment ---- */

.na-face {
    position: relative;
    overflow: hidden;
    background: var(--na-dark-3);
    border-radius: var(--na-r);
}
.na-face img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--na-slow) var(--na-ease);
}

/* No photograph yet: a monogram rather than a grey silhouette. It reads as
   "not added" rather than as a person who declined to be shown. */
.na-face--initials {
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(76, 130, 255, 0.16), transparent 60%),
        var(--na-dark-3);
    border: 1px dashed var(--na-dark-line-2);
}
.na-face--initials span {
    font-family: var(--na-font-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    /* Was 0.72 while this blue was the lighter #80A6FF (4.10:1 composited).
       Pulling the hue back to the wordmark took the same alpha down to
       2.98:1, under the 3.0 floor large text needs, so the alpha comes up to
       hold the ratio rather than the number being left where it looked
       right. 3.65:1 on the card. */
    color: rgba(76, 130, 255, 0.88);
}

/* ---- leadership card ---- */

.na-lead {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    border-radius: var(--na-r-lg);
    background: var(--na-dark-3);
    border: 1px solid var(--na-dark-line);
}
.na-lead .na-face { aspect-ratio: 4 / 5; max-height: 420px; }

.na-lead__role {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--na-aqua);
    margin-bottom: 0.6rem;
}
.na-lead h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    margin-bottom: 0.4rem;
}
.na-lead__title {
    display: block;
    font-size: var(--na-t-lead);
    color: #fff;
    margin-bottom: 1rem;
}
.na-lead p { color: var(--na-on-dark-2); max-width: 34rem; }

@media (max-width: 760px) {
    .na-lead { grid-template-columns: 1fr; }
    .na-lead .na-face { aspect-ratio: 16 / 11; max-height: 300px; }
}

/* ---- member cards ---- */

.na-member {
    display: block;
    text-decoration: none;
    color: inherit;
}
.na-member .na-face { aspect-ratio: 1 / 1; }

/* Hover: the image lifts slightly and a wash carries the expertise line and
   the LinkedIn cue. Subtle, and it does not move the card. */
.na-face__over {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 1rem;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 24, 48, 0.92) 100%);
    opacity: 0;
    transition: opacity var(--na-normal) var(--na-ease);
}
.na-member:hover .na-face img,
.na-member:focus-visible .na-face img { transform: scale(1.05); }
.na-member:hover .na-face__over,
.na-member:focus-visible .na-face__over { opacity: 1; }

.na-face__over em {
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}
.na-face__over b {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--na-aqua);
}

.na-member__name {
    display: block;
    font-family: var(--na-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin-top: 1rem;
}
.na-member__role {
    display: block;
    font-size: 0.8125rem;
    color: var(--na-on-dark-3);
    margin-top: 0.15rem;
}

/* Touch devices have no hover, so the expertise line would never be seen.
   It sits under the name instead. */
@media (hover: none) {
    .na-face__over { display: none; }
    .na-member__expertise { display: block; }
}
.na-member__expertise {
    display: none;
    font-size: 0.8125rem;
    color: var(--na-on-dark-2);
    margin-top: 0.4rem;
}

/* Four across, two across, and no further. A member card is a photo, a name
   and a role — at one per row it turns the section into a long scroll of
   portraits, which is exactly what the spec asks this page not to be. */
@media (max-width: 640px) {
    .na-team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* A placeholder entry is marked on the page, not just in the data file. */
.na-team__note { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }