/* Cyber Serenity Consulting — cyberserenityconsulting.com
   Palette and monospace identity carry over from the CSC logo: green on black.
   Body copy is set in a system sans for readability at small sizes; monospace
   is reserved for chrome (nav, eyebrows, labels, buttons) so it stays a
   signature rather than a legibility tax. No web fonts — nothing loads from a
   third party, which is what keeps the CSP free of external origins. */

:root {
    --bg:        #000000;
    --surface:   #0a0d0b;
    --line:      #1c231e;
    --line-2:    #2b342d;
    --fg:        #e8ebe8;
    --fg-dim:    #9aa39c;
    --fg-faint:  #6c756f;
    --accent:    #10ae4e;
    --accent-lt: #2ee07a;

    --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* The shell stretches with the viewport; prose inside it does not. Body
       text stays capped at --prose because a paragraph running the full width
       of a wide monitor is hard to track back to the next line. Cards, grids
       and the process steps use the whole width. */
    --wrap: 1680px;
    --pad: clamp(20px, 4vw, 56px);
    --prose: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--f-sans);
    font-size: 17px;
    line-height: 1.6;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
}

img { max-width: 100%; height: auto; }

a { color: var(--accent-lt); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible keyboard focus everywhere, not just where it was remembered. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-lt);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #000;
    padding: 10px 16px;
    font-family: var(--f-mono);
    z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- Header + navigation ------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--fg);
    text-decoration: none;
    margin-right: auto;
}
.brand:hover { text-decoration: none; }

.brand__logo {
    width: 52px;
    height: 52px;
    border: 1px solid var(--line-2);
    display: block;
    flex: none;
}

.brand__name {
    font-family: var(--f-mono);
    font-size: clamp(15px, 1.5vw, 17px);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.25;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    padding: 9px 10px;
    cursor: pointer;
    flex: none;
}
/* Hamburger is drawn in CSS — no image file to go missing. */
.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--fg);
    transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav ul {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav a {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--fg-dim);
    padding-block: 6px;
    border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--fg); text-decoration: none; border-bottom-color: var(--line-2); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------- Buttons -------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 14px;
    letter-spacing: .04em;
    padding: 13px 22px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--accent); color: #000; font-weight: 600; }
.btn--primary:hover { background: var(--accent-lt); }

.btn--ghost { background: transparent; color: var(--accent-lt); }
.btn--ghost:hover { background: rgba(16,174,78,.12); }

/* ---------- Type ----------------------------------------------------- */

.eyebrow {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
}

h1, h2, h3 { font-family: var(--f-mono); font-weight: 600; line-height: 1.25; }

.hero__title {
    font-size: clamp(28px, 5vw, 54px);
    letter-spacing: -.015em;
    margin: 0 0 20px;
    max-width: 34ch;
}

.page__title {
    font-size: clamp(24px, 3.6vw, 40px);
    margin: 0 0 16px;
    max-width: 26ch;
}

.lede {
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--fg-dim);
    margin: 0 0 28px;
    max-width: 62ch;
}

p { margin: 0 0 18px; max-width: var(--prose); }

/* ---------- Sections ------------------------------------------------- */

.section { padding-block: clamp(40px, 8vw, 68px); }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }

.hero { padding-block: clamp(48px, 10vw, 90px); }

/* Headline left, the pitch and the call to action beside it — otherwise the
   hero sits in the left third of a wide monitor with nothing opposite it. */
.hero__inner {
    display: grid;
    gap: clamp(24px, 3vw, 64px);
    align-items: end;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.hero__note {
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--fg-faint);
    margin: 0;
}

.section__title { font-size: clamp(21px, 2.6vw, 32px); margin: 0 0 14px; max-width: 30ch; }

/* A short heading with its intro stacked beneath leaves the right half of a
   wide shell empty. Side by side instead, bottom-aligned so the heading sits
   on the same line as the last line of the intro. Stacks below the breakpoint. */
.section__head {
    display: grid;
    gap: clamp(14px, 2.5vw, 56px);
    align-items: end;
    margin: 0 0 32px;
}
.section__head > * { margin-bottom: 0; }
/* Section intros run a little wider than body copy: they're short, set dimmer,
   and sit above full-width grids, so a narrow ribbon there reads as a mistake. */
.section__sub { color: var(--fg-dim); margin: 0 0 32px; max-width: 76ch; }

/* ---------- Cards / grids -------------------------------------------- */

/* auto-fit + minmax is what lets these fill a wide monitor without a stack of
   breakpoints: the track count grows with the container, and 1fr shares the
   leftover space evenly. */
.grid {
    display: grid;
    gap: clamp(16px, 1.6vw, 26px);
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 2px solid var(--line-2);
    border-radius: 6px;
    padding: 22px 20px;
}
.section--alt .card { background: var(--surface); }

.card--accent { border-top-color: var(--accent); }

/* auto-fit picks whatever column count happens to fit, which strands the odd
   card on a row of its own (five cards became four plus one). These counts are
   known and fixed, so the layout chooses the columns deliberately instead.
   Both modifiers come after .grid so they win on source order. */

/* Five cards that read as one set: one row of five where there's room, pairs
   with the last centered beneath them where there isn't. */
.grid--pillars { grid-template-columns: 1fr; }

