/* Extend both established visual concepts with the same commercial offer. */
.button {
    font-size: 14px !important
}

.site-header nav,
.variant-b .site-header nav {
    font-size: 14px
}

.brand-description {
    font-size: 13px
}

.eyebrow,
.section-marker,
.b-kicker,
.pill,
.stage-topic {
    font-size: 12px !important
}

.hero-description {
    font-size: 18px
}

.under-button,
.b-caption {
    font-size: 14px;
    line-height: 1.8
}

.under-button strong,
.b-caption strong {
    display: inline-block;
    background: #e6f3c7;
    color: #23361c;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 15px;
    margin-bottom: 7px
}

.variant-b .b-caption strong {
    background: #283c2c;
    color: #c6ef83
}

.b-hero-side>p {
    font-size: 16px;
    max-width: 325px
}

.b-hero-heading {
    gap: 35px
}

.b-hero-bottom {
    font-size: 13px
}

.hero-actions .button {
    font-size: 14px
}

.floating-status span,
.mini-top,
.document-footer,
.photo-credit,
.hero-seal span,
.card-top>span,
.card-bottom,
.fine-print,
.section-footnote,
.metrics-source,
.economic-note {
    font-size: 12px !important
}

.floating-status b {
    font-size: 15px
}

.solution-card p,
.panel-copy>p,
.experience-copy>p:not(.fine-print),
.process-cards p,
.faq-list details>p,
.stage-copy>p,
.approach-list p,
.approach-grid>div:first-child>p,
.b-contact .contact-grid>div>p:not(.fine-print),
.estimate-grid>div>p:not(.estimate-disclaimer) {
    font-size: 16px !important;
    line-height: 1.8
}

.check-list,
.experience-points>span,
.faq-list summary,
.human-system p,
.human-system span,
.scroll-cue,
.site-footer .footer-inner>a:last-child {
    font-size: 14px !important
}

.image-caption,
.coordinate-mark>span,
.stage-object>span,
.stage-visual-caption,
.mock-bar,
.mock-layout aside>span,
.status-chip,
.route-display span,
.field-grid span,
.mock-timeline,
.mock-note,
.demo-caption,
.order-token span,
.paper p,
.paper-check,
.sync-hubs div>span {
    font-size: 12px !important
}

.route-display b,
.field-grid b,
.sync-log,
.sync-hubs b {
    font-size: 14px
}

.route-display {
    gap: 8px
}

.mock-main {
    padding-inline: 20px
}

.form-status,
.estimate-disclaimer {
    font-size: 13px !important;
    line-height: 1.8
}

.form-card form label,
.consent {
    font-size: 14px
}

.optional {
    font-size: 12px
}

.form-card input::placeholder,
.form-card textarea::placeholder {
    font-size: 14px
}

.form-card fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0
}

.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
}

.form-threshold {
    margin-bottom: 25px
}

.form-threshold strong {
    display: block;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.025em
}

.form-threshold p {
    font-size: 14px;
    color: #687660;
    margin-top: 10px;
    line-height: 1.7
}

.form-card select {
    width: 100%;
    font-size: 16px;
    color: #263622;
    background: #f8faf5;
    border: 1px solid #dfe5d8;
    border-radius: 9px;
    padding: 13px 35px 13px 12px;
    min-height: 50px
}

.form-card select:focus-visible {
    outline: 2px solid #739924;
    outline-offset: 2px
}

.budget-feedback {
    font-size: 13px;
    line-height: 1.7;
    color: #6d7d5c;
    margin: 10px 0 22px
}

.budget-feedback.under-budget {
    background: #fff3db;
    border: 1px solid #edddbb;
    border-radius: 8px;
    padding: 13px;
    color: #74592c
}

.form-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.form-submit:disabled:hover {
    background: #b6ed39
}

.section-intro {
    font-size: 17px;
    line-height: 1.8;
    color: #6b7666;
    max-width: 720px;
    margin-top: 24px
}

.section-footnote {
    font-size: 14px !important;
    line-height: 1.8;
    margin-top: 26px;
    color: #6c7964
}

.industries-section {
    padding-block: 82px
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 35px
}

