/* ── RESET & BASE ─────────────────────────────────────────── */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --green: #1D9E75;
        --green-dark: #0F6E56;
        --green-deep: #085041;
        --green-light: #E1F5EE;
        --green-mid: #9FE1CB;
        --text: #1a1a18;
        --text-2: #4a4a46;
        --text-3: #8a8a84;
        --bg: #fafaf8;
        --bg-2: #f3f3ef;
        --bg-3: #eceae3;
        --border: #e2e0d8;
        --border-2: #c8c6bc;
        --blue-light: #E6F1FB;
        --blue-dark: #185FA5;
        --blue-deep: #0C447C;
        --amber-light: #FAEEDA;
        --amber-dark: #854F0B;
        --purple-light: #EEEDFE;
        --purple-dark: #534AB7;
        --coral-light: #FAECE7;
        --coral-dark: #993C1D;
        --gray-light: #F1EFE8;
        --gray-dark: #5F5E5A;
        --serif: 'DM Serif Display', Georgia, serif;
        --sans: 'DM Sans', system-ui, sans-serif;
        --radius: 10px;
        --radius-sm: 6px;
        --radius-lg: 14px;
        /* --max:820px; */
        --max: 1200px;
    }

    html {
        scroll-behavior: smooth;
        font-size: 16px;
    }

    body {
        font-family: var(--sans);
        background: var(--bg);
        color: var(--text);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
    }

    a {
        color: var(--green);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

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

    /* ── TOPBAR NAV ───────────────────────────────────────────── */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg);
        border-bottom: 0.5px solid var(--border);
        padding: 0 2rem;
    }

    .topbar-inner {
        max-width: var(--max);
        margin: 0 auto;
        display: flex;
	justify-content: space-between;
        align-items: center;
        gap: 0;
        height: 100px;
    }

    .logo {
        font-family: var(--serif);
        font-size: 17px;
        color: var(--text);
        margin-right: 2.5rem;
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
    }

    .logo span {
        color: var(--green);
    }

    .nav-links {
        display: flex;
        justify-content: center;
        gap: 0;
        flex: 1;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        font-size: 15px;
        font-weight: bold;
        color: var(--text-3);
        padding: 0 14px;
        height: 56px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        transition: color .15s, border-color .15s;
        text-decoration: none;
    }

    .nav-links a:hover {
        color: var(--text);
        text-decoration: none;
    }

    .nav-links a.active {
        color: var(--green);
        border-bottom-color: var(--green);
        font-weight: 500;
    }

    .nav-cta {
        margin-left: 0;
        flex-shrink: 0;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	gap: 10px;
    }

    .nav-cta a {
        font-size: 12px;
        font-weight: 500;
        padding: 7px 16px;
        background: var(--green);
        color: #fff;
        border-radius: 99px;
        text-decoration: none;
        transition: background .15s;
    }

    .nav-cta a:hover {
        background: var(--green-dark);
        text-decoration: none;
    }

    /* ── PAGE SECTIONS ────────────────────────────────────────── */
    .page {
        /* display: none; */
        min-height: calc(100vh - 56px);
    }

    .page.active {
        display: block;
    }

    .container {
        max-width: var(--max);
        margin: 0 auto;
        padding: 3.5rem 2rem 5rem;
    }

    /* ── SHARED COMPONENTS ────────────────────────────────────── */
    .eyebrow {
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: .75rem;
        font-weight: 500;
    }

    .eyebrow.green {
        color: var(--green);
    }

    .page-title {
        font-family: var(--serif);
        font-size: 38px;
        color: var(--text);
        line-height: 1.2;
        margin-bottom: .9rem;
    }

    .page-sub {
        font-size: 15px;
        color: var(--text-2);
        line-height: 1.8;
        max-width: 580px;
        margin-bottom: 1.5rem;
    }

    .divider {
        height: 0.5px;
        background: var(--border);
        margin: 2.5rem 0;
    }

    .section-lbl {
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: 1.1rem;
        font-weight: 500;
    }

    .accent-bar {
        border-left: 2px solid var(--green);
        padding-left: 1rem;
        border-radius: 0;
    }

    .surface {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.35rem 1.5rem;
    }

    .card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        padding: 10px 22px;
        background: var(--green);
        color: #fff;
        border: none;
        border-radius: 99px;
        cursor: pointer;
        transition: background .15s;
        text-decoration: none;
    }

    .btn-primary:hover {
        background: var(--green-dark);
        text-decoration: none;
        color: #fff;
    }

    .btn-ghost {
        display: inline-flex;
        align-items: center;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        padding: 10px 22px;
        background: transparent;
        color: var(--text-2);
        border: 0.5px solid var(--border-2);
        border-radius: 99px;
        cursor: pointer;
        transition: background .15s, color .15s;
        text-decoration: none;
    }

    .btn-ghost:hover {
        background: var(--bg-2);
        color: var(--text);
        text-decoration: none;
    }

    .pill {
        font-size: 11px;
        font-weight: 500;
        padding: 2px 9px;
        border-radius: 99px;
        display: inline-block;
    }

    .p-green {
        background: var(--green-light);
        color: var(--green-deep);
    }

    .p-blue {
        background: var(--blue-light);
        color: var(--blue-deep);
    }

    .p-amber {
        background: var(--amber-light);
        color: var(--amber-dark);
    }

    .p-purple {
        background: var(--purple-light);
        color: var(--purple-dark);
    }

    .p-coral {
        background: var(--coral-light);
        color: var(--coral-dark);
    }

    .p-gray {
        background: var(--gray-light);
        color: var(--gray-dark);
    }

    .tag-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .green-link {
        color: var(--green);
        font-weight: 500;
        cursor: pointer;
    }

    .green-link:hover {
        text-decoration: underline;
    }

    /* ── PHOTO PLACEHOLDER ────────────────────────────────────── */
    .photo-placeholder {
        background: var(--bg-3);
        border: 1px dashed var(--border-2);
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--text-3);
        font-size: 12px;
        text-align: center;
        padding: 1rem;
    }

    .photo-placeholder svg {
        opacity: .4;
    }

    .photo-slot {
        overflow: hidden;
        border-radius: var(--radius-lg);
    }

    .photo-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 1 · HOME
