@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --bg-main: #0B1220;
    --surface: #121A2B;
    --divider: #243047;
    --brand: #3B82F6;
    --highlight: #22D3EE;
    --illus-accent: #7C3AED;
    --heading: #F1F5F9;
    --body: #9FB3D6;
    --footer-bg: #070C16;

    --textDarker: var(--heading);
    --textDark: var(--heading);
    --textMedium: var(--body);
    --borderMedium: var(--divider);
    --borderLight: var(--divider);
    --accent: var(--brand);
    --accentDarker: var(--brand);
    --light: var(--surface);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: brightness(0) saturate(100%) invert(95%) sepia(14%) saturate(350%) hue-rotate(180deg) brightness(102%) contrast(95%)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: brightness(0) saturate(100%) invert(68%) sepia(13%) saturate(621%) hue-rotate(176deg) brightness(92%) contrast(89%)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: brightness(0) saturate(100%) invert(82%) sepia(31%) saturate(4460%) hue-rotate(154deg) brightness(97%) contrast(89%) !important;}


/*------------------------ CSS overrides below ------------------------*/

/* Typography System Override */
html {
    font-size: 16px;
    line-height: 1.6;
}
body {
    font-family: var(--fontBody);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    background: var(--bg-main);
    color: var(--textMedium);
}
h1,
h2,
h3,
h4,
section.docs h2,
.container.post h2,
section.docs h3,
.container.post h3 {
    font-family: var(--fontTitles);
}
h1 {
    font-size: 3.25rem;
    line-height: 1.1;
    font-weight: 700;
}
h2,
section.docs h2,
.container.post h2 {
    font-size: 2.375rem;
    line-height: 1.2;
    font-weight: 600;
}
h3,
section.docs h3,
.container.post h3 {
    font-size: 1.875rem;
    line-height: 1.3;
    font-weight: 600;
}
h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--textDark);
}
section.intro h1,
section.bgimage h1,
section.cta h1,
section.post h1 {
    font-weight: 700;
}
p,
li,
input,
textarea,
select,
label,
blockquote,
pre {
    font-weight: 400;
}
.body-large,
h1 + p,
section.intro h1 + p,
section.post .container.post p:first-child {
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
}
.small-text {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
}
.button,
button,
input[type="submit"],
header .navnav > ul > li > a,
header .navnav > ul > li > ul li a,
header .navnav.languages > ul > li > a,
footer select {
    font-family: var(--fontUi);
    font-weight: 500;
}
.button,
button,
input[type="submit"] {
    font-size: 1rem;
    line-height: 1.2;
}
/* Keep compact heading sizes in card/grid UIs */
ul.features li h3,
ul.blocks li h3,
section.posts .grid .item h3,
ul.reviews li div.box h3 {
    font-size: 1.375rem;
    line-height: 1.3;
    font-weight: 600;
}
ul.features li h4,
ul.blocks li h4,
section.posts .grid .item h4,
ul.reviews li div.box h4 {
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 600;
}
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
        line-height: 1.08;
    }
    h2,
    section.docs h2,
    .container.post h2 {
        font-size: 1.65rem;
        line-height: 1.18;
    }
    h3,
    section.docs h3,
    .container.post h3 {
        font-size: 1.3rem;
        line-height: 1.25;
    }
    body {
        font-size: 0.95rem;
        line-height: 1.55;
    }
    p,
    li,
    input,
    textarea,
    select,
    label,
    blockquote,
    pre {
        line-height: 1.55;
    }
    .body-large,
    h1 + p,
    section.intro h1 + p,
    section.post .container.post p:first-child {
        font-size: 1rem;
        line-height: 1.5;
    }
    .small-text {
        font-size: 0.82rem;
        line-height: 1.45;
    }
    ul.features li h3,
    ul.blocks li h3,
    section.posts .grid .item h3,
    ul.reviews li div.box h3 {
        font-size: 1.15rem;
    }
}

