.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(20,20,20,.12);border-left:1px solid rgba(20,20,20,.12);margin-top:56px}
.trust-card{padding:14px;border-right:1px solid rgba(20,20,20,.12);border-bottom:1px solid rgba(20,20,20,.12);display:flex;flex-direction:column;gap:6px;min-width:0}
.trust-logo{height:150px;overflow:hidden;background:#f2f2f2;margin-bottom:12px}
.trust-logo img{width:100%;height:100%;object-fit:cover;display:block;filter:none;transition:transform .35s ease}
.trust-card:hover .trust-logo img{transform:scale(1.03)}
.trust-card strong{font-size:17px;font-weight:600}
.trust-card>span{font-size:13px;color:#7b7b7b}
.clients-note{margin-top:32px;display:flex;justify-content:space-between;gap:30px;border-top:1px solid rgba(20,20,20,.12);padding-top:22px}
.clients-note span{font-weight:600}
.clients-note p{max-width:650px;margin:0;color:#666}
@media(max-width:1000px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-logo{height:120px}.clients-note{flex-direction:column}}
@media(max-width:450px){.trust-grid{grid-template-columns:1fr}}

@font-face {
    font-family: "Neue Haas Grotesk Display";
    src:
    local("Neue Haas Grotesk Display Pro"),
    local("Neue Haas Grotesk Display"),
    local("Neue Haas Grotesk");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bg: #ececec;
    --surface: #ffffff;
    --surface-2: #f6f6f6;
    --ink: #0a0a0a;
    --muted: #6e6e6e;
    --line: #d9d9d9;
    --line-soft: #e8e8e8;
    --accent: #555555;
    --dark: #151515;
    --gray-soft: #acacac;
    --gray-pale: #eaeaea;
    --night: #131313;
    --radius: 12px;
    --container: 1440px;
    --shadow-soft: 0 16px 50px rgba(12,12,12,0.06);
    --font-main: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(85,85,85,.18); }

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

.page {
    min-height: 100vh;
    padding-bottom: 24px;
}

/* ------------------------------
    HEADER
------------------------------ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    pointer-events: none;
}

.header-inner {
    min-height: 94px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 24px;
    pointer-events: auto;
}

.brand {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}


.brand-copy strong {
    display: block;
    font-size: 15px;
    letter-spacing: -.5px;
}

.brand-copy span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--muted);
}

.nav-shell {
    position: relative;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 760px;
    gap: 6px;
    padding: 9px 10px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.035);
    backdrop-filter: blur(18px);
}

.nav-item,
.nav-trigger {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 12px 17px;
    border-radius: 8px;
    font-size: 16px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.nav-item:hover,
.nav-trigger:hover,
.nav-item.active { background: #f1f1f1; }

.nav-trigger.is-open { color: var(--accent); background: #f4f4f4; }

.nav-caret { font-size: 10px; margin-left: 4px; transition: transform .2s ease; display: inline-block; }
.nav-trigger.is-open .nav-caret { transform: rotate(180deg); }

.header-cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
    font-size: 13px;
    transition: transform .25s ease, background .25s ease;
}

.header-cta:hover { transform: translateY(-2px); background: var(--dark); }

.mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 25%;
    width: min(1380px, calc(100vw - 64px));
    transform: translate(-50%, -8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 38px 42px;
}

.mega.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.mega-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    gap: 44px;
}

.mega-intro h3 {
    font-size: 32px;
    line-height: 1.03;
    letter-spacing: -1.4px;
    font-weight: 500;
    margin: 0 0 18px;
}

.mega-intro p,
.mega-link span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.mega-label {
    display: block;
    margin-bottom: 12px;
    color: #7e7e7e;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.15px;
}

.mega-link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.mega-link strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 3px;
}

/* ------------------------------
    HERO
------------------------------ */
.hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    padding: 56px 0 44px;
}

.hero-panel {
    position: relative;
    min-height: 690px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    background:
    radial-gradient(circle at 22% 55%, rgba(85,85,85,.14), transparent 27%),
    radial-gradient(circle at 78% 58%, rgba(85,85,85,.12), transparent 25%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .23;
    z-index: -4;
    background-image:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 72%, transparent 100%);
}

.hero-orb {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    border: 1px solid rgba(85,85,85,.15);
    z-index: -3;
    animation: breathe 10s ease-in-out infinite;
}

.hero-orb.one { left: -210px; bottom: -210px; }
.hero-orb.two { right: -240px; top: -220px; animation-delay: -4s; }

@keyframes breathe {
    50% { transform: scale(1.05) translateY(-10px); }
}


.hero-eyebrow {
    margin-bottom: 26px;
    font-size: 16px;
    letter-spacing: -.15px;
}

.hero h1 {
    max-width: 1040px;
    margin: 0;
    font-size: clamp(54px, 5.4vw, 92px);
    line-height: .95;
    letter-spacing: -5.4px;
    font-weight: 500;
    text-wrap: balance;
}

.hero-sub {
    margin: 28px auto 0;
    max-width: 760px;
    color: #424242;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.5;
}

.proof-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin-top: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,.66);
    backdrop-filter: blur(10px);
}

.proof {
    min-width: 188px;
    padding: 15px 20px 14px;
    text-align: left;
    border-right: 1px solid var(--line);
}

.proof:last-child { border-right: 0; }
.proof strong { display: block; font-size: 22px; font-weight: 500; letter-spacing: -1px; }
.proof span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.25; text-transform: uppercase; letter-spacing: .65px; }

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.btn:hover { transform: translateY(-2px); background: var(--dark); border-color: var(--dark); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: #ffffff; border-color: #c9c9c9; }

.logo-rail {
    margin-top: 24px;
    padding: 22px 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    color: #6d6d6d;
    font-size: 13px;
    text-align: center;
    letter-spacing: -.2px;
}

.logo-rail span { opacity: .72; }

/* ------------------------------
    SHARED SECTION STYLES
------------------------------ */
.section { padding: 48px 0; }
.section-panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.section-pad { padding: clamp(34px, 4vw, 64px); }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: #a9a9a9;
}

.display {
    margin: 14px 0 0;
    font-size: clamp(44px, 5.1vw, 78px);
    line-height: .97;
    letter-spacing: -4px;
    font-weight: 500;
    text-wrap: balance;
}

.section-copy {
    max-width: 720px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.62;
}

/* ------------------------------
    INTRO / CAPABILITIES
------------------------------ */
.intro-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 72px;
    align-items: end;
}