══════════════════════════════════════════════════════════ */
    .hero {
        margin-bottom: 2.5rem;
    }

    .hero-label {
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--green);
        font-weight: 500;
        margin-bottom: 1rem;
    }

    .hero-title {
        font-family: var(--serif);
        font-size: 46px;
        line-height: 1.15;
        color: var(--text);
        margin-bottom: 1.1rem;
        max-width: 640px;
    }

    .hero-body {
        font-size: 15px;
        color: var(--text-2);
        line-height: 1.8;
        max-width: 560px;
        margin-bottom: 1.75rem;
    }

    .hero-ctas {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: .75rem;
    }

    .hero-note {
        font-size: 12px;
        color: var(--text-3);
    }

    .hero-layout {
        display: grid;
        grid-template-columns: 1fr 500px;
        gap: 3rem;
        align-items: start;
    }

    .hero-img {
        height: 320px;
    }

    .why-now {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.5rem 1.75rem;
        margin-bottom: 2.5rem;
    }

    .why-now h2 {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--text);
        margin-bottom: .75rem;
    }

    .why-now p {
        font-size: 14px;
        color: var(--text-2);
        line-height: 1.8;
        margin-bottom: .6rem;
    }

    .why-now p:last-child {
        margin-bottom: 0;
    }

    .svc-grid-home {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: .75rem;
    }

    .svc-tile {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.1rem 1.15rem;
        cursor: pointer;
        transition: border-color .15s, background .15s;
    }

    .svc-tile:hover {
        border-color: var(--green);
    }

    .svc-tile-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .65rem;
    }

    .svc-tile h3 {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.35;
        margin-bottom: 3px;
    }

    .svc-tile p {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.55;
    }

    .approach-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--border);
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: 2.5rem;
    }

    .appr-cell {
        background: #fff;
        padding: 1rem 1.1rem;
    }

    .appr-cell .num {
        font-family: var(--serif);
        font-size: 24px;
        color: var(--green);
        line-height: 1;
        margin-bottom: 4px;
    }

    .appr-cell h3 {
        font-size: 12px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 2px;
    }

    .appr-cell p {
        font-size: 11px;
        color: var(--text-3);
        line-height: 1.5;
    }

    .founder-note-home {
        border-left: 2px solid var(--green);
        padding: .9rem 1.25rem;
        border-radius: 0;
        margin-bottom: 2.5rem;
    }

    .founder-note-home .fn-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-3);
        margin-bottom: .6rem;
    }

    .founder-note-home blockquote {
        font-family: var(--serif);
        font-style: italic;
        font-size: 16px;
        color: var(--text);
        line-height: 1.75;
        margin-bottom: .75rem;
    }

    .founder-note-home .fn-sig {
        font-size: 12px;
        color: var(--text-2);
    }

    .advisor-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: .75rem;
    }

    .adv-chip {
        display: flex;
        align-items: center;
        gap: 7px;
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: 99px;
        padding: 5px 13px 5px 5px;
    }

    .adv-av {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 500;
        flex-shrink: 0;
    }

    .av-t {
        background: var(--green-light);
        color: var(--green-deep);
    }

    .av-b {
        background: var(--blue-light);
        color: var(--blue-deep);
    }

    .av-p {
        background: var(--purple-light);
        color: var(--purple-dark);
    }

    .av-a {
        background: var(--amber-light);
        color: var(--amber-dark);
    }

    .adv-chip span {
        font-size: 12px;
        color: var(--text-2);
    }

    .blog-preview {
        display: flex;
        flex-direction: column;
        gap: 1px;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: .75rem;
    }

    .blog-preview-row {
        background: #fff;
        padding: 1rem 1.25rem;
        display: grid;
        grid-template-columns: 1fr 80px;
        gap: 10px;
        border-bottom: 0.5px solid var(--border);
        cursor: pointer;
        transition: background .1s;
    }

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

    .blog-preview-row:hover {
        background: var(--bg-2);
    }

    .blog-preview-row h3 {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: 3px;
    }

    .blog-preview-row p {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.5;
    }

    .blog-date-col {
        font-size: 11px;
        color: var(--text-3);
        text-align: right;
        padding-top: 2px;
    }

    .cta-band {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.75rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .cta-band h2 {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--text);
        margin-bottom: 5px;
    }

    .cta-band p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.65;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 2 · ABOUT US