.industry-card {
    border: 1px solid #dbe2d3;
    background: #fafcf7;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column
}

.industry-number {
    font-size: 13px;
    color: #839075
}

.industry-card h3 {
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: -.03em;
    margin-top: 12px
}

.industry-card>p {
    font-size: 16px;
    line-height: 1.8;
    color: #697761;
    margin-top: 17px
}

.industry-card ul,
.industry-panel ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 22px 0 27px;
    font-size: 14px
}

.industry-card li:before,
.industry-panel li:before {
    content: '✓';
    color: #72962e;
    margin-right: 9px
}

.industry-card .industry-process-button {
    margin-top: auto
}

.bespoke-section {
    background: #f0f5e8;
    padding-block: 74px
}

.bespoke-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px
}

.bespoke-grid h2 {
    margin-top: 20px
}

.bespoke-grid>div>p {
    font-size: 17px;
    line-height: 1.85;
    margin-top: 24px;
    color: #66775a
}

.bespoke-points {
    display: grid;
    gap: 25px
}

.bespoke-points article {
    display: flex;
    gap: 23px;
    padding-bottom: 22px;
    border-bottom: 1px solid #d6e0ca
}

.bespoke-points article>span {
    font-size: 13px;
    color: #82986b
}

.bespoke-points h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.02em
}

.bespoke-points p {
    font-size: 16px;
    color: #6c7b61;
    margin-top: 10px;
    line-height: 1.75
}

.outcome-strip {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    border-top: 1px solid #d3dec7;
    padding-top: 24px;
    margin-top: 35px;
    font-size: 14px;
    color: #576d44
}

.outcome-strip span:before {
    content: '✓';
    margin-right: 8px
}

.reported-cases {
    padding-block: 86px
}

.case-heading {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 60px;
    align-items: end
}

.case-heading h2 {
    margin-top: 18px
}

.case-heading>p {
    font-size: 16px;
    line-height: 1.8;
    color: #6c7863
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 42px;
    border-block: 1px solid #d8e1cf;
    padding-block: 30px
}

.case-metrics strong {
    display: block;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.055em
}

.case-metrics>div:last-child strong {
    font-size: 32px;
    line-height: 1.65;
    white-space: nowrap
}

.case-metrics span {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: #6c7c61;
    margin-top: 12px;
    max-width: 240px
}

.metrics-source {
    font-size: 13px !important;
    line-height: 1.8;
    color: #7c8873;
    margin-top: 16px;
    max-width: 930px
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 50px;
    margin-top: 48px
}

.portfolio-grid article {
    border-top: 1px solid #d9e1d0;
    padding-top: 22px
}

.portfolio-grid h3 {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -.025em;
    margin-top: 13px
}

.portfolio-grid p {
    font-size: 16px;
    line-height: 1.8;
    color: #6d7c62;
    margin-top: 14px
}

.a-economics {
    background: #172b22;
    padding-block: 78px;
    color: #f5f7f0
}

.a-economics .eyebrow {
    color: #c1df91
}

.a-economics h2 {
    margin-top: 20px
}

.a-economics .section-intro {
    color: #aebea4;
    max-width: 850px
}

.economic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px
}

.economic-card {
    background: #223b2d;
    border: 1px solid #38513d;
    padding: 27px;
    border-radius: 18px
}

.economic-card>span {
    font-size: 14px;
    color: #b8d496
}

.economic-card strong {
    font-size: 47px;
    display: block;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 25px;
    letter-spacing: -.05em
}

.economic-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #a7b99b;
    margin-top: 5px
}

.economic-card b {
    font-size: 30px;
    line-height: 1.3;
    display: block;
    font-weight: 600;
    color: #c8ed91;
    margin-top: 23px;
    letter-spacing: -.035em
}

.formula {
    font-size: 12px;
    line-height: 1.8;
    border-top: 1px solid #40553c;
    margin-top: 26px;
    padding-top: 18px;
    color: #9eae94
}

.economic-note {
    font-size: 14px !important;
    line-height: 1.85;
    color: #aabc9b;
    max-width: 950px;
    margin-top: 28px
}