@media (min-width: 680px) {
    /* Twelve tracks so a span-6 card can start on track 4 and sit centered. */
    .grid--pillars { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .grid--pillars > * { grid-column: span 6; }
    .grid--pillars > :nth-child(5) { grid-column: 4 / span 6; }
}

@media (min-width: 1360px) {
    .grid--pillars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .grid--pillars > *,
    .grid--pillars > :nth-child(5) { grid-column: auto; }
}

/* Eight cards: 1 / 2 / 4 divides evenly at every step, so no row is short. */
.grid--quad { grid-template-columns: 1fr; }
@media (min-width: 680px)  { .grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card__title { font-size: 16px; margin: 0 0 8px; }
.card__q {
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--accent);
    margin: 0 0 12px;
}
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--fg-dim); font-size: 15.5px; }

/* ---------- Ordered process (order carries meaning here) ------------- */

.steps {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    gap: clamp(16px, 1.6vw, 26px);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.step {
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
    padding: 20px 20px 18px;
    background: var(--bg);
}
.section--alt .step { background: var(--surface); }

.step__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    font-family: var(--f-mono);
}
.step__n { font-size: 22px; color: var(--fg-faint); font-weight: 600; }
.step__tag {
    font-size: 10.5px;
    letter-spacing: .16em;
    color: var(--accent);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 3px 8px;
}
.step__name { font-size: 17px; margin: 0 0 10px; }
.step p { color: var(--fg-dim); font-size: 15.5px; }
.step__out {
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--fg-faint);
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin: 0;
}

/* ---------- Who we are ----------------------------------------------- */

.bio { display: grid; gap: 26px; grid-template-columns: 1fr; }

.bio__portrait {
    display: block;
    width: 100%;
    max-width: 260px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
}

.bio__facts {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--fg-dim);
}
.bio__facts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.bio__facts li::before { content: "— "; color: var(--accent); }

/* ---------- Two-column prose ----------------------------------------- */

/* A long run of copy capped at --prose leaves a narrow ribbon down the left
   of a wide monitor. Rather than stretch the measure past readability, the
   copy is set in two tracks: each one lands near --prose on its own, so the
   line length stays right and the page stops wasting half the viewport.
   Below the breakpoint it collapses back to a single column. */
.cols-2 {
    display: grid;
    gap: clamp(20px, 3vw, 56px);
    grid-template-columns: 1fr;
    align-items: start;
}
/* The track already bounds the line length — a second cap would re-create
   the ribbon inside the column. */
.cols-2 p { max-width: none; }
.cols-2 > * > :first-child { margin-top: 0; }
.cols-2 > * > :last-child { margin-bottom: 0; }

/* Where the two halves aren't the same length, an explicit two-track grid
   leaves a void beside the shorter one. Column flow instead: the browser
   balances the track heights itself, at any width, without the copy having to
   be matched by hand. */
.prose-cols > * { max-width: none; }
.prose-cols > :first-child { margin-top: 0; }
.prose-cols h3 { break-after: avoid; }
.prose-cols .layers { break-inside: avoid; }

/* ---------- Stance / what you keep ----------------------------------- */

.stance__head {
    font-size: 17px;
    margin: 32px 0 14px;
}

/* Control layers, set as chips — same treatment as .step__tag so the two
   read as the same family of label. */
.layers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
}
.layers li {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 5px 11px;
}

/* Same rule-per-line treatment as .bio__facts, but sized for body copy
   rather than the credential list. */
.keeps {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    max-width: var(--prose);
}
.keeps li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--fg-dim);
    font-size: 15.5px;
}
.keeps li::before { content: "— "; color: var(--accent); font-family: var(--f-mono); }
.keeps strong { color: var(--fg); font-weight: 600; }

/* ---------- Contact strip + footer ----------------------------------- */

.contact__lines {
    font-family: var(--f-mono);
    font-size: 15px;
    margin: 0 0 26px;
    line-height: 2;
}

.site-footer {
    border-top: 1px solid var(--line);
    padding-block: 26px;
    margin-top: 10px;
}
.site-footer p {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--fg-faint);
    margin: 0 0 6px;
    max-width: none;
}

/* ---------- Mobile ---------------------------------------------------- */

@media (max-width: 760px) {
    body { font-size: 16px; }

    .nav-toggle { display: block; }

    .site-header__inner { flex-wrap: wrap; }

    .nav {
        flex-basis: 100%;
        display: none;
    }
    .nav.is-open { display: block; }

    .nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 10px;
    }
    .nav li { border-top: 1px solid var(--line); }
    .nav a {
        display: block;
        padding: 14px 2px;
        font-size: 14px;
        border-bottom: none;
    }
    .nav a[aria-current="page"] { border-bottom: none; color: var(--accent-lt); }

    .btn { display: block; text-align: center; }
    .hero__actions { flex-direction: column; align-items: stretch; }
}

@media (min-width: 761px) {
    /* Never leave the menu stuck closed by a stale inline state on resize. */
    .nav { display: block !important; }

    .bio { grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: clamp(26px, 3vw, 56px); }
    .bio__portrait { max-width: 300px; }
}

@media (min-width: 1180px) {
    .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .hero__inner .hero__title,
    .hero__inner .lede { max-width: none; }

    .section__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
    .section__head > * { max-width: none; }
}

/* Two tracks only once there's genuinely room for two readable measures —
   splitting earlier just makes both columns too narrow. */
@media (min-width: 1040px) {
    .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .prose-cols {
        columns: 2;
        column-gap: clamp(28px, 3.5vw, 64px);
    }

    /* Column flow, not grid: it keeps the list reading top-to-bottom down the
       first column instead of zig-zagging across rows. */
    .keeps {
        max-width: none;
        columns: 2;
        column-gap: clamp(24px, 3vw, 56px);
    }
    .keeps li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}