/* PragmaNexus site styles
   Layout: one 1160px column of ruled sections. Each section opens with a mono label bar.
   No cards or shadows. Amber marks the path of the work: the underline on "Then I build it.",
   the process steps, and the problem → work → result line on each case study. */

:root {
    /* Color */
    --paper:      #FBFCFC;
    --paper-2:    #F2F5F6;
    --ink:        #0C2A36;
    --ink-2:      #4E6670;
    --line:       #C3D0D4;
    --trace:      #E0901A;
    --trace-ink:  #94570A;   /* amber dark enough for text on paper */
    --band-text:  #C5D3D8;   /* body text on the ink band */
    --band-line:  #2A4A57;

    /* Type */
    --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-label: 0.6875rem;  /* 11px mono labels */
    --fs-small: 0.875rem;   /* 14px */
    --fs-meta:  0.9688rem;  /* 15.5px secondary text */
    --fs-body:  1.0625rem;  /* 17px */
    --fs-lead:  1.1875rem;  /* 19px */
    --fs-h3:    1.3125rem;  /* 21px */
    --fs-h2:    clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    --fs-h1:    clamp(2.375rem, 1.4rem + 3.6vw, 4.25rem);

    /* Space */
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section: clamp(4rem, 3rem + 4vw, 7rem);
    --max: 1160px;
}

/* ── Base ── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--trace); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.mono {
    font-family: var(--mono);
    font-stretch: 87.5%;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper); padding: .5rem .75rem; z-index: 10; }

/* ── Links and buttons ── */

.link {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--trace);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color .15s;
}
.link:hover { text-decoration-color: var(--ink); }
.link-arrow::after { content: " →"; color: var(--trace-ink); }

.title-link, .log h3 a { text-decoration: none; }
.title-link:hover, .log h3 a:hover { text-decoration: underline; text-decoration-color: var(--trace); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: .8rem 1.25rem;
    text-decoration: none;
    transition: background .15s;
}
.btn::after { content: "→"; color: var(--trace); transition: transform .15s; }
.btn:hover { background: #164152; }
.btn:hover::after { transform: translateX(3px); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }

/* ── Wordmark and header ── */

.mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; font-size: var(--fs-small); letter-spacing: -0.01em; }
.mark svg { flex: none; }

.site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    padding-block: 1.25rem 1rem;
    border-bottom: 1px solid var(--ink);
}
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; font-weight: 500; }
.site-nav ul a { text-decoration: none; color: var(--ink-2); padding-block: .25rem; }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--ink); }
.site-nav ul a.cta { color: var(--ink); border-bottom: 2px solid var(--trace); }

/* ── Shared pieces ── */

.section { padding-block: var(--section) 0; }
.section:last-of-type { padding-bottom: var(--section); }

/* Label bar: opens each section; its h2 is the section heading */
.bar {
    display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem;
    padding-block: .75rem;
    border-top: 1px solid var(--ink);
    color: var(--ink-2);
}
.bar b, .bar h2 { color: var(--ink); font-weight: 500; }
.bar h2 { font: inherit; font-weight: 500; letter-spacing: inherit; text-transform: inherit; }
.bar a { color: var(--ink-2); text-decoration: none; }
.bar a:hover { color: var(--ink); }

.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; padding-block: 1.75rem 2.25rem; }
.section-head h2 { font-size: var(--fs-h2); font-weight: 650; line-height: 1.08; letter-spacing: -0.028em; }
.section-head p { color: var(--ink-2); max-width: 52ch; }

.meta { color: var(--ink-2); }

/* Spec block: mono label/value pairs */
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0; padding-block: .75rem; border-block: 1px dashed var(--line); }
.spec dt { color: var(--ink-2); }
.spec dd { margin: 0; color: var(--ink); }

/* ── Homepage: hero ── */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
    padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
.hero h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.038em; }
.hero h1 .build {
    text-decoration: underline;
    text-decoration-color: var(--trace);
    text-decoration-thickness: .11em;
    text-underline-offset: .12em;
    text-decoration-skip-ink: none;
}
.hero-sub { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 42ch; }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero-note { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--ink-2); }

