/* =============================================================================
   Tablet — max-width: 1280px
   Loaded after style.css, so rules here win on matching viewports.
   ========================================================================== */

/* Header: swap the desktop nav list for the burger; keep logo + CTA. */

header.ui-header {
    position: relative;
    z-index: 101;
    padding-inline: 20px;
}

header.ui-header nav.ui-nav-menu {
    display: none;
}

.ui-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.ui-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #04273C;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

body.is-mobile-nav-open .ui-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.is-mobile-nav-open .ui-burger span:nth-child(2) {
    opacity: 0;
}

body.is-mobile-nav-open .ui-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* The CTA already lives inside the mobile nav overlay itself — showing it in
   the compact header too would just duplicate it, so it drops out here and
   the burger becomes the header's only trailing action. */
header.ui-header a.ui-header-action {
    display: none;
}

/* The burger's bars are dark-on-light for the default (closed) state against
   the page background; once open it sits on the overlay's own dark navy, so
   it needs to flip to white to stay visible — and it doubles as the close
   affordance, so it deserves a clear hover/active cue too. */
body.is-mobile-nav-open .ui-burger span {
    background: #FFFFFF;
}

/* Mobile nav overlay */

.ui-mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #04273C;
    padding: 110px 30px 40px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
    overflow-y: auto;
    overflow-x: hidden;
}

body.is-mobile-nav-open .ui-mobile-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* Large, faint glass mark centered behind the menu so the panel doesn't read
   as a flat, empty rectangle — purely decorative, sits behind everything. */
.ui-mobile-nav-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, 80vw);
    height: auto;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}

.ui-mobile-nav-links {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
}

.ui-mobile-nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-mobile-nav-links li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ui-mobile-nav-links li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ui-mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    transition: color 0.25s ease, padding-left 0.25s ease;
}

.ui-mobile-nav-links a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8FC542;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ui-mobile-nav-links li.active a,
.ui-mobile-nav-links li.current-menu-item a,
.ui-mobile-nav-links a:hover {
    color: #8FC542;
    padding-left: 6px;
}

.ui-mobile-nav-links li.active a::before,
.ui-mobile-nav-links li.current-menu-item a::before,
.ui-mobile-nav-links a:hover::before {
    opacity: 1;
    transform: scale(1);
}

.ui-mobile-nav-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ui-mobile-nav-cta {
    height: 52px;
    width: 100%;
    max-width: 320px;
}

.ui-mobile-nav-cta > span {
    flex: 1;
}

.ui-mobile-nav-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.ui-mobile-nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding-inline: 20px;
    border-radius: 33px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ui-mobile-nav-phone:hover {
    background: rgba(143, 197, 66, 0.18);
    border-color: #8FC542;
    transform: translateY(-2px);
}

.ui-mobile-nav-contact .ui-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
}

.ui-mobile-nav-contact .ui-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.ui-mobile-nav-contact .ui-social-icon svg {
    width: 20px;
    height: 20px;
}

.ui-mobile-nav-contact .ui-social-icon:hover,
.ui-mobile-nav-contact .ui-social-icon:active {
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

/* Container / general rhythm */

.ui-container {
    padding-inline: 20px;
}

/* Page title */

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

.ui-page-title h1 {
    font-size: 34px;
    line-height: 42px;
}

/* Services page */

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

.ui-services-detail-item {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 24px;
    padding-block: 40px;
}

.ui-services-detail-item:nth-child(even) .ui-services-detail-image {
    order: 0;
}

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

/* Same overflow fix as .ui-why-image-icon: no adjacent column to bleed onto
   once stacked, so pull the badge fully back onto the image. */
.ui-services-detail-badge {
    top: 20px;
    left: 20px;
    transform: none;
    width: 100px;
}

.ui-services-detail-body h2 {
    font-size: 24px;
    line-height: 32px;
}

/* Vehicles page */

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

.ui-vehicles-grid {
    gap: 20px;
}

.ui-vehicle-card-badge {
    width: 46px;
    height: 46px;
    bottom: 12px;
    right: 12px;
}

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

.ui-vehicle-card-body {
    padding: 24px 26px 28px;
}

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

/* Quote page */

.ui-quote {
    padding: 0 0 56px;
}

.ui-quote-row {
    grid-template-columns: 1fr;
    margin-top: -60px;
}

.ui-quote-info,
.ui-quote-form-wrap {
    padding: 44px 30px;
}

.ui-quote-hero {
    min-height: 460px;
    padding: 60px 0;
}

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

.ui-quote-hero-badges {
    gap: 20px;
}

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

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

/* 404 page */

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

.ui-404-mark {
    width: 320px;
    right: -90px;
}

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

.ui-404-number span {
    font-size: 100px;
    letter-spacing: -3px;
}

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

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

/* Story */

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

.ui-story-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 30px;
}

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

