:root {
    --bd-type-hero: clamp(2.86rem, 3.9vw, 3.51rem);
    --bd-type-page: clamp(2.6rem, 3.9vw, 3.32rem);
    --bd-type-section: clamp(2.1125rem, 3.12vw, 2.6rem);
    --bd-type-card: clamp(1.495rem, 1.885vw, 1.82rem);
    --bd-type-body: 1rem;
    --bd-type-support: .875rem;
    --bd-leading-heading: 1.06;
    --bd-leading-body: 1.7;
    --bd-form-surface: #faf9f6;
    --bd-form-border: #d8d5d0;
    --bd-form-focus: #b52e50;
    --bd-form-radius: 10px;
    --bd-form-transition: 160ms ease;
}

.home-page .home-hero h1,
.about-page .about-hero h1,
.systems-page .systems-hero h1,
.web-design-page .web-design-hero h1,
.mobile-apps-payments-page .mobile-apps-hero h1,
.digital-marketing-page .digital-marketing-hero h1,
.app-development-page .app-development-hero h1,
.blog-page .blog-hero h1,
.work-page .work-hero h1,
.shop-page .shop-hero h1,
.contact-page .contact-hero h1 {
    font-size: var(--bd-type-hero);
    line-height: var(--bd-leading-heading);
    letter-spacing: -.055em;
}

.work-detail-page .work-detail-hero__heading h1,
..commerce-page .commerce-heading h1,
.commerce-page .commerce-auth-card h1 {
    font-size: var(--bd-type-page);
    line-height: var(--bd-leading-heading);
    letter-spacing: -.055em;
}

.shop-product-page .shop-product-hero h1:not(.marketplace-product-title) {
    max-width: none;
    font-size: clamp(1.65rem, 2.45vw, 2.2rem);
    line-height: 1.12;
    letter-spacing: -.045em;
}

.blog-page .blog-article__header h1 {
    max-width: 1100px;
    font-size: clamp(2.6rem, 3.12vw, 3.055rem);
    line-height: 1.06;
    letter-spacing: -.06em;
}

.blog-page .blog-article__header {
    width: min(1120px, calc(100% - 64px));
}

.home-page .home-problem__copy h2,
.home-page .home-services h2,
.home-page .home-values__layout h2,
.home-page .home-process h2,
.home-page .home-featured-work h2,
.home-page .home-final-cta__inner h2,
.about-page .about-section-heading h2,
.about-page .about-work__heading h2,
.about-page .about-legacy__heading h2,
.about-page .about-contact__intro h2,
.systems-page .systems-heading h2,
.systems-page .systems-faq__heading h2,
.systems-page .systems-scope__inner h2,
.mobile-apps-payments-page .mobile-apps-section-heading h2,
.mobile-apps-payments-page .mobile-apps-faq__heading h2,
.mobile-apps-payments-page .mobile-apps-scope h2,
.digital-marketing-page .digital-marketing-heading h2,
.digital-marketing-page .digital-marketing-intro h2,
.digital-marketing-page .digital-marketing-process h2,
.digital-marketing-page .digital-marketing-fit h2,
.digital-marketing-page .digital-marketing-faq h2,
.web-design-page .commerce-heading h2,
.web-design-page .process-heading h2,
.web-design-page .investment-heading h2,
.blog-page .blog-section-heading h2,
.blog-page .blog-empty h2,
.work-page .work-section-heading h2,
.work-detail-page .work-section-heading h2,
.work-detail-page .work-detail-chapter h2,
.shop-page .shop-section-heading h2,
.shop-page .shop-product-details__intro h2,
.contact-page .contact-form-card__heading h2,
.contact-page .contact-details__card h2 {
    font-size: var(--bd-type-section);
    line-height: var(--bd-leading-heading);
    letter-spacing: -.045em;
}