/* Dark Tech Palette Override */
.innerbody {
    background: var(--bg-main);
}
section.image,
section.image.alt,
section.features,
section.cta,
section.title,
section.wide,
.home-audiences,
.home-speed-stripe,
.home-calendly-section {
    background: var(--bg-main);
}
section:not(.docs) + section:not(.docs) {
    border-top: 1px solid rgba(255,255,255,0.05);
}
body.filename__index section:not(.docs) + section:not(.docs) {
    border-top: 0;
}
section.intro {
    background:
        radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.18), transparent 55%),
        #081426;
}
section.image.alt {
    border-top-color: rgba(255,255,255,0.05);
    border-bottom-color: rgba(255,255,255,0.05);
}
body.filename__index section.image.alt {
    border-top-color: transparent;
    border-bottom-color: transparent;
}
section.intro p,
section.image p,
section.image li,
section.features p,
section.cta p,
section.wide p,
section.wide li,
.home-audiences p,
.home-calendly-section__copy p,
.home-calendly-section__copy li {
    color: var(--textMedium);
}
section.intro h1,
section.image h2,
section.image h3,
section.features h2,
section.features h3,
section.cta h2,
section.title h2,
section.wide h2,
.home-audiences h2,
.home-audiences h3,
.home-calendly-section__copy h3 {
    color: var(--heading);
}
section.cta .box {
    background: #111E36;
    border: 1px solid #24365A;
}

