/* ─────────────────────────────────────────────────────────────
   PROFILE — /about/ and /about/ukwedje-taiwo-goodness/

   The company-profile design system: cinematic monochrome, one
   visual world. Lifted verbatim from Company_Profile.html — the
   tokens, type scale and every component rule below are unchanged
   from that document.

   Both entity pages share this file rather than inlining it twice.
   Anything appended under "SITE ADDITIONS" at the bottom is new,
   and is built from the tokens above rather than introducing any.
───────────────────────────────────────────────────────────── */

  /* ---------- reset ---------- */
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
  ul[class],ol[class]{list-style:none;margin:0;padding:0;}
  img,picture,video,canvas,svg{display:block;max-width:100%;}
  input,button,textarea,select{font:inherit;}
  h1,h2,h3,h4{font-size:inherit;font-weight:inherit;}

  /* ---------- tokens ---------- */
  :root{
    --ground:#0a0a0a;
    --surface:#111111;
    --surface-2:#161616;
    --line:rgba(255,255,255,.12);
    --line-soft:rgba(255,255,255,.06);
    --ink:#ffffff;
    --ink-2:#e8e8e8;
    --ink-3:#b0b0b0;
    --ink-4:#6a6a6a;

    --sans:"Outfit","Segoe UI Variable Display","Avenir Next","Nimbus Sans",
           system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,
           "DejaVu Sans Mono","Liberation Mono",monospace;

    --measure:74ch;
    --pad:clamp(1.25rem,4vw,3.5rem);
  }

  /* The brand is a deliberate single visual world: cinematic monochrome.
     It does not invert for light mode — it is the identity. */

  body{
    background:var(--ground);
    color:var(--ink-2);
    font-family:var(--sans);
    font-size:clamp(15px,.4vw + 14px,16.5px);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  .page{
    max-width:1080px;
    margin:0 auto;
    padding:0 var(--pad) 6rem;
  }

  /* ---------- type ---------- */
  h1,h2,h3{
    font-family:var(--sans);
    color:var(--ink);
    text-wrap:balance;
    font-weight:600;
    letter-spacing:-.02em;
    line-height:1.1;
  }
  h1{font-size:clamp(2.6rem,7vw,5.25rem);font-weight:700;letter-spacing:-.045em;}
  h2{font-size:clamp(1.4rem,2.4vw,1.95rem);}
  h3{font-size:1.02rem;letter-spacing:-.005em;}
  p{max-width:var(--measure);}

  .eyebrow{
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink-4);
  }

  .lede{
    font-size:clamp(1.08rem,1.5vw,1.3rem);
    color:var(--ink-2);
    line-height:1.55;
    max-width:56ch;
  }

  a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
  a:hover{border-bottom-color:var(--ink);}
  a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px;}

  /* ---------- masthead ---------- */
  header.mast{
    padding:clamp(4rem,11vh,8rem) 0 3rem;
    border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;gap:2.25rem;
  }
  .mark{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;}
  .mark .name{
    font-family:var(--mono);font-size:.78rem;letter-spacing:.3em;
    text-transform:uppercase;color:var(--ink);
  }
  .mark .rc{
    font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--ink-4);
  }
  .mast-foot{
    display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;
    font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-4);
    text-transform:uppercase;
  }

  .grant{
    display:inline-flex;align-items:center;gap:.7rem;
    border:1px solid var(--ink);
    padding:.5rem .95rem;
    font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);
    align-self:flex-start;
  }
  .grant .amt{font-weight:700;}

  /* ---------- sections ---------- */
  section{
    padding-top:clamp(3.5rem,7vw,5.5rem);
    display:flex;flex-direction:column;gap:1.75rem;
  }
  .sec-head{display:flex;flex-direction:column;gap:.7rem;}

  /* ---------- key facts ---------- */
  .facts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .fact{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:1.1rem 1.15rem 1.2rem;
    display:flex;flex-direction:column;gap:.35rem;
    background:var(--surface);
  }
  .fact dt{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-4);
  }
  .fact dd{
    color:var(--ink);font-size:1.28rem;font-weight:600;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;
  }
  .fact dd .unit{font-size:.8rem;color:var(--ink-3);font-weight:400;letter-spacing:0;}

  /* ---------- tracks ---------- */
  .tracks{
    display:grid;gap:1px;background:var(--line);
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    border:1px solid var(--line);
  }
  .track{background:var(--ground);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.65rem;}
  .track .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--ink-4);text-transform:uppercase;}
  .track p{font-size:.9rem;color:var(--ink-3);}

  /* ---------- portfolio ---------- */
  .group{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);}
  .group-head{
    background:var(--surface-2);padding:.75rem 1.4rem;
    display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  }
  .group-head .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
  .group-head .c{font-family:var(--mono);font-size:.66rem;color:var(--ink-4);letter-spacing:.1em;}

  .item{
    background:var(--ground);padding:1.4rem;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem 1.25rem;
    align-items:start;
    transition:background .18s ease;
  }
  .item:hover{background:var(--surface);}
  .item .title{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
  .item .title .alt{font-family:var(--mono);font-size:.64rem;color:var(--ink-4);letter-spacing:.1em;}
  .item .desc{grid-column:1/-1;font-size:.9rem;color:var(--ink-3);max-width:var(--measure);}
  .item .meta{
    grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
    font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;color:var(--ink-4);
    padding-top:.2rem;
  }
  .item .meta span{border:1px solid var(--line-soft);padding:.16rem .45rem;}

  /* Status by fill weight, not hue — the brand forbids colour drift. */
  .st{
    font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
    padding:.28rem .6rem;white-space:nowrap;line-height:1;
  }
  .st.live{background:var(--ink);color:var(--ground);font-weight:700;}
  .st.building{border:1px solid var(--ink);color:var(--ink);}
  .st.planned{border:1px dashed var(--line);color:var(--ink-4);}

  /* ---------- infra ---------- */
  .houses{
    display:grid;gap:1px;background:var(--line);
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    border:1px solid var(--line);
  }
  .house{background:var(--ground);padding:1.2rem 1.25rem;display:flex;flex-direction:column;gap:.4rem;}
  .house .h{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
  .house p{font-size:.85rem;color:var(--ink-3);}

  /* ---------- stack ---------- */
  .stack{display:flex;flex-direction:column;gap:.9rem;}
  .stack-row{
    display:grid;grid-template-columns:minmax(105px,150px) 1fr;gap:.5rem 1.5rem;
    padding-bottom:.9rem;border-bottom:1px solid var(--line-soft);
    align-items:baseline;
  }
  .stack-row:last-child{border-bottom:none;padding-bottom:0;}
  .stack-row dt{
    font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-4);
  }
  .stack-row dd{color:var(--ink-2);font-size:.92rem;}

  /* ---------- timeline ---------- */
  .tl{display:flex;flex-direction:column;border-top:1px solid var(--line);}
  .tl-row{
    display:grid;grid-template-columns:minmax(88px,110px) 1fr;
    gap:.4rem 1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--line);
    align-items:baseline;
  }
  .tl-row .when{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .tl-row .what{color:var(--ink-2);font-size:.94rem;}
  .tl-row .what em{color:var(--ink-4);font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;display:block;margin-top:.15rem;}

  /* ---------- targets ---------- */
  .targets{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:1px;background:var(--line);border:1px solid var(--line);
  }
  .target{background:var(--surface);padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;}
  .target .v{font-size:1.55rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;}
  .target .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);}

  /* ---------- internal note ----------
     This section is for internal review only.
     Delete the whole <section class="internal"> block before sending
     this file to a client, investor, or partner.                      */
  .note{
    border:1px solid var(--line);padding:1.4rem 1.5rem;
    display:flex;flex-direction:column;gap:.85rem;background:var(--surface);
  }
  .note ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.5rem;list-style:disc;}
  .note li{font-size:.89rem;color:var(--ink-3);max-width:var(--measure);}
  .note li strong{color:var(--ink-2);font-weight:600;}

  /* ---------- footer ----------
     Scoped to `.page > footer` rather than the bare element. In the
     original document this was the only footer on the page; here the
     site's own templates/footer.html sits outside .page, and this rule's
     display:flex / mono / uppercase would have flattened it. Declarations
     unchanged — only the reach is narrowed. */
  .page > footer{
    margin-top:clamp(4rem,8vw,6rem);padding-top:2rem;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:baseline;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-4);
  }

  @media (max-width:560px){
    .item{grid-template-columns:1fr;}
    .item .st{justify-self:start;}
    .stack-row,.tl-row{grid-template-columns:1fr;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;}
  }

  /* ---------- print / save-as-PDF ---------- */
  @media print{
    :root{
      --ground:#ffffff;--surface:#ffffff;--surface-2:#f2f2f2;
      --ink:#000000;--ink-2:#1a1a1a;--ink-3:#3a3a3a;--ink-4:#666666;
      --line:rgba(0,0,0,.28);--line-soft:rgba(0,0,0,.12);
    }
    body{font-size:10.5pt;}
    .page{max-width:none;padding:0;}
    header.mast{padding:0 0 1.5rem;}
    h1{font-size:30pt;}
    section{padding-top:1.6rem;break-inside:avoid;}
    .group,.item,.track,.house,.target,.tl-row,.note{break-inside:avoid;}
    .st.live{background:#000;color:#fff;}
    .internal{display:none;}   /* internal notes never print */
    a{border-bottom:none;}
  }

  /* ═══════════════════════════════════════════════════════════
     SITE ADDITIONS

     Everything above is the profile document exactly as designed.
     Everything below turns that document into a page on the site:
     the chrome it never had (announce bar, nav), the two founder-page
     components the company profile has no equivalent for, and a
     question/answer variant of the existing .stack row.

     No rule above is modified. These use the same tokens, the same
     mono/uppercase register and the same hairline borders, so the
     additions read as part of the same world rather than bolted on.
     ═══════════════════════════════════════════════════════════ */

  /* ---------- footer fence ----------
     templates/footer.html brings a complete design system of its own and
     scopes it to .footer. It resets text-decoration, because host pages
     underline links differently — but it has no reason to know about this
     document's border-bottom underline, so that one leaks through. Fence
     it out rather than editing the link rule every other page depends on. */
  .footer a{border-bottom:none;}

  /* ---------- skip link ---------- */
  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--ink);color:var(--ground);
    font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
    text-transform:uppercase;padding:.7rem 1.1rem;border-bottom:none;
  }
  .skip:focus{left:0;}

  /* ---------- announce bar ---------- */
  .announce{
    border-bottom:1px solid var(--line);
    background:var(--surface);
  }
  .announce-in{
    max-width:1080px;margin:0 auto;padding:.6rem var(--pad);
    font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3);text-align:center;
  }

  /* ---------- nav ----------
     Sticky, but only as a hairline rule with the ground behind it —
     the document still opens on its own masthead. */
  .sitenav{
    position:sticky;top:0;z-index:50;
    border-bottom:1px solid var(--line);
    background:rgba(10,10,10,.92);
    backdrop-filter:saturate(140%) blur(10px);
  }
  @supports not (backdrop-filter:blur(1px)){ .sitenav{background:var(--ground);} }

  .sitenav-in{
    max-width:1080px;margin:0 auto;padding:.85rem var(--pad);
    display:flex;align-items:center;gap:1rem 1.75rem;
  }
  .sitenav-brand{
    display:flex;align-items:center;gap:.55rem;flex-shrink:0;
    border-bottom:none;
  }
  .sitenav-brand img{width:20px;height:20px;object-fit:contain;}
  .sitenav-brand span{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;
    text-transform:uppercase;color:var(--ink);
  }

  /* The link row scrolls sideways on a narrow screen rather than
     wrapping into a second line or hiding behind a JS menu. */
  .sitenav-links{
    display:flex;align-items:center;gap:1.4rem;
    margin-left:auto;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  }
  .sitenav-links::-webkit-scrollbar{display:none;}
  .sitenav-links a{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3);
    white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:.15rem;
  }
  .sitenav-links a:hover{color:var(--ink);border-bottom-color:var(--ink);}
  .sitenav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--line);}

  /* Anchors have to clear the sticky bar. */
  section[id]{scroll-margin-top:4.5rem;}

  /* ---------- person head (founder page) ---------- */
  .person-head{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap;}
  .portrait{
    width:104px;height:104px;flex-shrink:0;
    border:1px solid var(--line);background:var(--surface);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:1.9rem;letter-spacing:.06em;
    color:var(--ink);
  }
  img.portrait{padding:0;object-fit:cover;}

  /* The name-variants line. Deliberately plain prose: it exists so the
     four spellings of the founder's name appear as rendered text, not
     only inside alternateName. */
  .aka{
    font-size:.9rem;color:var(--ink-3);max-width:var(--measure);
    border-left:1px solid var(--line);padding-left:1rem;
  }
  .aka strong{color:var(--ink-2);font-weight:600;}

  /* ---------- linkable house tile ---------- */
  a.house{border-bottom:none;transition:background .18s ease;}
  a.house:hover{background:var(--surface);}
  a.house .h{display:block;}
  a.house .go{
    font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-4);margin-top:.2rem;
  }
  a.house:hover .go{color:var(--ink);}

  /* ---------- Q&A ----------
     The same .stack row, widened: a question needs more room in the
     label column than "Languages" or "Payments" does. */
  .stack--qa .stack-row{grid-template-columns:minmax(150px,235px) 1fr;}
  .stack--qa .stack-row dt{
    color:var(--ink-2);letter-spacing:.12em;line-height:1.5;
  }
  .stack--qa .stack-row dd{color:var(--ink-3);}

  /* ---------- CTA ---------- */
  .cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
    text-transform:uppercase;padding:.85rem 1.4rem;
    border:1px solid var(--ink);cursor:pointer;border-bottom:1px solid var(--ink);
    transition:background .18s ease,color .18s ease;
  }
  .btn-solid{background:var(--ink);color:var(--ground);font-weight:700;}
  .btn-solid:hover{background:transparent;color:var(--ink);}
  .btn-line{background:transparent;color:var(--ink);}
  .btn-line:hover{background:var(--ink);color:var(--ground);}

  /* ---------- WhatsApp ----------
     An inline SVG rather than the icon font the old page pulled in —
     one render-blocking stylesheet removed for a single glyph. */
  .wa-float{
    position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
    width:48px;height:48px;border-bottom:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:var(--ground);
    transition:opacity .18s ease;
  }
  .wa-float:hover{opacity:.82;}
  .wa-float svg{width:24px;height:24px;fill:currentColor;}

  @media (max-width:560px){
    .person-head{gap:1rem;}
    .portrait{width:76px;height:76px;font-size:1.45rem;}
    .stack--qa .stack-row{grid-template-columns:1fr;}
  }

  @media print{
    .announce,.sitenav,.wa-float,.skip,.cta-actions{display:none;}
    section[id]{scroll-margin-top:0;}
    .portrait{border:1px solid rgba(0,0,0,.28);}
  }