.ui-story-stats {
    flex-wrap: wrap;
    gap: 24px;
}

/* Approach */

.ui-approach {
    padding-block: 56px;
    padding-inline: 20px;
}

.ui-approach-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Banner */

.ui-banner {
    height: auto;
    max-height: none;
    aspect-ratio: 820 / 1180;
    background-image: var(--banner-image-tablet);
    background-position: center;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 90px 40px 60px;
}

.ui-banner-icon {
    display: block;
    width: 72px;
    height: auto;
    margin-bottom: 24px;
}

/* Text keeps the desktop sizing here (only the banner's own shape/image
   change at this breakpoint), so no h1/p font-size overrides. */

/* Intro */

.ui-intro {
    padding-block: 56px;
    padding-inline: 20px;
}

.ui-intro .ui-intro-content {
    font-size: 19px;
    line-height: 32px;
}

/* Services */

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

.ui-services .ui-services-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

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

/* Domains */

.ui-domains {
    padding-block: 50px;
    padding-inline: 20px;
}

.ui-domains-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
}

.ui-domains-content-text {
    padding-right: 0;
}

.ui-domains-content-text h2 {
    font-size: 30px;
    line-height: 38px;
}

.ui-domains-image img {
    margin-inline: auto;
    max-width: 100%;
}

/* Why */

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

.ui-why-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 40px;
}

.ui-why-image {
    aspect-ratio: 416 / 300;
}

/* On desktop this icon straddles the boundary with the adjacent text column;
   stacked full-width on tablet there's no adjacent column to bleed onto, so
   the same negative offset would push it past the container edge and cause
   horizontal overflow. Pull it fully back onto the image instead. */
.ui-why-image-icon {
    top: 24px;
    left: 24px;
    transform: none;
    width: 120px;
    height: auto;
}

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

/* Mission */

.ui-mission-row {
    grid-template-columns: 1fr;
}

.ui-mission-content {
    border-radius: 5px 5px 0 0;
    padding: 50px 30px;
}

.ui-mission-highlight {
    font-size: 22px;
    line-height: 34px;
}

.ui-mission-image {
    aspect-ratio: 653 / 400;
}

.ui-mission-image-frame {
    border-radius: 0 0 5px 5px;
}

/* Same overflow fix as .ui-why-image-icon above. */
.ui-mission-image-icon {
    top: 24px;
    left: 24px;
    transform: none;
    width: 120px;
    height: auto;
}

/* Besoins */

.ui-besoins-row {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.ui-besoins-content {
    padding: 50px 30px;
}

/* About */

.ui-about {
    padding-block: 56px;
    padding-inline: 20px;
}

.ui-about .ui-domains-content-text h2 {
    font-size: 30px;
    line-height: 38px;
}

/* Footer */

footer.ui-footer {
    padding-inline: 30px;
    padding-top: 40px;
}

/* 5 blocks (brand, tagline, 2 link lists, contact) — a 3-column grid puts
   the first three on row one and the remaining two on row two, so it's
   always exactly two rows regardless of exact viewport width, then the
   copyright line stays as its own row below via .ui-footer-bottom. */
footer.ui-footer .ui-footer-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

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

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

footer.ui-footer .ui-footer-social {
    margin-top: 0;
}