/* ============================================================
           LAKEFOREST — MANAGED ENTRA ID
           Blueprint system v2: #0069b4 / Montserrat / JetBrains Mono
           40px grid, 2px borders, square corners, no accent stripes
           ============================================================ */

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

        :root {
            --blue: #0069b4;
            --blue-dark: #005a9a;
            --blue-tint: #e6f3fb;
            --ink: #1a1a2e;
            --ink-soft: #4a4a5a;
            --gray-dark: #3c3c3c;
            --gray-light: #e3e3e3;
            --bg: #fafbfc;
            --white: #ffffff;
            --grid: #e8eaed;
            --ok: #1d7a4f;
            --mono: 'JetBrains Mono', monospace;
            --sans: 'Montserrat', sans-serif;
        }

        html { scroll-behavior: smooth; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
            }
        }

        body {
            font-family: var(--sans);
            font-weight: 400;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.7;
            background-image:
                linear-gradient(var(--grid) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: -1px -1px;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 50px;
        }

        a { color: var(--blue); }

        :focus-visible {
            outline: 3px solid var(--blue);
            outline-offset: 2px;
        }

        ::selection { background: var(--blue); color: var(--white); }

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

        .eyebrow {
            font-family: var(--mono);
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--blue);
            display: block;
            margin-bottom: 18px;
        }

        h1, h2, h3 {
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.015em;
            text-wrap: balance;
        }

        h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 16px; }
        h3 { font-size: 1.05rem; font-weight: 700; }

        .hero-line { display: block; }

        .lede {
            font-size: 1.08rem;
            color: var(--ink-soft);
            max-width: 640px;
        }

        /* ---------- Diagonal divider (logo motif) ---------- */

        .divider {
            display: block;
            width: 100%;
            height: 56px;
        }
        .divider line {
            stroke: var(--blue);
            stroke-width: 2;
        }

        /* ---------- Nav ---------- */

        header {
            background: var(--white);
            border-bottom: 2px solid var(--ink);
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            color: var(--ink);
        }

        .brand svg { display: block; }

        .brand-name {
            font-weight: 800;
            font-size: 0.95rem;
            letter-spacing: 0.16em;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .nav-links a {
            font-family: var(--mono);
            font-size: 0.8rem;
            letter-spacing: 0.06em;
            text-decoration: none;
            color: var(--ink);
        }

        .nav-links a:hover { color: var(--blue); }

        .lang-switch {
            display: flex;
            border: 2px solid var(--ink);
            font-family: var(--mono);
            font-size: 0.75rem;
        }

        .lang-switch a, .lang-switch span {
            padding: 4px 10px;
            text-decoration: none;
            color: var(--ink);
        }

        .lang-switch .active {
            background: var(--ink);
            color: var(--white);
        }

        .nav-cta {
            border: 2px solid var(--ink);
            background: var(--blue);
            color: var(--white) !important;
            padding: 8px 18px;
            font-weight: 600;
        }

        .nav-cta:hover { background: var(--blue-dark); color: var(--white); }

        /* ---------- Mobile nav toggle (hidden on desktop) ---------- */

        .nav-toggle {
            display: none;
            width: 44px;
            height: 44px;
            padding: 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            background: var(--white);
            border: 2px solid var(--ink);
            cursor: pointer;
        }

        .nav-toggle-bar {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--ink);
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
        header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* ---------- Hero ---------- */

        .hero {
            position: relative;
            padding: 110px 0 90px;
            overflow: hidden;
        }

        .hero-home .hero-copy {
            width: min(100%, 860px);
            position: relative;
            z-index: 1;
        }

        .hero-mark {
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.07;
            pointer-events: none;
        }

        .hero h1 {
            font-size: clamp(2.2rem, 5vw, 3.4rem);
            max-width: 780px;
            margin-bottom: 24px;
        }

        .hero-home h1 { max-width: 860px; }

        .hero h1 .accent,
        .about-hero h1 .accent { color: var(--blue); }

        .hero-home .lede {
            max-width: 760px;
            margin-bottom: 36px;
        }

        .operating-model-intro {
            max-width: none;
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 44px;
        }

        .btn {
            display: inline-block;
            font-family: var(--sans);
            font-weight: 700;
            font-size: 0.95rem;
            text-decoration: none;
            padding: 15px 30px;
            border: 2px solid var(--ink);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            cursor: pointer;
        }

        .btn-primary {
            background: var(--blue);
            color: var(--white);
        }

        .btn-secondary {
            background: var(--white);
            color: var(--ink);
        }

        .btn:hover {
            transform: translate(-4px, -4px);
            box-shadow: 4px 4px 0 var(--ink);
        }

        .hero-status {
            font-family: var(--mono);
            font-size: 0.78rem;
            color: var(--ink-soft);
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .hero-status .dot {
            width: 9px;
            height: 9px;
            background: var(--ok);
            display: inline-block;
            flex: none;
        }

        /* Sub-page heroes (replaces former inline styles) */
        .hero-sub { padding-bottom: 40px; }
        .hero-sub-lg { padding-bottom: 50px; }
        .hero-sub h1, .hero-sub-lg h1 { font-size: clamp(2rem, 4.5vw, 3rem); }

        /* ---------- Problem strip ---------- */

        .problem {
            background: var(--ink);
            color: var(--white);
            padding: 64px 0;
        }

        .problem .eyebrow { color: #7fc4ef; }

        .problem h2 { color: var(--white); max-width: 720px; }

        .problem p {
            color: #c9cdd6;
            max-width: none;
            margin-top: 8px;
        }

        .problem-points {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            margin-top: 44px;
            border: 2px solid #565a66;
            background: #565a66;
        }

        .problem-points div {
            background: var(--ink);
            padding: 22px 24px;
            font-family: var(--mono);
            font-size: 0.82rem;
            line-height: 1.6;
            color: #e7e9ee;
        }

        .problem-points strong {
            display: block;
            color: var(--white);
            font-size: 1.3rem;
            font-family: var(--sans);
            font-weight: 800;
            margin-bottom: 6px;
        }

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

        section { padding: 90px 0; }

        .section-flush { padding-top: 20px; }

        .section-head { margin-bottom: 52px; }

        .section-head-wide .lede {
            max-width: none;
        }

        #services .section-head .lede {
            max-width: none;
        }

        .model-intro-lede {
            max-width: none;
        }

        /* ---------- Included grid ---------- */

        .included-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .card {
            background: var(--white);
            border: 2px solid var(--ink);
            padding: 28px;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .card:hover {
            transform: translate(-4px, -4px);
            box-shadow: 4px 4px 0 var(--blue);
        }

        .card .tag {
            font-family: var(--mono);
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            color: var(--blue);
            display: block;
            margin-bottom: 14px;
        }

        .card h3 { margin-bottom: 10px; }

        .card p {
            font-size: 0.92rem;
            color: var(--ink-soft);
        }

        /* ---------- Process ---------- */

        .process { background: var(--white); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }

        .process-tight { padding: 70px 0; }

        .process-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .step {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .step .step-num {
            font-family: var(--mono);
            font-size: 3rem;
            font-weight: 600;
            color: var(--blue);
            line-height: 1;
            display: block;
            margin-bottom: 18px;
        }

        .step h3 { margin-bottom: 10px; }

        .step p {
            font-size: 0.92rem;
            color: var(--ink-soft);
            flex: 1;
        }

        .step .step-meta {
            font-family: var(--mono);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--blue);
            display: block;
            margin-top: auto;
            padding-top: 18px;
            letter-spacing: 0.08em;
        }

        /* ---------- Report ---------- */

        .report-wrap {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 56px;
            align-items: center;
        }

        .report-copy p {
            color: var(--ink-soft);
            margin-bottom: 16px;
        }

        .report-card {
            background: var(--white);
            border: 2px solid var(--ink);
            box-shadow: 8px 8px 0 var(--blue);
        }

        .report-card-head {
            border-bottom: 2px solid var(--ink);
            padding: 14px 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--mono);
            font-size: 0.74rem;
            letter-spacing: 0.08em;
        }

        .report-card-head .badge {
            background: var(--blue);
            color: var(--white);
            padding: 2px 8px;
        }

        .report-card table {
            width: 100%;
            border-collapse: collapse;
            font-family: var(--mono);
            font-size: 0.8rem;
        }

        .report-card td {
            padding: 13px 22px;
            border-bottom: 1px solid var(--gray-light);
            vertical-align: top;
        }

        .report-card tr:last-child td { border-bottom: none; }

        .report-card td:last-child {
            text-align: right;
            white-space: nowrap;
            color: var(--ink-soft);
        }

        .report-card .ok { color: var(--ok); font-weight: 600; }
        .report-card .delta { color: var(--blue); font-weight: 600; }

        /* ---------- Reliability ---------- */

        .reliability { background: var(--blue); color: var(--white); }

        .reliability .eyebrow { color: #bfe2f7; }

        .reliability h2 { color: var(--white); max-width: 700px; }

        .reliability .lede {
            color: #dceefa;
            max-width: none;
        }

        .reliability-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-top: 48px;
        }

        .reliability-cols .col {
            border: 2px solid var(--white);
            padding: 28px;
        }

        .reliability-cols h3 {
            color: var(--white);
            margin-bottom: 10px;
            font-family: var(--mono);
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.04em;
        }

        .reliability-cols p {
            color: #dceefa;
            font-size: 0.92rem;
        }

        /* ---------- Operating rhythm ---------- */

        .cadence-cols {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .cadence-col {
            border: 2px solid var(--ink);
            background: var(--white);
            padding: 30px;
        }

        .cadence-col h3 {
            font-family: var(--mono);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--blue);
            margin-bottom: 18px;
        }

        .cadence-col ul { list-style: none; }

        .cadence-col li {
            padding: 9px 0;
            border-bottom: 1px solid var(--gray-light);
            font-size: 0.9rem;
            color: var(--ink-soft);
        }

        .cadence-col li:last-child { border-bottom: none; }

        /* ---------- Fit ---------- */

        .fit-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .fit-col {
            border: 2px solid var(--ink);
            background: var(--white);
            padding: 30px;
        }

        .fit-col h3 {
            font-family: var(--mono);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            margin-bottom: 18px;
        }

        .fit-col.good h3 { color: var(--ok); }
        .fit-col.bad h3 { color: var(--gray-dark); }

        .fit-col ul { list-style: none; }

        .fit-col li {
            padding: 9px 0;
            border-bottom: 1px solid var(--gray-light);
            font-size: 0.92rem;
            color: var(--ink-soft);
        }

        .fit-col li:last-child { border-bottom: none; }

        .fit-col li::before {
            font-family: var(--mono);
            font-weight: 600;
            margin-right: 12px;
        }

        .fit-col.good li::before { content: "+"; color: var(--ok); }
        .fit-col.bad li::before { content: "−"; color: var(--gray-dark); }

        /* ---------- FAQ ---------- */

        .faq { background: var(--white); border-top: 2px solid var(--ink); }

        .faq details {
            border: 2px solid var(--ink);
            margin-bottom: 14px;
            background: var(--white);
        }

        .faq summary {
            cursor: pointer;
            padding: 18px 22px;
            font-weight: 700;
            font-size: 0.98rem;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
        }

        .faq summary::-webkit-details-marker { display: none; }

        .faq summary::after {
            content: "+";
            font-family: var(--mono);
            font-size: 1.2rem;
            color: var(--blue);
            flex: none;
        }

        .faq details[open] summary::after { content: "−"; }

        .faq details p {
            padding: 0 22px 20px;
            color: var(--ink-soft);
            font-size: 0.93rem;
            max-width: 760px;
        }

        /* ---------- Contact ---------- */

        .contact { padding-bottom: 110px; }

        .contact-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: start;
        }

        .contact-copy p { color: var(--ink-soft); margin-bottom: 16px; }

        .contact-meta {
            font-family: var(--mono);
            font-size: 0.8rem;
            color: var(--ink-soft);
            margin-top: 28px;
            line-height: 2;
        }

        .contact-form {
            background: var(--white);
            border: 2px solid var(--ink);
            padding: 32px;
        }

        .contact-form label {
            display: block;
            font-family: var(--mono);
            font-size: 0.74rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 6px;
            color: var(--ink);
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            font-family: var(--sans);
            font-size: 0.95rem;
            padding: 12px 14px;
            border: 2px solid var(--ink);
            background: var(--bg);
            margin-bottom: 20px;
            color: var(--ink);
        }

        .contact-form textarea { min-height: 120px; resize: vertical; }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: 3px solid var(--blue);
            outline-offset: 0;
        }

        .contact-form .btn { width: 100%; text-align: center; }

        .form-note {
            font-family: var(--mono);
            font-size: 0.74rem;
            color: var(--ink-soft);
            margin-top: 14px;
        }

        /* ---------- Footer ---------- */

        footer {
            border-top: 2px solid var(--ink);
            background: var(--white);
            padding: 36px 0;
        }

        /* Structured footer: brand + link columns + bottom bar */
        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 36px;
        }

        .footer-brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--ink);
            margin-bottom: 16px;
        }

        .footer-tagline {
            color: var(--ink-soft);
            font-size: 0.9rem;
            line-height: 1.6;
            max-width: 330px;
        }

        .footer-col-title {
            display: block;
            font-family: var(--mono);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 14px;
        }

        .footer-col a {
            display: block;
            font-size: 0.9rem;
            color: var(--ink-soft);
            text-decoration: none;
            padding: 6px 0;
        }

        .footer-col a:hover { color: var(--blue); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            padding-top: 24px;
            font-family: var(--mono);
            font-size: 0.78rem;
            color: var(--ink-soft);
        }

        /* ---------- Responsive ---------- */

        @media (max-width: 920px) {
            .container { padding: 0 24px; }

            /* Hamburger menu: hide the desktop row, show the toggle,
               drop the links into a panel under the header. */
            .nav-toggle { display: flex; }
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                background: var(--white);
                border-bottom: 2px solid var(--ink);
                padding: 8px 24px 22px;
            }
            header.nav-open .nav-links { display: flex; }
            .nav-links > a:not(.nav-cta) {
                display: block;
                padding: 15px 2px;
                font-size: 0.95rem;
                border-bottom: 1px solid var(--gray-light);
            }
            .nav-links .lang-switch {
                align-self: flex-start;
                margin: 16px 0 6px;
            }
            .nav-links .lang-switch a,
            .nav-links .lang-switch span { padding: 8px 16px; }
            .nav-links > a.nav-cta {
                display: block;
                text-align: center;
                padding: 12px 18px;
                margin-top: 16px;
            }

            .included-grid,
            .process-steps,
            .problem-points { grid-template-columns: 1fr; }
            .report-wrap,
            .reliability-cols,
            .cadence-cols,
            .fit-cols,
            .contact-wrap { grid-template-columns: 1fr; gap: 32px; }
            .hero { padding: 70px 0 60px; }
            .hero-mark { display: none; }

            /* Home hero buttons: full width, stacked, equal length */
            .hero-home .hero-actions { flex-direction: column; align-items: stretch; }
            .hero-home .hero-actions .btn { width: 100%; text-align: center; }

            /* Report card: stack each row so long values wrap instead of
               forcing horizontal overflow that breaks the mobile layout. */
            .report-card tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--gray-light); }
            .report-card tr:last-child { border-bottom: none; }
            .report-card td { display: block; border-bottom: none; padding: 0 18px; }
            .report-card td:first-child { color: var(--ink); margin-bottom: 4px; }
            .report-card td:last-child { text-align: left; white-space: normal; }

            /* Structured footer: brand spans full width, columns go 2-up */
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
            .footer-brand { grid-column: 1 / -1; }

            section { padding: 64px 0; }
        }

        @media (max-width: 560px) {
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
        }

        /* ---------- Service lines (portfolio) ---------- */

        .service-lines {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .service-line {
            background: var(--white);
            border: 2px solid var(--ink);
            display: flex;
            flex-direction: column;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .service-line:hover {
            transform: translate(-4px, -4px);
            box-shadow: 4px 4px 0 var(--blue);
        }

        .service-line-body {
            padding: 28px;
            flex: 1;
        }

        .service-line .tag {
            font-family: var(--mono);
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            color: var(--blue);
            display: block;
            margin-bottom: 14px;
        }

        .service-line h3 { margin-bottom: 12px; font-size: 1.15rem; }

        .service-line .desc {
            font-size: 0.92rem;
            color: var(--ink-soft);
            margin-bottom: 20px;
        }

        .service-line ul {
            list-style: none;
            font-family: var(--mono);
            font-size: 0.78rem;
            line-height: 1.6;
        }

        .service-line li {
            padding: 8px 0;
            border-bottom: 1px solid var(--gray-light);
            color: var(--ink-soft);
        }

        .service-line li:last-child { border-bottom: none; }

        .service-line li::before {
            content: "+";
            color: var(--blue);
            font-weight: 600;
            margin-right: 10px;
        }

        .service-line-link {
            display: block;
            border-top: 2px solid var(--ink);
            padding: 16px 28px;
            font-weight: 700;
            font-size: 0.9rem;
            text-decoration: none;
            color: var(--ink);
            background: var(--white);
        }

        .service-line-link:hover {
            background: var(--blue);
            color: var(--white);
        }

        /* ---------- Operating model (portfolio variant) ---------- */

        .model { background: var(--white); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }

        .model-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        /* ---------- Service detail rows (services page) ---------- */

        .svc-row {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 56px;
            align-items: start;
            padding: 56px 0;
            border-bottom: 2px solid var(--gray-light);
        }

        .svc-row:last-child { border-bottom: none; }

        .svc-row h3 { font-size: 1.5rem; margin-bottom: 14px; }

        .svc-row .desc { color: var(--ink-soft); margin-bottom: 22px; }

        .svc-row .btn { padding: 12px 24px; font-size: 0.9rem; }

        /* ---------- CTA band ---------- */

        .cta-band {
            background: var(--ink);
            color: var(--white);
            padding: 72px 0;
        }

        .cta-band .eyebrow { color: #7fc4ef; }

        .cta-band h2 { color: var(--white); margin-bottom: 12px; }

        .cta-band p { color: #c9cdd6; max-width: 620px; margin-bottom: 32px; }

        .cta-band-wide-copy h2,
        .cta-band-wide-copy p {
            max-width: none;
        }

        .cta-band .btn-primary { border-color: var(--white); }

        /* ---------- About opening ---------- */

        .about-hero {
            padding: 90px 0 72px;
        }

        .about-hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) 360px;
            gap: 52px;
            align-items: start;
        }

        .about-hero-copy h1 {
            font-size: clamp(2.2rem, 4.8vw, 3.5rem);
            max-width: 760px;
            margin-bottom: 24px;
        }

        .about-hero-lede,
        .about-hero-copy p {
            color: var(--ink-soft);
            font-size: 1.02rem;
            line-height: 1.7;
            max-width: 760px;
            margin-bottom: 18px;
        }

        .about-hero-lede {
            color: var(--ink);
            font-size: 1.08rem;
        }

        .about-hero-note {
            margin-bottom: 0;
        }

        .articles-hero-lede {
            max-width: none;
        }

        .about-founder-card {
            border: 2px solid var(--ink);
            background: var(--white);
            padding: 18px;
            margin-top: 28px;
        }

        .about-founder-card img {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            object-position: center top;
            border: 2px solid var(--ink);
            background: var(--blue-tint);
        }

        .about-founder-meta {
            padding-top: 18px;
        }

        .about-founder-label {
            display: block;
            font-family: var(--mono);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--blue);
        }

        .about-founder-meta h2 {
            font-size: 1.3rem;
            margin: 8px 0 6px;
        }

        .about-founder-meta p {
            color: var(--ink-soft);
            font-size: 0.9rem;
            margin: 0;
        }

        .about-founder-meta p + p {
            margin-top: 6px;
        }

        /* ---------- Prose (about page) ---------- */

        .prose { max-width: 720px; }

        .prose p {
            color: var(--ink-soft);
            margin-bottom: 20px;
            font-size: 1.02rem;
        }

        .prose strong { color: var(--ink); }

        @media (max-width: 920px) {
            .about-hero {
                padding: 70px 0 56px;
            }
            .about-hero-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .about-founder-card {
                max-width: 420px;
                margin-top: 0;
            }
            .service-lines,
            .model-steps { grid-template-columns: 1fr; }
            .svc-row { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
        }

        /* ---------- Articles listing ---------- */

        .article-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .article-card {
            background: var(--white);
            border: 2px solid var(--ink);
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: var(--ink);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .article-card:hover {
            transform: translate(-4px, -4px);
            box-shadow: 4px 4px 0 var(--blue);
        }

        .article-card-body { padding: 28px; flex: 1; }

        .article-card .tag {
            font-family: var(--mono);
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            color: var(--blue);
            display: block;
            margin-bottom: 14px;
        }

        .article-card h3 { margin-bottom: 12px; font-size: 1.25rem; }

        .article-card .excerpt {
            font-size: 0.92rem;
            color: var(--ink-soft);
        }

        .article-card-meta {
            border-top: 2px solid var(--ink);
            padding: 14px 28px;
            font-family: var(--mono);
            font-size: 0.74rem;
            color: var(--ink-soft);
            display: flex;
            justify-content: space-between;
            gap: 12px;
        }

        .featured-card { grid-column: 1 / -1; }

        .featured-card h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 760px; }

        /* ---------- Article post ---------- */

        .post-header { padding: 90px 0 50px; }

        .post-header h1 {
            font-size: clamp(1.9rem, 4.2vw, 2.8rem);
            max-width: 820px;
            margin-bottom: 22px;
        }

        .post-meta {
            font-family: var(--mono);
            font-size: 0.76rem;
            letter-spacing: 0.06em;
            color: var(--ink-soft);
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
        }

        .post-meta span::before { content: "// "; color: var(--blue); }

        .post-layout {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 56px;
            align-items: start;
            padding-bottom: 90px;
        }

        .post-toc {
            position: sticky;
            top: 100px;
            border: 2px solid var(--ink);
            background: var(--white);
            padding: 22px;
        }

        .post-toc h2 {
            font-family: var(--mono);
            font-size: 0.74rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: var(--blue);
            margin-bottom: 14px;
        }

        .post-toc ol {
            list-style: none;
            counter-reset: toc;
        }

        .post-toc li { counter-increment: toc; }

        .post-toc a {
            display: block;
            padding: 7px 0;
            font-size: 0.83rem;
            text-decoration: none;
            color: var(--ink-soft);
            border-bottom: 1px solid var(--gray-light);
        }

        .post-toc li:last-child a { border-bottom: none; }

        .post-toc a::before {
            content: counter(toc, decimal-leading-zero) " ";
            font-family: var(--mono);
            font-size: 0.72rem;
            color: var(--blue);
        }

        .post-toc a:hover { color: var(--blue); }

        .post-body { max-width: 720px; }

        .post-body > p {
            color: var(--ink-soft);
            margin-bottom: 20px;
            font-size: 1.02rem;
        }

        .post-body strong { color: var(--ink); }

        .post-body h2 {
            font-size: 1.5rem;
            margin: 48px 0 18px;
            scroll-margin-top: 100px;
        }

        .post-body h3 {
            font-size: 1.1rem;
            margin: 32px 0 12px;
        }

        .post-body ul, .post-body ol {
            margin: 0 0 20px 22px;
            color: var(--ink-soft);
        }

        .post-body li { margin-bottom: 8px; }

        .post-body pre {
            background: var(--ink);
            color: #e7e9ee;
            border: 2px solid var(--ink);
            padding: 22px;
            overflow-x: auto;
            font-family: var(--mono);
            font-size: 0.8rem;
            line-height: 1.65;
            margin: 0 0 24px;
        }

        .post-body code {
            font-family: var(--mono);
            font-size: 0.85em;
        }

        .post-body p code, .post-body li code {
            background: var(--blue-tint);
            border: 1px solid var(--gray-light);
            padding: 1px 6px;
            color: var(--blue-dark);
        }

        .post-box {
            border: 2px solid var(--ink);
            background: var(--blue-tint);
            padding: 20px 24px;
            margin: 0 0 24px;
        }

        .post-box .box-label {
            font-family: var(--mono);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: var(--blue);
            display: block;
            margin-bottom: 8px;
        }

        .post-box p {
            font-size: 0.92rem;
            color: var(--ink);
            margin: 0;
        }

        .post-author {
            border: 2px solid var(--ink);
            background: var(--white);
            padding: 26px;
            margin-top: 56px;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .post-author .author-mark { flex: none; }

        .post-author h3 { margin-bottom: 6px; font-size: 1rem; }

        .post-author p {
            font-size: 0.88rem;
            color: var(--ink-soft);
            margin: 0;
        }

        @media (max-width: 920px) {
            .article-grid { grid-template-columns: 1fr; }
            .post-layout { grid-template-columns: 1fr; gap: 32px; }
            .post-toc { position: static; }
            .post-header { padding: 60px 0 36px; }
        }