/* ===========================================================================
   knowco.co — the company site. One stylesheet for every page.

   Copied from knowco-site/page.css (the usmap.knowco.co content pages) so the
   two sites read as one company, then trimmed to what these pages use and
   extended with the hero, the project cards and the 404 block. Deliberately a
   copy, not a shared file: each site deploys on its own.

   No inline styles anywhere: the server's Content-Security-Policy has no
   'unsafe-inline', so a style="" attribute would simply not apply.
   =========================================================================== */

:root {
    --bg:        #0f172a;
    --bg-deep:   #0b1120;
    --surface:   #1e293b;
    --border:    rgba(255, 255, 255, 0.08);
    --accent:    #3b82f6;
    --text:      #e2e8f0;
    --text-hi:   #ffffff;
    --muted:     #94a3b8;
    /* Dimmer than --muted, but still AA on both dark grounds: 5.16 on the
       footer's #0b1120 and 4.89 on the header's #0f172a. #64748b was 3.96. */
    --muted-dim: #7787a0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                 Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Links use a lighter blue than --accent. #3b82f6 clears 4.5 on the page
   ground (4.85) but not on the .summary panel's #1e293b (3.98), and a link
   color that depends on which box it lands in is a color waiting to fail.
   #60a5fa passes both: 7.02 and 5.75. --accent stays as-is for button grounds,
   where the text on top is white. */
a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Inside running text a link must be findable without color - someone who
   cannot distinguish the blue from the grey around it has nothing else to go
   on. Navigation and the footer are exempt: their position and grouping
   already say they are links. */
.page-body p a,
.page-body li a,
.summary a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.container { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ navbar */

.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10000;
    height: 64px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar .container {
    max-width: 1200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand mark: a folded paper map in three blues, inline so it costs no
   request — the site makes no external requests at all, and the logo should
   not be the exception. */
.navbar-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.navbar-logo:hover { text-decoration: none; opacity: 0.88; }
.logo-mark { display: block; flex: none; }
.logo-word {
    color: var(--text-hi);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.logo-tld { color: var(--accent); }

.navbar-links { display: flex; gap: 28px; list-style: none; align-items: center; }
/* #a1adc0 rather than #94a3b8. The navbar is translucent, so the effective
   background is whatever the page has behind it - on pricing that composites to
   #333a4a, where #94a3b8 lands at 4.44 and just misses. This clears it on the
   lightest ground any page produces (5.02) and is better everywhere else. */
.navbar-links a { color: #a1adc0; font-size: 0.9rem; }
.navbar-links a:hover { color: var(--text-hi); text-decoration: none; }

.nav-cta {
    background: #2563eb;
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s;
}
.nav-cta:hover { background: #1d4ed8; }

/* Menu toggle — hidden until the links no longer fit. */
.navbar-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    margin: -10px -10px -10px 0;
    cursor: pointer;
    color: var(--text-hi);
}
.navbar-toggle svg { display: block; }

@media (max-width: 640px) {
    /* The links used to be hidden here with nothing to replace them, which
       left "Get Started" as the only way out of the page. They collapse into
       a toggle now. */
    .navbar-toggle { display: block; }

    .navbar-links {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #0f172a;
        border-bottom: 1px solid var(--border);
        padding: 8px 0 14px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .navbar-links.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
    .navbar-links li { display: block; }
    .navbar-links a {
        display: block;
        padding: 13px 24px;
        font-size: 1rem;
        color: var(--text);
    }
    .navbar-links .nav-cta {
        margin: 10px 24px 0;
        text-align: center;
        border-radius: 8px;
    }
}

/* -------------------------------------------------------------------- page */

.page-header {
    padding: 128px 0 40px;
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-hi);
    font-weight: 700;
}

.page-header .lede {
    margin-top: 14px;
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 60ch;
}

.page-header .updated {
    margin-top: 20px;
    font-size: 0.82rem;
    color: var(--muted-dim);
}

/* Postal address: set apart from the prose it sits in, and kept out of the
   normal paragraph rhythm so it reads as a block rather than a sentence. */
.page-body .address {
    margin: 4px 0 20px;
    padding-left: 14px;
    border-left: 3px solid var(--line, #e2e8f0);
    font-style: normal;
    line-height: 1.55;
    color: var(--muted, #64748b);
}

.page-body { padding: 44px 0 88px; }

.page-body h2 {
    font-size: 1.3rem;
    color: var(--text-hi);
    margin: 44px 0 14px;
    letter-spacing: -0.015em;
    font-weight: 650;
}
.page-body h2:first-child { margin-top: 0; }
/* Deep links land under the fixed navbar without this. */
.page-body h2[id] { scroll-margin-top: 88px; }

.page-body h3 {
    font-size: 1.02rem;
    color: var(--text-hi);
    margin: 28px 0 10px;
    font-weight: 620;
}

.page-body p { margin-bottom: 16px; }
.page-body ul, .page-body ol { margin: 0 0 16px 22px; }
.page-body li { margin-bottom: 9px; }

.page-body strong { color: var(--text-hi); font-weight: 620; }

/* A short, plain-English summary above the formal text. */
.summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin-bottom: 36px;
}
.summary p:last-child { margin-bottom: 0; }
.summary h2 { margin-top: 0; font-size: 1rem; }

/* ------------------------------------------------------------------ footer */

.footer {
    background: var(--bg-deep);
    padding: 40px 0;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.footer-copy { color: var(--muted-dim); font-size: 0.85rem; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--muted-dim); font-size: 0.85rem; }
.footer-links a:hover { color: var(--muted); text-decoration: none; }

@media (max-width: 560px) {
    .footer-inner { flex-direction: column; text-align: center; }
    /* Six links wrap to two rows on a phone; without this the second row
       sits flush left under a centered first row. */
    .footer-links { justify-content: center; }
}

/* ------------------------------------------------------------------- hero */

.hero {
    padding: 136px 0 56px;
    border-bottom: 1px solid var(--border);
}
.hero h1 {
    font-size: clamp(2.1rem, 5.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--text-hi);
    font-weight: 750;
    max-width: 20ch;
}
.hero .lede {
    margin-top: 18px;
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 58ch;
}
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}
.btn:hover { background: #1d4ed8; text-decoration: none; }
/* The .page-body p a underline rule outranks bare .btn on specificity. */
.page-body p a.btn { text-decoration: none; }
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.3); }

/* Sections deep-linked from the navbar land under the fixed bar without this. */
.page-body section[id] { scroll-margin-top: 88px; }

/* --------------------------------------------------------------- projects */

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 20px 0 8px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.card h3 { margin: 0; font-size: 1.1rem; color: var(--text-hi); }
.card p  { margin: 0; color: var(--muted); font-size: 0.95rem; flex: 1; }
.card-link { font-weight: 600; font-size: 0.92rem; }
.card-link::after { content: " \2197"; }

@media (max-width: 640px) {
    .cards { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- not found */

.notfound { padding: 160px 0 120px; text-align: center; }
.notfound h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    color: var(--text-hi);
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}
.notfound p { color: var(--muted); margin-bottom: 24px; }