/* =============================================================================
   Mobile — max-width: 560px
   Loaded after tablet.css; only fine-tunes what tablet.css already restructured.
   ========================================================================== */

body {
    padding: 16px;
    padding-top: 0;
}

.ui-container {
    padding-inline: 0;
}

/* Header */

header.ui-header {
    padding-inline: 16px;
    padding-block: 14px;
}

header.ui-header .ui-logo {
    width: 68px;
}

/* Mobile nav */

.ui-mobile-nav {
    gap: 32px;
    padding: 80px 20px 32px;
}

.ui-mobile-nav-links a {
    font-size: 20px;
}

.ui-mobile-nav-phone {
    font-size: 14px;
}

/* Page title */

.ui-page-title {
    padding-block: 32px;
}

.ui-page-title h1 {
    font-size: 24px;
    line-height: 32px;
}

/* Services page */

.ui-services-page {
    padding-block: 32px;
}

.ui-services-detail-item {
    padding-block: 24px;
    gap: 18px;
}

.ui-services-detail-image {
    aspect-ratio: 500 / 380;
}

.ui-services-detail-badge {
    width: 80px;
}

.ui-services-detail-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
}

.ui-services-detail-icon img {
    width: 24px;
    height: 24px;
}

.ui-services-detail-body h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
}

.ui-services-detail-body > p {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 18px;
}

.ui-services-detail-features {
    gap: 10px;
}

.ui-services-detail-features li {
    font-size: 14px;
    line-height: 22px;
}

/* Vehicles page */

.ui-vehicles-page {
    padding-block: 32px;
}

.ui-vehicles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.ui-vehicle-card-badge {
    width: 42px;
    height: 42px;
    bottom: 10px;
    right: 10px;
}

.ui-vehicle-card-badge img {
    width: 20px;
    height: 20px;
}

.ui-vehicle-card-body {
    padding: 20px;
}

.ui-vehicle-card-body h2 {
    font-size: 19px;
    line-height: 26px;
    margin-bottom: 8px;
}

.ui-vehicle-card-meta {
    gap: 20px;
}

.ui-vehicle-slide-caption {
    font-size: 11px;
    padding: 5px 12px;
}

/* Quote page */

.ui-quote {
    padding-block: 32px;
}

.ui-quote-row {
    margin-top: 0;
    box-shadow: 0 12px 30px rgba(4, 39, 60, 0.14);
}

.ui-quote-info,
.ui-quote-form-wrap {
    padding: 32px 20px;
}

.ui-quote-form-wrap h2 {
    font-size: 21px;
    line-height: 28px;
    margin-bottom: 22px;
}

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

.ui-quote-submit {
    max-width: none;
}

.ui-quote-hero {
    min-height: auto;
    padding: 44px 30px;
}

.ui-quote-hero-content h1 {
    font-size: 32px;
}

.ui-quote-hero-content > p {
    font-size: 15px;
    line-height: 24px;
}

.ui-quote-hero-badges {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
}

.ui-quote-hero-badge span:last-child {
    max-width: none;
}

.ui-quote-trust {
    padding-block: 32px;
}

.ui-quote-trust-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.ui-quote-trust-card {
    padding: 26px;
}

/* 404 page */

.ui-404 {
    padding-block: 56px;
}

.ui-404-mark {
    width: 200px;
    right: -60px;
}

.ui-404-number {
    gap: 10px;
    margin-bottom: 16px;
}

.ui-404-number span {
    font-size: 52px;
    letter-spacing: -1px;
}

.ui-404-badge {
    width: 50px;
    height: 50px;
    box-shadow: 0 10px 20px rgba(69, 182, 74, 0.35);
}

.ui-404-badge img {
    width: 22px;
    height: 22px;
}

.ui-404-content .ui-domains-content-text {
    margin-bottom: 28px;
}

.ui-404-actions {
    flex-direction: column;
    gap: 18px;
}

/* Story */

.ui-story {
    padding-block: 32px;
}

.ui-story-image {
    aspect-ratio: 486 / 360;
}

.ui-story-stats {
    gap: 20px;
}

.ui-story-stat-number {
    font-size: 26px;
    line-height: 32px;
}

/* Approach */

.ui-approach {
    padding-block: 32px;
    padding-inline: 16px;
}

.ui-approach-card {
    padding: 24px;
}

/* Banner */

.ui-banner {
    aspect-ratio: 400 / 691;
    padding: 36px 18px;
    background-image: var(--banner-image-mobile);
    background-position: center;
}

.ui-banner .ui-banner-content {
    text-align: center;
    max-width: 100%;
    margin-top: 40px;
}

