/*
 * Car Clinc public-site responsive layer
 * ---------------------------------------
 * Desktop remains owned by the page-specific stylesheets. Every visual rule
 * in this file is restricted to the mobile/tablet breakpoint so the original
 * desktop composition is preserved exactly.
 */

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

    body {
        min-width: 320px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        min-width: 0;
    }

    :where(
        .car-home,
        .services-design,
        .lahore-services-page,
        .service-landing,
        .area-landing,
        .standalone-page,
        .mechanic-page,
        .blog-index-page
    ) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    :where(
        .hero-visual,
        .mechanic-stage,
        .app-preview,
        .hero-art,
        .lahore-hero-art,
        .service-page-hero-media,
        .problem-hero-media,
        .area-hero-media,
        .about-help-image,
        .blog-index-hero-visual,
        .blog-post-content,
        .contact-map
    ) img,
    :where(.blog-post-article header) > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    :where(
        .service-icon,
        .service-card,
        .service-page-card,
        .service-page-location-grid,
        .battery-symptom-grid,
        .problem-issue-grid,
        .area-card-grid,
        .lahore-issue-grid,
        .mechanic-page,
        .public-footer,
        .blog-index-page
    ) img {
        max-width: 100%;
    }

    /* Shared mobile navigation and footer */
    .site-header,
    .site-nav {
        height: 88px;
    }

    .site-nav,
    .page-shell,
    .home-shell {
        width: min(calc(100% - 32px), 860px);
        max-width: 100%;
        margin-inline: auto;
    }

    .site-nav .brand,
    .site-nav .brand img {
        width: 108px;
        height: auto;
        max-height: 66px;
        object-fit: contain;
    }

    .site-nav .brand {
        margin: 0;
        flex: 0 0 108px;
    }

    .site-nav .desktop-nav {
        display: none !important;
    }

    .site-nav .mobile-nav {
        display: block;
        margin-left: auto;
    }

    .site-nav .mobile-nav > summary {
        display: inline-flex;
        min-width: 76px;
        min-height: 48px;
        padding: 0 16px;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        cursor: pointer;
        touch-action: manipulation;
    }

    .mobile-nav-links {
        top: 76px;
        right: 0;
        width: min(360px, calc(100vw - 32px));
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav-links a,
    .mobile-nav-links summary {
        min-height: 46px;
        padding-block: 12px;
    }

    .public-footer-inner,
    .public-footer-bottom {
        width: min(calc(100% - 32px), 860px);
        max-width: 100%;
    }

    .public-footer-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-footer-app-row,
    .public-footer-actions {
        flex-wrap: wrap;
    }

    .public-footer-subscribe,
    .public-footer-subscribe > div {
        width: 100%;
        max-width: 100%;
    }

    .mobile-sticky-actions a {
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Responsive type scale shared by every public page family */
    :where(
        .car-home,
        .services-design,
        .lahore-services-page,
        .service-landing,
        .area-landing,
        .standalone-page,
        .mechanic-page,
        .blog-index-page
    ) h1 {
        max-width: 100%;
        font-size: clamp(2rem, 7.2vw, 2.75rem);
        line-height: 1.16;
        overflow-wrap: anywhere;
    }

    :where(
        .car-home,
        .services-design,
        .lahore-services-page,
        .service-landing,
        .area-landing,
        .standalone-page,
        .mechanic-page,
        .blog-index-page
    ) h2 {
        max-width: 100%;
        font-size: clamp(1.7rem, 5.8vw, 2.25rem);
        line-height: 1.22;
        overflow-wrap: anywhere;
    }

    :where(
        .car-home,
        .services-design,
        .lahore-services-page,
        .service-landing,
        .area-landing,
        .standalone-page,
        .mechanic-page,
        .blog-index-page
    ) :where(p, li, dd) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Home */
    .car-home > main {
        width: 100%;
        max-width: 100%;
    }

    .car-home :where(.hero, .intro, .services, .benefits, .areas, .faq-section) {
        width: 100%;
        max-width: 100%;
    }

    .car-home :where(.hero-copy, .intro-copy, .services-panel, .benefits-copy, .faq-inner, .faq-list) {
        width: 100%;
        max-width: 100%;
    }

    .car-home :where(.hero-actions, .area-actions) a,
    .car-home :where(.hero-actions, .area-actions) button {
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Services index */
    .services-design .services-hero {
        min-height: 0;
        padding: 48px clamp(18px, 5vw, 36px) 36px;
    }

    .services-design :where(.hero-copy, .services-intro, .categories .section-title, .service-grid, .service-cta, .faq-inner, .faq-list) {
        width: 100%;
        max-width: 100%;
    }

    .services-design .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 18px;
    }

    .services-design .service-card {
        height: auto;
        min-height: 340px;
    }

    /* Lahore service detail */
    .lahore-hero,
    .lahore-body-copy,
    .lahore-issues,
    .lahore-areas,
    .lahore-why,
    .lahore-faq {
        width: 100%;
        max-width: 100%;
    }

    .lahore-hero {
        display: flex;
        height: auto;
        min-height: 0;
        padding: 48px clamp(18px, 5vw, 36px) 36px;
        flex-direction: column;
    }

    .lahore-hero-copy,
    .lahore-body-copy p,
    .lahore-why p,
    .lahore-issue-grid,
    .lahore-area-chips,
    .lahore-faq-list {
        width: 100%;
        max-width: 100%;
    }

    .lahore-hero-copy {
        order: 1;
    }

    .lahore-hero-wordmark {
        order: 2;
    }

    .lahore-hero-art {
        order: 3;
    }

    .lahore-issue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .lahore-issue-card {
        height: auto;
        min-height: 130px;
    }

    /* Shared service, problem and area landing layouts */
    :where(.service-page-hero, .problem-hero, .area-hero) {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding: 48px clamp(18px, 5vw, 36px) 36px;
        flex-direction: column;
    }

    :where(.service-page-hero-copy, .problem-hero-copy, .area-hero-copy) {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(680px, 100%);
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    :where(.service-page-hero-copy, .problem-hero-copy, .area-hero-copy) p {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    :where(.service-page-hero-actions, .service-page-cta-actions) {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    :where(.service-page-button, .service-page-cta-button) {
        min-width: 0;
        min-height: 48px;
        touch-action: manipulation;
    }

    :where(.service-page-hero-media, .problem-hero-media, .area-hero-media) {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(620px, 100%);
        max-width: 100%;
        height: auto;
        min-height: 260px;
        margin: 26px auto 0;
        overflow: hidden;
        transform: none;
    }

    :where(.problem-hero-media, .area-hero-media) img {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        object-fit: cover;
        transform: none;
    }

    :where(
        .service-page-intro,
        .service-page-intro-centered,
        .service-page-card-section,
        .service-page-issue-section,
        .service-page-location-section,
        .service-page-text-section,
        .roadside-help,
        .roadside-safety,
        .doorstep-why,
        .mobile-help,
        .battery-intro,
        .battery-symptoms,
        .battery-before-help,
        .car-start-details,
        .car-start-actions,
        .problem-intro,
        .problem-issues,
        .problem-guidance,
        .area-intro,
        .area-services
    ) {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding-inline: clamp(18px, 5vw, 36px);
    }

    :where(
        .service-page-intro,
        .service-page-intro-centered,
        .service-page-card-section,
        .service-page-issue-section,
        .service-page-location-section,
        .service-page-text-section,
        .battery-symptoms,
        .battery-before-help,
        .car-start-details,
        .car-start-actions,
        .problem-intro,
        .problem-issues,
        .problem-guidance,
        .area-intro,
        .area-services
    ) :where(p, ul, ol) {
        width: 100%;
        max-width: 100%;
    }

    :where(
        .service-page-card-grid,
        .service-page-location-grid,
        .battery-symptom-grid,
        .car-start-action-grid,
        .problem-issue-grid,
        .area-card-grid
    ) {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 16px;
    }

    :where(
        .service-page-card,
        .service-page-location-grid article,
        .battery-symptom-grid article,
        .car-start-action-grid article,
        .problem-issue-grid article,
        .area-card-grid article
    ) {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 150px;
        padding: 22px;
        overflow: hidden;
    }

    :where(
        .service-page-card,
        .service-page-location-grid article,
        .battery-symptom-grid article,
        .car-start-action-grid article,
        .problem-issue-grid article,
        .area-card-grid article
    ) h3 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(1rem, 3.1vw, 1.25rem);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .service-page-cta,
    .lahore-cta,
    .standalone-cta,
    .mechanic-cta,
    .blog-index-cta {
        width: calc(100% - 36px);
        max-width: 860px;
        height: auto;
        min-height: 0;
        margin: 32px auto;
        padding: 40px clamp(18px, 5vw, 36px);
    }

    :where(
        .service-page-faq,
        .area-faq,
        .problem-faq,
        .battery-faq,
        .standalone-faq,
        .mechanic-faq,
        .lahore-faq
    ) {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 48px clamp(18px, 5vw, 36px) 180px;
    }

    :where(
        .service-page-faq-list,
        .area-faq .service-page-faq-list,
        .problem-faq .service-page-faq-list,
        .battery-faq .service-page-faq-list,
        .standalone-faq-list,
        .mechanic-faq-list,
        .lahore-faq-list
    ) {
        width: 100%;
        max-width: 100%;
        margin: 18px 0 0;
    }

    :where(
        .service-page-faq-list,
        .standalone-faq-list,
        .mechanic-faq-list,
        .lahore-faq-list,
        .faq-list
    ) summary {
        min-height: 64px;
        overflow-wrap: anywhere;
        touch-action: manipulation;
    }

    /* Standalone About and Contact */
    .standalone-hero {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding: 48px clamp(18px, 5vw, 36px) 36px;
        flex-direction: column;
    }

    .standalone-hero-copy {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(680px, 100%);
        margin-inline: auto;
        text-align: center;
    }

    .about-hero-image,
    .contact-hero-image {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(620px, 100%);
        max-width: 100%;
        height: auto;
        margin: 28px auto 0;
        object-fit: cover;
    }

    :where(.about-introduction, .about-highlight, .about-help, .about-values, .contact-introduction, .contact-main, .contact-map) {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
    }

    .about-highlight,
    .contact-main,
    .contact-map {
        width: calc(100% - 36px);
        margin-inline: auto;
    }

    .about-help {
        display: flex;
        padding: 48px clamp(18px, 5vw, 36px);
        flex-direction: column;
    }

    .about-help-copy {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
    }

    .contact-main {
        display: flex;
        padding-inline: 0;
        flex-direction: column;
    }

    .contact-information,
    .contact-form-card {
        width: 100%;
        max-width: 100%;
    }

    .contact-request-form {
        grid-template-columns: 1fr;
    }

    .contact-field,
    .contact-field-full,
    .contact-submit {
        grid-column: 1;
    }

    .contact-field :where(input, select, textarea),
    .public-footer-subscribe input {
        min-height: 48px;
        font-size: 16px;
    }

    /* Mechanic and workshop registration */
    .mechanic-hero {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding: 48px clamp(18px, 5vw, 36px) 36px;
        flex-direction: column;
    }

    .mechanic-hero-copy {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(680px, 100%);
        margin-inline: auto;
        text-align: center;
    }

    .mechanic-hero-image,
    .workshop-hero-image,
    .mechanic-verification-image {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(520px, 100%);
        max-width: 100%;
        height: auto;
        margin: 28px auto 0;
        object-fit: cover;
    }

    :where(.mechanic-intro, .mechanic-categories, .mechanic-benefits, .mechanic-verification, .partner-form-section, .workshop-form-section) {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
    }

    .mechanic-benefits {
        width: calc(100% - 36px);
        margin-inline: auto;
        grid-template-columns: 1fr;
    }

    .partner-form-card,
    .workshop-form-section .partner-form-card {
        width: calc(100% - 36px);
        max-width: 760px;
        margin-inline: auto;
    }

    .partner-form-grid {
        grid-template-columns: 1fr;
    }

    /* Blog */
    .blog-index-main,
    .blog-post-main {
        width: min(calc(100% - 32px), 860px);
        max-width: 100%;
    }

    .blog-index-hero {
        grid-template-columns: 1fr;
    }

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

    .blog-index-card,
    .blog-post-article,
    .blog-post-content {
        width: 100%;
        max-width: 100%;
    }

    .blog-post-content :where(pre, table) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(a, button, summary, input, select, textarea) {
        -webkit-tap-highlight-color: transparent;
    }
}

/*
 * The original service and area canvases use highly specific absolute
 * positioning between 768px and desktop. This tablet-only layer deliberately
 * wins that cascade and turns those canvases into an ordered document flow.
 */
@media (min-width: 561px) and (max-width: 900px) {
    .service-landing .service-page-hero,
    .service-landing .problem-hero,
    .area-landing .area-hero {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 52px 7% 46px !important;
        overflow: hidden;
        flex-direction: column !important;
    }

    .service-landing .service-page-hero .service-page-hero-copy,
    .service-landing .problem-hero .problem-hero-copy,
    .area-landing .area-hero .area-hero-copy {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        order: 1;
        width: min(680px, 100%) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center;
    }

    .service-landing .service-page-hero .service-page-hero-copy p,
    .service-landing .problem-hero .problem-hero-copy p,
    .area-landing .area-hero .area-hero-copy p {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .service-landing .service-page-hero .service-page-hero-actions,
    .service-landing .problem-hero .service-page-hero-actions,
    .area-landing .area-hero .service-page-hero-actions {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px auto 0 !important;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 14px !important;
    }

    .service-landing .service-page-hero .service-page-button,
    .service-landing .problem-hero .service-page-button,
    .area-landing .area-hero .service-page-button {
        position: relative;
        width: min(220px, calc(50% - 7px)) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 50px;
        margin: 0 !important;
    }

    .service-landing .service-page-hero .service-page-hero-media,
    .service-landing .problem-hero .problem-hero-media,
    .area-landing .area-hero .area-hero-media {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        order: 3;
        width: min(620px, 100%) !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 34px auto 0 !important;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        transform: none !important;
    }

    .service-landing .service-page-hero .service-page-hero-media img,
    .service-landing .problem-hero .problem-hero-media img,
    .area-landing .area-hero .area-hero-media img {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: contain !important;
        transform: none !important;
    }

    .service-landing .service-page-hero .service-page-wordmark,
    .service-landing .problem-hero .problem-hero-wordmark,
    .area-landing .area-hero .area-hero-wordmark {
        top: auto !important;
        right: -80px !important;
        bottom: 8px !important;
        left: auto !important;
        width: min(700px, 88vw) !important;
        height: auto !important;
        transform: none !important;
    }

    .service-landing .service-page-intro,
    .service-landing .service-page-intro-centered,
    .service-landing .battery-intro,
    .service-landing .problem-intro,
    .area-landing .area-intro {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 48px 7% 42px !important;
    }

    .service-landing .service-page-intro p,
    .service-landing .service-page-intro-centered p,
    .service-landing .battery-intro p,
    .service-landing .problem-intro p,
    .area-landing .area-intro p {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    .service-landing .problem-issues,
    .service-landing .problem-guidance,
    .area-landing .area-services {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 30px 7% 48px !important;
    }

    .service-landing .problem-issue-grid,
    .area-landing .area-card-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        gap: 18px !important;
    }

    .service-landing .problem-issue-grid article,
    .area-landing .area-card-grid article,
    .area-landing .area-card-grid article:nth-child(n + 5) {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        padding: 24px !important;
        overflow: hidden;
    }

    .service-landing .problem-guidance p,
    .service-landing .problem-guidance ol {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 560px) {
    .site-nav,
    .page-shell,
    .home-shell,
    .public-footer-inner,
    .public-footer-bottom,
    .blog-index-main,
    .blog-post-main {
        width: min(calc(100% - 28px), 520px);
    }

    .public-footer-inner,
    .public-footer-bottom,
    .public-footer-link-grid,
    .blog-index-grid {
        grid-template-columns: 1fr;
    }

    .public-footer-bottom > p {
        grid-column: 1;
        grid-row: auto;
    }

    .public-footer-actions {
        justify-content: flex-start;
    }

    .mobile-sticky-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mobile-sticky-actions a {
        font-size: 9px;
    }

    .car-home :where(.hero-actions, .area-actions),
    .services-design .hero-actions,
    .services-design .cta-actions,
    .lahore-hero-actions,
    .lahore-cta-actions,
    .service-page-hero-actions,
    .service-page-cta-actions,
    .standalone-actions,
    .standalone-cta-actions,
    .mechanic-hero-actions,
    .mechanic-cta-actions,
    .blog-index-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    :where(
        .car-home .hero-actions,
        .car-home .area-actions,
        .services-design .hero-actions,
        .services-design .cta-actions,
        .lahore-hero-actions,
        .lahore-cta-actions,
        .service-page-hero-actions,
        .service-page-cta-actions,
        .standalone-actions,
        .standalone-cta-actions,
        .mechanic-hero-actions,
        .mechanic-cta-actions,
        .blog-index-cta-actions
    ) :where(a, button) {
        width: 100%;
        min-height: 50px;
    }

    .services-design .service-grid,
    .lahore-issue-grid,
    .service-page-card-grid,
    .service-page-location-grid,
    .battery-symptom-grid,
    .car-start-action-grid,
    .problem-issue-grid,
    .area-card-grid {
        grid-template-columns: 1fr !important;
    }

    :where(
        .service-page-card,
        .service-page-location-grid article,
        .battery-symptom-grid article,
        .car-start-action-grid article,
        .problem-issue-grid article,
        .area-card-grid article,
        .lahore-issue-card
    ) {
        min-height: 132px;
    }

    .bahria-area-landing .area-card-grid .area-card-wide {
        grid-column: 1;
    }

    .service-page-cta,
    .lahore-cta,
    .standalone-cta,
    .mechanic-cta,
    .blog-index-cta,
    .about-highlight,
    .contact-main,
    .contact-map,
    .mechanic-benefits,
    .partner-form-card,
    .workshop-form-section .partner-form-card {
        width: calc(100% - 28px);
    }

    .contact-form-card,
    .contact-checklist {
        padding: 24px 18px;
    }

    .contact-location-control input {
        padding-right: 16px;
    }

    .contact-location-control button {
        position: static;
        width: 100%;
        min-height: 44px;
        margin-top: 8px;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .site-nav,
    .page-shell,
    .home-shell,
    .public-footer-inner,
    .public-footer-bottom,
    .blog-index-main,
    .blog-post-main {
        width: calc(100% - 20px);
    }

    .mobile-nav-links {
        width: calc(100vw - 20px);
    }

    .mobile-sticky-actions {
        gap: 3px;
        padding-inline: 4px;
    }

    .mobile-sticky-actions a {
        padding-inline: 2px;
        font-size: 8.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* Battery page only: keep every symptom card equal within its grid row. */
.service-page-internal-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.service-page-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.service-page-card-link .service-page-card {
    width: 100%;
    height: 100%;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.service-page-card-link:hover .service-page-card,
.service-page-card-link:focus-visible .service-page-card {
    border-color: var(--service-page-purple);
    box-shadow: 0 12px 26px rgba(71, 71, 181, .16);
    transform: translateY(-5px);
}

.battery-landing .battery-symptom-grid article {
    box-sizing: border-box;
    height: 100%;
    align-self: stretch;
}

@media (min-width: 901px) {
    .battery-landing .battery-symptoms {
        height: 580px;
    }

    .flat-tyre-landing .flat-tyre-symptoms {
        height: 560px;
    }

    .flat-tyre-landing .battery-symptom-grid {
        grid-template-rows: repeat(2, 220px);
    }

    .flat-tyre-landing .battery-symptom-grid article {
        min-height: 0;
        padding: 22px 24px;
    }

    .flat-tyre-landing .battery-symptom-grid h3 {
        margin-top: 16px;
    }

    .problem-landing .problem-hero {
        height: 380px;
    }

    .engine-overheating-landing .problem-hero-media {
        top: -24px;
    }

    .brake-problem-landing .problem-issues {
        height: 380px;
    }

    .diagnostics-problem-landing .problem-issues {
        height: 660px;
    }
}

@media (max-width: 900px) {
    .services-design .services-intro {
        width: 100%;
        max-width: 100%;
        margin: 0 0 34px;
        padding-inline: clamp(18px, 5vw, 36px);
        overflow-wrap: anywhere;
    }

    .services-design .services-intro p {
        width: 100%;
        max-width: 100%;
    }

    .battery-landing .battery-symptoms {
        height: auto;
        min-height: 0;
    }

    .battery-landing .battery-symptom-grid {
        height: auto;
        align-items: stretch;
    }
}

@media (min-width: 1001px) {
    .workshop-register-page .mechanic-intro {
        height: 138px;
    }

    .mechanic-join-page .mechanic-benefits {
        padding: 35px clamp(48px, 8vw, 120px);
        align-items: center;
        grid-template-columns: 48% 52%;
        gap: 16px;
    }

    .mechanic-join-page .mechanic-benefits h2 {
        margin: 0;
        font-size: clamp(26px, 2.2vw, 32px);
        white-space: nowrap;
    }
}