.a-economics .button {
    background: #c5ee8a;
    color: #1d3021;
    margin-top: 27px
}

.variant-b .bespoke-section {
    background: #1c2b28
}

.variant-b .bespoke-grid>div>p,
.variant-b .bespoke-points p {
    color: #a6b5ad
}

.variant-b .bespoke-points article,
.variant-b .outcome-strip {
    border-color: #3b4a40
}

.variant-b .outcome-strip {
    color: #b7c9a5
}

.variant-b .industries-section .section-intro,
.variant-b .section-footnote,
.variant-b .case-heading>p,
.variant-b .portfolio-grid p {
    color: #a6b3b4
}

.variant-b .case-metrics {
    border-color: #3b4447
}

.variant-b .case-metrics span {
    color: #a5b7ac
}

.variant-b .metrics-source {
    color: #92a39c
}

.variant-b .portfolio-grid article {
    border-color: #364448
}

.variant-b .case-metrics strong {
    color: #c9eaa0
}

.industry-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 38px;
    border-bottom: 1px solid #3f4d4d
}

.industry-tabs button {
    background: transparent;
    color: #a8b6b6;
    font-size: 15px;
    text-align: left;
    padding: 18px 20px;
    line-height: 1.5;
    border-bottom: 2px solid transparent;
    min-height: 75px
}

.industry-tabs button[aria-selected=true] {
    background: #233433;
    color: #d0edb1;
    border-color: #bbeb80
}

.industry-panel {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    padding: 38px;
    border: 1px solid #3b4a48;
    border-top: 0;
    background: #182624
}

.industry-panel h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.035em;
    margin-top: 16px
}

.industry-panel-main>p {
    font-size: 16px;
    line-height: 1.8;
    color: #acbdb6;
    margin-top: 19px
}

.industry-panel .button {
    margin-top: 27px
}

.industry-panel-detail {
    align-self: center
}

.industry-panel ul {
    font-size: 16px;
    line-height: 1.7;
    color: #b9c8ba
}

.industry-flow {
    font-size: 14px;
    line-height: 1.8;
    border-top: 1px solid #415346;
    padding-top: 22px;
    color: #bfdaa7
}

.roi-calculator .calc-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 26px
}

.roi-calculator .calc-inputs label {
    font-size: 14px;
    line-height: 1.65
}

.roi-calculator .calc-inputs input {
    font-size: 28px;
    line-height: 1.5;
    min-width: 0
}

.roi-calculator .calc-inputs label:last-child {
    grid-column: 1/-1
}

.roi-calculator .calc-result>span {
    font-size: 14px;
    line-height: 1.7
}

.roi-calculator .calc-result output#net-savings {
    font-size: 52px
}

.roi-calculator .calc-result strong {
    font-size: 15px;
    white-space: nowrap
}

.roi-results {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    border-block: 1px solid #d3deca;
    padding-block: 20px;
    margin-top: 25px;
    align-items: start !important
}

.roi-results p {
    margin: 0
}

.roi-results output {
    font-size: 21px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    display: block;
    letter-spacing: -.02em
}

.roi-results span {
    font-size: 12px;
    line-height: 1.65;
    display: block;
    color: #718064;
    margin-top: 7px
}

.roi-calculator #calc-detail {
    font-size: 13px;
    line-height: 1.8;
    margin-top: 18px
}

.b-estimate .estimate-grid {
    grid-template-columns: .85fr 1.15fr;
    gap: 60px
}

.estimate-disclaimer {
    margin-top: 20px
}

.stage-copy h3 {
    white-space: pre-line
}

.a-contact .fine-print,
.b-contact .fine-print {
    font-size: 13px !important
}

.portfolio-grid .eyebrow,
.reported-cases .eyebrow {
    font-size: 12px
}

.mock-note {
    line-height: 1.6
}

@media(max-width:1100px) {
    .case-metrics strong {
        font-size: 35px
    }

    .case-metrics>div:last-child strong {
        font-size: 27px
    }

    .bespoke-grid {
        gap: 45px
    }

    .b-estimate .estimate-grid {
        gap: 35px
    }

    .industry-panel {
        gap: 38px;
        padding: 30px
    }

    .b-hero-side>p {
        max-width: 300px
    }

    .b-hero h1 {
        font-size: 49px
    }
}