/* Identity card beside the hero */
.who { display: grid; gap: 1rem; align-content: start; padding: 1.5rem; border: 1px solid var(--line); background: var(--paper-2); }
.who img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.who-name { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
.who-role { color: var(--ink-2); margin-top: .2rem; }
.who-prev { border-top: 1px solid var(--line); border-bottom: 0; padding-top: .9rem; line-height: 1.7; }
.who .link { justify-self: start; font-size: 0.9375rem; }

/* ── Homepage: what I build (2 × 2) ── */

.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.entry { display: grid; grid-template-rows: auto 1fr auto; gap: .6rem; padding: 1.5rem 1.75rem 1.75rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.entry:nth-child(even) { padding: 1.5rem 0 1.75rem 1.75rem; border-left: 1px solid var(--line); }
.entry h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; }
.entry p { margin-top: .4rem; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.55; max-width: 52ch; }
.entry .link { justify-self: start; font-size: var(--fs-small); }

/* ── Homepage: how I work ── */

.steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; position: relative; }
.steps::before { content: ""; position: absolute; top: 7px; left: 7px; right: 0; height: 2px; background: var(--trace); }
.steps li { position: relative; padding-top: 2.25rem; display: grid; gap: .6rem; align-content: start; }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--trace); }
.steps li:last-child::before { background: var(--trace); }
.steps .num { color: var(--trace-ink); }
.steps h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }
.steps p { color: var(--ink-2); max-width: 36ch; font-size: var(--fs-meta); }

/* ── Homepage: ways to work together ── */

.service { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 2.5rem; padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.service .meta { font-size: var(--fs-label); margin-bottom: .5rem; }
.service h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.service > p { color: var(--ink-2); }
.service > div:last-child { align-self: start; }
.service .link { display: inline-block; font-size: var(--fs-small); }

/* ── Writing list ── */

.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.log li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 2rem; align-items: baseline; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.log .type { color: var(--trace-ink); display: grid; gap: .2rem; }
.log .type span { color: var(--ink-2); }
.log h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.log p { margin-top: .4rem; color: var(--ink-2); max-width: 62ch; font-size: var(--fs-meta); }

/* ── About: bio | career ── */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem clamp(2rem, 5vw, 5rem); padding-top: 1.75rem; }
.bio { display: grid; gap: 1.1rem; align-content: start; max-width: 62ch; }
.bio p { font-size: var(--fs-lead); line-height: 1.6; }
.bio p:last-child { color: var(--ink-2); font-size: var(--fs-body); }

.career { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.career li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .25rem 1.25rem; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.career .mono { color: var(--ink-2); padding-top: .3rem; }
.career div { font-size: var(--fs-meta); color: var(--ink-2); }
.career b { font-weight: 600; color: var(--ink); }
.career p { margin-top: .2rem; }

/* ── FAQ ── */

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--line); }
.faq div { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.faq p { margin-top: .5rem; color: var(--ink-2); }

/* ── Contact ── */

.contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); }
.contact-form { min-width: 0; border: 1px solid var(--line); background: #fff; }
.contact-aside { display: grid; gap: 1rem; align-content: start; padding-top: .5rem; }
.contact-aside .email { font-family: var(--mono); font-stretch: 87.5%; font-size: 1rem; font-weight: 500; }
.contact-aside p { color: var(--ink-2); }

/* ── Inner pages: header ── */

.page-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2.5rem; }
.page-head h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.036em; }
.page-head p { font-size: var(--fs-lead); color: var(--ink-2); max-width: 44ch; }
.page-head.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.page-head.wide p { max-width: 54ch; font-size: var(--fs-body); line-height: 1.6; }

/* ── Case studies ── */

.index-wrap { overflow-x: auto; }
.index { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.index th { text-align: left; font-weight: 400; color: var(--ink-2); padding: .7rem 1.5rem .7rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); white-space: nowrap; }
.index td { padding: .8rem 1.5rem .8rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.index td:first-child a { font-weight: 600; text-decoration: none; }
.index td:first-child a:hover { text-decoration: underline; text-decoration-color: var(--trace); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.index td:not(:first-child) { color: var(--ink-2); white-space: nowrap; }
.index tr:last-child td { border-bottom: 1px solid var(--ink); }

.cases .section:last-of-type { padding-bottom: 0; }
.case { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); padding-block: 1.75rem 0; scroll-margin-top: 1.5rem; }
.case-side { display: grid; gap: 1rem; align-content: start; }
.case-side .spec { border-top: 0; padding-top: 0; }
.case h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 650; letter-spacing: -0.028em; line-height: 1.1; }
.case-more { margin-top: 1.5rem; font-size: 0.9375rem; }