══════════════════════════════════════════════════════════ */
    .about-hero-layout {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 3rem;
        align-items: start;
        margin-bottom: 2.5rem;
    }

    .about-hero-img {
        height: 260px;
    }

    .story-body {
        font-size: 14px;
        color: var(--text-2);
        line-height: 1.85;
    }

    .story-body p {
        margin-bottom: .9rem;
    }

    .story-body p:last-child {
        margin-bottom: 0;
    }

    .pull-quote {
        font-family: var(--serif);
        font-style: italic;
        font-size: 19px;
        color: var(--text);
        line-height: 1.65;
        border-left: 2px solid var(--green);
        padding-left: 1.25rem;
        margin: 1.75rem 0;
        border-radius: 0;
    }

    .values-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 2rem;
    }

    .val-card {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.1rem 1.2rem;
    }

    .val-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .65rem;
    }

    .val-card h3 {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 4px;
    }

    .val-card p {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.6;
    }

    .approach-2x2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 2rem;
    }

    .team-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 2rem;
    }

    .person-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
    }

    .person-top {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .person-photo {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .person-photo-placeholder {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--bg-3);
        border: 1px dashed var(--border-2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 18px;
        font-weight: 500;
        color: var(--text-3);
        font-family: var(--serif);
    }

    .person-name {
        font-size: 17px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 2px;
    }

    .person-role {
        font-size: 13px;
        color: var(--green);
        font-weight: 500;
        margin-bottom: 3px;
    }

    .person-sub {
        font-size: 12px;
        color: var(--text-3);
    }

    .person-bio {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.75;
        margin-bottom: .85rem;
    }

    .advisor-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 1.25rem;
    }

    .adv-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.15rem 1.2rem;
    }

    .adv-top {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: .65rem;
    }

    .adv-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .adv-avatar-ph {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--bg-3);
        border: 1px dashed var(--border-2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-3);
        flex-shrink: 0;
    }

    .adv-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
    }

    .adv-affil {
        font-size: 11px;
        color: var(--text-3);
        margin-top: 1px;
    }

    .adv-domain {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.6;
        margin-bottom: .6rem;
    }

    .adv-join {
        font-size: 11px;
        color: var(--green);
        font-weight: 500;
    }

    .smallprint {
        background: var(--bg-2);
        border-radius: var(--radius);
        padding: 1rem 1.25rem;
        margin-bottom: 2rem;
    }

    .smallprint p {
        font-size: 12px;
        color: var(--text-3);
        line-height: 1.65;
    }

    .boutique-box {
        border-left: 2px solid var(--green);
        padding: 0 1.25rem;
        border-radius: 0;
        margin-bottom: 1.5rem;
    }

    .boutique-box h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 6px;
    }

    .boutique-box p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.75;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 3 · SERVICES