.intro-note {
    padding-left: 28px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.intro-note strong { color: var(--ink); font-weight: 500; }

.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 56px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.cap-card {
    min-height: 255px;
    padding: 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background .25s ease;
}

.cap-card:hover { background: #f8f8f8; }
.cap-no { color: #8a8a8a; font-size: 11px; }
.cap-card h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -1.2px; }
.cap-card p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ------------------------------
    SERVICE MODULES
------------------------------ */
.services-stack { display: grid; gap: 16px; margin-top: 22px; }

.service-card {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 520px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.service-copy {
    padding: clamp(30px, 4vw, 54px);
    display: flex;
    flex-direction: column;
}

.service-tag {
    width: max-content;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.service-copy h3 {
    margin: 22px 0 14px;
    font-size: clamp(36px, 3.7vw, 58px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 500;
}

.service-copy > p {
    max-width: 590px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.62;
}

.service-copy .btn { width: max-content; margin-top: 24px; }

.service-meta {
    margin-top: auto;
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.meta-block span {
    display: block;
    margin-bottom: 8px;
    color: #898989;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .9px;
}

.meta-block p {
    margin: 0;
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
}

.service-visual {
    position: relative;
    margin: 20px 20px 20px 0;
    min-height: 440px;
    border-radius: 10px;
    overflow: hidden;
    background:
    radial-gradient(circle at 72% 22%, rgba(162,162,162,.22), transparent 27%),
    linear-gradient(160deg, #131313 0%, #373737 48%, #555555 100%);
    isolation: isolate;
}

.service-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

.visual-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.visual-ring.r1 { width: 360px; height: 360px; }
.visual-ring.r2 { width: 245px; height: 245px; }
.visual-ring.r3 { width: 120px; height: 120px; }

.visual-node {
    position: absolute;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 9px;
    color: #ffffff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(7px);
    font-size: 11px;
    line-height: 1.2;
}

.node-a { left: 8%; top: 18%; }
.node-b { right: 7%; top: 20%; }
.node-c { left: 12%; bottom: 17%; }
.node-d { right: 10%; bottom: 16%; }
.node-e { left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.16); }

.visual-line {
    position: absolute;
    height: 1px;
    background: rgba(255,255,255,.42);
    transform-origin: left center;
    opacity: .65;
}

.visual-stack {
    position: absolute;
    inset: 17% 10%;
    display: grid;
    align-content: center;
}

.wire-card {
    height: 80px;
    margin-top: -10px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(5px);
    transform: translateX(var(--shift, 0));
    position: relative;
}

.wire-card::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
}

.wire-card::after {
    content: "";
    position: absolute;
    left: 62px;
    top: 22px;
    width: 45%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    box-shadow: 0 14px 0 rgba(255,255,255,.22);
}

.service-card.alt .service-visual {
    background: linear-gradient(155deg, #131313, #464646 54%, #929292);
}

.service-card.light .service-visual {
    background: linear-gradient(155deg, #e7e7e7, #aaaaaa 50%, #555555);
}

.service-card.light .visual-ring { border-color: rgba(21,21,21,.25); }
.service-card.light .visual-node { color: #212121; border-color: rgba(21,21,21,.22); background: rgba(255,255,255,.28); }

/* ------------------------------
    OUTCOMES
------------------------------ */
.outcomes {
    margin-top: 8px;
    padding: 0;
}

.outcomes-panel {
    position: relative;
    overflow: hidden;
    min-height: 730px;
    border-radius: var(--radius);
    background:
    radial-gradient(circle at 50% 110%, rgba(85,85,85,.68), transparent 42%),
    linear-gradient(180deg, #555555 0%, #151515 42%, #131313 70%, #333333 100%);
    color: #ffffff;
}

.outcomes-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
    radial-gradient(circle at center, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .15;
    mask-image: linear-gradient(to bottom, black, transparent 74%);
}

.outcomes-inner {
    position: relative;
    z-index: 1;
    padding: 64px;
}

.outcomes h2 {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(54px, 6vw, 92px);
    line-height: .95;
    letter-spacing: -5px;
    font-weight: 500;
}

.case-grid {
    max-width: 940px;
    margin: 64px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.case-card {
    min-height: 260px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(9px);
    transition: transform .25s ease, background .25s ease;
}

.case-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.12); }
.case-card small { color: rgba(255,255,255,.65); font-size: 10px; text-transform: uppercase; letter-spacing: .9px; }
.case-card h3 { margin: 16px 0 10px; font-size: 18px; font-weight: 500; }
.case-card p { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.5; }
.case-metric { margin-top: auto; padding-top: 30px; font-size: 52px; line-height: .95; letter-spacing: -3px; }
.case-metric span { display: block; margin-top: 8px; color: #a5a5a5; font-size: 11px; letter-spacing: 0; }

.outcomes-cta {
    width: max-content;
    margin: 54px auto 0;
    padding: 8px 8px 8px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: #ffffff;
    color: var(--ink);
    border-radius: 999px;
    font-size: 12px;
}

.outcomes-cta .pill {
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
}

/* ------------------------------
    PROCESS
------------------------------ */
.process-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: end;
}

.process-grid {
    margin-top: 60px;
    border-top: 1px solid var(--line);
}

.process-row {
    display: grid;
    grid-template-columns: 90px 1fr 1.35fr 32px;
    gap: 28px;
    align-items: center;
    min-height: 116px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background .2s ease;
}

.process-row:hover { background: #f9f9f9; }
.process-no { color: #868686; font-size: 11px; }
.process-title { font-size: 24px; letter-spacing: -1.2px; }
.process-desc { color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 620px; }
.process-arrow { transition: transform .2s ease; }
.process-row:hover .process-arrow { transform: translateX(5px); }

/* ------------------------------
    DOMAINS
------------------------------ */
.domain-wrap {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    min-height: 590px;
}

.domain-art {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background:
    radial-gradient(circle at 74% 18%, rgba(172,172,172,.28), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(85,85,85,.34), transparent 32%),
    linear-gradient(155deg, var(--dark) 0%, var(--night) 54%, #333333 100%);
    border-right: 1px solid rgba(255,255,255,.08);
}

.domain-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .22;
    background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 48%, black 0%, rgba(0,0,0,.82) 46%, transparent 82%);
}

.domain-art::after {
    content: "05";
    position: absolute;
    right: -28px;
    bottom: -48px;
    z-index: -1;
    color: rgba(255,255,255,.055);
    font-size: clamp(190px, 19vw, 300px);
    line-height: .8;
    letter-spacing: -20px;
    font-weight: 600;
}

.domain-art-top {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: rgba(255,255,255,.62);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.25px;
}

.domain-art-top span:last-child { text-align: right; }

.domain-orbit {
    position: absolute;
    left: 50%;
    top: 48%;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.domain-orbit.one { width: 390px; height: 390px; }
.domain-orbit.two { width: 270px; height: 270px; border-style: dashed; animation: domainSpin 24s linear infinite; }
.domain-orbit.three { width: 128px; height: 128px; border-color: rgba(255,255,255,.28); }

@keyframes domainSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.domain-core {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 154px;
    height: 154px;
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(9px);
    box-shadow: 0 24px 60px rgba(0,0,0,.12);
}

.domain-core small {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.6);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.25px;
}

.domain-core strong {
    display: block;
    font-size: 25px;
    line-height: .95;
    letter-spacing: -1.5px;
    font-weight: 500;
}

.domain-point {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.82);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .65px;
    white-space: nowrap;
}

.domain-point::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--gray-soft);
    box-shadow: 0 0 0 4px rgba(172,172,172,.09);
}

.domain-point.p1 { left: 8%; top: 24%; }
.domain-point.p2 { right: 7%; top: 30%; }
.domain-point.p3 { left: 6%; bottom: 27%; }
.domain-point.p4 { right: 8%; bottom: 25%; }
.domain-point.p5 { left: 50%; bottom: 12%; transform: translateX(-50%); }

.domain-art-caption {
    position: absolute;
    left: 30px;
    bottom: 28px;
    max-width: 265px;
}

.domain-art-caption span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.52);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.domain-art-caption strong {
    display: block;
    font-size: 18px;
    line-height: 1.12;
    letter-spacing: -.65px;
    font-weight: 500;
}

.domain-list { padding: 26px 44px; }
.domain-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 18px;
    align-items: center;
    min-height: 92px;
    border-bottom: 1px solid var(--line);
}
.domain-row:last-child { border-bottom: 0; }
.domain-row small { color: #8f8f8f; }
.domain-row strong { font-size: 23px; font-weight: 500; letter-spacing: -1px; }
.domain-row span { color: var(--muted); font-size: 12px; }

/* ------------------------------
    FAQ
------------------------------ */
.faq-intro { text-align: center; padding: 64px 24px 40px; }
.faq-intro .display { max-width: 880px; margin-inline: auto; }
.faq-list { padding: 10px 34px 38px; }

.faq-item {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: #ffffff;
    margin-top: 8px;
    overflow: hidden;
}

.faq-q {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 22px 22px;
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 16px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: -.6px;
}

.faq-plus {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
}

.faq-item.open .faq-plus { transform: rotate(45deg); background: #f5f5f5; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { margin: 0; padding: 0 78px 24px 22px; color: var(--muted); line-height: 1.6; font-size: 16px; }

/* ------------------------------
    CTA / FOOTER
------------------------------ */
.cta-panel {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px;
    align-items: end;
    padding: 58px;
    min-height: 360px;
    background: var(--ink);
    color: #ffffff;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.cta-panel::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    right: -150px;
    bottom: -240px;
    background: radial-gradient(circle, rgba(85,85,85,.88), rgba(85,85,85,.08) 52%, transparent 72%);
}

.cta-panel h2 {
    margin: 0;
    max-width: 820px;
    font-size: clamp(52px, 5.8vw, 88px);
    line-height: .94;
    letter-spacing: -5px;
    font-weight: 500;
}

.cta-side { position: relative; z-index: 1; }
.cta-side p { color: rgba(255,255,255,.68); line-height: 1.55; font-size: 16px; }
.cta-side .btn { margin-top: 18px; background: #ffffff; border-color: #ffffff; color: var(--ink); }
.cta-side .btn:hover { background: #f0f0f0; border-color: #f0f0f0; }

.footer { padding: 16px 0 0; }
.footer-panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 44px 44px 20px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 36px;
}

.footer-brand h3 { margin: 0; font-size: 44px; letter-spacing: -2.8px; font-weight: 500; }
.footer-brand p { max-width: 360px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.footer-col span { display: block; margin-bottom: 14px; color: #8d8d8d; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col a { display: block; padding: 5px 0; font-size: 13px; }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: var(--muted);
    font-size: 11px;
}

/* ------------------------------
    REVEAL & CURSOR EFFECTS
------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.spotlight {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.11), transparent 67%);
    transform: translate(-50%,-50%);
    opacity: .75;
    mix-blend-mode: screen;
}

/* ------------------------------
    MOBILE NAVIGATION
------------------------------ */
body.menu-locked { overflow: hidden; }

.mobile-nav-overlay { display: none; }

.mobile-menu {
    display: none;
    justify-self: end;
    min-width: 86px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 15px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 30px rgba(0,0,0,.035);
    backdrop-filter: blur(16px);
    cursor: pointer;
    font-size: 12px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.mobile-menu:hover { transform: translateY(-1px); border-color: #c9c9c9; background: #ffffff; }
.mobile-menu-icon { width: 15px; height: 12px; display: grid; align-content: space-between; }
.mobile-menu-icon i { display: block; width: 15px; height: 1.5px; border-radius: 999px; background: var(--ink); transition: transform .25s ease; }

@media (max-width: 1180px) {
    .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
    }

    .mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    }

    .mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(10,10,10,.20);
    backdrop-filter: blur(7px);
    cursor: default;
    }

    .mobile-nav-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: min(470px, calc(100vw - 20px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255,255,255,.985);
    box-shadow: -20px 30px 80px rgba(0,0,0,.14);
    transform: translateX(calc(100% + 28px));
    transition: transform .52s cubic-bezier(.22,.8,.2,1);
    isolation: isolate;
    }

    .mobile-nav-overlay.open .mobile-nav-panel { transform: translateX(0); }

    .mobile-nav-glow { display: none; }

    .mobile-nav-head {
    height: 82px;
    padding: 14px 14px 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line-soft);
    }

    .mobile-nav-brand { min-width: 0; line-height: 1; }
    .mobile-nav-brand strong { display: block; font-size: 13px; letter-spacing: -.5px; }
    .mobile-nav-brand span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 1.15px; }

    .mobile-nav-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .mobile-nav-talk {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
    font-size: 12px;
    }
    .mobile-nav-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    }

    .mobile-nav-viewport { position: absolute; inset: 82px 0 0; overflow: hidden; }

    .mobile-nav-view {
    position: absolute;
    inset: 0;
    padding: 28px 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
    transition: transform .46s cubic-bezier(.22,.8,.2,1), opacity .35s ease;
    }

    .mobile-nav-main { transform: translateX(0); opacity: 1; }
    .mobile-nav-services { transform: translateX(104%); opacity: 1; background: var(--surface); }
    .mobile-nav-overlay.submenu-open .mobile-nav-main { transform: translateX(-30%); opacity: .18; }
    .mobile-nav-overlay.submenu-open .mobile-nav-services { transform: translateX(0); }

    .mobile-nav-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    }
    .mobile-nav-kicker::before { content: ''; width: 18px; height: 1px; background: #a9a9a9; }

    .mobile-nav-links { margin-top: 20px; border-top: 1px solid var(--line); }
    .mobile-nav-row {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: 32px 1fr 28px;
    gap: 10px;
    align-items: center;
    padding: 14px 2px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: padding .22s ease, background .22s ease;
    }
    .mobile-nav-row:hover { padding-left: 8px; background: #f1f1f1; }
    .mobile-nav-number { align-self: start; padding-top: 5px; color: #8a8a8a; font-size: 9px; }
    .mobile-nav-row-copy strong { display: block; font-size: clamp(22px, 5.8vw, 30px); font-weight: 500; letter-spacing: -1.25px; line-height: 1; }
    .mobile-nav-row-copy small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.3; }
    .mobile-nav-arrow { justify-self: end; font-size: 20px; transition: transform .22s ease; }
    .mobile-nav-row:hover .mobile-nav-arrow { transform: translateX(4px); }

    .mobile-nav-bottom {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-2);
    }
    .mobile-nav-bottom p { margin: 0 0 13px; font-size: 13px; color: var(--muted); }
    .mobile-nav-primary {
    min-height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
    font-size: 13px;
    }

    .mobile-services-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .mobile-services-back {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    cursor: pointer;
    font-size: 11px;
    }
    .mobile-services-back span { font-size: 16px; }
    .mobile-services-index { color: #7e7e7e; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }

    .mobile-services-intro { padding: 32px 2px 24px; }
    .mobile-services-intro h2 { margin: 14px 0 12px; max-width: 390px; font-size: clamp(34px, 9vw, 48px); line-height: .94; letter-spacing: -2.7px; font-weight: 500; }
    .mobile-services-intro p { margin: 0; max-width: 350px; color: var(--muted); font-size: 12px; line-height: 1.5; }

    .mobile-services-list { display: grid; gap: 12px; padding-bottom: 18px; }
    .mobile-services-group {
    padding: 16px 16px 4px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,.025);
    }
    .mobile-services-label { display: block; margin-bottom: 7px; color: #7e7e7e; font-size: 9px; text-transform: uppercase; letter-spacing: 1.15px; }
    .mobile-service-link {
    position: relative;
    display: block;
    padding: 14px 34px 14px 0;
    border-top: 1px solid var(--line-soft);
    }
    .mobile-service-link strong { display: block; font-size: 18px; line-height: 1.05; font-weight: 500; letter-spacing: -.8px; }
    .mobile-service-link small { display: block; margin-top: 6px; max-width: 305px; color: var(--muted); font-size: 11px; line-height: 1.35; }
    .mobile-service-link b { position: absolute; top: 15px; right: 0; font-size: 16px; font-weight: 400; transition: transform .2s ease; }
    .mobile-service-link:hover { background: #f1f1f1; }
    .mobile-service-link:hover b { transform: translate(2px,-2px); }
}

@media (max-width: 520px) {
    .mobile-nav-panel { top: 6px; right: 6px; bottom: 6px; width: calc(100vw - 12px); border-radius: 18px; }
    .mobile-nav-head { padding-inline: 14px 10px; }
    .mobile-nav-brand strong { font-size: 12px; }
    .mobile-nav-brand span { display: none; }
    .mobile-nav-talk { min-height: 40px; padding: 0 13px; }
    .mobile-nav-close { width: 40px; height: 40px; }
    .mobile-nav-view { padding: 24px 14px 16px; }
    .mobile-nav-row { min-height: 78px; }
    .mobile-nav-row-copy strong { font-size: clamp(24px, 7vw, 29px); }
}

/* ------------------------------
    RESPONSIVE
------------------------------ */
@media (max-width: 1180px) {
    .header-inner { grid-template-columns: 1fr auto; }
    .nav-shell { display: none; }
    .mobile-menu { display: inline-flex; }
    .header-cta { display: none; }
    .mega { display: none; }
    .service-card { grid-template-columns: 1fr; }
    .service-visual { margin: 0 20px 20px; min-height: 420px; }
    .domain-wrap { grid-template-columns: 1fr; }
    .domain-art { min-height: 430px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .domain-orbit.one { width: 330px; height: 330px; }
    .domain-orbit.two { width: 230px; height: 230px; }
    .domain-orbit.three { width: 112px; height: 112px; }
    .domain-core { width: 136px; height: 136px; }
    .domain-point.p1 { left: 14%; top: 25%; }
    .domain-point.p2 { right: 14%; top: 28%; }
    .domain-point.p3 { left: 13%; bottom: 25%; }
    .domain-point.p4 { right: 13%; bottom: 24%; }
    .domain-point.p5 { bottom: 10%; }
}

@media (max-width: 900px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .hero { padding-top: 24px; }
    .hero-panel { min-height: 670px; }
    .hero h1 { letter-spacing: -4px; }
    .proof-row { display: grid; grid-template-columns: repeat(3, 1fr); }
    .proof { min-width: 0; }
    .logo-rail { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .intro-grid, .process-head { grid-template-columns: 1fr; gap: 26px; }
    .intro-note { padding-left: 0; border-left: 0; }
    .cap-grid { grid-template-columns: repeat(2, 1fr); }
    .service-meta { grid-template-columns: 1fr; gap: 16px; }
    .case-grid { grid-template-columns: 1fr; }
    .outcomes-inner { padding: 48px 30px; }
    .process-row { grid-template-columns: 52px 1fr 24px; padding: 22px 0; }
    .process-desc { grid-column: 2 / 4; }
    .cta-panel, .footer-top { grid-template-columns: 1fr; }
    .footer-top { gap: 28px; }
}

@media (max-width: 620px) {
    .header-inner { min-height: 76px; }
    .brand-copy span { display: none; }
    .hero-panel { min-height: 680px; justify-content: flex-start; padding-top: 110px; }
    .hero-eyebrow { font-size: 12px; }
    .hero h1 { font-size: clamp(48px, 14vw, 68px); letter-spacing: -3.8px; }
    .hero-sub { font-size: 15px; padding: 0 8px; }
    .proof-row { width: 100%; grid-template-columns: 1fr; margin-top: 28px; }
    .proof { border-right: 0; border-bottom: 1px solid var(--line); text-align: center; }
    .proof:last-child { border-bottom: 0; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; }
    .logo-rail { grid-template-columns: repeat(2, 1fr); }
    .display { font-size: 46px; letter-spacing: -3px; }
    .section-pad { padding: 30px 22px; }
    .cap-grid { grid-template-columns: 1fr; margin-top: 36px; }
    .cap-card { min-height: 210px; }
    .service-copy { padding: 28px 22px; }
    .service-copy h3 { font-size: 42px; letter-spacing: -2.5px; }
    .service-visual { margin: 0 10px 10px; min-height: 340px; }
    .visual-ring.r1 { width: 280px; height: 280px; }
    .visual-ring.r2 { width: 190px; height: 190px; }
    .node-a, .node-c { left: 5%; }
    .node-b, .node-d { right: 5%; }
    .outcomes-panel { min-height: 0; }
    .outcomes-inner { padding: 44px 18px; }
    .outcomes h2 { font-size: 50px; letter-spacing: -3px; }
    .outcomes-cta { width: 100%; justify-content: space-between; gap: 10px; }
    .domain-art { min-height: 360px; }
    .domain-art-top { top: 20px; left: 20px; right: 20px; }
    .domain-art-top span:last-child { display: none; }
    .domain-orbit.one { width: 270px; height: 270px; }
    .domain-orbit.two { width: 190px; height: 190px; }
    .domain-orbit.three { width: 94px; height: 94px; }
    .domain-core { width: 116px; height: 116px; }
    .domain-core strong { font-size: 20px; }
    .domain-point { padding: 7px 9px; font-size: 8px; }
    .domain-point.p1 { left: 4%; top: 27%; }
    .domain-point.p2 { right: 4%; top: 30%; }
    .domain-point.p3 { left: 4%; bottom: 27%; }
    .domain-point.p4 { right: 4%; bottom: 26%; }
    .domain-point.p5 { bottom: 11%; }
    .domain-art-caption { display: none; }
    .domain-list { padding: 18px 22px; }
    .domain-row { grid-template-columns: 42px 1fr; }
    .domain-row span { grid-column: 2; }
    .faq-list { padding: 6px 12px 22px; }
    .faq-q { font-size: 16px; padding: 18px; }
    .faq-a p { padding: 0 58px 20px 18px; }
    .cta-panel { padding: 36px 22px; }
    .cta-panel h2 { font-size: 54px; letter-spacing: -3.6px; }
    .footer-panel { padding: 32px 22px 18px; }
    .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ------------------------------
    INTEGRATED PROJECT FORM
------------------------------ */
#contact { scroll-margin-top: 92px; }

.project-contact-wrap {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(620px, 1.18fr);
    gap: 16px;
    align-items: stretch;
}

.project-contact-visual,
.project-form-panel {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.project-contact-visual {
    position: relative;
    min-height: 720px;
    padding: clamp(34px, 4vw, 58px);
    color: #ffffff;
    background:
    radial-gradient(circle at 25% 18%, rgba(172,172,172,.27), transparent 29%),
    radial-gradient(circle at 88% 82%, rgba(85,85,85,.54), transparent 31%),
    linear-gradient(145deg, var(--night) 0%, #222222 46%, var(--accent) 100%);
    isolation: isolate;
}

.project-contact-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .25;
    background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
}

.project-contact-orb {
    position: absolute;
    width: 430px;
    height: 430px;
    right: -175px;
    top: -165px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    box-shadow:
    0 0 0 70px rgba(255,255,255,.025),
    0 0 0 140px rgba(255,255,255,.014);
    animation: projectOrbFloat 11s ease-in-out infinite;
}

@keyframes projectOrbFloat {
    50% { transform: translate(-14px, 16px) scale(1.04); }
}

.project-contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.project-contact-kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: rgba(255,255,255,.52);
}

.project-contact-visual h2 {
    max-width: 600px;
    margin: 28px 0 0;
    font-size: clamp(54px, 5vw, 82px);
    line-height: .94;
    letter-spacing: -5px;
    font-weight: 500;
    text-wrap: balance;
}

.project-contact-intro {
    max-width: 500px;
    margin: 26px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.6;
}

.project-signal-field {
    position: absolute;
    left: clamp(34px, 4vw, 58px);
    right: clamp(34px, 4vw, 58px);
    bottom: 48px;
    height: 225px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.project-signal-line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: rgba(255,255,255,.28);
}

.project-signal-line.a { left: 9%; top: 56%; width: 39%; transform: rotate(-15deg); }
.project-signal-line.b { left: 42%; top: 45%; width: 37%; transform: rotate(12deg); }
.project-signal-line.c { left: 28%; top: 71%; width: 47%; transform: rotate(-3deg); }

.project-signal-node {
    position: absolute;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.82);
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    animation: projectNodePulse 6s ease-in-out infinite;
}

.project-signal-node.n1 { left: 1%; top: 37%; }
.project-signal-node.n2 { left: 42%; top: 8%; animation-delay: -2s; }
.project-signal-node.n3 { right: 1%; top: 46%; animation-delay: -4s; }

@keyframes projectNodePulse {
    50% { transform: translateY(-8px); background: rgba(255,255,255,.1); }
}

.project-contact-meta {
    position: absolute;
    left: clamp(34px, 4vw, 58px);
    right: clamp(34px, 4vw, 58px);
    bottom: 22px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: rgba(255,255,255,.46);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-form-panel {
    min-height: 720px;
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.project-form-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line-soft);
}

.project-form-kicker {
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.15px;
}

.project-form-top h3 {
    max-width: 710px;
    margin: 12px 0 0;
    font-size: clamp(36px, 3.45vw, 58px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 500;
}

.project-step-counter {
    flex: 0 0 auto;
    min-width: 74px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.project-progress {
    height: 2px;
    margin-top: -1px;
    overflow: hidden;
    background: var(--line-soft);
}

.project-progress span {
    display: block;
    width: 20%;
    height: 100%;
    background: var(--accent);
    transition: width .4s cubic-bezier(.22,.8,.2,1);
}

.project-form-body {
    position: relative;
    flex: 1;
    padding-top: 34px;
    display: flex;
    flex-direction: column;
}

.project-step {
    display: none;
    animation: projectStepIn .38s ease both;
}

.project-step.active { display: block; }

@keyframes projectStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.project-step-title {
    margin: 0 0 24px;
    font-size: 24px;
    letter-spacing: -1.1px;
    font-weight: 500;
}

.project-field-grid { display: grid; gap: 20px; }
.project-field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.project-field {
    position: relative;
    padding: 17px 18px 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.project-field:focus-within {
    border-color: rgba(85,85,85,.48);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(85,85,85,.07);
}

.project-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
}

.project-field input,
.project-field textarea,
.project-field select {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    line-height: 1.4;
}

.project-field input::placeholder,
.project-field textarea::placeholder { color: #9d9d9d; }

.project-field textarea {
    min-height: 150px;
    resize: vertical;
}

.project-field select {
    appearance: none;
    cursor: pointer;
}

.project-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.project-choice {
    position: relative;
    min-height: 116px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.project-choice:hover {
    transform: translateY(-2px);
    border-color: #c6c6c6;
}

.project-choice.selected {
    border-color: var(--accent);
    background: var(--gray-pale);
}

.project-choice-number {
    color: #8b8b8b;
    font-size: 10px;
}

.project-choice strong {
    display: block;
    font-size: 18px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.7px;
}

.project-choice small {
    display: block;
    max-width: 310px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.project-choice-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #ffffff;
    font-size: 11px;
    opacity: .6;
}

.project-choice.selected .project-choice-check {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
    opacity: 1;
}

.project-review-box { border-top: 1px solid var(--line); }

.project-review-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line-soft);
}

.project-review-row span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.project-review-row strong {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
    word-break: break-word;
}

.project-form-actions {
    margin-top: auto;
    padding-top: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.project-action-note {
    max-width: 430px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.project-action-buttons {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.project-status {
    display: none;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.project-status.show { display: block; }

@media (max-width: 1180px) {
    .project-contact-wrap { grid-template-columns: 1fr; }
    .project-contact-visual { min-height: 560px; }
    .project-form-panel { min-height: 680px; }
}

@media (max-width: 760px) {
    .project-contact-wrap { gap: 10px; }
    .project-contact-visual { min-height: 510px; padding: 28px 22px; }
    .project-contact-visual h2 { font-size: clamp(46px, 13vw, 64px); letter-spacing: -3.7px; }
    .project-contact-intro { font-size: 16px; }
    .project-signal-field { left: 22px; right: 22px; bottom: 34px; height: 190px; }
    .project-signal-node { width: 66px; height: 66px; font-size: 9px; }
    .project-contact-meta { left: 22px; right: 22px; font-size: 8px; }

    .project-form-panel { min-height: 660px; padding: 28px 22px; }
    .project-form-top { display: block; }
    .project-step-counter { width: max-content; margin-top: 18px; }
    .project-form-top h3 { font-size: 42px; letter-spacing: -2.6px; }
    .project-field-grid.two,
    .project-choice-grid { grid-template-columns: 1fr; }
    .project-review-row { grid-template-columns: 1fr; gap: 7px; }
    .project-form-actions { align-items: stretch; flex-direction: column; }
    .project-action-buttons { width: 100%; }
    .project-action-buttons .btn { flex: 1; }
    .project-action-note { order: 2; }
}

@media (max-width: 520px) {
    .project-contact-visual { min-height: 470px; }
    .project-contact-visual h2 { font-size: 47px; }
    .project-signal-field { opacity: .8; }
    .project-form-panel { padding: 24px 16px; }
    .project-form-top h3 { font-size: 37px; letter-spacing: -2.2px; }
    .project-step-title { font-size: 21px; }
    .project-field { padding: 15px; }
    .project-choice { min-height: 104px; }
}


/* ------------------------------
    CONTACT LEFT PANEL — ORIGINAL CTA STYLE
    Keeps the black CTA from the homepage next to the form.
------------------------------ */
.project-contact-visual.project-contact-cta {
    position: relative;
    min-height: 720px;
    padding: clamp(38px, 4vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.02);
}

.project-contact-visual.project-contact-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    right: -220px;
    bottom: -285px;
    border-radius: 50%;
    background:
    radial-gradient(
        circle,
        rgba(85,85,85,.92) 0%,
        rgba(85,85,85,.42) 27%,
        rgba(85,85,85,.10) 52%,
        transparent 72%
    );
    pointer-events: none;
}

.project-contact-visual.project-contact-cta::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: linear-gradient(
    135deg,
    rgba(255,255,255,.018),
    transparent 36%,
    rgba(85,85,85,.035) 100%
    );
    pointer-events: none;
}

.project-contact-cta h2 {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0;
    font-size: clamp(54px, 5.2vw, 86px);
    line-height: .94;
    letter-spacing: -5px;
    font-weight: 500;
    text-wrap: balance;
}

.project-contact-cta-side {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    margin-left: auto;
    padding-top: 58px;
}

.project-contact-cta-side p {
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.55;
}

.project-contact-email {
    width: max-content;
    margin-top: 24px;
    background: #ffffff;
    border-color: #ffffff;
    color: var(--ink);
}

.project-contact-email:hover {
    background: #f0f0f0;
    border-color: #f0f0f0;
    color: var(--ink);
}

/* Hide the old abstract-scene pieces completely if any remain. */
.project-contact-cta .project-contact-grid,
.project-contact-cta .project-contact-orb,
.project-contact-cta .project-contact-kicker,
.project-contact-cta .project-contact-intro,
.project-contact-cta .project-signal-field,
.project-contact-cta .project-contact-meta {
    display: none !important;
}

@media (max-width: 1180px) {
    .project-contact-visual.project-contact-cta {
    min-height: 520px;
    }

    .project-contact-cta h2 {
    max-width: 850px;
    font-size: clamp(54px, 8vw, 82px);
    }

    .project-contact-cta-side {
    width: min(100%, 560px);
    }
}

@media (max-width: 760px) {
    .project-contact-visual.project-contact-cta {
    min-height: 500px;
    padding: 34px 24px;
    }

    .project-contact-cta h2 {
    font-size: clamp(48px, 13vw, 66px);
    letter-spacing: -3.8px;
    }

    .project-contact-cta-side {
    width: 100%;
    margin-left: 0;
    padding-top: 48px;
    }

    .project-contact-cta-side p {
    font-size: 13px;
    }
}

@media (max-width: 520px) {
    .project-contact-visual.project-contact-cta {
    min-height: 460px;
    padding: 30px 20px;
    }

    .project-contact-cta h2 {
    font-size: 46px;
    letter-spacing: -3.2px;
    }

    .project-contact-email {
    width: 100%;
    }
}


/* Neue Haas Grotesk display tuning */
.hero h1,
.display,
.service-copy h3,
.outcomes h2,
.cta-panel h2,
.project-contact-cta h2,
.project-form-top h3,
.footer-brand h3,
.mega-intro h3 {
    font-family: var(--font-main);
    font-weight: 400;
}

.hero h1 { letter-spacing: -0.055em; }
.display { letter-spacing: -0.052em; }
.service-copy h3 { letter-spacing: -0.05em; }
.outcomes h2 { letter-spacing: -0.055em; }
.cta-panel h2,
.project-contact-cta h2 { letter-spacing: -0.055em; }
.project-form-top h3 { letter-spacing: -0.045em; }
.footer-brand h3 { letter-spacing: -0.045em; }



/* ------------------------------
    MOBILE LAYOUT HARDENING
    Prevents any horizontal page drift / scroll.
------------------------------ */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.page,
main,
header,
footer,
section {
    max-width: 100%;
}

@media (max-width: 900px) {
    html,
    body,
    .page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    }

    /* Every grid/flex child is allowed to shrink instead of widening viewport. */
    .header-inner > *,
    .hero-panel > *,
    .intro-grid > *,
    .cap-grid > *,
    .service-card > *,
    .service-meta > *,
    .case-grid > *,
    .process-head > *,
    .process-row > *,
    .domain-wrap > *,
    .domain-row > *,
    .footer-top > *,
    .project-contact-wrap > *,
    .project-field-grid > *,
    .project-choice-grid > *,
    .project-form-top > *,
    .project-form-actions > * {
    min-width: 0;
    max-width: 100%;
    }

    .container {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    margin-left: auto;
    margin-right: auto;
    }

    .header,
    .header-inner,
    .hero,
    .hero-panel,
    .section,
    .section-panel,
    .services-stack,
    .service-card,
    .outcomes,
    .outcomes-panel,
    .process-grid,
    .domain-wrap,
    .faq-list,
    .cta-panel,
    .footer,
    .footer-panel,
    .project-contact-wrap,
    .project-contact-visual,
    .project-form-panel {
    width: 100%;
    max-width: 100%;
    }

    /* Desktop-only geometry must never affect mobile canvas. */
    .nav-shell,
    .mega {
    display: none !important;
    }

    /* Off-canvas menu stays physically inside the viewport. */
    .mobile-nav-overlay {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    overscroll-behavior: contain;
    }

    .mobile-nav-backdrop {
    max-width: 100vw;
    }

    .mobile-nav-panel {
    left: auto;
    right: 10px;
    width: min(470px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    }

    .mobile-nav-viewport,
    .mobile-nav-view,
    .mobile-nav-links,
    .mobile-nav-row,
    .mobile-services-list,
    .mobile-services-group,
    .mobile-service-link {
    min-width: 0;
    max-width: 100%;
    }

    .mobile-nav-row-copy,
    .mobile-nav-row-copy strong,
    .mobile-nav-row-copy small,
    .mobile-service-link strong,
    .mobile-service-link small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    }

    /* Large decorative elements are clipped by their own section. */
    .hero-panel,
    .service-visual,
    .outcomes-panel,
    .domain-art,
    .cta-panel,
    .project-contact-visual {
    overflow: hidden;
    }

    .service-visual {
    width: auto;
    max-width: calc(100% - 40px);
    }

    .project-contact-wrap {
    grid-template-columns: minmax(0, 1fr);
    }

    .project-form-panel,
    .project-form-body,
    .project-step,
    .project-field,
    .project-field input,
    .project-field textarea,
    .project-field select,
    .project-review-box,
    .project-review-row {
    min-width: 0;
    max-width: 100%;
    }

    .project-field input,
    .project-field textarea,
    .project-field select {
    display: block;
    }

    .project-review-row strong,
    .project-contact-email,
    .footer-brand h3,
    .footer-brand p,
    .footer-col a,
    .section-copy,
    .intro-note,
    .service-copy > p,
    .process-desc,
    .domain-row span,
    .faq-a p {
    overflow-wrap: anywhere;
    word-break: normal;
    }
}

@media (max-width: 620px) {
    .container {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    }

    .header-inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    }

    .brand {
    min-width: 0;
    max-width: 100%;
    }

    .brand-copy {
    min-width: 0;
    }

    .brand-copy strong {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    .mobile-menu {
    min-width: 78px;
    max-width: 90px;
    flex: 0 0 auto;
    }

    .hero {
    width: 100%;
    }

    .hero-panel {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    }

    .hero h1,
    .display,
    .service-copy h3,
    .outcomes h2,
    .cta-panel h2,
    .project-contact-cta h2,
    .project-form-top h3,
    .footer-brand h3 {
    max-width: 100%;
    overflow-wrap: break-word;
    }

    .hero-actions,
    .hero-actions .btn,
    .proof-row,
    .logo-rail,
    .cap-grid,
    .case-grid,
    .project-action-buttons,
    .project-action-buttons .btn {
    max-width: 100%;
    }

    .service-card {
    grid-template-columns: minmax(0, 1fr);
    }

    .service-copy {
    width: 100%;
    max-width: 100%;
    }

    .service-visual {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    }

    .process-row {
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 12px;
    }

    .process-desc {
    grid-column: 2 / 4;
    }

    .domain-list {
    width: 100%;
    max-width: 100%;
    }

    .domain-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    }

    .domain-row strong,
    .domain-row span {
    min-width: 0;
    max-width: 100%;
    }

    .outcomes-cta {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    }

    .outcomes-cta > * {
    min-width: 0;
    }

    .outcomes-cta .pill {
    white-space: normal;
    text-align: center;
    }

    .faq-q {
    grid-template-columns: minmax(0, 1fr) 34px;
    }

    .faq-q > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
    }

    .footer-panel {
    width: 100%;
    }

    .footer-bottom {
    width: 100%;
    }

    .footer-bottom span {
    max-width: 100%;
    overflow-wrap: anywhere;
    }

    .project-form-panel {
    width: 100%;
    max-width: 100%;
    }

    .project-field-grid.two,
    .project-choice-grid,
    .project-review-row {
    grid-template-columns: minmax(0, 1fr);
    }

    .project-form-actions,
    .project-action-buttons {
    width: 100%;
    max-width: 100%;
    }

    .project-action-buttons .btn {
    min-width: 0;
    }

    .project-contact-email {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .mobile-nav-panel {
    left: 6px;
    right: 6px;
    width: auto;
    max-width: none;
    }

    .mobile-nav-head {
    min-width: 0;
    gap: 8px;
    }

    .mobile-nav-head-actions {
    min-width: 0;
    gap: 6px;
    }

    .mobile-nav-talk {
    padding-left: 11px;
    padding-right: 11px;
    white-space: nowrap;
    }

    .mobile-nav-view {
    width: 100%;
    max-width: 100%;
    }

    .mobile-nav-row {
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    gap: 8px;
    }

    .mobile-services-intro h2,
    .mobile-services-intro p {
    max-width: 100%;
    }
}
/* ==========================================================
   WHITE EDITORIAL SYSTEM
   Large color/dark surfaces removed.
   Visual language: white, black type, gray rules, line-art.
========================================================== */

:root {
    --bg: #eeeeee;
    --surface: #ffffff;
    --surface-2: #f7f7f7;
    --ink: #0a0a0a;
    --muted: #6d6d6d;
    --line: #d9d9d9;
    --line-soft: #e9e9e9;

    /* neutral replacements for the former accent palette */
    --accent: #0a0a0a;
    --dark: #171717;
    --gray-soft: #aaaaaa;
    --gray-pale: #f1f1f1;
    --night: #111111;
}

/* Global interactions */
::selection {
    background: #dedede;
}

.nav-trigger.is-open {
    color: var(--ink);
    background: var(--surface-2);
}

.header-cta:hover,
.btn:hover {
    background: #222222;
    border-color: #222222;
}

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

/* ----------------------------------------------------------
   HERO — remove residual colored atmosphere
---------------------------------------------------------- */

.hero-panel::before {
    background:
        radial-gradient(circle at 22% 55%, rgba(0,0,0,.045), transparent 27%),
        radial-gradient(circle at 78% 58%, rgba(0,0,0,.035), transparent 25%);
}

.hero-orb {
    border-color: rgba(0,0,0,.08);
}

/* ----------------------------------------------------------
   SERVICE VISUALS — white technical diagrams
---------------------------------------------------------- */

.service-visual,
.service-card.alt .service-visual,
.service-card.light .service-visual {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line-soft);
    box-shadow: none;
}

.service-visual::before {
    opacity: 1;
    background-image:
        linear-gradient(rgba(0,0,0,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.032) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

.visual-ring,
.service-card.light .visual-ring {
    border-color: rgba(0,0,0,.14);
}

.visual-node,
.service-card.light .visual-node {
    color: var(--ink);
    border-color: #cfcfcf;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 5px 20px rgba(0,0,0,.025);
}

.node-e {
    background: #ffffff;
    border-color: #9d9d9d;
}

.visual-line {
    background: rgba(0,0,0,.20);
}

.wire-card {
    border-color: #cccccc;
    background: #ffffff;
    backdrop-filter: none;
    box-shadow: 0 10px 28px rgba(0,0,0,.025);
}

.wire-card::before {
    border-color: #bdbdbd;
}

.wire-card::after {
    background: #b8b8b8;
    box-shadow: 0 14px 0 #dedede;
}

/* ----------------------------------------------------------
   OUTCOMES — no dark hero panel; FAQ-like editorial cards
---------------------------------------------------------- */

.outcomes-panel {
    min-height: 0;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-soft);
}

.outcomes-panel::before {
    background-image:
        radial-gradient(circle at center, rgba(0,0,0,.09) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .16;
    mask-image: linear-gradient(to bottom, black, transparent 58%);
}

.spotlight {
    display: none;
}

.outcomes-inner {
    padding: clamp(42px, 5vw, 72px);
}

.outcomes h2 {
    color: var(--ink);
}

.case-grid {
    max-width: 1040px;
    gap: 10px;
}

.case-card {
    min-height: 280px;
    border: 1px solid var(--line-soft);
    background: #ffffff;
    backdrop-filter: none;
    box-shadow: none;
}

.case-card:hover {
    transform: translateY(-4px);
    background: var(--surface-2);
    border-color: var(--line);
}

.case-card small {
    color: #818181;
}

.case-card h3 {
    color: var(--ink);
}

.case-card p {
    color: var(--muted);
}

.case-metric {
    color: var(--ink);
}

.case-metric span {
    color: #858585;
}

.outcomes-cta {
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
}

.outcomes-cta .pill {
    background: var(--ink);
    color: #ffffff;
}

/* ----------------------------------------------------------
   PROCESS — visually aligned with FAQ cards
---------------------------------------------------------- */

.process-grid {
    display: grid;
    gap: 8px;
    margin-top: 54px;
    border-top: 0;
}

.process-row {
    min-height: 108px;
    padding: 0 24px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: #ffffff;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.process-row:hover {
    background: var(--surface-2);
    border-color: var(--line);
    transform: translateX(3px);
}

.process-no {
    color: #8d8d8d;
}

.process-desc {
    color: var(--muted);
}

/* ----------------------------------------------------------
   DOMAINS — white architectural line-art
---------------------------------------------------------- */

.domain-art {
    color: var(--ink);
    background: #ffffff;
    border-right: 1px solid var(--line-soft);
}

.domain-art::before {
    opacity: 1;
    background-image:
        linear-gradient(rgba(0,0,0,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.032) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(
        circle at 50% 48%,
        black 0%,
        rgba(0,0,0,.72) 46%,
        transparent 82%
    );
}

.domain-art::after {
    color: rgba(0,0,0,.028);
}

.domain-art-top {
    color: #858585;
}

.domain-orbit {
    border-color: rgba(0,0,0,.14);
}

.domain-orbit.three {
    border-color: rgba(0,0,0,.22);
}

.domain-core {
    border-color: #cfcfcf;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 50px rgba(0,0,0,.035);
}

.domain-core small {
    color: #888888;
}

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

.domain-point {
    border-color: #d1d1d1;
    background: rgba(255,255,255,.96);
    color: #383838;
    backdrop-filter: blur(6px);
}

.domain-point::before {
    background: #888888;
    box-shadow: 0 0 0 4px rgba(0,0,0,.045);
}

.domain-art-caption span {
    color: #8a8a8a;
}

.domain-art-caption strong {
    color: var(--ink);
}

/* ----------------------------------------------------------
   LEGACY CTA PANEL — white if used on another page
---------------------------------------------------------- */

.cta-panel {
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--line-soft);
}

.cta-panel::before {
    background: none;
    border: 1px solid var(--line);
}

.cta-side p {
    color: var(--muted);
}

.cta-side .btn {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}

/* ----------------------------------------------------------
   PROJECT / CONTACT — remove the large black panel
---------------------------------------------------------- */

.project-contact-visual,
.project-contact-visual.project-contact-cta {
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-soft);
}

.project-contact-visual.project-contact-cta::before {
    width: 470px;
    height: 470px;
    right: -205px;
    bottom: -265px;
    border: 1px solid #dddddd;
    background: transparent;
    opacity: 1;
}

.project-contact-visual.project-contact-cta::after {
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.026) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent 18%, black 100%);
    opacity: .55;
}

.project-contact-cta h2 {
    color: var(--ink);
}

.project-contact-cta-side p {
    color: var(--muted);
}

.project-contact-email {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}

.project-contact-email:hover {
    background: #252525;
    border-color: #252525;
    color: #ffffff;
}

/* Neutralize the generic project visual too */
.project-contact-visual:not(.project-contact-cta) {
    background: #ffffff;
    color: var(--ink);
}

.project-contact-grid {
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
}

.project-contact-orb {
    border-color: rgba(0,0,0,.14);
    box-shadow:
        0 0 0 70px rgba(0,0,0,.018),
        0 0 0 140px rgba(0,0,0,.01);
}

.project-contact-kicker {
    color: #777777;
}

.project-contact-kicker::before {
    background: #aaaaaa;
}

.project-contact-intro {
    color: var(--muted);
}

.project-signal-field {
    border-top-color: #dddddd;
}

.project-signal-line {
    background: #d1d1d1;
}

.project-signal-node {
    border-color: #cccccc;
    background: #ffffff;
    color: #444444;
}

/* ----------------------------------------------------------
   PROJECT FORM — black/gray interaction states only
---------------------------------------------------------- */

.project-progress span {
    background: var(--ink);
}

.project-field:focus-within {
    border-color: #9e9e9e;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0,0,0,.045);
}

.project-choice.selected {
    border-color: var(--ink);
    background: var(--surface-2);
}

.project-choice.selected .project-choice-check {
    color: #ffffff;
    background: var(--ink);
    border-color: var(--ink);
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

.mobile-nav-glow {
    display: none !important;
}

@media (max-width: 900px) {
    .process-row {
        padding: 22px 20px;
    }
}

@media (max-width: 620px) {
    .outcomes-inner {
        padding: 42px 18px;
    }

    .case-card {
        min-height: 240px;
    }

    .service-visual {
        background: #ffffff;
    }

    .process-row {
        padding: 20px 16px;
    }

    .domain-art {
        background: #ffffff;
    }

    .project-contact-visual.project-contact-cta {
        background: #ffffff;
    }
}