@media(max-width:960px) {
    .b-hero-heading {
        align-items: start;
        flex-direction: column;
        gap: 26px
    }

    .b-hero-side>p {
        max-width: 600px
    }

    .b-hero-side>p br {
        display: none
    }

    .b-hero-side .button {
        margin-top: 15px
    }

    .b-caption {
        margin-top: 12px
    }

    .bespoke-grid {
        gap: 35px
    }

    .industry-tabs button {
        padding-inline: 14px
    }

    .industry-panel {
        gap: 30px
    }

    .case-heading {
        gap: 35px
    }

    .case-metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .economic-card {
        padding: 22px
    }

    .economic-card strong {
        font-size: 38px
    }

    .economic-card b {
        font-size: 25px
    }

    .b-estimate .estimate-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .roi-calculator {
        max-width: 680px;
        width: 100%;
        justify-self: center
    }
}

@media(max-width:720px) {

    .industries-section,
    .reported-cases {
        padding-block: 52px
    }

    .industry-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .industry-card {
        padding: 25px
    }

    .industry-card h3 {
        font-size: 24px
    }

    .section-intro {
        font-size: 16px
    }

    .bespoke-section {
        padding-block: 52px
    }

    .bespoke-grid,
    .case-heading {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .bespoke-points {
        gap: 22px
    }

    .outcome-strip {
        flex-direction: column;
        gap: 15px;
        line-height: 1.7
    }

    .case-heading>p {
        margin-top: 0
    }

    .case-metrics {
        gap: 25px 18px;
        margin-top: 28px;
        padding-block: 25px
    }

    .case-metrics strong {
        font-size: 34px
    }

    .case-metrics>div:last-child strong {
        font-size: 24px;
        line-height: 1.75
    }

    .case-metrics span {
        font-size: 13px;
        line-height: 1.7
    }

    .portfolio-grid {
        margin-top: 35px
    }

    .portfolio-grid h3 {
        font-size: 22px
    }

    .a-economics {
        padding-block: 52px
    }

    .economic-grid {
        grid-template-columns: 1fr
    }

    .economic-card {
        padding: 25px
    }

    .economic-card strong {
        font-size: 43px;
        margin-top: 20px
    }

    .economic-card b {
        font-size: 30px
    }

    .industry-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        margin-top: 25px
    }

    .industry-tabs button {
        min-height: 65px;
        font-size: 14px;
        padding: 14px 12px
    }

    .industry-panel {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 28px
    }

    .industry-panel h3 {
        font-size: 27px
    }

    .industry-panel ul {
        font-size: 15px
    }

    .b-kicker {
        line-height: 1.7;
        font-size: 12px !important;
        gap: 20px
    }

    .b-kicker>span:last-child {
        max-width: 180px
    }

    .b-kicker>span:first-child {
        max-width: 125px
    }

    .b-hero h1 {
        font-size: 36px
    }

    .b-hero-side>p {
        font-size: 16px !important
    }

    .b-hero-bottom {
        font-size: 12px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding-block: 23px
    }

    .b-hero-bottom>span {
        max-width: none
    }

    .b-panorama {
        height: 280px
    }

    .b-hero-top {
        padding-top: 25px
    }

    .b-hero-heading {
        padding-top: 23px
    }

    .floating-status span {
        font-size: 12px
    }

    .floating-status {
        padding: 12px 14px;
        top: -30px;
        right: 0
    }

    .floating-document {
        width: 192px;
        left: 0;
        padding: 17px
    }

    .document-footer {
        font-size: 12px;
        gap: 5px;
        align-items: start
    }

    .floating-document h3 {
        font-size: 18px
    }

    .photo-credit {
        right: 10px
    }

    .hero-seal {
        right: 0;
        bottom: 24px
    }

    .hero-description {
        font-size: 17px
    }

    .under-button {
        font-size: 13px
    }

    .under-button strong,
    .b-caption strong {
        font-size: 14px
    }

    .hero-actions .button {
        font-size: 14px !important
    }

    .hero-actions {
        gap: 13px
    }

    .section-top>p {
        font-size: 16px
    }

    .check-list {
        font-size: 14px !important
    }

    .work-tabs button {
        font-size: 12px !important;
        padding: 11px 12px
    }

    .work-tabs {
        gap: 4px;
        max-width: 100%
    }

    .app-mock {
        transform: none
    }

    .mock-main {
        padding: 20px 15px
    }

    .route-display {
        padding: 15px 10px
    }

    .mock-title {
        align-items: start
    }

    .mock-title h4 {
        font-size: 16px
    }

    .route-display b,
    .field-grid b {
        font-size: 13px
    }

    .status-chip {
        font-size: 12px !important
    }

    .paper p {
        font-size: 12px !important
    }

    .paper {
        padding: 17px 14px;
        width: 47%
    }

    .paper-pair {
        gap: 14px
    }

    .paper-check {
        font-size: 12px !important
    }

    .document-demo,
    .sync-demo {
        padding: 22px 15px
    }

    .sync-hubs {
        gap: 10px
    }

    .sync-hubs>div {
        padding: 22px 10px
    }

    .sync-hubs b {
        font-size: 14px
    }

    .sync-hubs div>span {
        font-size: 12px !important
    }

    .sync-log {
        font-size: 13px
    }

    .stage-topic {
        font-size: 12px !important
    }

    .stage-visual-caption {
        font-size: 12px !important
    }

    .stage-object>span {
        font-size: 12px !important
    }

    .stage-object p {
        font-size: 14px
    }

    .human-system p {
        font-size: 14px !important
    }

    .journey-nav strong {
        font-size: 13px
    }

    .journey-nav button>span {
        font-size: 12px
    }

    .form-card,
    .b-contact .form-card {
        padding: 22px
    }

    .form-threshold strong {
        font-size: 21px
    }

    .form-pair {
        grid-template-columns: 1fr;
        gap: 0
    }

    .form-card input::placeholder,
    .form-card textarea::placeholder {
        font-size: 14px
    }

    .form-card input,
    .form-card textarea {
        font-size: 16px
    }

    .form-submit {
        font-size: 14px !important
    }

    .roi-calculator {
        padding: 23px
    }

    .roi-calculator .calc-inputs {
        gap: 22px 18px
    }

    .roi-calculator .calc-inputs label {
        font-size: 14px
    }

    .roi-calculator .calc-inputs input {
        font-size: 25px
    }

    .roi-calculator .calc-result output#net-savings {
        font-size: 40px
    }

    .roi-results {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .roi-results p {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 20px
    }

    .roi-results span {
        margin: 0;
        text-align: right;
        max-width: 145px
    }

    .roi-results output {
        font-size: 21px !important
    }

    .b-caption {
        font-size: 13px
    }

    .image-caption {
        max-width: 230px
    }

    .coordinate-mark>strong {
        font-size: 21px
    }

    .coordinate-mark>span {
        font-size: 12px
    }

    .a-contact h2 {
        font-size: 40px
    }

    .variant-b .site-footer .footer-inner>a:last-child {
        font-size: 13px !important
    }

    .footer-inner>p {
        font-size: 13px
    }

    .b-contact .contact-grid>div>p:not(.fine-print) {
        font-size: 16px !important
    }
}

@media(max-width:390px) {
    .b-hero h1 {
        font-size: 34px
    }

    .b-kicker {
        font-size: 11px !important
    }

    .b-kicker>span:last-child {
        max-width: 160px
    }

    .hero-actions .button {
        padding-inline: 19px
    }

    .a-hero h1 {
        font-size: 39px
    }

    .case-metrics>div:last-child strong {
        font-size: 22px
    }

    .work-tabs .icon {
        display: none
    }

    .roi-calculator .calc-inputs {
        grid-template-columns: 1fr
    }

    .roi-calculator .calc-inputs label:last-child {
        grid-column: auto
    }
}

@media(min-width:721px) {
    .floating-status {
        top: -15px;
        right: -12px
    }
}