.ui-banner-icon {
    width: 52px;
    margin: 0 auto;
    margin-bottom: 19px;
}

.ui-banner .ui-banner-content h1 {
    font-size: 28px;
    line-height: 36px;
}

.ui-banner .ui-banner-content p {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
}

/* Intro */

.ui-intro {
    padding-block: 32px;
}

.ui-block-icon img {
    margin-bottom: 20px;
}

.ui-intro .ui-intro-content {
    font-size: 16px;
    line-height: 26px;
}

/* Services */

.ui-services {
    padding-block: 40px;
}

.ui-services .ui-services-container {
    padding-left: 0;
    padding-right: 0;
}

.ui-services .ui-services-head .ui-services-head-content p {
    font-size: 13px;
    line-height: 20px;
}

.ui-services .ui-services-head .ui-services-head-content h2 {
    font-size: 22px;
    line-height: 30px;
}

/* Pin/scroll mechanic is skipped in JS below 560px (see scripts.js) —
   render the cards as a plain single-column stack instead. */
.ui-services-pin {
    height: auto !important;
}

.ui-services-sticky {
    position: static;
    overflow: visible;
}

.ui-services-list {
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    gap: 20px;
}

.ui-services-list .ui-services-item {
    flex: none;
    width: 100%;
    padding: 22px;
}

.ui-services-list .ui-services-item > h2 {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
}

.ui-services-list .ui-services-item > p {
    font-size: 15px;
    line-height: 24px;
}

.ui-services-list .ui-services-item .ui-services-item-icon {
    margin-bottom: 26px;
}

.ui-services-list .ui-services-item .ui-services-item-icon svg {
    width: 64px;
}

.ui-services-list .ui-services-item::before {
    width: 64px;
    height: 42px;
    top: 22px;
    right: 22px;
}

/* Domains */

.ui-domains {
    padding-block: 32px;
    padding-inline: 16px;
}

.ui-accordion-item {
    padding: 16px 18px;
}

.ui-accordion-trigger h3 {
    font-size: 17px;
    line-height: 24px;
}

.ui-accordion-trigger svg {
    width: 24px;
    height: 24px;
}

.ui-accordion-panel p {
    font-size: 15px;
    line-height: 24px;
}

/* Shared text block (domains / why / mission / besoins / about) */

.ui-domains-eyebrow {
    font-size: 13px;
    line-height: 20px;
}

.ui-domains-content-text h2,
.ui-about .ui-domains-content-text h2 {
    font-size: 24px;
    line-height: 32px;
}

.ui-domains-desc {
    font-size: 15px;
    line-height: 24px;
}

/* Why */

.ui-why {
    padding-block: 32px;
}

.ui-why-image-icon {
    top: 16px;
    left: 16px;
    width: 90px;
}

.ui-why-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ui-why-feature .ui-why-feature-number {
    font-size: 18px;
    line-height: 24px;
}

.ui-why-feature h3 {
    font-size: 18px;
    line-height: 24px;
}

.ui-why-feature p {
    font-size: 12px;
    line-height: 22px;
}

/* Mission */

.ui-mission {
    padding-block: 32px;
}

.ui-mission-content {
    padding: 32px 20px;
}

.ui-mission-highlight {
    font-size: 17px;
    line-height: 26px;
}

.ui-mission-image-icon {
    top: 16px;
    left: 16px;
    width: 90px;
}

/* Besoins */

.ui-besoins {
    padding-block: 32px;
}

.ui-besoins-content {
    padding: 32px 20px;
}

/* About */

.ui-about {
    padding-block: 32px;
    padding-inline: 16px;
}

.ui-about-tags li {
    font-size: 14px;
    padding-inline: 16px;
    padding-block: 9px;
}

/* Footer */

footer.ui-footer {
    padding-inline: 16px;
    padding-top: 32px;
    padding-bottom: 24px;
}

footer.ui-footer a,
footer.ui-footer p {
    font-size: 14px;
    line-height: 22px;
}

/* 2 columns so the two link lists land side by side on their own row,
   while brand/tagline/contact each span the full width on their own row. */
footer.ui-footer .ui-footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

footer.ui-footer .ui-footer-brand,
footer.ui-footer .ui-footer-col,
footer.ui-footer .ui-footer-contact {
    grid-column: span 2;
}

footer.ui-footer .ui-footer-col {
    max-width: none;
}

footer.ui-footer .ui-footer-brand .ui-logo {
    width: 90px;
    height: auto;
}

footer.ui-footer .ui-footer-brand .ui-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

footer.ui-footer .ui-footer-social {
    margin-top: 20px;
}

footer.ui-footer .ui-footer-bottom {
    margin-top: 28px;
    padding-top: 14px;
}