══════════════════════════════════════════════════════════ */
    .filter-row {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: 1.75rem;
    }

    .filter-btn {
        font-size: 12px;
        padding: 5px 14px;
        border: 0.5px solid var(--border-2);
        border-radius: 99px;
        background: transparent;
        color: var(--text-2);
        cursor: pointer;
        transition: background .12s, color .12s, border-color .12s;
        font-family: var(--sans);
    }

    .filter-btn.active,
    .filter-btn:hover {
        background: var(--green);
        color: #fff;
        border-color: var(--green);
    }

    .svc-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 12px;
        overflow: hidden;
    }

    .svc-header {
        padding: 1.35rem 1.35rem 1rem;
        cursor: pointer;
        display: grid;
        grid-template-columns: 1fr 24px;
        gap: 12px;
        align-items: start;
    }

    .svc-header:hover .svc-title {
        color: var(--green);
    }

    .svc-icon-row {
        display: flex;
        gap: 9px;
        align-items: center;
        margin-bottom: .55rem;
    }

    .svc-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .svc-title {
        font-size: 17px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.3;
        transition: color .12s;
    }

    .svc-tagline {
        font-size: 13px;
        color: var(--text-2);
        margin-top: 3px;
        line-height: 1.5;
    }

    .chevron {
        width: 18px;
        height: 18px;
        color: var(--text-3);
        transition: transform .2s;
        margin-top: 4px;
        flex-shrink: 0;
    }

    .chevron.open {
        transform: rotate(180deg);
    }

    .svc-body {
        padding: 0 1.35rem 1.35rem;
        border-top: 0.5px solid var(--border);
    }

    .svc-body.hidden {
        display: none;
    }

    .svc-problem {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.8;
        margin: 1.1rem 0 1rem;
    }

    .detail-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 1rem;
    }

    .detail-block {
        background: var(--bg-2);
        border-radius: var(--radius);
        padding: 10px 12px;
    }

    .detail-block .dlbl {
        font-size: 11px;
        color: var(--text-3);
        margin-bottom: 6px;
        letter-spacing: .04em;
        text-transform: uppercase;
        font-weight: 500;
    }

    .detail-block ul {
        list-style: none;
        padding: 0;
    }

    .detail-block ul li {
        font-size: 12px;
        color: var(--text);
        line-height: 1.65;
        padding-left: 12px;
        position: relative;
    }

    .detail-block ul li::before {
        content: "·";
        position: absolute;
        left: 0;
        color: var(--green);
        font-weight: 500;
    }

    .who-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .svc-enquire {
        font-size: 12px;
        color: var(--green);
        font-weight: 500;
        cursor: pointer;
        transition: opacity .12s;
    }

    .svc-enquire:hover {
        opacity: .75;
        text-decoration: underline;
    }

    .how-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 2rem;
    }

    .how-card {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.1rem 1.15rem;
    }

    .how-num {
        font-family: var(--serif);
        font-size: 26px;
        color: var(--green);
        line-height: 1;
        margin-bottom: 6px;
    }

    .how-card h3 {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 3px;
    }

    .how-card p {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.55;
    }

    .candour-box {
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.35rem 1.5rem;
    }

    .candour-box h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 6px;
    }

    .candour-box p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.7;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 4 · PROJECTS