/* Problem → work → what changed, on the amber line */
.beats { list-style: none; margin: 1.75rem 0 0; padding: 0 0 0 2rem; position: relative; display: grid; gap: 1.5rem; }
.beats::before { content: ""; position: absolute; left: 7px; top: .55rem; bottom: .9rem; width: 2px; background: var(--trace); }
.beats li { position: relative; display: grid; gap: .3rem; }
.beats li::before { content: ""; position: absolute; left: -2rem; top: .2rem; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--trace); }
.beats li:last-child::before { background: var(--trace); }
.beats .mono { color: var(--trace-ink); }
.beats p { max-width: 60ch; }
.beats li:last-child p { font-weight: 500; }

/* ── Investment firms page ── */

.symptoms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.symptoms li { position: relative; padding: 1.25rem 1.5rem 1.25rem 1.6rem; border-bottom: 1px solid var(--line); font-size: var(--fs-lead); line-height: 1.45; }
.symptoms li:nth-child(odd) { border-right: 1px solid var(--line); }
.symptoms li:nth-child(even) { padding-left: 3.1rem; }
.symptoms li::before { content: ""; position: absolute; left: 0; top: 2.05rem; width: .8rem; height: 2px; background: var(--trace); }
.symptoms li:nth-child(even)::before { left: 1.5rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; margin-top: 3rem; }
.split-one { grid-template-columns: minmax(0, 1fr); }
.prose { display: grid; gap: 1.1rem; max-width: 60ch; }
.prose p.lead { font-size: var(--fs-lead); line-height: 1.55; }

.feature { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 2rem; padding-block: 1.4rem; border-block: 1px solid var(--line); margin-top: .5rem; }
.feature .type { color: var(--trace-ink); display: grid; gap: .2rem; align-content: start; }
.feature .type span { color: var(--ink-2); }
.feature p { color: var(--ink-2); }
.feature h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: .4rem; }


/* ── Closing band and footer ── */

.cta-band { margin-top: var(--section); background: var(--ink); color: var(--paper); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cta-band h2 { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.028em; line-height: 1.08; }
.cta-band p { margin-top: .6rem; color: var(--band-text); max-width: 52ch; }

.site-footer { margin-top: var(--section); background: var(--ink); color: #A9BCC3; }
main:has(> .cta-band:last-child) + .site-footer { margin-top: 0; border-top: 1px solid var(--band-line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 2rem 2.5rem; }
.site-footer .mark { color: var(--paper); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-small); }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--paper); }
.site-footer .copy { width: 100%; color: #7F97A0; }

/* ── Responsive ── */

@media (max-width: 960px) {
    .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .who { max-width: 420px; }
    .service { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .service > div:last-child { grid-column: 2; }
    .steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-left: 2rem; }
    .steps::before { top: 7px; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
    .steps li { padding-top: 0; }
    .steps li::before { left: -2rem; top: .1rem; }
}

@media (max-width: 760px) {
    .section-head, .faq, .contact, .about, .page-head, .page-head.wide,
    .case, .cta-band .wrap, .split, .feature { grid-template-columns: minmax(0, 1fr); }

    .entries { grid-template-columns: minmax(0, 1fr); }
    .entry, .entry:nth-child(even) { padding: 1.5rem 0; border-left: 0; }


    .service { grid-template-columns: minmax(0, 1fr); }
    .service > div:last-child { grid-column: auto; }

    .log li { grid-template-columns: minmax(0, 1fr); }
    .log .type { grid-auto-flow: column; justify-content: start; gap: .75rem; }

    .index th:nth-child(2), .index td:nth-child(2) { display: none; }
    .case { gap: 1.25rem; }
    .case > div:last-child { display: contents; }
    .case h2 { order: -1; }
    .case .beats { margin-top: .25rem; }

    .symptoms { grid-template-columns: minmax(0, 1fr); }
    .symptoms li:nth-child(odd) { border-right: 0; }
    .symptoms li:nth-child(even) { padding-left: 1.6rem; }
    .symptoms li:nth-child(even)::before { left: 0; }
}

@media (max-width: 560px) {
    .career li { grid-template-columns: minmax(0, 1fr); }
}