/* Shared layout guardrails for the desktop-to-tablet range. The site loads
   every page stylesheet globally, so these rules run last and stay scoped to
   page content inside <main>. */
@media (min-width: 1024px) and (max-width: 1279px) {

    main,
    main>*,
    main :is([class*="__container"],
        [class*="__content"],
        [class*="__info"],
        [class*="__media"],
        [class*="__image"],
        [class*="__grid"],
        [class*="__cards"],
        [class*="__form"],
        [class*="__column"],
        [class*="__text"]) {
        min-width: 0;
        box-sizing: border-box;
    }

    main img,
    main video,
    main iframe {
        max-width: 100%;
    }

    main :is(h1, h2, h3) {
        max-width: 100%;
        text-wrap: balance;
        overflow-wrap: break-word;
    }

    main p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    main :is(.page-container, .site-container, .section__container) {
        width: min(calc(100% - 3rem), 75rem) !important;
        margin-inline: auto !important;
    }

}

/* Shared type scale for every page in the 1024–1279px laptop range. */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --laptop-type-display: 3.25rem;
        --laptop-type-h1: 3rem;
        --laptop-type-h2: 2.375rem;
        --laptop-type-h3: 1.625rem;
        --laptop-type-h4: 1.25rem;
        --laptop-type-body: 1rem;
        --laptop-type-lead: 1.125rem;
        --laptop-type-small: 0.875rem;
    }

    main :is(h1, h2, h3, h4, h5, h6) {
        min-height: 0;
        text-wrap: balance;
    }

    main h1 {
        font-size: var(--laptop-type-h1) !important;
        line-height: 1.08 !important;
    }

    main h2 {
        font-size: var(--laptop-type-h2) !important;
        line-height: 1.14 !important;
    }

    main h3 {
        font-size: var(--laptop-type-h3) !important;
        line-height: 1.2 !important;
    }

    main h4 {
        font-size: var(--laptop-type-h4) !important;
        line-height: 1.25 !important;
    }

    main :is(h5, h6) {
        font-size: var(--laptop-type-body) !important;
        line-height: 1.3 !important;
    }

    main :is(p, li) {
        font-size: var(--laptop-type-body) !important;
        line-height: 1.6 !important;
    }

    main :is(.dm-service-hero__desc, .service-hero__desc,
        .brand-identity-hero__description, .branding-hero__description,
        .shopify-store-build-hero__description, .shopify-development-hero__description,
        .contact-us__description, .hero__description, .section__lead, .section__subtitle) {
        font-size: var(--laptop-type-lead) !important;
        line-height: 1.55 !important;
    }

    main :is(label, button, [class*="__button"], [class*="__btn"], .common-btn) {
        font-size: var(--responsive-type-body) !important;
    }

    main :is(small, .eyebrow, .label, .caption, .metadata) {
        font-size: var(--laptop-type-small) !important;
        line-height: 1.4 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) :is(h1, h2, h3, h4, h5, h6) {
        min-height: 0;
        text-wrap: balance;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h1 {
        font-size: var(--laptop-type-h1) !important;
        line-height: 1.08 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h2 {
        font-size: var(--laptop-type-h2) !important;
        line-height: 1.14 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h3 {
        font-size: var(--laptop-type-h3) !important;
        line-height: 1.2 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) :is(p, li) {
        font-size: var(--laptop-type-body) !important;
        line-height: 1.6 !important;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {

    /* Shared text-led service pages: digital marketing and web services. */
    main .dm-service-hero {
        padding-top: clamp(8.5rem, 10vw, 10.5rem);
        padding-bottom: clamp(3rem, 4vw, 4rem);
    }

    main .dm-service-hero__content {
        max-width: min(100%, 58rem);
    }

    main .dm-service-hero__title {
        font-size: clamp(2.5rem, 3.8vw, 3.25rem);
        line-height: 1.12;
    }

    main .dm-service-hero__desc {
        max-width: 54rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    main .service-hero {
        padding-top: clamp(8rem, 9.5vw, 10rem);
        padding-bottom: clamp(3rem, 4vw, 4rem);
    }

    main .service-hero__title {
        font-size: clamp(2.75rem, 4.4vw, 3.75rem);
        line-height: 1.08;
    }

    main .service-hero__desc {
        max-width: 58rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Brand identity pages use a fixed 80px title in their desktop styles. */
    main .brand-identity-hero {
        min-height: auto;
        padding: clamp(8.5rem, 11vw, 10rem) 1.5rem 3.5rem;
    }

    main .brand-identity-hero__title {
        font-size: clamp(3rem, 5.6vw, 4.5rem);
        line-height: 1.04;
    }

    main .brand-identity-hero__description {
        max-width: 58rem;
        font-size: clamp(1rem, 1.35vw, 1.125rem);
        line-height: 1.65;
    }

    /* Branding design has a 144px maximum heading and oversized body copy. */
    main .branding-hero {
        min-height: auto;
        padding-block: clamp(8.5rem, 12vw, 10.5rem) 4rem;
    }

    main .branding-hero__content {
        width: min(100%, 75rem);
    }

    main .branding-hero__title {
        font-size: clamp(3.5rem, 6.2vw, 5.25rem);
        line-height: 0.98;
    }

    main .branding-hero__description {
        max-width: 52rem;
        margin-top: clamp(1.25rem, 2vw, 2rem);
        font-size: clamp(1.125rem, 1.8vw, 1.5rem);
        line-height: 1.5;
    }

    main .branding-hero__actions {
        margin-top: 1.5rem;
    }

    /* Shopify service pages share this centered hero across multiple routes. */
    main .shopify-store-build-hero {
        padding: clamp(8.5rem, 11vw, 10.5rem) 1.5rem 4rem;
    }

    main .shopify-store-build-hero__container {
        width: min(100%, 62rem);
    }

    main .shopify-store-build-hero__badge {
        margin-bottom: clamp(1.25rem, 2vw, 2rem);
    }

    main .shopify-store-build-hero__title {
        width: min(100%, 58rem);
        font-size: clamp(2.5rem, 4.6vw, 3.5rem);
        line-height: 1.06;
    }

    main .shopify-store-build-hero__description {
        max-width: 54rem;
        margin-bottom: 1.75rem;
        font-size: clamp(1rem, 1.35vw, 1.125rem);
        line-height: 1.65;
    }

    /* Two-column Shopify setup and development heroes. */
    main .shopify-development-hero__container {
        width: min(calc(100% - 3rem), 75rem);
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: clamp(2rem, 3vw, 2.75rem);
        align-items: center;
    }

    main .shopify-development-hero__media,
    main .shopify-development-hero__content {
        min-width: 0;
    }

    main .shopify-development-hero__title {
        font-size: clamp(2.5rem, 4vw, 3.25rem);
        line-height: 1.08;
    }

    main :is(.shopify-pos-hero__container, .shopify-store-settings-hero__container) {
        width: min(calc(100% - 3rem), 75rem);
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
        align-items: center;
    }

    main :is(.shopify-pos-hero__content, .shopify-pos-hero__visual,
        .shopify-store-settings-hero__content, .shopify-store-settings-hero__visual) {
        min-width: 0;
    }

    main :is(.shopify-pos-hero__title, .shopify-store-settings-hero__title) {
        font-size: clamp(2.25rem, 3.8vw, 3.125rem);
        line-height: 1.1;
    }

    main :is(.shopify-pos-hero, .shopify-store-settings-hero) {
        min-height: 0;
        padding-top: clamp(7.5rem, 9vw, 9rem);
        padding-bottom: 3.5rem;
    }

    main .shopify-pos-hero__container {
        min-height: 0;
    }

    main .shopify-store-settings-hero__container {
        height: auto;
    }

    /* Content sections with desktop-sized fixed grid tracks. */
    main .shopify-pos-reassurance {
        padding: 5rem 1.5rem;
    }

    main .shopify-pos-reassurance__container {
        width: min(100%, 75rem);
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    main .shopify-pos-reassurance__container,
    main .shopify-store-settings-benefits__container,
    main .shopify-migration__container {
        min-width: 0;
    }

    main .shopify-store-settings-benefits {
        min-height: 0;
        padding: 5rem 1.5rem;
    }

    main .shopify-store-settings-benefits__container,
    main .shopify-migration__container {
        width: min(100%, 75rem);
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    main .shopify-migration__container {
        padding-inline: 1.5rem;
    }

    main :is(.shopify-store-settings-benefits__title,
        .shopify-pos-reassurance__intro h2,
        .shopify-migration__title) {
        font-size: clamp(2.125rem, 3.5vw, 2.875rem);
        line-height: 1.15;
    }

    main :is(.shopify-pos-reassurance__intro p,
        .shopify-migration__subtitle) {
        font-size: 1rem;
        line-height: 1.65;
    }

    main .shopify-store-settings-included {
        margin-block: 5rem;
    }

    main .shopify-store-settings-included__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    main .shopify-store-settings-included__card,
    main .shopify-product-catalog-pains__card {
        padding: clamp(1.25rem, 2.5vw, 2rem);
    }

    main :is(.website-management-needs, .website-management-why,
        .website-management-process, .shopify-pos-process) {
        padding-block: clamp(4rem, 6vw, 5.5rem);
    }

    main :is(.website-management-needs h2, .website-management-why__header h2,
        .shopify-product-catalog-pains__title, .shopify-store-settings-included__title) {
        font-size: clamp(2.125rem, 3.5vw, 2.875rem);
        line-height: 1.15;
    }

    main :is(.website-management-needs__container, .website-management-why__container,
        .website-management-process__container, .shopify-pos-process__container,
        .shopify-store-settings-included__container) {
        width: min(calc(100% - 3rem), 75rem);
        margin-inline: auto;
    }

    main .shopify-store-settings-included__card-title {
        margin-top: 2rem;
    }

    main .shopify-store-settings-included__card {
        min-width: 0;
    }

    main .shopify-pos-hero__container,
    main .shopify-store-settings-hero__container {
        padding-inline: 1.5rem;
    }

    /* Keep booking frames usable through the full laptop band. */
    main .contact-us__booking>.calendly-inline-widget {
        height: 700px !important;
    }

    /* Candidate detail pages and the booking/form pages. */
    main .job-detail {
        width: min(calc(100% - 3rem), 62rem);
        margin-inline: auto;
    }

    main .job-detail__title {
        font-size: clamp(2.5rem, 4.5vw, 3.5rem);
        line-height: 1.08;
    }

    main :is(.contact-us__booking, .lets-work-together) {
        width: min(calc(100% - 3rem), 75rem);
        margin-inline: auto;
    }

    main .calendly-inline-widget {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Standalone case-study and testimonial templates do not wrap content in
   <main>, so give those routes the same laptop-width treatment directly. */
@media (min-width: 1024px) and (max-width: 1279px) {

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) .section_inner {
        width: min(calc(100% - 3rem), 75rem);
        margin-inline: auto;
        box-sizing: border-box;
    }

    main .brand-identity-hero__mobile-break {
        display: initial;
    }

    .all_case_studies-hero-section .all_case_studies-hero-header h2 {
        font-size: clamp(2.5rem, 4.5vw, 3.5rem);
        line-height: 1.08;
    }

    .case_studies-section .case_studies-filter {
        column-gap: clamp(1.25rem, 3vw, 2.5rem);
        margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
    }

    .case_studies-section .case_studies-tab {
        font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    }

    .case_studies-section .case_studies-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.25rem, 2vw, 1.75rem);
    }

    .client_testimonials-hero-section .client_testimonials-hero-header h2 {
        font-size: clamp(3rem, 5vw, 4rem);
        line-height: 0.95;
    }

    .case_study-hero-section .case_study-hero-media {
        max-height: min(70vh, 43.75rem);
    }
}

@media (min-width: 768px) {
    .brand-identity-hero__mobile-break {
        display: none;
    }
}

/* Tablet type scale and overflow guardrails. */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --page-horizontal-gutter: 6.25rem;
        --page-container-max: 75rem;
        --responsive-type-h1: 2.625rem;
        --responsive-type-h2: 2.125rem;
        --responsive-type-h3: 1.5rem;
        --responsive-type-h4: 1.25rem;
        --responsive-type-body: 1rem;
        --responsive-type-lead: 1.125rem;
        --responsive-type-small: 0.875rem;
    }

    main,
    main>* {
        min-width: 0;
        box-sizing: border-box;
    }

    main :is([class*="__container"], [class*="-container"], .section_inner,
        [class*="__content"], [class*="__grid"], [class*="__cards"],
        [class*="__form"], [class*="__column"], [class*="__text"]) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    main img,
    main video,
    main iframe {
        max-width: 100%;
    }

    main :is(h1, h2, h3, h4, h5, h6) {
        min-height: 0;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    main h1 {
        font-size: var(--responsive-type-h1) !important;
        line-height: 1.08 !important;
    }

    main h2 {
        font-size: var(--responsive-type-h2) !important;
        line-height: 1.14 !important;
    }

    main h3 {
        font-size: var(--responsive-type-h3) !important;
        line-height: 1.2 !important;
    }

    main h4 {
        font-size: var(--responsive-type-h4) !important;
        line-height: 1.25 !important;
    }

    main :is(h5, h6) {
        font-size: var(--responsive-type-body) !important;
        line-height: 1.3 !important;
    }

    main :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    main :is(p, li) {
        font-size: var(--responsive-type-body) !important;
        line-height: 1.6 !important;
    }

    main :is(.dm-service-hero__desc, .service-hero__desc,
        .brand-identity-hero__description, .branding-hero__description,
        .shopify-store-build-hero__description, .shopify-development-hero__description,
        .contact-us__description, .hero__description, .section__lead, .section__subtitle) {
        font-size: var(--responsive-type-lead) !important;
        line-height: 1.55 !important;
    }

    main :is(small, .eyebrow, .label, .caption, .metadata) {
        font-size: var(--responsive-type-small) !important;
        line-height: 1.4 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h1 {
        font-size: var(--responsive-type-h1) !important;
        line-height: 1.08 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h2 {
        font-size: var(--responsive-type-h2) !important;
        line-height: 1.14 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h3 {
        font-size: var(--responsive-type-h3) !important;
        line-height: 1.2 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) :is(p, li) {
        font-size: var(--responsive-type-body) !important;
        line-height: 1.6 !important;
    }

    main :is(.page-container, .site-container),
    main>section:is([class*="__container"], [class*="-container"]),
    main>section> :is([class*="__container"], [class*="-container"]),
    main>section>div> :is([class*="__container"], [class*="-container"]),
    .header .section,
    .footer :is(.page-container, .site-container, .footer__container, .footer__bottom-container) {
        width: 100% !important;
        max-width: calc(100vw - 6.25rem) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Mobile type scale; 16px form text also prevents mobile browsers zooming on focus. */
@media (max-width: 767px) {
    :root {
        --page-container-max: 75rem;
        --responsive-type-h1: 2.25rem;
        --responsive-type-h2: 1.875rem;
        --responsive-type-h3: 1.375rem;
        --responsive-type-h4: 1.125rem;
        --responsive-type-body: 0.9375rem;
        --responsive-type-lead: 1rem;
        --responsive-type-small: 0.8125rem;
    }

    main,
    main>* {
        min-width: 0;
        box-sizing: border-box;
    }

    main :is([class*="__container"], [class*="-container"], .section_inner,
        [class*="__content"], [class*="__grid"], [class*="__cards"],
        [class*="__form"], [class*="__column"], [class*="__text"]) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    main img,
    main video,
    main iframe {
        max-width: 100%;
    }

    main :is(h1, h2, h3, h4, h5, h6) {
        min-height: 0;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    main h1 {
        font-size: var(--responsive-type-h1) !important;
        line-height: 1.08 !important;
    }

    main h2 {
        font-size: var(--responsive-type-h2) !important;
        line-height: 1.14 !important;
    }

    main h3 {
        font-size: var(--responsive-type-h3) !important;
        line-height: 1.2 !important;
    }

    main h4 {
        font-size: var(--responsive-type-h4) !important;
        line-height: 1.25 !important;
    }

    main :is(h5, h6) {
        font-size: var(--responsive-type-body) !important;
        line-height: 1.3 !important;
    }

    main :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    main :is(p, li) {
        font-size: var(--responsive-type-body) !important;
        line-height: 1.55 !important;
    }

    main :is(.dm-service-hero__desc, .service-hero__desc,
        .brand-identity-hero__description, .branding-hero__description,
        .shopify-store-build-hero__description, .shopify-development-hero__description,
        .contact-us__description, .hero__description, .section__lead, .section__subtitle) {
        font-size: var(--responsive-type-lead) !important;
        line-height: 1.5 !important;
    }

    main :is(label, button, [class*="__button"], [class*="__btn"], .common-btn) {
        font-size: var(--responsive-type-body) !important;
    }

    main :is(small, .eyebrow, .label, .caption, .metadata) {
        font-size: var(--responsive-type-small) !important;
        line-height: 1.4 !important;
    }

    main :is(input, select, textarea) {
        font-size: 1rem !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h1 {
        font-size: var(--responsive-type-h1) !important;
        line-height: 1.08 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h2 {
        font-size: var(--responsive-type-h2) !important;
        line-height: 1.14 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) h3 {
        font-size: var(--responsive-type-h3) !important;
        line-height: 1.2 !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    :is(.all_case_studies-hero-section, .case_studies-section,
        .client_testimonials-hero-section, .client_testimonials-review-section,
        .client_testimonials-video-section, .client_testimonials-reviews-section,
        .case_study-hero-section, .case_study-overview-section) :is(p, li) {
        font-size: var(--responsive-type-body) !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 480px) {
    :root {
        --responsive-type-h1: 2rem;
        --responsive-type-h2: 1.625rem;
        --responsive-type-h3: 1.25rem;
        --responsive-type-h4: 1.0625rem;
    }
}

/* The landing hero and service list have custom flex sizing beyond the
   shared container rules; let their text columns shrink and wrap cleanly. */
@media (min-width: 768px) and (max-width: 1023px) {
    main .landing-page .landing-page__hero-content {
        width: min(100%, 52rem);
        min-width: 0;
        padding-inline: 1rem;
    }

    main .landing-page .landing-page__title,
    main .landing-page .landing-page__description {
        width: 100%;
        max-width: 100%;
    }

    main .services-scroll__container {
        gap: 2rem;
    }

    main .services-scroll__left {
        flex: 0 0 11rem;
        width: 11rem;
    }

    main :is(.services-scroll__static-text, .services-scroll__word) {
        font-size: 3.25rem;
    }

    main .services-scroll__dynamic-words {
        height: 3.5rem;
    }

    main .services-scroll__right {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        gap: clamp(5rem, 8vw, 7rem);
    }

    main .services-scroll__item,
    main .services-scroll__item-title,
    main .services-scroll__item-desc {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    main .services-scroll__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
        width: 100%;
    }

    main :is(.services-scroll__feature, .services-scroll__feature-link) {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767px) {
    main .landing-page .landing-page__hero-content {
        width: 100%;
        min-width: 0;
        padding-inline: 1.25rem;
    }

    main .landing-page .landing-page__title,
    main .landing-page .landing-page__description {
        width: 100%;
        max-width: 100%;
    }

    main .services-scroll__container,
    main .services-scroll__right,
    main .services-scroll__item {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    main .services-scroll__features {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    main :is(.services-scroll__feature, .services-scroll__feature-link) {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Keep shared hero content inside the viewport on phones and tablets. Several
   older page styles set desktop widths on their inner flex/grid content. */
@media (min-width: 768px) and (max-width: 1023px) {

    main :is(.dm-hero__container, .dm-service-hero__container, .service-hero__container,
        .brand-identity-hero__content, .branding-hero__content, .contact-us__content) {
        width: min(100%, 56rem);
        max-width: 100%;
        min-width: 0;
        padding-inline: 1.25rem;
        box-sizing: border-box;
    }

    main :is(.dm-hero__title, .dm-service-hero__title, .service-hero__title,
        .brand-identity-hero__title, .branding-hero__title) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    main .brand-identity-hero {
        width: 100%;
        min-height: 0;
        padding: clamp(8.5rem, 14vw, 10rem) 1.5rem 3.5rem;
    }

    main .brand-identity-hero__content {
        width: min(100%, 52rem);
    }

    main .brand-identity-hero__title {
        font-size: clamp(2.5rem, 5.2vw, 3.5rem) !important;
        line-height: 1.08 !important;
    }

    main :is(.dm-hero__desc, .dm-service-hero__desc, .service-hero__desc,
        .brand-identity-hero__description, .branding-hero__description,
        .contact-us__content-description) {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767px) {

    main :is(.dm-hero__container, .dm-service-hero__container, .service-hero__container,
        .brand-identity-hero__content, .branding-hero__content, .contact-us__content) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-inline: 1rem;
        box-sizing: border-box;
    }

    main :is(.dm-hero__title, .dm-hero__title-line, .dm-service-hero__title,
        .service-hero__title, .brand-identity-hero__title, .branding-hero__title) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    main :is(.dm-hero__desc, .dm-service-hero__desc, .service-hero__desc,
        .brand-identity-hero__description, .branding-hero__description,
        .contact-us__content-description) {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    main :is(.brand-identity-hero__actions, .branding-hero__actions,
        .dm-hero__actions, .dm-service-hero__actions) {
        max-width: 100%;
        flex-wrap: wrap;
    }

    main :is(.brand-identity-hero__button, .branding-hero__button,
        .dm-hero__btn, .dm-service-hero__button) {
        min-width: 0;
        max-width: 100%;
    }

    main .contact-us__contact-section :is(.contact-us__content,
        .contact-us__content-heading, .contact-us__content-description) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    main .brand-identity-hero__title {
        width: min(100%, calc(100vw - 2rem)) !important;
        max-width: calc(100vw - 2rem) !important;
        font-size: clamp(1.75rem, 7.2vw, 2rem) !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box;
    }

    main .brand-identity-hero__content {
        width: min(100%, calc(100vw - 2rem)) !important;
    }

    main .brand-identity-hero {
        width: 100%;
        max-width: 100%;
    }

    main .brand-identity-hero__description {
        width: 100%;
        max-width: 100%;
        font-size: 0.9rem !important;
        overflow-wrap: anywhere;
    }

    main .brand-identity-hero__actions {
        flex-direction: column;
        align-items: center;
    }

    main .brand-identity-hero__button {
        width: min(100%, 15rem);
        white-space: normal;
        text-align: center;
    }
}

/* Give the two horizontally scrolling card sections enough room at tablet
   widths while keeping their copy compact and easy to scan. */
@media (min-width: 768px) and (max-width: 1023px) {
    .how-we-work__card.swiper-slide {
        min-height: 28rem !important;
        padding: 1.5rem !important;
    }

    .how-we-work__icon-wrap {
        margin-bottom: 1.125rem;
    }

    .how-we-work__card-title {
        font-size: 1.25rem !important;
        line-height: 1.45 !important;
    }

    .how-we-work__card-description {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    .related-works__card,
    .related-works__card.swiper-slide {
        min-height: 32rem !important;
    }

    .related-works__media {
        height: 14rem !important;
    }

    .related-works__info {
        padding: 1rem 0.5rem 0.75rem;
    }

    .related-works__card-title {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
    }

    .related-works__card-desc {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.875rem;
    }

    .related-works__badge-label {
        font-size: 0.8125rem;
    }

    .related-works__badge-value {
        font-size: 1rem;
    }
}

/* A consistent 50px page gutter on every top-level section at tablet widths.
   Inner section containers fill that padded area instead of adding a second
   gutter of their own. */
@media (min-width: 768px) and (max-width: 1023px) {
    main>* {
        padding-inline: 3.125rem !important;
        box-sizing: border-box;
    }

    /* Page and component roots often have stronger page-specific container
       rules, so make the tablet gutter explicit at this shared breakpoint. */
    html body main>*[class][class][class] {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 3.125rem !important;
        box-sizing: border-box !important;
    }

    html body main>*[class][class][class] :is([class*="__container"], [class*="-container"], .page-container, .site-container) {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Let slider and marquee viewports escape clipping on their containing sections. */
html body main :is(.swiper, [class*="slider"], [class*="marquee"])[class][class][class][class],
html body main [class][class][class][class]:has(:is(.swiper, [class*="slider"], [class*="marquee"])) {
    /*overflow: visible !important;*/
}

html body main:has(:is(.swiper, [class*="slider"], [class*="marquee"])) {
    /*overflow: visible !important;*/
}

html body main .landing-page__brands,
html body main .landing-page__brands .landing-page__brands-strip-wrap {
    /*overflow: visible !important;*/
}

/* Reuse the homepage hero CTA's left-to-right fill and lift on every
   button-style link and action button throughout the site. */
:is(a[class*="btn"], a[class*="button"],
    button[class*="btn"], button[class*="button"], button[type="submit"],
    input[type="submit"], input[type="button"], [role="button"]) {
    --btn-hover-bg: #fff !important;
    --btn-hover-color: #111 !important;
    transition: color 0.35s ease, transform 0.22s ease !important;
}

/* White-filled and dark solid buttons use a blue wipe; blue, pink, and dark outlined
   buttons keep the white wipe set above. */
html body :is(a, button, input[type="submit"], input[type="button"], [role="button"]).common-btn:not(.common-btn--blue):not(.common-btn--pink):not(.landing-page__case-studies-btn):not([class*="case-stud"]):not(#services-btn-craft):not(#services-btn-scale):not(#services-btn-design):not(#services-btn-evolve),
html body :is(a, button, [role="button"]).common-btn--white,
html body :is(a, button, [role="button"]).industries-serve__btn--solid,
html body :is(a, button, [role="button"]).dm-hero__btn--solid,
html body :is(a, button, [role="button"]).dm-service-hero__btn--solid,
html body :is(a, button, [role="button"]).brand-identity-hero__button--primary,
html body :is(a, button, [role="button"]).brand-identity-story__button,
html body :is(a, button, [role="button"]).branding-hero__button--primary,
html body :is(a, button, [role="button"]).shopify-store-build-hero__button--primary,
html body :is(a, button, [role="button"]).shopify-store-settings-hero__button--primary,
html body :is(a, button, [role="button"]).shopify-pos-hero__button--primary,
html body :is(a, button, [role="button"]).footer__cta-button,
html body :is(a, button, [role="button"]).job-detail__btn-apply,
html body :is(a, button, [role="button"]).case_studies-cta-btn,
html body :is(a, button, [role="button"]).client_testimonials-reviews-button,
html body :is(a, button, [role="button"]).trusted-deliver__btn--secondary,
html body :is(a, button, [role="button"]).service-hero__btn--solid,
html body :is(a, button, [role="button"]).all-services-hero__btn--solid,
html body :is(a, button, [role="button"]).trusted-deliver__btn--primary,
html body .header:not(.header--white) .header_btn--solid,
html body .header.header--black .header_btn--solid,
html body .header--white:not(.header--black):not(.menu-open) .header_btn--solid,
html body :is(.page-web-development-all-services, .page-custom-website-development, .page-react-next-js-development, .page-wordPress-development, .page-wordpress-development, .page-woocommerce-development) .header:not(.header--black):not(.menu-open) .header_btn--solid,
html body button.contact-form__button--submit {
    --btn-hover-bg: var(--color-blue, #3c51e0) !important;
    --btn-hover-color: #fff !important;
}

/* Explicit white-wipe buttons: blue/pink buttons, case studies buttons, and dark header outline buttons */
html body :is(a, button, [role="button"]):is(#services-btn-craft, #services-btn-scale,
    #services-btn-design, #services-btn-evolve),
html body :is(a, button, [role="button"]):is(.landing-page__case-studies-btn, .common-btn--blue, .about-join__button) {
    --btn-hover-bg: #fff !important;
    --btn-hover-color: #000 !important;
}

/* Header outline button on dark/black header: white wipe with black text */
html body .header:not(.header--white) .header_btn--outline,
html body .header.header--black .header_btn--outline {
    --btn-hover-bg: #fff !important;
    --btn-hover-color: #000 !important;
}

/* Header outline button on white header: black wipe with white text */
html body .header--white:not(.header--black):not(.menu-open) .header_btn--outline,
html body :is(.page-web-development-all-services, .page-custom-website-development, .page-react-next-js-development, .page-wordPress-development, .page-wordpress-development, .page-woocommerce-development) .header:not(.header--black):not(.menu-open) .header_btn--outline {
    --btn-hover-bg: #000 !important;
    --btn-hover-color: #fff !important;
}

:is(a[class*="btn"], a[class*="button"],
    button[class*="btn"], button[class*="button"], button[type="submit"],
    [role="button"]) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

:is(a[class*="btn"], a[class*="button"],
    button[class*="btn"], button[class*="button"], button[type="submit"],
    [role="button"])::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--btn-hover-bg, #fff);
    transform: translateX(-101%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

:is(a[class*="btn"], a[class*="button"],
    button[class*="btn"], button[class*="button"], button[type="submit"],
    input[type="submit"], input[type="button"], [role="button"]):is(:hover, :focus-visible) {
    transform: translateY(-0.125rem) !important;
    color: var(--btn-hover-color, #111) !important;
}

:is(a[class*="btn"], a[class*="button"],
    button[class*="btn"], button[class*="button"], button[type="submit"],
    [role="button"]):is(:hover, :focus-visible)::before {
    transform: translateX(0);
}