══════════════════════════════════════════════════════════ */
    .honesty-note {
        font-size: 13px;
        color: var(--text-3);
        line-height: 1.65;
        border-left: 2px solid var(--green);
        padding-left: 12px;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .proj-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.35rem;
        margin-bottom: 12px;
    }

    .proj-card.active-accent {
        border-left: 3px solid var(--green);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .proj-card.pipeline-accent {
        border-left: 3px solid #EF9F27;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .proj-card.pre-accent {
        border-left: 3px solid var(--blue-dark);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .meta-row {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: .65rem;
    }

    .proj-card h3 {
        font-size: 16px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: .5rem;
    }

    .proj-challenge {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.75;
        margin-bottom: .9rem;
    }

    .proj-detail-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: .9rem;
    }

    .proj-detail {
        background: var(--bg-2);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
    }

    .proj-detail .dlbl {
        font-size: 11px;
        color: var(--text-3);
        margin-bottom: 2px;
    }

    .proj-detail .dval {
        font-size: 12px;
        color: var(--text);
        font-weight: 500;
        line-height: 1.4;
    }

    .proj-output {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.65;
        border-top: 0.5px solid var(--border);
        padding-top: .75rem;
    }

    .proj-output span {
        font-weight: 500;
        color: var(--text);
    }

    .pipeline-card {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.1rem 1.35rem;
        margin-bottom: 8px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: start;
    }

    .pipeline-card h3 {
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: 3px;
    }

    .pipeline-card p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.55;
    }

    .pipeline-card .pdate {
        font-size: 11px;
        color: var(--text-3);
        white-space: nowrap;
        text-align: right;
        padding-top: 3px;
    }

    .explore-box {
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.35rem 1.5rem;
        margin-top: 2rem;
    }

    .explore-box h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 5px;
    }

    .explore-box p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.7;
    }

    .italic-note {
        font-size: 13px;
        color: var(--text-3);
        line-height: 1.65;
        font-style: italic;
        margin-bottom: 1.25rem;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 5 · BLOG
══════════════════════════════════════════════════════════ */
    .featured-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.75rem;
        margin-bottom: 1.25rem;
        border-left: 3px solid var(--green);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .feat-label {
        font-size: 11px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--green);
        font-weight: 500;
        margin-bottom: .6rem;
    }

    .featured-card h2 {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--text);
        line-height: 1.35;
        margin-bottom: .6rem;
    }

    .featured-card .excerpt {
        font-size: 14px;
        color: var(--text-2);
        line-height: 1.75;
        margin-bottom: 1rem;
    }

    .feat-meta {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .feat-meta .date {
        font-size: 12px;
        color: var(--text-3);
    }

    .posts-grid {
        display: flex;
        flex-direction: column;
        gap: 1px;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .post-row {
        background: #fff;
        padding: 1.1rem 1.35rem;
        display: grid;
        grid-template-columns: 1fr 90px;
        gap: 1rem;
        border-bottom: 0.5px solid var(--border);
        cursor: pointer;
        transition: background .1s;
    }

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

    .post-row:hover {
        background: var(--bg-2);
    }

    .post-row h3 {
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: 4px;
    }

    .post-row .excerpt {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.55;
        margin-bottom: 5px;
    }

    .post-row .author {
        font-size: 11px;
        color: var(--text-3);
    }

    .post-date-col {
        text-align: right;
    }

    .post-date-col .pdate {
        font-size: 12px;
        color: var(--text-3);
        display: block;
        margin-bottom: 3px;
    }

    .post-date-col .pread {
        font-size: 11px;
        color: var(--text-3);
    }

    .contribute-box {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.35rem 1.5rem;
        margin-bottom: 2rem;
    }

    .contribute-box h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 6px;
    }

    .contribute-box p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.7;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 6 · MARKET RESEARCH
══════════════════════════════════════════════════════════ */
    .method-note {
        font-size: 13px;
        color: var(--text-3);
        line-height: 1.65;
        border-left: 2px solid var(--green);
        padding-left: 12px;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .themes-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 2rem;
    }

    .theme-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.1rem 1.15rem;
    }

    .theme-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .65rem;
    }

    .theme-card h3 {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .theme-card p {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.6;
    }

    .reports-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 2rem;
    }

    .report-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: start;
    }

    .report-meta {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .report-card h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .report-card p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.6;
    }

    .report-date {
        font-size: 11px;
        color: var(--text-3);
        margin-top: 6px;
    }

    .dl-btn {
        font-size: 12px;
        font-weight: 500;
        padding: 7px 14px;
        border: 0.5px solid var(--border-2);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-2);
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s;
        font-family: var(--sans);
    }

    .dl-btn:hover {
        background: var(--bg-2);
        color: var(--text);
    }

    .dl-btn.soon {
        color: var(--text-3);
        border-color: var(--border);
        cursor: default;
    }

    .dl-btn.soon:hover {
        background: transparent;
        color: var(--text-3);
    }

    .commissioned-box {
        background: var(--bg-2);
        border-radius: var(--radius-lg);
        padding: 1.35rem 1.5rem;
        margin-bottom: 2rem;
    }

    .commissioned-box h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 6px;
    }

    .commissioned-box p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.7;
    }

    /* ══════════════════════════════════════════════════════════
   PAGE 7 · CONTACT
══════════════════════════════════════════════════════════ */
    .contact-layout {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }

    .form-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.75rem;
    }

    .field {
        margin-bottom: 1.15rem;
    }

    .field label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-2);
        margin-bottom: 5px;
        letter-spacing: .03em;
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        font-family: var(--sans);
        font-size: 14px;
        background: var(--bg-2);
        color: var(--text);
        border: 0.5px solid var(--border-2);
        border-radius: var(--radius-sm);
        padding: 9px 12px;
        outline: none;
        transition: border-color .15s;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        border-color: var(--green);
        box-shadow: 0 0 0 2px rgba(29, 158, 117, .1);
    }

    .field textarea {
        resize: vertical;
        min-height: 100px;
        line-height: 1.6;
    }

    .field select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 11px center;
        padding-right: 30px;
    }

    .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .checkbox-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 1.15rem;
    }

    .checkbox-row input {
        width: 15px;
        height: 15px;
        margin-top: 2px;
        accent-color: var(--green);
        flex-shrink: 0;
    }

    .checkbox-row span {
        font-size: 12px;
        color: var(--text-2);
        line-height: 1.55;
    }

    .submit-btn {
        width: 100%;
        padding: 11px;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 500;
        background: var(--green);
        color: #fff;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        transition: background .15s;
        letter-spacing: .02em;
    }

    .submit-btn:hover {
        background: var(--green-dark);
    }

    .response-note {
        font-size: 12px;
        color: var(--text-3);
        margin-top: .65rem;
        text-align: center;
        line-height: 1.5;
    }

    .success-msg {
        display: none;
        text-align: center;
        padding: 2rem 1rem;
    }

    .success-tick {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--green-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto .85rem;
    }

    .success-msg h3 {
        font-size: 16px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: .4rem;
    }

    .success-msg p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.65;
    }

    .contact-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
    }

    .contact-info-card {
        background: #fff;
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
    }

    .contact-info-card .ci-label {
        font-size: 11px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: .65rem;
        font-weight: 500;
    }

    .contact-info-card .ci-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 3px;
    }

    .contact-info-card .ci-note {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.6;
    }

    .contact-info-card .ci-divider {
        height: 0.5px;
        background: var(--border);
        margin: .85rem 0;
    }

    .topic-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .nl-form-contact {
        display: flex;
        gap: 8px;
        margin-top: .8rem;
        flex-wrap: wrap;
    }

    .nl-form-contact input {
        flex: 1;
        min-width: 140px;
        font-family: var(--sans);
        font-size: 13px;
        padding: 7px 10px;
        border: 0.5px solid var(--border-2);
        border-radius: var(--radius-sm);
        background: var(--bg-2);
        color: var(--text);
        outline: none;
    }

    .nl-form-contact input:focus {
        border-color: var(--green);
    }

    .nl-btn-contact {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        padding: 7px 16px;
        background: var(--green);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background .15s;
        white-space: nowrap;
    }

    .nl-btn-contact:hover {
        background: var(--green-dark);
    }

    .nl-ok-contact {
        display: none;
        font-size: 13px;
        color: var(--green);
        margin-top: .5rem;
        font-weight: 500;
    }

    /* ── NEWSLETTER STRIP (shared) ────────────────────────────── */
    .newsletter-strip {
        border: 0.5px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.35rem 1.5rem;
    }

    .newsletter-strip h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 4px;
    }

    .newsletter-strip p {
        font-size: 13px;
        color: var(--text-2);
        line-height: 1.6;
        margin-bottom: .9rem;
    }

    .nl-form-strip {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .nl-form-strip input {
        flex: 1;
        min-width: 180px;
        font-family: var(--sans);
        font-size: 13px;
        padding: 8px 11px;
        border: 0.5px solid var(--border-2);
        border-radius: var(--radius-sm);
        background: var(--bg-2);
        color: var(--text);
        outline: none;
    }

    .nl-form-strip input:focus {
        border-color: var(--green);
    }

    .nl-btn-strip {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        padding: 8px 18px;
        background: var(--green);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background .15s;
    }

    .nl-btn-strip:hover {
        background: var(--green-dark);
    }

    .nl-ok-strip {
        display: none;
        font-size: 13px;
        color: var(--green);
        font-weight: 500;
        margin-top: .5rem;
    }

    /* ── FOOTER ───────────────────────────────────────────────── */
    footer {
        background: var(--bg-2);
        border-top: 0.5px solid var(--border);
        padding: 2.5rem 2rem;
    }

    footer .footer-inner {
        max-width: var(--max);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand .logo-f {
        font-family: var(--serif);
        font-size: 18px;
        color: var(--text);
        margin-bottom: .5rem;
    }

    .footer-brand .logo-f span {
        color: var(--green);
    }

    .footer-brand p {
        font-size: 12px;
        color: var(--text-3);
        line-height: 1.65;
        max-width: 220px;
    }

    footer h4 {
        font-size: 12px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: .75rem;
        letter-spacing: .04em;
    }

    footer ul {
        list-style: none;
    }

    footer ul li {
        margin-bottom: .4rem;
    }

    footer ul li a {
        font-size: 12px;
        color: var(--text-3);
        text-decoration: none;
        cursor: pointer;
        transition: color .12s;
    }

    footer ul li a:hover {
        color: var(--green);
    }

    .footer-bottom {
        max-width: var(--max);
        margin: 2rem auto 0;
        padding-top: 1.25rem;
        border-top: 0.5px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .footer-bottom p {
        font-size: 11px;
        color: var(--text-3);
    }

    /* ── RESPONSIVE ───────────────────────────────────────────── */


    @media(max-width:700px) {

        .hero-layout,
        .contact-layout,
        .about-hero-layout {
            grid-template-columns: 1fr;
        }

        .hero-img,
        .about-hero-img {
            display: none;
        }

        .svc-grid-home,
        .values-grid,
        .themes-grid {
            grid-template-columns: 1fr 1fr;
        }

        .approach-strip,
        .how-grid {
            grid-template-columns: 1fr 1fr;
        }

        .footer-inner {
            grid-template-columns: 1fr 1fr !important;
        }

        .advisor-grid {
            grid-template-columns: 1fr;
        }

        .detail-cols,
        .field-row {
            grid-template-columns: 1fr;
        }
    }

    @media(max-width:480px) {
        .page-title {
            font-size: 28px;
        }

        .hero-title {
            font-size: 30px;
        }

        .svc-grid-home,
        .values-grid,
        .themes-grid,
        .approach-strip,
        .how-grid {
            grid-template-columns: 1fr;
        }

        .container {
            padding: 2.5rem 1.25rem 4rem;
        }

        .topbar {
            padding: 0 1.25rem;
        }

        .footer-inner {
            grid-template-columns: 1fr !important;
        }
    }

    .gallery-strip {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        margin-bottom: 2.5rem;
    }

    .gallery-strip .gthumb {
        height: 110px;
        border-radius: var(--radius);
        overflow: hidden;
    }

    .gallery-strip .gthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s;
    }

    .gallery-strip .gthumb:hover img {
        transform: scale(1.05);
    }

    .gallery-caption {
        font-size: 11px;
        color: var(--text-3);
        text-align: center;
        margin-top: .4rem;
        margin-bottom: 2rem;
    }