.blog-page .blog-card h3,
.work-page .work-project-card h3 {
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.shop-page .shop-card h3 {
    min-height: 2.5em;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.home-page .home-problem__item h3 {
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.blog-page .blog-article__deck,
.blog-page .blog-article__intro {
    max-width: 770px;
    margin: 22px 0 0;
    color: #65616b;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: var(--bd-leading-body);
}

.blog-page .blog-article__intro p {
    margin: 0;
}

.blog-page .blog-article__intro p + p {
    margin-top: 12px;
}

.blog-page .blog-article__intro strong {
    font-weight: 650;
}

[data-theme='dark'] .blog-page .blog-article__intro {
    color: #c8c4d0;
}

.blog-page .blog-article__content {
    font-size: 1rem;
    line-height: 1.8;
}

.blog-page .blog-card h3 {
    font-size: var(--bd-type-card);
}

.blog-page .blog-category-link,
.work-detail-page .work-detail-tags a {
    width: fit-content;
    max-width: 100%;
    padding: 7px 11px;
    font-size: .8125rem;
    line-height: 1.25;
}

.blog-page .blog-article__taxonomies {
    align-items: flex-start;
    gap: 8px;
}

.blog-related .blog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.blog-related .blog-card__body {
    padding: 18px;
}

.blog-related .blog-card h3 {
    font-size: clamp(1.365rem, 1.56vw, 1.625rem);
}

.contact-page .contact-field input,
.contact-page .contact-field select,
.contact-page .contact-field textarea,
.shop-page .shop-filters select,
.commerce-page .commerce-field input,
.commerce-page .commerce-field select,
.commerce-page .commerce-field textarea,
.commerce-page .checkout-form input:not([type='hidden']):not([type='radio']):not([type='checkbox']),
.commerce-page .checkout-form select,
.commerce-page .checkout-form textarea {
    min-height: 48px;
    border: 1px solid var(--bd-form-border);
    border-radius: var(--bd-form-radius);
    background: var(--bd-form-surface);
    color: #211d25;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--bd-form-transition), background-color var(--bd-form-transition), box-shadow var(--bd-form-transition);
}

.contact-page .contact-field textarea,
.commerce-page .commerce-field textarea,
.commerce-page .checkout-form textarea {
    min-height: 132px;
}

.contact-page .contact-field input:hover,
.contact-page .contact-field select:hover,
.contact-page .contact-field textarea:hover,
.shop-page .shop-filters select:hover,
.commerce-page .commerce-field input:hover,
.commerce-page .commerce-field select:hover,
.commerce-page .commerce-field textarea:hover,
.commerce-page .checkout-form input:not([type='hidden']):not([type='radio']):not([type='checkbox']):hover,
.commerce-page .checkout-form select:hover,
.commerce-page .checkout-form textarea:hover {
    border-color: #aaa5ac;
}

.contact-page .contact-field input:focus-visible,
.contact-page .contact-field select:focus-visible,
.contact-page .contact-field textarea:focus-visible,
.shop-page .shop-filters select:focus-visible,
.commerce-page .commerce-field input:focus-visible,
.commerce-page .commerce-field select:focus-visible,
.commerce-page .commerce-field textarea:focus-visible,
.commerce-page .checkout-form input:not([type='hidden']):not([type='radio']):not([type='checkbox']):focus-visible,
.commerce-page .checkout-form select:focus-visible,
.commerce-page .checkout-form textarea:focus-visible {
    border-color: var(--bd-form-focus);
    outline: 3px solid color-mix(in srgb, var(--bd-form-focus) 20%, transparent);
    outline-offset: 1px;
    background: #fff;
}

.contact-page .contact-field input:disabled,
.contact-page .contact-field select:disabled,
.contact-page .contact-field textarea:disabled,
.commerce-page input:disabled,
.commerce-page select:disabled,
.commerce-page textarea:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.contact-page .contact-field input[type='checkbox'],
.contact-page .contact-field input[type='radio'],
.commerce-page input[type='checkbox'],
.commerce-page input[type='radio'] {
    accent-color: var(--bd-form-focus);
}

@media (min-width: 768px) {
    .home-page .home-hero {
        min-height: min(600px, calc(100svh - 60px));
    }

    .about-page .about-hero__inner {
        min-height: clamp(430px, 37vw, 520px);
    }

    .work-page .work-hero,
    .work-page .work-hero__inner {
        min-height: clamp(430px, 36vw, 520px);
    }

    .shop-page .shop-hero__inner {
        min-height: clamp(410px, 35vw, 500px);
    }

    .blog-page .blog-hero__inner {
        min-height: clamp(390px, 32vw, 460px);
    }

    .systems-page .systems-hero,
    .systems-page .systems-hero__inner,
    .digital-marketing-page .digital-marketing-hero,
    .digital-marketing-page .digital-marketing-hero__inner,
    .web-design-page .web-design-hero,
    .web-design-page .web-design-hero__inner {
        min-height: clamp(430px, 38vw, 540px);
    }

    .mobile-apps-payments-page .mobile-apps-hero,
    .mobile-apps-payments-page .mobile-apps-hero__inner {
        min-height: 560px;
    }

    .mobile-apps-payments-page .mobile-apps-hero__visual {
        min-height: 450px;
    }

    .contact-page .contact-hero__inner {
        min-height: 320px;
    }
}

[data-theme='dark'] .contact-page .contact-field input,
[data-theme='dark'] .contact-page .contact-field select,
[data-theme='dark'] .contact-page .contact-field textarea,
[data-theme='dark'] .shop-page .shop-filters select,
[data-theme='dark'] .commerce-page .commerce-field input,
[data-theme='dark'] .commerce-page .commerce-field select,
[data-theme='dark'] .commerce-page .commerce-field textarea,
[data-theme='dark'] .commerce-page .checkout-form input:not([type='hidden']):not([type='radio']):not([type='checkbox']),
[data-theme='dark'] .commerce-page .checkout-form select,
[data-theme='dark'] .commerce-page .checkout-form textarea {
    border-color: #494653;
    background: #22202a;
    color: #f4f2f8;
}

[data-theme='dark'] .contact-page .contact-field input:focus-visible,
[data-theme='dark'] .contact-page .contact-field select:focus-visible,
[data-theme='dark'] .contact-page .contact-field textarea:focus-visible,
[data-theme='dark'] .shop-page .shop-filters select:focus-visible,
[data-theme='dark'] .commerce-page .commerce-field input:focus-visible,
[data-theme='dark'] .commerce-page .commerce-field select:focus-visible,
[data-theme='dark'] .commerce-page .commerce-field textarea:focus-visible,
[data-theme='dark'] .commerce-page .checkout-form input:not([type='hidden']):not([type='radio']):not([type='checkbox']):focus-visible,
[data-theme='dark'] .commerce-page .checkout-form select:focus-visible,
[data-theme='dark'] .commerce-page .checkout-form textarea:focus-visible {
    background: #17161f;
}

@media (max-width: 1100px) {
    .blog-related .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    :root {
        --bd-type-hero: clamp(2.6rem, 9.75vw, 3.445rem);
        --bd-type-page: clamp(2.47rem, 9.1vw, 3.055rem);
        --bd-type-section: clamp(1.95rem, 7.8vw, 2.405rem);
        --bd-type-card: clamp(1.43rem, 6.24vw, 1.69rem);
    }

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

    .mobile-apps-payments-page .mobile-apps-hero,
    .mobile-apps-payments-page .mobile-apps-hero__inner,
    .digital-marketing-page .digital-marketing-hero,
    .digital-marketing-page .digital-marketing-hero__inner,
    .systems-page .systems-hero,
    .systems-page .systems-hero__inner,
    .web-design-page .web-design-hero__inner {
        min-height: 0;
    }

    .blog-page .blog-article__header h1 {
        font-size: clamp(2.08rem, 9.1vw, 2.6rem);
    }

    .blog-page .blog-article__header {
        width: calc(100% - 64px);
        margin-right: 12px;
        margin-left: 52px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .contact-page .contact-field input,
    .contact-page .contact-field select,
    .contact-page .contact-field textarea,
    .shop-page .shop-filters select,
    .commerce-page .commerce-field input,
    .commerce-page .commerce-field select,
    .commerce-page .commerce-field textarea,
    .commerce-page .checkout-form input,
    .commerce-page .checkout-form select,
    .commerce-page .checkout-form textarea {
        transition: none;
    }
}