/* Header */
header,
header.sticky {
    background: var(--bg-main);
    color: var(--textMedium);
}
header.sticky {
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.3);
}
header .navnav > ul > li > a,
header .navnav > ul > li > ul li a,
header .navnav.languages > ul > li > a {
    color: var(--textMedium);
}
header .navnav > ul > li:hover > a,
header .navnav > ul > li.active > a,
header .navnav > ul > li > ul li a:hover,
header .navnav > ul > li > ul li.active a {
    color: var(--heading);
}
header .navnav > ul > li::after {
    background-color: var(--highlight);
}
header .navnav > ul > li.haschildren > a::after {
    border-color: var(--textMedium);
}
header .navnav > ul > li > ul {
    background: var(--surface);
    border: 0.1rem solid var(--divider);
}
header .navnav.languages > ul > li::after {
    content: none;
}
header .navnav.languages > ul > li > ul.language-grid {
    width: min(42rem, calc(100vw - 2rem));
    right: 0;
    left: auto;
    margin-left: 0;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem 0.5rem;
}
header .navnav.languages > ul > li > ul.language-grid li {
    min-width: 0;
}
header .navnav.languages > ul > li > ul.language-grid li a {
    white-space: normal;
    padding: 0.55rem 0.75rem;
    line-height: 1.35;
    border-radius: 0.45rem;
}
header .navnav.languages > ul > li > ul.language-grid li a:hover {
    background: rgba(255,255,255,0.04);
}
.header-language-select {
    display: none;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 1200px) {
    header .navnav.languages > ul > li > ul.language-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(34rem, calc(100vw - 2rem));
    }
}
@media (max-width: 900px) {
    header .navnav.languages > ul > li > ul.language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(26rem, calc(100vw - 2rem));
    }
}
header a.logo {
    color: var(--heading);
}
header a.logo img.inline,
header #togglemenu span {
    filter: invert(1) !important;
}
body.mobilemenu #togglemenu {
    display: none !important;
}
body.mobilemenu header > div.container > div:nth-child(3) {
    padding-right: 0.25rem;
}
body.mobilemenu .innerbody {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
}
body.mobilemenu header > div.container > div:nth-child(3) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}
body.mobilemenu header .navnav.languages {
    display: none;
}
body.mobilemenu header .header-language-select {
    display: block;
    position: relative;
    z-index: 4;
    width: 3.7rem;
    height: 2.5rem;
}
body.mobilemenu header .header-language-select::before {
    content: "🌐";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.78rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(17, 30, 54, 0.92);
    color: var(--heading);
    font-size: 1rem;
    line-height: 1;
    box-sizing: border-box;
    pointer-events: none;
}
body.mobilemenu header .header-language-select::after {
    content: "";
    position: absolute;
    right: 0.82rem;
    top: 50%;
    width: 0.38rem;
    height: 0.38rem;
    border-right: 0.12rem solid var(--heading);
    border-bottom: 0.12rem solid var(--heading);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
body.mobilemenu header .header-language-select select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 1rem;
    line-height: 1;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    cursor: pointer;
}
@media (max-width: 1100px) {
    header > div.container > div:last-of-type > a.button.smaller {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        z-index: 3;
        width: min(calc(100vw - 2rem), 30rem);
        margin: 0 auto;
        box-sizing: border-box;
        background: var(--brand);
        border-top: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 -14px 32px rgba(0,0,0,0.28), 0 10px 30px rgba(59, 130, 246, 0.35);
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(1rem);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    body.mobilectavisible header > div.container > div:last-of-type > a.button.smaller {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    body.menushown header > div.container > div:last-of-type > a.button.smaller {
        opacity: 0;
        pointer-events: none;
    }

    .innerbody {
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 700px) {
    .button:not(.icon),
    button:not(.icon),
    input[type="submit"] {
        white-space: normal;
        text-wrap: balance;
        overflow-wrap: anywhere;
        line-height: 1.25;
        text-align: center;
    }

    header > div.container > div:last-of-type > a.button.smaller {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.25rem;
    }
}

/* Buttons and interactive */
.button,
button,
input[type="submit"] {
    background: var(--brand);
    color: #FFFFFF;
    border: 0.1rem solid transparent;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
}
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--highlight);
    color: #FFFFFF;
    box-shadow: 0 12px 35px rgba(34, 211, 238, 0.35);
}
.button.secondary {
    background: var(--brand);
    color: #FFFFFF;
}
.button.ghost,
.button.secondary.ghost {
    background: transparent;
    color: var(--highlight);
    box-shadow: inset 0 0 0 0.1rem var(--highlight);
}
.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
header .navnav > ul > li > a:focus-visible,
footer a:focus-visible {
    outline: 0.15rem solid var(--highlight);
    outline-offset: 0.15rem;
}
section.intro .button:not(.secondary):not(.ghost):not(.smaller):not(.icon),
section.intro button:not(.secondary):not(.ghost):not(.smaller):not(.icon),
section.intro input[type="submit"] {
    padding: 14px 28px;
    font-size: 16px;
}
body.filename__index section.intro .container.small {
    max-width: 52rem;
}
section.intro .home-hero-capabilities {
    margin: 0.9rem auto 0;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #9FB3D6;
    max-width: 52rem;
}
section.intro .home-hero-capabilities span {
    display: block;
}
section.intro .home-hero-capabilities span + span {
    margin-top: 0;
}

@media (min-width: 1000px) {
    .services-engagement-models ul.features {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .services-engagement-models ul.features > li {
        grid-column: span 4;
    }
    .services-engagement-models ul.features > li:nth-child(4) {
        grid-column: 3 / span 4;
    }
    .services-engagement-models ul.features > li:nth-child(5) {
        grid-column: 7 / span 4;
    }
}

.home-speed-stripe {
    padding: 0 0 2.5rem;
}
.home-speed-stripe .container {
    max-width: 72rem;
    text-align: center;
}
.home-speed-stripe p {
    margin: 0;
    padding: 0.9rem 1.5rem;
    border: 1px solid #223252;
    border-radius: 999px;
    color: #9FB3D6;
    font-weight: 600;
    background: #0F1C33;
}

.home-audiences {
    padding: 2rem 0 4rem;
}
.home-audiences__intro {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}
.home-audiences__intro h2 {
    margin: 0 0 1rem;
}
.home-audiences__intro p {
    margin: 0;
    font-size: 1.125rem;
}
.home-audiences__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.home-audiences__card {
    background: #111E36;
    border: 1px solid #24365A;
    border-radius: 1.25rem;
    padding: 1.5rem;
    text-align: center;
}
.home-audiences__card h3 {
    margin: 0 0 0.75rem;
    padding-top: 0;
    font-size: 1.35rem;
    line-height: 1.25;
}
.home-audiences__card p {
    margin: 0;
}
.home-audiences__cta {
    margin-top: 2rem;
    text-align: center;
}

a.logo > div.has_subtitle > div span {
    font-family: var(--fontLogo);
    font-weight: 400;
}
a.logo > div.has_subtitle > div span:nth-child(1) {
    font-size: 1.4rem;
}
a.logo > div.has_subtitle > div span:nth-child(2) {
    display: none;
}

.home-calendly-section {
    padding: 2rem 0 4rem;
}
.home-calendly-section__intro {
    max-width: 42rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.home-calendly-section__intro h2 {
    margin-bottom: 0.75rem;
}
.home-calendly-section__intro p {
    margin: 0;
    color: var(--textMedium);
    font-size: 1.125rem;
}
.home-calendly-section__content {
    display: grid;
    gap: 2rem;
    align-items: start;
    grid-auto-rows: auto;
}
.home-calendly-section__copy {
    background: #111E36;
    border: 1px solid #24365A;
    border-radius: 1.5rem;
    padding: 1.75rem;
    align-self: start;
    margin-top: 0;
}
.home-calendly-section__copy h3 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 1rem;
    color: var(--heading);
}
.home-calendly-section__copy ul {
    margin: 0;
    padding-left: 1.25rem;
}
.home-calendly-section__copy li + li {
    margin-top: 0.85rem;
}
.home-calendly-section__note {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #24365A;
    color: var(--heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}
.home-calendly-section__embed {
    justify-self: stretch;
    align-self: start;
    margin-top: 0;
}
.home-calendly-section__embed .calendly-inline-widget {
    width: 100%;
    margin-top: 0 !important;
    display: block;
}
.home-calendly-section__embed iframe {
    margin-top: 0 !important;
    display: block;
}

/* Home agency difference icon grid */
.home-agency-difference section.features {
    background: var(--bg-main);
}
.home-agency-difference ul.features li.has_icon p.image {
    background: #0F1C33;
    border-color: #24365A;
}
.home-agency-difference ul.features li.has_icon p.image img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(31%) saturate(4460%) hue-rotate(154deg) brightness(97%) contrast(89%) !important;
    transition: filter 0.15s ease-in-out;
}
.home-agency-difference ul.features li:hover p.image {
    border-color: var(--brand);
}
.home-agency-difference ul.features li:hover p.image img {
    filter: brightness(0) saturate(100%) invert(54%) sepia(72%) saturate(1718%) hue-rotate(199deg) brightness(99%) contrast(95%) !important;
}

/* FAQ */
section.wide details {
    background: var(--surface);
    border: 0.1rem solid var(--divider);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
section.wide details + details {
    margin-top: 0;
}
section.wide details summary {
    color: var(--heading);
    padding: 1rem 2rem 1rem 0;
}
section.wide details summary::after {
    border-color: var(--textMedium);
    transition: border-color 0.15s ease-in-out;
}
section.wide details:hover {
    background: #0F1C33;
    border-color: #2E4572;
}
section.wide details:hover summary::after {
    border-color: #22D3EE;
}
section.wide details[open]:not(.closing) summary {
    color: var(--heading);
}
section.wide details > div > div {
    color: var(--textMedium);
}

/* Footer */
footer.dark {
    background: var(--footer-bg);
}
footer.dark,
footer.dark p,
footer.dark li,
footer.dark a,
footer.dark select,
footer.dark > div:last-child a,
footer.dark ul li a,
footer.dark .logo,
footer.dark .logo span {
    color: var(--textMedium);
}
footer.dark .logo,
footer.dark .logo span,
footer.dark a.logo {
    color: var(--heading);
}
footer.dark > div:last-child {
    border-top-color: var(--divider);
}
body.filename__index footer {
    border-top: 0;
}
body.filename__index footer > div:last-child {
    border-top: 0;
}
footer > div:last-child .container {
    gap: 1rem;
}
footer > div:last-child .container > div:first-child {
    flex: 0 1 auto;
    text-align: center;
    white-space: nowrap;
}
footer > div:last-child .container > div:last-child {
    flex: 0 0 auto;
}
footer.dark a:hover,
footer.dark ul li a:hover,
footer.dark select:hover {
    color: var(--highlight);
}
footer.dark ul li a:not(.button)::after {
    background: var(--highlight);
}
@media (min-width: 1000px) {
    footer > div:last-child {
        font-size: 0.82rem;
    }
    footer > div:last-child .container {
        gap: 0.6rem;
    }
    .home-speed-stripe p {
        white-space: nowrap;
    }
    .home-audiences__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .home-calendly-section__content {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 44rem);
        gap: 3rem;
    }
    .home-calendly-section__copy {
        margin-top: 4rem;
    }
    .home-calendly-section__embed {
        justify-self: end;
        width: min(100%, 44rem);
    }
}

@media (min-width: 700px) and (max-width: 999px) {
    .home-audiences__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    footer > div:last-child .container > div:first-child {
        white-space: normal;
    }
}

.services-pillars-grid section.blocks .container.small {
    display: none;
}
.services-pillars-grid ul.blocks {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.services-pillars-grid ul.blocks li {
    aspect-ratio: auto;
    background: var(--surface);
    border: 1px solid var(--divider);
    text-align: left;
}
.services-pillars-grid ul.blocks li a {
    position: static;
    height: auto;
    display: block;
    padding: 0 !important;
    cursor: default;
}
.services-pillars-grid ul.blocks li.hasimage a::before {
    content: none;
}
.services-pillars-grid ul.blocks li.hasimage div.img {
    margin: 0;
    position: static;
}
.services-pillars-grid ul.blocks li.hasimage div.img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.services-pillars-grid ul.blocks li h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 1.25rem 1.25rem 0.75rem;
    color: var(--heading);
}
.services-pillars-grid ul.blocks li p {
    margin: 0 1.25rem 1.25rem;
    color: var(--textMedium);
}
@media (min-width: 1000px) {
    .services-pillars-grid ul.blocks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.services-work-categories ul.blocks li {
    aspect-ratio: auto;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--divider);
}
.services-work-categories ul.blocks li a {
    position: static;
    height: auto;
    display: block;
    padding: 1.5rem !important;
    justify-content: flex-start;
}
.services-work-categories ul.blocks li ul {
    margin: 0.75rem 0 0 1rem;
}

/* Keep docs readable (exclude full dark treatment) */
section.docs {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #3B82F6;
    --accentDarker: #3B82F6;
    --light: rgba(38, 50, 56, 0.035);
    background: #FFFFFF;
    color: var(--textMedium);
}
section.docs .container,
section.docs .container .menu,
section.docs .container .content {
    background: #FFFFFF;
}

/* About image: keep source file unprocessed and display at fixed size */
section.about .about-twocols {
    align-items: center;
    max-width: 68rem;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
    column-gap: clamp(2rem, 4vw, 4rem);
}
section.about .about-twocols .text {
    text-align: left;
}
section.about .about-twocols .text h1 {
    margin: 0 0 1.25rem 0;
    text-align: left !important;
}
section.about .about-twocols .text p,
section.about .about-twocols .text li {
    text-align: left;
}
section.about .about-twocols .text .buttons,
section.about .about-twocols .text .button {
    justify-content: flex-start;
}
section.about .about-twocols .image {
    text-align: center;
    align-items: center;
}
section.about img.about-matt-photo {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
}
@media (max-width: 900px) {
    section.about .about-twocols {
        grid-template-columns: 1fr;
        max-width: 40rem;
        row-gap: 2rem;
    }
    section.about .about-twocols .text,
    section.about .about-twocols .image {
        text-align: left;
    }
}