/* ========================================
   Lampron - Custom Extracted Styles
   All inline/internal styles extracted here
   ======================================== */

/* ========== MODAL ========== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin-bottom: 16px;
}

/* ========== ALERTS ========== */
.alert {
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    background: #dcfce7;
    color: #16a34a;
}

.alert-error {
    background: #fee2e2;
    color: #dc2626;
}

.alert-info {
    background: #e0f2fe;
    color: #0369a1;
}

/* ========== RADIO COMPONENT ========== */
.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
}

.radio-input {
    accent-color: var(--btn-cta,#00007E);
    width: 16px;
    height: 16px;
}

/* ========== FOOTER BG ========== */
.footer-bg {
    background-image: url("../images/footer_bg.png");
}

.footer-container {
    padding: 4%;
}

@media (max-width: 768px) {
    .footer-container {
        padding: 0% 4%;
    }
}

@media (min-width: 768px) {
    .footer-container {
        padding-left: 8%;
        padding-right: 8%;
    }
    .container {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/* ========== GLOBAL UTILITY CLASSES ========== */
/* Pushes content below the fixed site header (which is `position: fixed`
   at 96px tall on desktop, 64px on mobile — see styles.css). The mobile
   media query below collapses this to 0 because the home-page hero
   compensates with its own margin-top; non-hero pages on mobile pick
   that up via .dashboard-layout { margin-top: 64px }. */
.header-spacer {
    height: 96px;
}

.desktop-phone-btn-hidden {
    display: none;
}

/* ========== HEADER ========== */
/* Company-uploaded logos vary in aspect ratio — a fixed width with only
   height:auto let a tall/square upload compute taller than the 96px header
   bar and bleed out of it. Capping both max-width and max-height (with
   object-fit:contain) scales any shape down to fit inside the same box
   the old 164px-wide default logo used, without cropping. */
.logo-img {
    max-width: 164px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Base size cap for every other <x-brand-logo> spot (e.g. the footer) that
   doesn't opt into the header's tighter .logo-img box above. */
.brand-logo {
    max-width: 180px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.desktop-nav-offset {
    margin-left: auto;
    margin-right: auto;
}

.nav-dropdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.nav-dropdown-icon {
    font-size: 12px;
}

.nav-link-white {
    color: #fff;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* On desktop the nav is visible and uses auto margins — prevent
   header-right from being compressed by the nav's flex distribution */
@media (min-width: 1025px) {
    .header-right {
        flex-shrink: 0;
    }
}

.phone-btn-size {
    height: 42px;
    font-size: 16px;
}

.phone-icon {
    width: 20px;
}

.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.profile-link:hover {
    background: rgba(6, 29, 91, 0.06);
}

.profile-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
}

/* Language Switcher */
.lang-switcher-wrap {
    position: relative;
    flex-shrink: 0;
}

.lang-btn-style {
    background: rgb(6 29 91 / 0%);
    border: 1px solid rgb(6 29 91 / 0%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    transition: background 0.2s ease;
}

.lang-btn-style .nav-dropdown-icon {
    font-size: 11px;
    color: #fff;
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.lang-switcher-wrap:hover .lang-btn-style .nav-dropdown-icon,
.lang-switcher-wrap:focus-within .lang-btn-style .nav-dropdown-icon {
    transform: rotate(180deg);
}

.lang-btn-style:hover {
    /* background: rgba(255,255,255,0.2); */
}

.lang-menu-style {
    display: none;
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 999;
    min-width: 80px;
}

.lang-menu-inner {
    padding: 8px 0;
    font-size: 14px;
    color: #374151;
}

.lang-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
}

.lang-option-active {
    background: #e5e7eb;
    font-weight: 600;
}

/* Hamburger Icon */
.hamburger-icon {
    width: 28px;
}

/* ========== MOBILE SIDEBAR ========== */
.sidebar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-close-btn-style {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    width: 36px;
    height: 36px;
    min-width: 36px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.sidebar-close-btn-style:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-toggle-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-menu-hidden {
    display: none;
}

/* ========== BREADCRUMB ========== */
.breadcrumb-wrap {
    padding: 16px 0;
}

/* ========== HERO SECTION ========== */
/* One shape for the "Online estimate" call to action, wherever it appears.
   The home banner's button is the reference; every other page's estimate CTA
   carries .btn-estimate and lands on the same geometry instead of the three
   different pills the service, estimation and service-area pages each used
   to have. The .cta-center descendant selector is listed explicitly because
   that rule (a 999px pill) sits later in this file and would otherwise win
   the cascade on width, radius and font-size. */
.btn-primary.btn-estimate,
.cta-center .btn-primary.btn-estimate,
.hero-btn {
    min-height: 64px;
    width: 600px;
    max-width: 88%;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 8px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}
.hero-btn {
    /* Hero-only spacing under the banner copy. */
    margin-top: 48px;
}
@media (max-width: 768px) {
    .btn-primary.btn-estimate,
    .cta-center .btn-primary.btn-estimate,
    .hero-btn {
        width: 100%;
        max-width: 100%;
        min-height: 56px;
        font-size: 16px;
    }
    /* On the service pages .cta-center is a sibling of .container, not a
       child of it (the container closes above the page title), so it carries
       no gutter of its own. Paired with the 100% width above, the CTA ran the
       full width of the viewport and read as a full-bleed bar rather than a
       button. Matching .container's own 16px padding lines it up with the
       copy above and below it. The hero's button keeps its banner padding and
       is untouched — it is the one .btn-estimate outside a .cta-center. */
    .cta-center {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ========== ONLINE SUPPORT ========== */
.online-support-container {
    padding: 0;
}

@media (min-width: 768px) {
    .online-support-container {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/* ========== SERVICES SECTION ========== */
.services-section {
    padding: 3.5% 1rem 3.5% 1rem;
}

.services-container {
    margin: 0 auto;
}

.services-heading {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4rem;
    color: #32323b;
}

/* ========== BLOGS SECTION ========== */
.blogs-heading {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 46px;
    color: #32323b;
    margin-bottom: 3.5%;
}

/* Home-page blogs strip — sits below the Services grid, reuses the shared
   .blog-grid card styling but gets its own header row with a "View all" link. */
.home-blogs-section {
    padding: 40px 0 0px;
}
.home-blogs-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 46px;
    position: relative;
}
.home-blogs-header .blogs-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}
.home-blogs-view-all {
    color: var(--brand-ink,#061D5B);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.home-blogs-view-all:hover {
    text-decoration: underline;
}
.home-blogs-slider {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 14px;
    position: relative;
}
.home-blogs-viewport {
    overflow-x: auto;
    position: relative;
}
.home-blogs-track {
    display: flex;
    gap: 30px;
    height: 675px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 1.5rem;
    padding-left: 150px;
}

.home-blogs-track::-webkit-scrollbar {
    display: none;
}
.home-blog-slide {
    flex: 0 0 calc((100% - 200px) / 1);
}
.home-blog-nav {
    width: 40px;
    height: 40px;
    border: 1px solid #d7deea;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-ink,#061D5B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.home-blog-nav:hover {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#061D5B);
}
.home-blog-nav:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.home-blog-prev {
    transform: translateY(-50%);
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 10px;
}
.home-blog-next {
    transform: translateY(-50%);
    z-index: 1;
    position: absolute;
    top: 50%;
    right: 10px;
}

.home-blogs-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.home-blog-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    padding: 0;
    cursor: pointer;
}
.home-blog-dot.is-active {
    background: var(--bg-secondary,#3155E7);
}
@media (max-width: 1024px) {
    .home-blogs-track {
        padding-left: 10px;
    }
}
@media (max-width: 640px) {
    .home-blogs-header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .home-blogs-header .blogs-heading {
        text-align: center;
    }
    .home-blogs-view-all {
        position: static;
        transform: none;
    }
    .home-blogs-slider {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .home-blog-nav {
        display: inline-flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
    .home-blog-prev {
        left: 6px;
    }
    .home-blog-next {
        right: 6px;
    }
    .home-blogs-track {
        gap: 16px;
        border-radius: 0px;
        padding-left: 0;
    }
    .home-blog-slide {
        flex: 0 0 100%;
    }
}

.blog-learn-more {
    font-size: 18px;
    padding: 12px 32px;
}

/* ========== HIGHLIGHTS ========== */
.highlights-quebec-img {
    width: 270px;
    max-width: 100%;
    height: auto;
}

.highlights-quebec2-img {
    width: 262px;
    max-width: 100%;
    height: auto;
}

.highlights-intact-img {
    height: 83px;
}

.highlights-heading-top {
    margin-top: 4%;
}

/* ========== QUOTE CTA ========== */
.quote-svg-img {
    max-width: 100%;
}

/* ========== ESTIMATION BOX (Moving Steps) ========== */
.estimation-box {
    max-width: 1500px;
    margin: 40px auto 60px;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    overflow: hidden;
    min-height: 520px;
}

.estimation-image {
    width: 40%;
    min-height: 100%;
    flex-shrink: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.estimation-image-moving {
    background-image: url("../images/movingservice.png");
}

.quote-card-image-storage {
    background: url("../images/movingservice.png") center/cover no-repeat;
}

/* Progress Width Utilities */
.progress-16 {
    width: 16%;
}
.progress-30 {
    width: 30%;
}
.progress-50 {
    width: 50%;
}
.progress-65 {
    width: 65%;
}
.progress-85 {
    width: 85%;
}
.progress-100 {
    width: 100%;
}

.estimation-form {
    width: 70%;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
}

.estimation-form-centered {
    width: 70%;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.estimation-form h2 {
    color: var(--brand-ink,#061D5B);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

.estimation-form-title-tight {
    margin-bottom: 8px;
}

.step-label {
    color: #666;
    font-size: 14px;
    margin-bottom: 16px;
}

.progress-bar-track {
    width: 100%;
    height: 8px;
    background: #ebebeb;
    border-radius: 4px;
    margin-bottom: 32px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--btn-cta,#00007E);
    border-radius: 4px;
    transition: width 0.3s;
}

.progress-16 {
    width: 16%;
}
.progress-30 {
    width: 30%;
}
.progress-50 {
    width: 50%;
}
.progress-65 {
    width: 65%;
}
.progress-85 {
    width: 85%;
}
.progress-100 {
    width: 100%;
}

/* Form Groups */
.form-group {
    margin-bottom: 18px;
}

.form-group-lg {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
}

.form-group select:disabled {
    background: #f5f5f5;
    color: #999;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-row > div {
    flex: 1;
}

/* Radio Group */
.radio-group {
    display: flex;
    gap: 24px;
    margin-top: 4px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    accent-color: var(--btn-cta,#00007E);
    width: 16px;
    height: 16px;
}

/* Step Subtitle */
.step-subtitle {
    color: #666;
    font-size: 14px;
    margin-bottom: 28px;
}

/* Buttons */
.btn-next {
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-next:hover {
    opacity: 0.9;
}

.btn-back {
    background: #e0e0e0;
    color: #333;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-back:hover {
    opacity: 0.85;
}

.btn-submit {
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-submit:hover {
    opacity: 0.9;
}

.form-buttons {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.form-buttons-end {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    justify-content: flex-end;
}

.btn-icon-left {
    margin-right: 8px;
    font-size: 13px;
}

.btn-icon-right {
    margin-left: 8px;
    font-size: 13px;
}

/* ========== ITEM TABS & TABLE (Moving Step 3) ========== */
.item-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.item-tab {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.item-tab:hover {
    background: #f0f0ff;
}

.item-tab.active {
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#00007E);
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.items-table thead th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    padding: 8px 10px;
    border-bottom: 2px solid #ebebeb;
}

.items-table tbody td {
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.items-table input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.items-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--btn-cta,#00007E);
    cursor: pointer;
}

.dimensions {
    color: #888;
    font-size: 13px;
}

.items-table-scroll {
    overflow-x: auto;
}

.col-item {
    width: 30%;
}
.col-dimensions {
    width: 30%;
}
.col-quantity {
    width: 20%;
}
.col-include {
    width: 20%;
}

/* ========== PERSON/COMPANY TOGGLE (Moving Step 5) ========== */
.type-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
}

.type-toggle-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #d0d5dd;
    cursor: pointer;
    background: #fff;
    color: #555;
    transition: all 0.2s;
}

.type-toggle-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.type-toggle-btn:last-child {
    border-radius: 0 8px 8px 0;
}

.type-toggle-btn.active {
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#00007E);
}

/* Phone Input */
.phone-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    overflow: hidden;
}

.phone-prefix {
    padding: 10px 12px;
    background: #f5f5f5;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    border-right: 1px solid #d0d5dd;
    white-space: nowrap;
}

.phone-input-wrap input {
    border: none;
    padding: 10px 14px;
    font-size: 15px;
    flex: 1;
    outline: none;
    width: 100%;
}

/* ========== PLAN CARDS (Moving Step 6) ========== */
.plan-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}

.plan-card {
    flex: 1;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
    background: #fff;
}

.plan-card:hover {
    border-color: var(--btn-cta,#00007E);
    box-shadow: 0 2px 16px rgba(0, 0, 126, 0.1);
}

.plan-card.recommended {
    border-color: var(--btn-cta,#00007E);
    box-shadow: 0 2px 16px rgba(0, 0, 126, 0.12);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-blue,#00007E);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.plan-icon {
    font-size: 28px;
    color: var(--brand-ink,#00007E);
    margin-bottom: 8px;
}

.plan-icon-spaced {
    margin-left: 4px;
}

.plan-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin-bottom: 2px;
}

.plan-tier {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.plan-truck {
    width: 80px;
    height: 48px;
    margin: 0 auto 12px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 24px;
}

.plan-time {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.plan-time-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.plan-breakdown {
    font-size: 12px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 14px;
    text-align: left;
    padding: 0 4px;
}

.plan-breakdown span {
    display: flex;
    justify-content: space-between;
}

.plan-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand-ink,#00007E);
    margin-bottom: 14px;
}

.plan-select-btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid var(--btn-cta,#00007E);
    background: #fff;
    color: var(--brand-ink,#00007E);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.plan-select-btn:hover,
.plan-card.recommended .plan-select-btn {
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
}

/* Summary Section */
.summary-section {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 8px;
}

.summary-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin-bottom: 12px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
    padding: 4px 0;
}

.summary-row strong {
    color: #333;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-ink,#00007E);
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
}

/* ========== QUOTE CARD (Storage Steps) ========== */
.quote-card {
    display: flex;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 1500px;
    margin: 40px auto 60px;
    min-height: 500px;
}

.quote-card-image {
    width: 40%;
    min-height: 500px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.quote-card-form {
    width: 70%;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-card-form h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin-bottom: 8px;
}

.quote-card-form .step-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 24px;
}

.quote-card-form label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #32323b;
    margin-bottom: 6px;
    margin-top: 18px;
}

.quote-card-form select,
.quote-card-form input[type="text"],
.quote-card-form input[type="email"],
.quote-card-form input[type="tel"],
.quote-card-form input[type="number"],
.quote-card-form input[type="date"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #32323b;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.quote-card-form select:focus,
.quote-card-form input:focus {
    border-color: var(--btn-cta,#061D5B);
}

.quote-card-form select:disabled {
    background: #f3f4f6;
    color: #888;
}

.progress-bar-wrap {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin-bottom: 24px;
}

.progress-bar-wrap .progress-bar-fill {
    height: 6px;
    background: var(--btn-cta,#061D5B);
    border-radius: 3px;
    transition: width 0.3s;
}

.btn-row {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.btn-row-end {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    justify-content: flex-end;
}

/* Storage Buttons */
.btn-next-storage {
    padding: 12px 36px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
}

.btn-next-storage:hover {
    background: var(--btn-cta,#0A2A7A);
}

.btn-back-storage {
    padding: 12px 36px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: #efefef;
    color: var(--brand-ink,#061D5B);
}

.btn-back-storage:hover {
    background: #ddd;
}

.btn-submit-storage {
    padding: 12px 36px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
}

.btn-submit-storage:hover {
    background: var(--btn-cta,#0A2A7A);
}

/* Storage Checkbox Row */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.checkbox-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--btn-cta,#061D5B);
}

.checkbox-row label {
    margin: 0;
    font-weight: 500;
    color: #32323b;
}

.addon-desc {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

/* Item Tabs (rounded pill style) */
.item-tab-rounded {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.item-tab-rounded:hover {
    border-color: var(--btn-cta,#00007E);
    color: var(--brand-ink,#00007E);
}

.item-tab-rounded.active {
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#00007E);
}

/* Storage Items Table */
.storage-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.storage-items-table th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    padding: 8px 12px;
    border-bottom: 2px solid #e5e7eb;
}

.storage-items-table td {
    padding: 10px 12px;
    font-size: 14px;
    color: #32323b;
    border-bottom: 1px solid #f0f0f0;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-ink,#061D5B);
}

.qty-btn:hover {
    background: #f0f0f0;
}

.qty-value {
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.th-qty-center {
    text-align: center;
}

/* Storage Toggle (Step 5) */
.toggle-row {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    margin-top: 8px;
}

.toggle-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.toggle-btn:last-child {
    border-radius: 0 8px 8px 0;
}

.toggle-btn.active {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#061D5B);
}

/* Storage Plan Cards (Step 6) */
.storage-plan-cards {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 24px;
}

.storage-plan-card {
    flex: 1;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background: #fff;
}

.storage-plan-card:hover {
    border-color: var(--btn-cta,#061D5B);
    box-shadow: 0 4px 16px rgba(6, 29, 91, 0.1);
}

.storage-plan-card.recommended {
    border-color: var(--bg-main,#061D5B);
    box-shadow: 0 4px 20px rgba(6, 29, 91, 0.15);
}

.storage-plan-card.selected {
    border-color: var(--btn-cta,#061D5B);
    background: #f5f7ff;
}

.storage-plan-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.storage-plan-card .plan-icon {
    font-size: 32px;
    color: var(--brand-ink,#061D5B);
    margin-bottom: 10px;
}

.storage-plan-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 4px;
}

.storage-plan-card .plan-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.storage-plan-card .plan-dimensions {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}

.storage-plan-card .plan-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand-ink,#061D5B);
}

.storage-plan-card .plan-price span {
    font-size: 14px;
    font-weight: 500;
    color: #888;
}

.storage-plan-card .plan-features {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    text-align: left;
}

.storage-plan-card .plan-features li {
    font-size: 13px;
    color: #555;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.storage-plan-card .plan-features li i {
    color: #2ecc71;
    font-size: 12px;
}

.storage-plan-card input[type="radio"] {
    display: none;
}

/* Storage Summary */
.storage-summary {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 20px 24px;
    border: 1px solid #e5e7eb;
}

.storage-summary h3 {
    font-size: 18px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 12px;
}

.storage-summary .summary-row.total {
    border-top: 2px solid #e5e7eb;
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
}

/* Storage Step Subtitle */
.storage-subtitle {
    color: #666;
    font-size: 15px;
    margin-bottom: 16px;
}

.storage-subtitle-tight {
    color: #666;
    font-size: 15px;
    margin-bottom: 8px;
}

/* ========== DASHBOARD ========== */
.dashboard-layout {
    display: flex;
    min-height: calc(100vh - 96px);
}

.tracking-packaging-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 14px;
    background: #eef2ff;
    color: var(--brand-ink-2,#3155E7);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.tracking-packaging-chip strong {
    color: var(--brand-ink,#061D5B);
    font-weight: 700;
}
.tracking-packaging-chip i {
    font-size: 14px;
}

.dashboard-sidebar {
    width: 260px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    padding: 32px 0;
    flex-shrink: 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    color: #32323b;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.2s;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: #f0f2ff;
    color: var(--brand-ink,#00007E);
    font-weight: 600;
    border-left: 3px solid var(--btn-cta,#00007E);
}

.sidebar-nav a i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.dashboard-main {
    flex: 1;
    padding: 32px 40px;
    background: #f8f9fb;
}

.welcome-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.welcome-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-blue,#00007E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
}

.welcome-text h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0;
}

.welcome-text p {
    font-size: 15px;
    color: #666;
    margin: 4px 0 0;
}

.stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.stat-card {
    background: #fff;
    border-radius: 26px;
    box-shadow: 0px 4px 37.8px rgba(0, 0, 0, 0.1);
    padding: 28px 32px;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 120px;
}

.stat-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0 0 12px;
}

.stat-card p {
    font-size: 15px;
    color: #404040;
    margin: 0;
    line-height: 24px;
}

.stat-card .stat-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
}

.tracking-section {
    background: #fff;
    border-radius: 26px;
    box-shadow: 0px 4px 37.8px rgba(0, 0, 0, 0.1);
    padding: 32px;
    margin-bottom: 36px;
}

.tracking-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0 0 28px;
}

.tracking-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.tracking-bar::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: #ebebeb;
    z-index: 0;
}

.tracking-bar::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 40px;
    width: calc(25% - 10px);
    height: 4px;
    background: var(--brand-blue,#00007E);
    z-index: 1;
}

.tracking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
    flex: 1;
}

.tracking-step .step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tracking-step .step-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.tracking-step.completed .step-icon,
.tracking-step.active .step-icon {
    background: var(--btn-cta,#00007E);
}

.tracking-step .step-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    text-align: center;
}

.tracking-step.completed .step-label,
.tracking-step.active .step-label {
    color: var(--brand-ink,#00007E);
    font-weight: 600;
}

.history-section {
    background: #fff;
    border-radius: 26px;
    box-shadow: 0px 4px 37.8px rgba(0, 0, 0, 0.1);
    padding: 32px;
}

.history-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0 0 20px;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 2px solid #e5e7eb;
}

.history-table td {
    padding: 14px 14px;
    font-size: 15px;
    color: #32323b;
    border-bottom: 1px solid #f0f0f0;
}

.status-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-confirmed {
    background: #e0f2fe;
    color: #0369a1;
}

.status-completed {
    background: #dcfce7;
    color: #16a34a;
}

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #666;
    font-size: 16px;
}

.action-btn:hover {
    color: var(--brand-ink,#00007E);
}

/* ========== HOMEPAGE ========== */
.hero-bg-home {
    background-image: url("../images/img1.png");
}

.online-support-bg {
    background-image: url("../images/bg-new.svg");
    /* bg-new.svg is a flat navy decorative panel (a baked raster image, not
       CSS colour) — tint it with the brand colour instead of leaving it
       hard-coded navy. background-color is the backdrop (Cb) the image (Cs)
       blends onto; `luminosity` keeps the IMAGE's shading/texture but takes
       its HUE + SATURATION from the backdrop colour — i.e. it recolours the
       artwork to the brand colour instead of just relighting the original
       navy (which is what `color` mode does — backwards from what's wanted
       here). A no-custom-colour company keeps the original look almost
       exactly (--brand-navy2 defaults to the same stock navy the image
       already is). */
    background-blend-mode: luminosity;
}

.blog-slide-bg {
    background-image: url("../images/blogimg1.png");
}

.stat-card-bg {
    background-image: url("../images/moving-vector.png");
}

/* ========== Recent Quotation Card (RQC) ==========
   Replaces the plain stacked-text layout on the dashboard's summary card
   with a header / hero / route / doc / CTA layout. Inherits .stat-card-bg
   for the brand bg image, but pushes the image to a low-opacity corner
   accent so the new content reads cleanly on top. */
.rqc-card {
    padding: 20px 22px 22px;
    background-position: right -40px bottom -40px;
    background-size: 220px auto;
    background-repeat: no-repeat;
    background-color: #fff;
    background-blend-mode: lighten;
    box-shadow: 0 4px 18px rgba(6, 29, 91, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rqc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.85) 60%);
    pointer-events: none;
    z-index: 0;
}
.rqc-card > * { position: relative; z-index: 1; }

.rqc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.rqc-head .booking-status-badge {
    flex-shrink: 0;
}
.rqc-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rqc-ref {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.02em;
}
@media (max-width: 640px) {
    /* Stack the status badge below the title on narrow screens so the long,
       uppercase FR summary title ("Sommaire de votre activité récente") gets
       the full width instead of being squeezed into a 4-line column beside
       the "Réservation confirmée" badge. */
    .rqc-head {
        flex-direction: column;
        align-items: stretch;
    }
    .rqc-head .booking-status-badge {
        align-self: flex-start;
        margin-top: 4px;
    }
}

.rqc-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--bg-main,#061D5B) 0%, var(--brand-navy2,#1E3A8A) 100%);
    color: var(--brand-on-main,#fff);
}
.rqc-hero-service {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
.rqc-hero-cat {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.rqc-hero-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.rqc-hero-date i { font-size: 12px; }

.rqc-route {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rqc-route-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.rqc-route-marker {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
}
.rqc-route-pickup  .rqc-route-marker { background: #dcfce7; color: #15803d; }
.rqc-route-dropoff .rqc-route-marker { background: #fee2e2; color: #b91c1c; }
.rqc-route-body { min-width: 0; flex: 1; }
.rqc-route-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rqc-route-value {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.4;
    word-break: break-word;
}

.rqc-doc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}
.rqc-doc-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rqc-doc-label i { color: var(--brand-ink,#061D5B); }
.rqc-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.rqc-doc-chip:hover { background: #0a2a78; color: #fff; }
.rqc-doc-more {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.rqc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.rqc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.rqc-btn:active { transform: translateY(1px); }
.rqc-btn-primary {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#061D5B);
}
.rqc-btn-primary:hover { background: #0a2a78; color: #fff; }
.rqc-btn-secondary {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.rqc-btn-secondary:hover { background: #15803d; color: #fff; }

.rqc-empty {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}

@media (max-width: 640px) {
    .rqc-card { padding: 16px; gap: 12px; }
    .rqc-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .rqc-hero-date { align-self: flex-start; }
    .rqc-actions .rqc-btn { flex: 1; justify-content: center; }
}

/* ========== PUBLIC PAGE COMMON ========== */
.content-section {
    padding: 48px 0;
}
/* .page-section {
    padding: 32px 0;
} */
.section-heading {
    font-size: 30px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 0px;
}
.section-heading-center {
    text-align: center;
    font-size: 46px;
    padding: 20px 0;
    margin-top: 4%;
}
.body-text {
    font-size: 18px;
    color: #404040;
    line-height: 32px;
}
.body-text-sm {
    font-size: 18px;
    color: #404040;
    line-height: 32px;
    margin-top: 8px;
}

/* Service Flex Rows */
.service-flex-row {
    display: flex;
    gap: 80px;
    align-items: center;
    padding: 24px 0;
    flex-wrap: wrap;
}
.service-flex-row-reverse {
    display: flex;
    gap: 80px;
    align-items: center;
    padding: 24px 0;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.service-flex-row-mt {
    display: flex;
    gap: 80px;
    align-items: center;
    padding: 24px 0;
    flex-wrap: wrap;
    margin-top: 32px;
}
.service-flex-row-margin {
    display: flex;
    gap: 80px;
    align-items: center;
    flex-wrap: wrap;
    margin: 4% 0;
}
.service-flex-col {
    flex: 1;
    min-width: min(300px, 100%);
}
.service-flex-img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Icon + Heading Row */
.icon-heading-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.icon-heading-row i {
    font-size: 28px;
    color: var(--brand-ink,#061D5B);
}

/* Values List */
.values-list {
    padding-left: 20px;
}
.values-list li {
    font-size: 18px;
    color: #404040;
    line-height: 36px;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.blog-grid-section {
    margin: 32px 0 60px;
}
.blog-card-body {
    padding: 20px;
}
.blog-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 8px;
}
.blog-card-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}
.blog-card-excerpt {
    font-size: 16px;
    color: #404040;
    line-height: 24px;
    margin-bottom: 12px;
    text-align: center;
    max-width: 250px;
    margin: auto;
}
.blog-card-btn {
    font-size: 14px;
    color: #fdfeff;
    font-weight: 600;
    text-decoration: none;
}
.blog-card-btn:hover {
    text-decoration: underline;
}

/* Career Page */
.career-benefits-list {
    padding-left: 20px;
    margin-bottom: 32px;
}
.career-benefits-list li {
    font-size: 18px;
    color: #404040;
    line-height: 36px;
}
.career-positions-section {
    padding: 16px 0;
    margin-bottom: 3%;
}
.career-positions-heading {
    font-size: 46px;
    font-weight: 700;
    color: #32323b;
    margin: 1rem 0 1rem 0;
    text-align: center;
}
.career-table-wrapper {
    overflow-x: auto;
}
.career-table thead th:first-child {
    border-top-left-radius: 10px;
}
.career-table thead th:last-child {
    border-top-right-radius: 10px;
}
.career-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}
.career-table th {
    text-align: left;
    padding: 14px 16px;
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid #e5e7eb;
}
.career-table td {
    padding: 14px 16px;
    color: #404040;
    border-bottom: 1px solid #f3f4f6;
}
.career-apply-section {
    padding: 48px 0 60px;
}
.career-apply-intro {
    font-size: 18px;
    color: #404040;
    margin-bottom: 24px;
}
.career-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.career-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.career-form-group-full {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.career-form-label {
    font-size: 16px;
    font-weight: 600;
    color: #32323b;
}
.career-form-input,
.career-form-select,
.career-form-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #32323b;
    box-sizing: border-box;
}
.career-form-input:focus,
.career-form-select:focus,
.career-form-textarea:focus {
    border-color: var(--btn-cta,#061D5B);
    outline: none;
}
.career-form-textarea {
    min-height: 120px;
    resize: vertical;
}
.career-upload-label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 14px 24px;
    border: 2px;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
}
.career-upload-label:hover {
    border-color: var(--btn-cta,#061D5B);
    color: var(--brand-ink,#061D5B);
}
.career-upload-label input {
    display: none;
}
.career-submit-wrapper {
    grid-column: 1 / -1;
}
.career-submit-btn {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.career-submit-btn:hover {
    background: var(--btn-cta,#0A2A7A);
}

/* Community Page */
.community-category {
    margin-top: 40px;
}
.community-category-heading {
    font-size: 30px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 24px;
}
.community-view-all {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.community-view-all-btn {
    font-size: 16px;
    font-weight: 600;
    color: #fcfcfd;
    text-decoration: none;
}
.community-view-all-btn:hover {
    text-decoration: underline;
}
/* Customer Reviews */
.overall-rating {
    text-align: center;
    margin-top: 48px;
    margin-bottom: 40px;
}
.overall-rating-score {
    font-size: 64px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
}
.review-stars-lg {
    font-size: 28px;
    display: flex;
    gap: 4px;
    justify-content: center;
    color: #f59e0b;
}
.overall-rating-count {
    font-size: 18px;
    color: #404040;
    margin-top: 8px;
}
.review-form-wrapper {
    max-width: 600px;
    margin: 40px auto 60px;
}
.review-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 20px;
    text-align: center;
}
.review-stars-interactive {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}
.review-stars-interactive i {
    font-size: 28px;
    color: #d1d5db;
    cursor: pointer;
}
.review-stars-interactive i.active {
    color: #f59e0b;
}
.review-testimonial-card {
    background: #f4f4f4;
    border-radius: 16px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

/* Location Grid */
.location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    margin-top: 24px;
}
.location-btn-light {
    display: block;
    padding: 14px;
    background: #efefef;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-ink,#061D5B);
    text-decoration: none;
    transition: all 0.2s;
}
.location-btn-light:hover {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
}

/* Coverage Box */
.coverage-box {
    background: var(--bg-main,#061D5B);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    gap: 40px;
    align-items: center;
    margin: 32px 0;
    color: var(--brand-on-main,#fff);
    flex-wrap: wrap;
}
.coverage-box h2 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.coverage-box p {
    font-size: 18px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.9);
}

/* Delivery Contact Form */
.delivery-contact-section {
    display: flex;
    gap: 80px;
    margin: 4% 0;
    flex-wrap: wrap;
}
.delivery-contact-form {
    flex: 1;
    min-width: min(300px, 100%);
}
.delivery-form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.delivery-form-col {
    flex: 1;
    min-width: 140px;
}
.delivery-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.delivery-form-input,
.delivery-form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
}
.delivery-form-input:focus,
.delivery-form-textarea:focus {
    border-color: var(--btn-cta,#061D5B);
    outline: none;
}
.delivery-form-textarea {
    min-height: 100px;
    resize: vertical;
}
.delivery-submit-btn {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

/* FAQ Page Section */
.faq-section-page {
    margin-bottom: 60px;
}
.faq-heading {
    font-size: 30px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 24px;
}

/* Offer Tabs */
.offer-tabs-container {
    margin: 32px 0;
}

/* CTA — note: .cta-center has its full styling further down in this file
   (search "CTA Button Center"). The legacy text-align fallback that used
   to live here has been consolidated into the canonical rule so the
   button gets the brand pill + hover lift everywhere it appears. */
.cta-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.cta-btn-primary {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
}
.cta-btn-primary:hover {
    background: var(--btn-cta,#0A2A7A);
}
.cta-btn-wide {
    width: 30rem;
    max-width: 90%;
}

/* Phone Support */
.phone-display {
    text-align: center;
    margin-top: 48px;
}
.phone-display-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}
.phone-icon-circle {
    width: 72px;
    height: 72px;
    background: var(--bg-main,#061D5B);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-on-main,#fff);
    font-size: 28px;
}
.phone-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
}
.operating-hours {
    text-align: center;
    margin-top: 24px;
}
.hours-line {
    font-size: 18px;
    color: #404040;
    line-height: 32px;
}
.contact-form-title {
    font-size: 30px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 24px;
}
.form-vertical {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
}
.form-input:focus {
    border-color: var(--btn-cta,#061D5B);
    outline: none;
}
.form-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    min-height: 100px;
    resize: vertical;
    box-sizing: border-box;
}
.form-textarea:focus {
    border-color: var(--btn-cta,#061D5B);
    outline: none;
}
.btn-submit-form {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.btn-submit-form:hover {
    background: var(--btn-cta,#0A2A7A);
}

/* Our Accounts */
.feature-cards-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
}
.feature-card-horizontal {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}
.feature-icon-sm {
    width: 56px;
    height: 56px;
    min-width: 56px;
}
.account-cta {
    text-align: center;
    margin: 40px 0 60px;
}
.account-cta-text {
    font-size: 16px;
    color: #404040;
    margin-top: 16px;
}
.account-cta-link {
    color: var(--brand-ink,#061D5B);
    font-weight: 600;
    text-decoration: underline;
}

/* Tracking Page */
.tracking-info {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 32px;
}
.tracking-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tracking-info-label {
    font-size: 14px;
    color: #888;
}
.tracking-info-value {
    font-size: 20px;
    color: #32323b;
    font-weight: 600;
}
.tracking-info-value-primary {
    color: var(--brand-ink,#061D5B);
}
.tracking-progress {
    margin-bottom: 32px;
}
.tracking-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.tracking-line {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 4px;
    background: #e5e7eb;
    z-index: 0;
}
.tracking-line-active {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 45%;
    height: 4px;
    background: var(--bg-main,#061D5B);
    z-index: 1;
}
.tracking-step-item {
    text-align: center;
    z-index: 2;
    flex: 1;
}
.tracking-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 16px;
}
.tracking-step-icon-done {
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
}
.tracking-step-icon-current {
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    box-shadow: 0 0 0 6px rgba(6, 29, 91, 0.2);
}
.tracking-step-icon-pending {
    background: #e5e7eb;
    color: #9ca3af;
}
.tracking-step-label {
    font-size: 13px;
    color: #6b7280;
}
.tracking-step-completed .tracking-step-label {
    color: var(--brand-ink,#061D5B);
    font-weight: 600;
}
.tracking-step-current .tracking-step-label {
    color: var(--brand-ink,#061D5B);
    font-weight: 600;
}
.tracking-details {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.tracking-map {
    flex: 2;
    min-width: min(300px, 100%);
}
.tracking-map-placeholder {
    background: #f3f4f6;
    border-radius: 12px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #e5e7eb;
}
.tracking-map-content {
    text-align: center;
    color: #888;
}
.tracking-driver {
    flex: 1;
    min-width: 220px;
}
.tracking-driver-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}
.tracking-driver-title {
    font-size: 20px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 16px;
}
.tracking-driver-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.tracking-driver-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-main,#061D5B);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-on-main,#fff);
    font-size: 18px;
}
.tracking-driver-name {
    font-size: 18px;
    color: #32323b;
    font-weight: 600;
    display: block;
}
.tracking-driver-role {
    font-size: 14px;
    color: #888;
}

/* Steps Grid (Online Booking) */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin: 32px 0;
}
.step-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}
.step-number {
    width: 48px;
    height: 48px;
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 16px;
}
.step-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 8px;
}
.step-card-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Policy */
.policy-heading {
    font-size: 30px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
    /* margin: 32px 0 12px; */
}
.policy-text {
    font-size: 18px;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.policy-updated{
    font-size: 46px;
    margin-top: 1.5rem;
    font-weight: 600;
}

.policy-updated-subtext{
    font-size: 18px;
    margin-bottom: 2rem;
    font-weight: 500;
}

.contact-policy-text {
    margin-bottom: 0px;
    font-size: 18px;
}

.policy-contact-box ul {
    margin-bottom: 0px;
    font-size: 18px;
    padding-left: 2rem;
}

.policy-contact-box li {
    margin-bottom: 0px;
    font-size: 18px;
}

.policy-contact-box li::marker {
    font-size: 25px;
    color: #000;
}

@media (max-width: 768px) {

.policy-heading {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
    /* margin: 32px 0 12px; */
}
.policy-text {
    font-size: 16px;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 2rem;
}

    .policy-updated{
    font-size: 26px;
    margin-top: 1.5rem;
    font-weight: 600;
}

.policy-updated-subtext{
    font-size: 18px;
    margin-bottom: 2rem;
    font-weight: 500;
}
}



/* Article / Blog Detail */
.article-heading {
    font-size: 24px;
    font-weight: 700;
    color: #32323b;
    margin: 32px 0 12px;
}
.article-subheading {
    font-size: 20px;
    font-weight: 600;
    color: #32323b;
    margin: 24px 0 8px;
}
.article-text {
    font-size: 16px;
    color: #404040;
    line-height: 28px;
    margin-bottom: 16px;
}
.article-image {
    width: 100%;
    border-radius: 12px;
    margin: 24px 0;
}
.article-body{
    font-size: 18px;
    font-weight: 300;
    color:#717077;
    text-align: justify;
    margin:1rem 0;
}
.cta-box {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin: 40px 0;
}
.cta-box h3 {
    font-size: 24px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 12px;
}
.cta-box p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* ========== RESPONSIVE: ESTIMATION BOX ========== */
@media (max-width: 768px) {
    .hero-bg-home {
        margin-top: 70px;
    }
    .hero-btn {
        font-size: 12px;
    }
    .header-spacer {
        height: 0;
    }
    .estimation-box {
        flex-direction: column;
        border-radius: 16px;
    }
    .estimation-image {
        display: none;
    }
    .estimation-form,
    .estimation-form-centered {
        width: 100%;
        padding: 28px 20px;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .items-table {
        font-size: 13px;
    }
    .item-tab {
        padding: 6px 10px;
        font-size: 12px;
    }
    .plan-cards {
        flex-direction: column;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .career-form {
        grid-template-columns: 1fr;
    }
    .location-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .coverage-box {
        flex-direction: column;
        padding: 32px;
    }
    .delivery-contact-section {
        flex-direction: column;
        gap: 32px;
    }
    .service-flex-row,
    .service-flex-row-reverse,
    .service-flex-row-mt,
    .service-flex-row-margin {
        flex-direction: column;
        gap: 24px;
    }
    .feature-cards-2col {
        grid-template-columns: 1fr;
    }
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .summary-grid {
        grid-template-columns: 1fr;
    }
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* ========== RESPONSIVE: QUOTE CARD ========== */
@media (max-width: 768px) {
    .quote-card {
        flex-direction: column;
        border-radius: 16px;
    }
    .quote-card-image {
        width: 100%;
        min-height: 220px;
    }
    .quote-card-form {
        width: 100%;
        padding: 28px 20px;
    }
    .storage-plan-cards {
        flex-direction: column;
    }
    .storage-items-table {
        font-size: 13px;
    }
}

/* ========== RESPONSIVE: DASHBOARD ========== */
@media (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
    }
    /* Customer-portal nav becomes a horizontal strip directly below the
       main site header. Not sticky — keeping it in document flow stops
       it from floating up and covering the header on scroll, which is
       the behaviour the user flagged on iOS. */
    .dashboard-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 0;
        background: #fff;
        position: relative;
        top: auto;
        z-index: auto;
    }
    .sidebar-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        /* No horizontal scroll: each link grows to share the row equally
           so all menu items are visible without swiping. */
        overflow-x: hidden;
        padding: 8px 10px;
    }
    .sidebar-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 8px;
        white-space: nowrap;
        font-size: 13px;
        color: #1f2937;
        border-radius: 8px;
        text-overflow: ellipsis;
        overflow: hidden;
        /* Reset the desktop active treatment — the left border becomes a
           stray vertical bar inside the horizontal track on phones. */
        border-left: 0;
    }
    .sidebar-nav a:hover {
        background: #f3f4f6;
        color: var(--brand-ink,#061D5B);
        border-left: 0;
    }
    .sidebar-nav a.active {
        background: #eef2ff;
        color: var(--brand-ink,#061D5B);
        font-weight: 600;
        border-left: 0;
        /* Keep it visually pinned without consuming horizontal space. */
        box-shadow: inset 0 -2px 0 var(--btn-cta,#061D5B);
    }
    .sidebar-nav a i {
        color: inherit;
        font-size: 15px;
        flex-shrink: 0;
    }
    /* Side gutter so dashboard content (cards, tables, headings) sits away
       from the screen edges on tablets/phones. Both customer + worker
       panels share the 16 px gutter. */
    .dashboard-main {
        padding: 16px 16px;
    }
    .dashboard-layout.is-worker-portal .dashboard-main { padding: 16px 16px; }
    .stat-cards {
        grid-template-columns: 1fr;
    }
    .tracking-bar {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    .tracking-bar::before,
    .tracking-bar::after {
        display: none;
    }
}

/* The home-page hero collapses .header-spacer to 0 on phones (above)
   so it can sit flush under the fixed header. That side-effect was
   pulling every other top-of-page element (the customer navbar in
   particular) up under the header. Push the dashboard layout down by
   the mobile header height so the navbar and content clear it. */
@media (max-width: 768px) {
    .dashboard-layout {
        margin-top: 64px;
    }
}

/* On very narrow phones, drop the menu labels entirely so the four
   customer items still fit on one row without ellipses. The icon stays
   visible because Font Awesome resets font-size on `i.fas`. */
@media (max-width: 480px) {
    .sidebar-nav a {
        font-size: 0;
        gap: 0;
        padding: 12px 6px;
    }
    .sidebar-nav a i {
        font-size: 18px;
    }

    /* Keep a side gutter on phones so dashboard cards/tables/headings sit
       away from the screen edges (each card also keeps its own internal
       padding). */
    .dashboard-main { padding: 12px 16px; }
    .dashboard-container { padding: 12px 4px !important; }
    .dashboard-section { padding: 14px !important; }

    /* Worker portal opt-out: the mission cards look cramped flush to
       the viewport edge. Restore a 14 px side gutter so each card has
       breathing room while the customer panel above keeps its
       deliberately tight 4 px gutter. */
    .dashboard-layout.is-worker-portal .dashboard-main { padding: 12px 14px; }
}

/* ========== BANNER BACKGROUND IMAGES ========== */
.banner-bg-about {
    background-image: url("../images/blogdetail.png");
}
.banner-bg-blog {
    background-image: url("../images/blog-img.png");
}
.banner-bg-blog-detail {
    background-image: url("../images/blogdetail.png");
}
.banner-bg-career {
    background-image: url("../images/img1.png");
}
.banner-bg-community {
    background-image: url("../images/community.png");
}
.banner-bg-delivery {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-moving {
    background-image: url("../images/movingcon.png");
}
.banner-bg-storage {
    background-image: url("../images/storageimg.png");
}
.banner-bg-packaging {
    background-image: url("../images/Packingimg.png");
    background-position: center !important;
}
.banner-bg-estimation {
    background-image: url("../images/img1.png");
}
.banner-bg-online-booking {
    background-image: url("../images/img1.png");
}
.banner-bg-phone-support {
    background-image: url("../images/img1.png");
}
.banner-bg-our-accounts {
    background-image: url("../images/img1.png");
}
.banner-bg-customer-reviews {
    background-image: url("../images/img1.png");
}
.banner-bg-delivery-terrebonne {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-delivery-montreal {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-delivery-mascouche {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-delivery-laval {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-delivery-repentigny {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-delivery-blainville {
    background-image: url("../images/deliveryim.png");
}
.banner-bg-storage-terrebonne {
    background-image: url("../images/storageimg.png");
}
.banner-bg-storage-montreal {
    background-image: url("../images/storageimg.png");
}
.banner-bg-storage-mascouche {
    background-image: url("../images/storageimg.png");
}
.banner-bg-storage-laval {
    background-image: url("../images/storageimg.png");
}
.banner-bg-storage-repentigny {
    background-image: url("../images/storageimg.png");
}
.banner-bg-storage-blainville {
    background-image: url("../images/storageimg.png");
}
.banner-bg-packaging-terrebonne {
    background-image: url("../images/Packingimg.png");
}
.banner-bg-packaging-montreal {
    background-image: url("../images/Packingimg.png");
}
.banner-bg-packaging-mascouche {
    background-image: url("../images/Packingimg.png");
}
.banner-bg-packaging-laval {
    background-image: url("../images/Packingimg.png");
}
.banner-bg-packaging-repentigny {
    background-image: url("../images/Packingimg.png");
}
.banner-bg-packaging-blainville {
    background-image: url("../images/Packingimg.png");
}

/* ========== PAGE CONTENT STYLES ========== */

/* Section Anchor (scroll offset) */
.section-anchor {
    padding-top: 94px;
    margin-top: -94px;
}

/* Breadcrumb Top Padding */
.breadcrumb-top {
    padding: 16px 0;
    padding-top: 3.1%;
}

/* Page Title */
.page-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0;
}

/* Section Headings */
.section-heading {
    font-size: 30px;
    font-weight: 700;
    color: #32323b;
}

.section-heading-semibold {
    font-size: 30px;
    font-weight: 600;
    color: #32323b;
}

.section-heading-center {
    text-align: center;
    font-size: 46px;
    font-weight: 600;
    color: #32323b;
    padding: 20px 0;
    margin-top: 4%;
}

/* Body Text */
.body-text {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin-top: 12px;
}

.body-text-sm {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin-top: 8px;
}

/* Content Sections */
.content-section {
    padding: 48px 0;
}

.content-section-sm {
    padding: 24px 0;
}

/* Icon + Heading Row */
.icon-heading-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.icon-heading-row img {
    width: 60px;
}

/* Service Flex Row */
.service-flex-row {
    display: flex;
    gap: 80px;
    align-items: center;
    padding: 24px 0;
    flex-wrap: wrap;
}

.service-flex-row-mt {
    display: flex;
    gap: 80px;
    align-items: center;
    padding: 24px 0;
    margin-top: 32px;
    flex-wrap: wrap;
}

.service-flex-row-margin {
    display: flex;
    gap: 80px;
    align-items: center;
    margin: 8% 0;
    flex-wrap: wrap;
}

.service-flex-col {
    flex: 1;
    min-width: 300px;
}

.service-flex-img {
    width: 100%;
    border-radius: 12px;
    min-height: 300px;
}

/* Values List */
.values-list {
    margin-top: 16px;
    padding-left: 20px;
    color: #404040;
    font-size: 18px;
    line-height: 36px;
}

/* Company Highlights */
.highlights-section {
    margin: 48px 0;
}

/* Banner CTA */
.banner-cta-wrapper {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.banner-cta-btn {
    width: 40rem;
    max-width: 90%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* CTA Button Center — used on the public service pages
   (online-booking, delivery, storage, moving, packaging, etc.) for the
   "Get a Free Estimate" call-to-action under the hero copy. */
.cta-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 0;
}

/* Reused CTA pill — paired with .btn-primary or .btn-cta-primary for
   color. Adds a subtle drop shadow + hover lift so the button feels
   tactile without overwhelming the surrounding page copy. */
.cta-center .btn-cta,
.cta-center .btn-primary {
    padding: 14px 36px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    min-width: 220px;
    width: auto;
    box-shadow: 0 8px 20px rgba(6, 29, 91, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cta-center .btn-cta:hover,
.cta-center .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(6, 29, 91, 0.26);
}
.cta-center .btn-cta:active,
.cta-center .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(6, 29, 91, 0.18);
}

@media (max-width: 600px) {
    .cta-center { margin: 24px 0; }
    .cta-center .btn-cta,
    .cta-center .btn-primary {
        width: 100%;
        max-width: 360px;
        padding: 13px 28px;
        font-size: 15px;
        text-align: center;
    }
}

.cta-btn-wide {
    width: 27rem;
    max-width: 90%;
    font-size: 18px;
    font-weight: 400;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-grid-section {
    margin-top: 40px;
    margin-bottom: 60px;
}

.blog-card-body {
    padding: 20px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(0%, -190%);
    padding: 20px;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.blog-card-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.blog-card-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 12px;
}

.blog-card-excerpt {
    font-size: 16px;
    color: #fff;
    line-height: 26px;
    margin-bottom: 16px;
    max-width: 600px;
}

.blog-card-btn {
    font-size: 13px;
    font-weight: 400;
    max-width: fit-content;
}

/* Blog Detail Banner */
.blog-detail-banner {
    min-height: 60vh;
}

.blog-detail-banner-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    padding: 0 24px;
}

.blog-detail-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    max-width: 700px;
    padding-bottom: 4rem;
}

.blog-detail-date {
    font-size: 26px !important;
    font-weight: 700;
    text-align: left;
    color: var(--brand-ink,#00007E);
}

/* Blog Article */
.article-container {
    max-width: 95% !important;
    padding: 0px 24px 50px;
}

.article-heading {
    font-size: 46px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 16px;
}

.article-subheading {
    font-size: 24px;
    font-weight: 600;
    color: #32323b;
    margin-bottom: 12px;
}

.article-text {
    font-size: 18px;
    color: #404040;
    line-height: 32px;
    margin-bottom: 24px;
}

.article-image {
    width: 100%;
    border-radius: 12px;
    margin: 32px 0;
}

/* CTA Box */
.cta-box {
    background: #f4f4f4;
    border-radius: 12px;
    padding: 32px;
    margin: 32px 0;
}

.cta-box h3 {
    font-size: 24px;
    font-weight: 600;
    color: #32323b;
    margin-bottom: 12px;
}

.cta-box p {
    font-size: 18px;
    color: #404040;
    line-height: 32px;
    margin-bottom: 16px;
}

.cta-box-btn {
    font-size: 18px;
    padding: 12px 32px;
}

/* Customer-facing header language switcher — mirrors the admin header
   classes (.admin-lang*) so EN / FR dropdown reads identically across
   the admin shell and the marketing site. JS at the bottom of the
   frontend header script toggles the `.open` class on .admin-lang-menu
   when the button is clicked. */
.admin-lang {
    position: relative;
}
/* No pill. The label, globe and chevron used to be hard-coded white, which
   only worked while the header was guaranteed navy — a pale brand tint erased
   the control, and this button carries none of the classes in the layout's
   contrast-flip list (that targets `.lang-btn-style`). The earlier answer was
   to paint it its own dark pill, which reads as a stray black box on the navy
   header it sits on 99% of the time. Reading --brand-on-main instead gets the
   same legibility from the colour the layout already computes for text ON the
   header, with #fff for an unbranded deployment — so the control stays
   readable on any brand colour without a background of its own. The globe and
   chevron follow it via currentColor, keeping their relative weighting. */
.admin-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 8px;
    color: var(--brand-on-main, #fff);
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}
.admin-lang-btn:hover {
    background: transparent;
    opacity: 0.75;
}
.admin-lang-btn > .fa-globe {
    font-size: 15px;
    color: currentColor;
    opacity: 0.85;
}
.admin-lang-chevron {
    color: currentColor;
    opacity: 0.6;
    font-size: 10px;
}
.admin-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 120px;
    z-index: 999;
    overflow: hidden;
}
.admin-lang-menu.open {
    display: block;
}
.admin-lang-option {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: background 0.2s;
}
.admin-lang-option:hover {
    background: #f3f4f6;
}
.admin-lang-option.is-active {
    background: #eef2ff;
    color: var(--brand-ink-2,#3155E7);
}

/* Blog list — image + title are clickable links too (2026-06).
   Keep the title visually identical to the rest of the card; the only
   feedback on hover is a slight image zoom so the card stays calm. */
.blogs-card-image-link {
    display: block;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}
.blogs-card-image-link img {
    display: block;
    width: 100%;
    transition: transform .25s ease;
}
.blogs-card-image-link:hover img,
.blogs-card-image-link:focus-visible img {
    transform: scale(1.03);
}
.blogs-card-title-link {
    color: inherit;
    text-decoration: none;
}
.blogs-card-title-link:hover,
.blogs-card-title-link:focus-visible {
    color: var(--brand-ink,#00007E);
}

/* Blog detail article — polish (2026-06 redesign).
   The previous template wrapped article body + related cards in one
   .related-posts block with no spacing; this gives each piece its own
   rhythm so the page reads as: breadcrumb → header → body → CTA → related. */
.blog-detail-article {
    max-width: 880px;
    margin: 32px auto;
    padding: 0 8px;
}
.article-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 24px;
    margin-bottom: 32px;
}
.article-header .article-heading {
    font-size: 38px;
    color: var(--brand-ink,#00007E);
    margin-bottom: 12px;
    line-height: 1.2;
}
.article-header .blog-detail-date {
    font-size: 15px !important;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}
.article-excerpt {
    font-size: 18px;
    color: #4b5563;
    line-height: 1.6;
    margin: 16px 0 0;
}
.blog-child-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 10px 14px;
    background: #f5f6fb;
    border-radius: 10px;
}
.blog-child-author img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.blog-child-author strong {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.blog-child-author span {
    font-size: 15px;
    color: #1f2937;
    font-weight: 600;
}

/* Article body — give every nested element a comfortable rhythm so
   admin-pasted HTML reads like an editorial piece rather than a wall. */
.blog-detail-article .article-body {
    font-size: 17px;
    line-height: 1.75;
    color: #404040;
}
.blog-detail-article .article-body > * + * { margin-top: 18px; }
.blog-detail-article .article-body h2 {
    font-size: 26px;
    color: var(--brand-ink,#00007E);
    margin-top: 32px;
}
.blog-detail-article .article-body h3 {
    font-size: 20px;
    color: #1f2937;
    margin-top: 24px;
}
.blog-detail-article .article-body img {
    max-width: 100%;
    border-radius: 10px;
    margin: 8px 0;
}
.blog-detail-article .article-body ul,
.blog-detail-article .article-body ol {
    padding-left: 24px;
}
.blog-detail-article .article-body blockquote {
    border-left: 4px solid var(--brand-ink,#00007E);
    background: #f5f6fb;
    padding: 14px 18px;
    margin: 18px 0;
    color: #4b5563;
    font-style: italic;
}

/* Bare detail banner — image-only hero (no title, no CTA). Bigger
   than a strip so the illustration carries the top of the page, but
   capped so it never eats the whole viewport like the original 100vh
   banner did. Scales down on small screens. */
.blog-detail-banner--bare {
    min-height: 560px !important;
    max-height: 70vh;
}
@media (max-width: 1024px) {
    .blog-detail-banner--bare { min-height: 460px !important; }
}
@media (max-width: 720px) {
    .blog-detail-banner--bare { min-height: 320px !important; }
}

@media (max-width: 720px) {
    .article-header .article-heading { font-size: 28px; }
    .blog-detail-article { padding: 0 12px; }
    .article-excerpt { font-size: 16px; }
}

/* Career Page */
.career-benefits-list {
    margin-top: 20px;
    padding-left: 20px;
    color: #404040;
    font-size: 18px;
    line-height: 36px;
}

/* Career Table */
.career-table-wrapper {
    overflow-x: auto;
}

.career-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

.career-table thead tr {
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
}

.career-table th {
    padding: 0 6.2%;
    text-align: left;
    font-weight: 500;
    height: 78px;
    width: 25%;
    font-size: 24px;
}

.career-table td {
    padding: 1rem 6%;
    font-size: 16px;
    border: 1px solid #e5e7eb;
}

.career-table tbody {
    background-color: #f6f6ff;
}

.career-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    
}

/* .career-table tbody tr:nth-child(even) {
    background: #f9fafb;
} */

.career-table td:first-child {
    color: #32323b;
}

.career-table td:nth-child(2),
.career-table td:nth-child(3) {
    color: #404040;
}

.toggle-text {
    display: none;
}

.text-content {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.toggle-text:checked ~ .text-content {
    max-height: 300px;
}

.read-btn {
    color: #2563EB;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
    margin-top: 6px;
}

.read-btn::after {
    content: "Read More";
}

.toggle-text:checked ~ .read-btn::after {
    content: "Read Less";
}

/* Career Form */
.career-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
}

.career-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.career-form-group-full {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
}

.career-form-label {
    font-size: 16px;
    font-weight: 600;
    color: #32323b;
}

.career-form-input {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

.career-form-select {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    background: #fff;
}

.career-form-textarea {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    resize: vertical;
    font-family: inherit;
}

.career-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: 2px;
    border-radius: 8px;
    cursor: pointer;
    color: #404040;
    font-size: 16px;
}

.career-submit-btn {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 0;
}

.career-submit-wrapper {
    grid-column: 1 / -1;
}

/* Career Section Padding */
.career-apply-section {
    padding: 48px 0 60px;
}

.career-apply-intro {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 32px;
}
/* Community Category Section */
.community-category {
    margin-top: 40px;
}

.community-category-bottom {
    margin-top: 48px;
    margin-bottom: 0px;
}

.community-category-heading {
    font-size: 46px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 24px;
}

.community-view-all {
    display: flex;
    justify-content: center;
    margin-top: 2.4%;
    margin-bottom: 4.8%;
}

.community-view-all-btn {
    font-size: 22px;
    font-weight: 500;
    width: 197px;
}

/* Location Buttons Grid */
.location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 24px;
}

.location-btn-light {
    background: #efefef;
    color: var(--brand-ink,#061D5B);
    border-radius: 4px;
    font-size: 18px;
    font-weight: 800;
}

/* Blue Coverage Box */
.coverage-box {
    background: var(--bg-main,#061D5B);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    gap: 48px;
    align-items: center;
    margin: 4% 0;
    flex-wrap: wrap;
}

.coverage-box h2 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.coverage-box p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 32px;
    margin-top: 12px;
}

/* Contact Form Section */
.delivery-contact-section {
    display: flex;
    gap: 80px;
    align-items: center;
    margin: 4% 0;
    flex-wrap: wrap;
}

.delivery-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.delivery-form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.delivery-form-col {
    flex: 1;
    min-width: 140px;
}

.delivery-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #32323b;
    display: block;
    margin-bottom: 6px;
}

.delivery-form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.delivery-form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
}

.delivery-submit-btn {
    font-size: 18px;
    font-weight: 600;
    padding: 14px;
    border: none;
    cursor: pointer;
}

/* FAQ Section */
.faq-section-page {
    margin-bottom: 60px;
}

/* Offer Tabs Container */
.offer-tabs-container {
    margin-bottom: 40px;
}

/* Offer Panel */
.offer-panel h3 {
    font-size: 24px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 12px;
}

.offer-panel p {
    font-size: 18px;
    color: #404040;
    line-height: 30px;
}

.offer-panel ul {
    margin-top: 16px;
    padding-left: 20px;
    color: #404040;
    font-size: 16px;
    line-height: 30px;
}

/* Phone CTA Button */
.phone-cta-btn {
    width: 30rem;
    max-width: 90%;
    font-size: 18px;
    font-weight: 600;
}

.phone-cta-icon {
    width: 20px;
    margin-right: 8px;
}

/* ========================================================================
   RESPONSIVE — Frontend content pages
   ======================================================================== */

/* ---- ≤1024 px — Tablet ---- */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .location-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .career-form {
        grid-template-columns: 1fr;
    }

    /* Steps grid — 2 cols */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Service flex rows — reduce gap */
    .service-flex-row,
    .service-flex-row-reverse,
    .service-flex-row-mt,
    .service-flex-row-margin {
        gap: 40px;
    }

    /* Feature cards */
    .feature-cards-2col {
        gap: 16px;
    }

    /* Tracking details */
    .tracking-details {
        flex-direction: column;
    }
    .tracking-map {
        min-width: auto;
    }
    .tracking-driver {
        min-width: auto;
    }

    /* Phone number */
    .phone-number {
        font-size: 28px;
    }

    /* Coverage box */
    .coverage-box {
        padding: 32px;
        gap: 24px;
    }

    /* Delivery contact */
    .delivery-contact-section {
        gap: 40px;
    }
}

/* ---- ≤768 px — Mobile ---- */
@media (max-width: 768px) {
    /* Typography */
    .page-title {
        font-size: 28px;
    }
    .section-heading,
    .section-heading-semibold {
        font-size: 26px;
    }
    .section-heading-center {
        font-size: 28px;
        padding: 20px 0;
    }
    .body-text,
    .body-text-sm {
        font-size: 16px;
        line-height: 28px;
    }

    /* Service flex rows */
    .service-flex-row,
    .service-flex-row-reverse,
    .service-flex-row-mt,
    .service-flex-row-margin {
        flex-direction: column;
        gap: 24px;
    }
    .service-flex-col {
        min-width: auto;
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card-excerpt {
        max-width: 250px;
    }
    .home-blogs-section {
        padding: 0px 0px 0px;
    }
    .blog-detail-title {
        font-size: 42px !important;
        padding-top: 45%;
    }
    .blog-card-title {
        font-size: 26px;
    }
    .article-container {
        padding: 24px 16px;
    }
    .article-heading {
        font-size: 26px;margin-top: 0;
    }
    .article-subheading {
        font-size: 18px;
    }

    /* Location */
    .location-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Coverage */
    .coverage-box {
        flex-direction: column;
        padding: 24px;
    }
    .coverage-box h2 {
        font-size: 24px;
    }

    /* Delivery */
    .delivery-contact-section {
        flex-direction: column;
        gap: 24px;
    }
    .delivery-form-row {
        flex-direction: column;
    }
    .delivery-form-col {
        min-width: auto;
    }

    /* Steps grid */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .step-card {
        padding: 24px 16px;
    }

    /* Feature cards */
    .feature-cards-2col {
        grid-template-columns: 1fr;
    }

    /* Stat cards (customer dashboard sidebar) */
    .stat-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .stat-card {
        padding: 20px 24px;
        border-radius: 16px;
    }

    /* Tracking */
    .tracking-bar {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    .tracking-bar::before,
    .tracking-bar::after {
        display: none;
    }
    .tracking-section {
        padding: 24px 20px;
        border-radius: 16px;
    }
    .tracking-steps {
        flex-direction: column;
        gap: 16px;
    }
    .tracking-step-item {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }
    .tracking-step-icon {
        margin: 0;
    }
    .tracking-line,
    .tracking-line-active {
        display: none;
    }
    .tracking-info {
        gap: 16px;
    }
    .tracking-info-value {
        font-size: 16px;
    }

    /* History section: ditch the horizontal scroll on phones — the table
       collapses into one card per row with each cell rendered as a
       label/value pair driven by data-th. Stops the wide Date of Service
       column from pushing the action buttons off-screen. */
    .history-section {
        padding: 16px 12px;
        border-radius: 16px;
        overflow-x: visible;
    }
    .history-section h3 { font-size: 17px; margin-bottom: 12px; }

    .history-table {
        min-width: 0;
        display: block;
    }
    .history-table thead { display: none; }
    .history-table tbody { display: block; }
    .history-table tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .history-table tr:last-child { margin-bottom: 0; }

    /* Per-card pastel tinting on the mobile card view (customer dashboard
       Quotation History). Cycle through 5 soft pastel pairs so each card
       reads as distinct at a glance — useful when the list is long.
       Mobile/card view only; the desktop table stays neutral. The accent
       border on the left edge mirrors the background hue so the card
       feels colour-coded rather than just tinted. */
    .history-table tbody tr:nth-of-type(5n+1) {
        background: #eef2ff;            /* indigo */
        border-color: #c7d2fe;
        border-left: 4px solid #4f46e5;
    }
    .history-table tbody tr:nth-of-type(5n+2) {
        background: #ecfdf5;            /* emerald */
        border-color: #a7f3d0;
        border-left: 4px solid #059669;
    }
    .history-table tbody tr:nth-of-type(5n+3) {
        background: #fff7ed;            /* amber */
        border-color: #fed7aa;
        border-left: 4px solid #d97706;
    }
    .history-table tbody tr:nth-of-type(5n+4) {
        background: #fdf2f8;            /* pink */
        border-color: #fbcfe8;
        border-left: 4px solid #db2777;
    }
    .history-table tbody tr:nth-of-type(5n) {
        background: #f0f9ff;            /* sky */
        border-color: #bae6fd;
        border-left: 4px solid #0284c7;
    }
    /* Per-row separator inside the card needs to lift off the tinted
       background a touch — same alpha-tinted line on every card. */
    .history-table tbody tr td {
        border-bottom-color: rgba(0,0,0,0.06);
    }
    .history-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
    }
    .history-table td:last-child { border-bottom: 0; }
    .history-table td::before {
        content: attr(data-th);
        flex: 0 0 auto;
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.5;
        padding-top: 2px;
    }
    .history-table td > * { text-align: right; }
    /* Date of Service has its own multi-line layout — let it span the
       full row width with the data-th label on its own line above. */
/* Amount column state styling: tiny "estimate" tag next to the value
   while the customer is still reviewing the estimate, and a soft "—"
   placeholder for the post-confirm / pre-completion window. */
.qt-amount-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
    background: #fef3c7;
    border-radius: 999px;
    vertical-align: middle;
}
.qt-amount-pending {
    color: #9ca3af;
    font-size: 18px;
    font-weight: 600;
}

    .history-table td.history-table-dos {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .history-table td.history-table-dos > * { text-align: left; }
    .history-table .qt-actions { justify-content: flex-end; gap: 8px; }

    /* Phone support */
    .phone-number {
        font-size: 24px;
    }
    .phone-icon-circle {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    /* Career page */
    .career-form {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .career-table {
        font-size: 20px;
    }
    .career-table th{
        padding: 1px 40px;
        font-size: 20px;
    }
    .career-table td {
        padding: 1px 40px;
        font-size: 14px;
    }
    .career-positions-heading {
    font-size: 38px;
    font-weight: 700;
    color: #32323b;
    margin: 1rem 0 1rem 0;
    text-align: center;
}
    .career-positions-section {
    padding: 0;
    margin-bottom: 3%;
}

    /* Values list */
    .values-list li {
        font-size: 16px;
        line-height: 30px;
    }

    /* Review stars */
    .overall-rating-score {
        font-size: 48px;
    }
    .review-stars-lg {
        font-size: 22px;
    }

    /* CTA */
    .cta-btn-wide {
        width: 100%;
        max-width: 100%;
    }
    .phone-cta-btn {
        width: 100%;
        max-width: 100%;
    }

    /* Community */
    .community-category-heading {
        font-size: 24px;
    }
}

/* ---- ≤480 px — Small mobile ---- */
@media (max-width: 480px) {
    .location-grid {
        grid-template-columns: 1fr;
    }
    .steps-grid {
        grid-template-columns: 1fr;
    }
    .page-title {
        font-size: 24px;
    }
    .section-heading-center {
        font-size: 26px;
    }
    .phone-display-link {
        flex-direction: column;
    }
    .phone-number {
        font-size: 22px;
    }
}

/* ========== LOGIN & AUTH DROPDOWN ========== */
/* Login Button */
.btn-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background: rgba(255, 255, 255, 0.2);
}

.login-text {
    display: none;
}

/* Auth Dropdown */
.dropdown-menu-right {
    right: 0;
    left: auto;
    width: 260px;
    background: #ffffff;
    padding: 8px 0;
    border: 1px solid #eef0f4;
}

.dropdown-user-info {
    padding: 14px 18px 12px;
    text-align: left;
}

.dropdown-user-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-user-email {
    font-size: 13px;
    color: #888;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-divider {
    margin: 6px 0;
    border: none;
    border-top: 1px solid #eef0f4;
}

.dropdown-menu-right .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    text-align: left;
    background: none;
    border: none;
    color: #404040;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.dropdown-menu-right .dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    flex-shrink: 0;
}

.dropdown-menu-right .dropdown-item:hover i {
    color: var(--brand-ink,#061D5B);
}

.dropdown-menu-right .dropdown-item:hover {
    background: #f4f6fb;
    color: var(--brand-ink,#061D5B);
}

.dropdown-logout {
    color: #dc2626 !important;
    font-weight: 600;
}

.dropdown-menu-right .dropdown-logout:hover {
    background: #fee2e2;
    color: #b91c1c !important;
}

/* Mobile Sidebar Auth */
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.sidebar-user-info .profile-img {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.sidebar-user-text {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-login-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.sidebar-login-btn .profile-img {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.sidebar-login-btn:hover {
    color: #fff;
}

.mobile-sidebar .sidebar-divider {
    list-style: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 14px;
    padding: 0;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    color: #f87171;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    min-height: 44px;
    transition: background 0.15s ease;
}

.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* Responsive - Show Login Text */
@media (min-width: 1024px) {
    .login-text {
        display: inline;
    }
}

@media (max-width: 768px) {
    .btn-login {
        padding: 10px;
        background: none;
    }

    .btn-login:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-item-dropdown {
        position: relative;
    }

    .nav-dropdown-label {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        padding: 10px;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        min-width: 200px;
        z-index: 999;
        margin-top: 8px;
    }

    .dropdown-menu a,
    .dropdown-item {
        display: block;
        padding: 12px 16px;
        color: #404040;
        text-decoration: none;
        font-size: 14px;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

    .dropdown-menu a:hover,
    .dropdown-item:hover {
        background: #f9fafb;
        color: var(--brand-ink,#061D5B);
    }
}

/* ========== AUTH FORM PAGE ========== */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 96px);
    padding: 40px 20px;
}

.auth-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    width: 100%;
    overflow: hidden;
}

.auth-card-image {
    background: linear-gradient(135deg, var(--bg-main,#061D5B) 0%, var(--brand-blue,#0A2A7A) 100%);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-on-main,#fff);
    font-size: 48px;
}

.auth-card-form {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-card-form h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px;
}

.auth-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0 0 32px;
    line-height: 1.6;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.auth-form-group input[type="email"],
.auth-form-group input[type="password"],
.auth-form-group input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #1a1a2e;
    transition: all 0.3s ease;
}

.auth-form-group input[type="email"]:focus,
.auth-form-group input[type="password"]:focus,
.auth-form-group input[type="text"]:focus {
    border-color: var(--btn-cta,#061D5B);
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 29, 91, 0.1);
}

.password-wrap {
    position: relative;
    display: flex;
}

.password-wrap input {
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 18px;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: var(--brand-ink,#061D5B);
}

.auth-remember-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #404040;
}

.auth-remember-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--btn-cta,#061D5B);
}

.auth-remember-group label {
    cursor: pointer;
    margin: 0;
}

.forgot-link {
    font-size: 14px;
    color: var(--brand-ink,#061D5B);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.forgot-link:hover {
    text-decoration: underline;
}

.btn-auth-login {
    padding: 14px 24px;
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-auth-login:hover {
    background: var(--btn-cta,#0A2A7A);
    box-shadow: 0 4px 12px rgba(6, 29, 91, 0.3);
}

.btn-auth-login:active {
    transform: scale(0.98);
}

.auth-link-text {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 20px;
}

.auth-link {
    color: var(--brand-ink,#061D5B);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-success-alert {
    padding: 16px;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #065f46;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.auth-success-alert i {
    color: #10b981;
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}

.auth-error-alert {
    padding: 16px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    margin-bottom: 20px;
}

.auth-error-alert ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-error-alert li {
    color: #dc2626;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.auth-field-error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 4px;
}

/* Auth Responsive */
@media (max-width: 768px) {
    .auth-container {
        padding: 20px 16px;
        min-height: auto;
    }
    .auth-card {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .auth-card-image {
        display: none;
    }
    .auth-card-form {
        padding: 28px 20px;
    }
    .auth-card-form h2 {
        font-size: 24px;
    }
    .auth-subtitle {
        font-size: 14px;
        margin: 0 0 24px;
    }
}

@media (max-width: 480px) {
    .auth-card-form {
        padding: 24px 16px;
    }
    .btn-auth-login {
        font-size: 15px;
        padding: 12px 20px;
    }
}

/* Step Counter (e.g. "1 / 2") */
.step-counter {
    font-size: 16px;
    font-weight: 700;
    color: #32323b;
    margin-bottom: 20px;
}

/* ========== QUOTATION FORMS - ITEMS TABLE ========== */
.items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    overflow: hidden;
}

.items-table thead {
    background: #f5f5f5;
}

.items-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #d0d5dd;
}

.items-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #d0d5dd;
    font-size: 14px;
    color: #333;
}

.items-table tbody tr:last-child td {
    border-bottom: none;
}

.items-table tbody tr:hover {
    background: #f9f9f9;
}

.items-table-quantity {
    text-align: center;
    font-weight: 500;
}

.items-table-action {
    text-align: center;
}

.btn-remove-item {
    padding: 6px 12px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: opacity 0.3s;
}

.btn-remove-item:hover {
    opacity: 0.85;
}

.items-empty-message {
    padding: 30px;
    text-align: center;
    color: #999;
    font-size: 14px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
}

.btn-add-item {
    padding: 10px 16px;
    background: var(--btn-cta,#00007E);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.3s;
}

.btn-add-item:hover {
    opacity: 0.9;
}

/* ========== QUOTATION FORMS - GENERAL ========== */
.wizard-panel {
    display: none;
}

.wizard-panel.active {
    display: block;
}

.form-buttons {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.form-buttons-end {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    justify-content: flex-end;
}

.form-error {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

.customer-type-toggle {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.customer-type-toggle label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    gap: 8px;
}

.customer-type-toggle input {
    accent-color: var(--btn-cta,#00007E);
    width: 16px;
    height: 16px;
}

.plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.plan-card {
    display: block;
    padding: 16px;
    border: 2px solid #d0d5dd;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.plan-card:hover {
    border-color: var(--btn-cta,#00007E);
    background: #f8f9ff;
}

.plan-card input {
    margin-right: 8px;
    accent-color: var(--btn-cta,#00007E);
}

.plan-name {
    font-weight: 600;
    color: var(--brand-ink,#061D5B);
}

.plan-details small {
    color: #666;
    font-size: 13px;
    display: block;
    margin-top: 4px;
}

.btn-submit {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: opacity 0.3s;
}

.btn-submit:hover {
    opacity: 0.9;
}

/* Form input focus states */
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--btn-cta,#00007E);
    box-shadow: 0 0 0 3px rgba(0, 0, 126, 0.1);
}

/* ========================================================================
   RESPONSIVE — Quotation / Estimation Wizard Forms
   ======================================================================== */

@media (max-width: 1024px) {
    .estimation-box {
        min-height: auto;
    }
    .estimation-image {
        width: 35%;
    }
    .estimation-form,
    .estimation-form-centered {
        width: 65%;
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .estimation-box {
        flex-direction: column;
        border-radius: 16px;
        min-height: auto;
    }
    .estimation-image {
        display: none;
    }
    .estimation-form,
    .estimation-form-centered {
        width: 100%;
        padding: 24px 20px;
    }
    .estimation-form h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* Items table responsive */
    .items-table {
        font-size: 13px;
    }
    .items-table th,
    .items-table td {
        padding: 10px 12px;
    }

    /* Plan cards */
    .plan-cards,
    .storage-plan-cards {
        flex-direction: column;
    }

    /* Form buttons */
    .form-buttons,
    .form-buttons-end {
        flex-direction: column;
        gap: 12px;
    }
    .form-buttons .btn-next,
    .form-buttons .btn-back,
    .form-buttons-end .btn-next,
    .form-buttons-end .btn-back,
    .btn-submit {
        width: auto;
    }

    /* Radio group wrap */
    .radio-group {
        flex-wrap: wrap;
        gap: 16px;
    }
    .customer-type-toggle {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Quote card */
    .quote-card {
        flex-direction: column;
        border-radius: 16px;
    }
    .quote-card-image {
        width: 100%;
        min-height: 220px;
    }
    .quote-card-form {
        width: 100%;
        padding: 28px 20px;
    }

    /* Summary grid */
    .summary-grid {
        grid-template-columns: 1fr;
    }
    .two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .estimation-form,
    .estimation-form-centered {
        padding: 20px 16px;
    }
    .estimation-form h2 {
        font-size: 18px;
    }
    .step-label {
        font-size: 13px;
    }
}

/* ========================================================================
   RESPONSIVE — Modals (generic .modal-overlay / .modal-content)
   ======================================================================== */
@media (max-width: 768px) {
    .modal-content {
        padding: 24px 20px;
        width: 95%;
        border-radius: 12px;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-title {
        font-size: 18px;
    }
}

/* Alert success styles */
.alert-success {
    margin-bottom: 20px;
    padding: 16px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 8px;
}

/* ========================================================================
   SERVICE PAGES — content rows (alternating text/image)
   ======================================================================== */
.content-row {
    display: flex;
    align-items: center;
    gap: 8%;
    padding: 32px 0;
}
.content-row-text {
    flex: 1;
    min-width: 0;
}
.content-row-media {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}
.content-row-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.content-row-title {
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 16px;
}
.content-row-paragraph {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 12px;
}
.content-row-list {
    list-style: disc;
    padding-left: 20px;
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin-top: 8px;
}
.content-row-list li {
    margin-bottom: 6px;
}

/* Closing block used on multiple service pages */
.closing-block {
    max-width: 720px;
    margin: 16px auto 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.closing-paragraph {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    width: 92%;
    text-align: center;
}

/* Inline CTA used in Telephone Support content-row */
.btn-cta-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 16px;
    background-color: var(--btn-cta,#061D5B);
}

/* Telephone Support — custom list with chevrons */
.support-list {
    list-style: none;
    padding-left: 0;
}
.support-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #404040;
}
.support-list li img {
    flex-shrink: 0;
    margin-top: 6px;
}
.support-list li b {
    color: #32323b;
    margin-right: 6px;
}

.support-contact-note {
    margin-top: 40px;
}
.support-contact-title {
    font-size: 22px;
    font-weight: 400;
    color: #000;
    line-height: 1.6;
    margin-bottom: 8px;
}
.support-email {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    color: #000000;
    font-weight: 400;
    margin-bottom: 32px;
    max-width: 50%;
}

/* Our Accounts — social grid */
.social-accounts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 48px 0;
}
.social-account-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.social-account-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 16px;
}
.social-account-text {
    color: #32323b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 72px;
}
.social-account-btn {
    width: 180px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    background: var(--btn-cta,#061D5B) !important;
}

/* Our Accounts — "Why follow us" chevron lists */
.account-list-block {
    margin-top: 32px;
}
.account-list-title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
}
.account-list {
    list-style: none;
    padding-left: 0;
}
.account-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 300;
    color: #404040;
}
.account-list li img {
    flex-shrink: 0;
}

/* Customer Review — featured testimonial cards (top 3) */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0 48px;
}
.testimonial-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}
.testimonial-text {
    color: #404040;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.testimonial-author strong {
    color: var(--brand-ink,#061D5B);
    font-size: 16px;
    font-weight: 700;
}
.testimonial-author span {
    color: #6b7280;
    font-size: 14px;
}

/* Customer Review — Leave a review panel */
.approved-reviews-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 32px 0;
}
.approved-review-card {
    background: #f4f4f4;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.approved-review-stars {
    color: #f59e0b;
    margin-bottom: 10px;
    font-size: 16px;
}
.approved-review-text {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.approved-review-author strong {
    display: block;
    color: var(--brand-ink,#061D5B);
}
.approved-review-author span {
    color: #6b7280;
    font-size: 13px;
}
.leave-review-panel {
    background: #f4f4f4;
    border-radius: 16px;
    padding: 48px;
    margin: 32px 0 64px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.leave-review-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1rem;
}
.leave-review-stars {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.leave-review-stars i {
    font-size: 32px;
    /* color: #f3a13c; */
    color:#4b4040;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.leave-review-stars i:hover {
    transform: scale(1.1);
}
.leave-review-form .form-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    padding: 16px;
    font-size: 16px;
    min-height: 140px;
    resize: vertical;
    /* background: #fff; */
    background: #f4f4f4;
}
.leave-review-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ========================================================================
   SHARED service-page primitives (section-title, FAQ, cta)
   Previously lived only in admin.css (not loaded on frontend) — promoting
   here so every frontend service page renders correctly.
   ======================================================================== */
.section-title {
    font-size: 48px;
    font-weight: 700;
    color: #32323b;
    text-align: center;
    margin: 1.5rem 0;
    padding-top: 7%;
}

.new-section-title{
    font-size: 32px;
    font-weight: 700;
    color: #32323b;
    text-align: center;
    margin: 1.5rem 0;
    padding-top: 7%;
}


.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    min-width: 220px;
    text-decoration: none;
     max-width: 30rem;
    width:100%;
}
@media (max-width: 768px) {
    .section-title {
        font-size: 24px;
        margin: 32px 0 20px;
    }
    .new-section-title{
        font-size: 24px;
        margin: 32px 0 20px;
    }
    .btn-cta{
        max-width: 16rem;
        font-size: 18px;
        padding: 10px 12px;
    }
}

.faq-section {
    max-width: 900px;
    margin: 16px auto 48px;
    padding: 0 8px;
}
.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}
.faq-item summary,
.faq-item .faq-question {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    list-style: none;
    outline: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: "+";
    float: right;
    font-size: 22px;
    font-weight: 400;
    color: var(--brand-ink,#061D5B);
    margin-left: 12px;
    transition: transform 0.2s;
}
.faq-item[open] summary::after {
    content: "−";
}
.faq-item .faq-answer,
.faq-item > p {
    padding: 0 20px 16px;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

/* ========================================================================
   DELIVERY LOCATION PAGES — React-design replica (dloc-*)
   Matches the full Tailwind structure from Service/Delivery/*.jsx, with
   Our Offers tabs + Testimonials sections added per the live site pattern.
   ======================================================================== */

/* Headings */
.dloc-heading {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0;
    padding: 16px 16px 0;
}
.dloc-section-heading {
    text-align: center;
    font-size: 46px;
    font-weight: 600;
    color: #32323b;
    margin: 56px 0 44px;
    padding: 0 16px;
}
.dloc-arrow-wrap {
    padding: 0px 0px 0px 0px;
}
.dloc-service-title {
    font-size: 32px;
    font-weight: 600;
    color: #32323b;
    padding: 32px 0 8px;
    margin: 0;
}
.dloc-title-blue {
    font-size: 24px;
    font-weight: 600;
    /* color: var(--brand-ink-2,#3155E7); */
    margin: 0 0 12px;
    /* cursor: pointer; */
}
.dloc-link-title-wrap {
    text-decoration: none;
    display: inline-block;
}
.dloc-link-title-wrap:hover .dloc-title-blue {
    text-decoration: underline;
}
.dloc-title-dark {
    font-size: 32px;
    font-weight: 600;
    color: #32323b;
    margin: 0 0 12px;
}

/* Phone CTA */
.dloc-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.dloc-phone-btn {
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    padding: 16px 32px;
    border-radius: 10px;
    font-weight: 400;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 400px;
    text-decoration: none;
    transition: background-color 0.2s;
    max-width:465px;
}
.dloc-phone-btn:hover {
    background: var(--bg-secondary,#2944C6);
    color: var(--brand-on-secondary,#fff);
}
.dloc-phone-btn img {
    width: 22px;
    height: 22px;
}

/* Alternating content rows — desktop uses natural order,
   mobile always stacks TEXT on top then IMAGE. */
.dloc-row {
    display: flex;
    align-items: center;
    gap: 5%;
    padding: 32px 0;
    flex-wrap: nowrap;
}
.dloc-row--wide {
    gap: 80px;
    padding-top: 48px;
}
.dloc-row > .dloc-col {
    flex: 1 1 0;
    min-width: 0;
    width: 50%;
}
.dloc-row .dloc-col--media img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Text styles */
.dloc-p {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin: 8px 0;
    text-align: justify;
}
.new-dloc-list {
    margin: 0;
    padding-left: 22px;
    line-height: 1.8;
    list-style-type: disc;
}

.new-dloc-list li {
    margin-bottom: 0px;
    font-size: 16px;
}

.new-dloc-list li::marker {
    font-size: 16px;
    color: #000;
}
.dloc-list {
    list-style: disc;
    padding-left: 28px;
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin: 8px 0;
}
.dloc-list li {
    margin-bottom: 4px;
}

/* "Ready to deliver" callout */
.dloc-move {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-top: 64px;
    padding: 0 16px;
}
.dloc-move h2 {
    color: #32323b;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 16px;
}
.dloc-move p {
    color: #404040;
    font-size: 18px;
    line-height: 32px;
    margin: 0 0 24px;
    max-width: 70%;
    text-align: center;
}
.dloc-move-btn {
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25rem;
    text-decoration: none;
    /* justify-content centres the flex line as a whole, which is all that is
       needed while the label fits on one line. The label is a single text
       node, so the moment it wraps — as the long FR ones do on a phone — each
       LINE is placed by text-align, which inherits as left here, and the
       button reads as a ragged left-aligned paragraph inside a centred box. */
    text-align: center;
}
.dloc-move-btn:hover {
    background: var(--bg-secondary,#2944C6);
    color: var(--brand-on-secondary,#fff);
}

/* OUR OFFERS — tabbed cards, React PrimeReact replica (.offer pattern) */
.dloc-offers {
    margin: 24px 0 48px;
}

/* Tab bar — each tab is a large rounded CARD */
.dloc-offers-tabs {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dloc-offers-tab {
    flex: 1 1 0;
    min-width: 390px;
    min-height: 139px;
    padding: 30px;
    background: #f4f4f4;
    color: #404040;
    border: 0;
    border-radius: 10px;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.25s,
        color 0.25s,
        font-size 0.25s,
        font-weight 0.25s;
    align-items: center;
    justify-content: center;
    text-align: left;
}
.dloc-offers-tab:hover {
    background: #e9eaef;
    color: var(--brand-ink,#061D5B);
}
.dloc-offers-tab.is-active {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    font-weight: 700;
    font-size: 30px;
    line-height: 31px;
    text-align: left;
}

/* Panel */
.dloc-offers-panel {
    display: none;
    position: relative;
    background: #f4f4f4;
    border-radius: 16px;
    padding: 32px;
    margin-top: 12px;
}
.dloc-offers-panel.is-active {
    display: block;
}

/* Rate ribbon — pentagon-shaped navy banner, top-right */
.dloc-offers-ribbon {
    position: absolute;
    top: 0;
    right: 2.6%;
    width: 100px;
    height: 110px;
    padding: 14px 6px;
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    font-weight: 500;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    z-index: 2;
    font-size: 14px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.dloc-offers-ribbon strong {
    display: block;
    font-weight: 700;
    font-size: 16px;
    margin-top: 2px;
}

/* Inner grid */
.dloc-offers-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}
.dloc-offers-media {
    /* flex: 0 0 50%; */
    max-width: 50%;
    align-self: stretch;
    display: flex;
}
.dloc-offers-media img {
    width: 100%;
    height: 100%;
    /* max-height: 460px; */
    object-fit: cover;
    border-radius: 30px;
    display: block;
}

.dloc-offers-body {
    flex: 1 1 0;
    min-width: 0;
}
.dloc-offers-body h3 {
    color: #000;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.5;
    max-width: 60%;
    text-align: justify;
}
.dloc-offers-sub {
    color: #32323b;
    font-size: 18px;
    margin: 0 0 16px;
    line-height: 1.6;
}
.dloc-offers-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.dloc-offers-list li {
    position: relative;
    padding-left: 22px;
    margin: 10px 0;
    color: var(--brand-ink,#061D5B);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}
.dloc-offers-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--bg-main,#061D5B);
    border-radius: 50%;
}
.dloc-offers-info {
    margin: 12px 0 20px;
}
.dloc-offers-info strong {
    display: block;
    color: #000;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}
.dloc-offers-info p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #404040;
    font-size: 16px;
    line-height: 1.6;
    margin: 8px 0;
}
.dloc-offers-info p img {
    flex-shrink: 0;
    margin-top: 6px;
}
.dloc-offers-cta {
    min-width: 320px;
    padding: 10px 30px;
    margin-top: 16px;
}

/* TESTIMONIALS */
.dloc-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 16px 0 48px;
}
.dloc-review {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dloc-review-stars {
    color: #f3a13c;
    font-size: 16px;
}
.dloc-review-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    margin: 0;
    line-height: 1.4;
}
.dloc-review-text {
    color: #404040;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}
.dloc-review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.dloc-review-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.dloc-review-author strong {
    display: block;
    color: #32323b;
    font-size: 15px;
}
.dloc-review-author span {
    color: #6b7280;
    font-size: 13px;
}

/* Navy map card */
.dloc-map {
    background: var(--bg-main,#061D5B);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 64px 0 32px;
}
.dloc-map-img {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dloc-map-img img {
    max-width: 100%;
    height: auto;
}
.dloc-map-text {
    flex: 1;
    color: #fff;
    font-size: 46px;
    line-height: 60px;
    font-weight: 400;
}

/* Contact grid */
.dloc-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 56px 0 48px;
    gap: 0;
    background: linear-gradient(90.23deg, #e0e0e0 0.17%, #fff 99.78%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    min-height: 520px;
}
.dloc-contact-img {
    position: relative;
    background: var(--bg-main,#061D5B);
    overflow: hidden;
}
.dloc-contact-img img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}
.dloc-contact-form-wrap {
    display: flex;
    padding: 32px;
    align-items: center;
    justify-content: center;
}
.dloc-contact-form {
    width: 100%;
    max-width: 420px;
}
.dloc-contact-form h2 {
    color: var(--brand-ink,#061D5B);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 20px;
}
.dloc-field {
    margin-bottom: 12px;
}
.dloc-field label {
    display: block;
    color: #828282;
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 4px;
}
.dloc-field label .req {
    color: #ef4444;
}
.dloc-field input,
.dloc-field textarea {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}
.dloc-field input,
.dloc-field textarea {
    background: transparent;
    border-radius: 10px;
}
.dloc-field textarea {
    min-height: 100px;
    resize: vertical;
}
.dloc-submit {
    width: 100%;
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    border: 0;
    padding: 14px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.dloc-submit:hover {
    background: var(--bg-secondary,#2944C6);
}

/* Responsive */
@media (max-width: 1440px) {
    .dloc-offers-media img {
        border-radius: 30px;
        max-height: 460px;
    }
}
@media (max-width: 1024px) {
    .dloc-heading {
        font-size: 32px;
    }
    .dloc-section-heading {
        font-size: 30px;
    }
    .dloc-map-text {
        font-size: 26px;
        line-height: 36px;
    }
    .dloc-title-dark {
        font-size: 26px;
    }
    .dloc-service-title {
        font-size: 26px;
    }
    .dloc-offers-tab {
        min-width: 200px;
        font-size: 18px;
    }
    .dloc-offers-tab.is-active {
        font-size: 22px;
    }
    .dloc-offers-body h3 {
        font-size: 28px;
        max-width: 100%;
    }
    .dloc-reviews {
        grid-template-columns: repeat(2, 1fr);
    }
    .dloc-offers-media img {
        max-height: 100%;
    }
}
@media (max-width: 768px) {
    .dloc-heading {
        font-size: 26px;
    }
    .dloc-section-heading {
        font-size: 24px;
        margin: 32px 0 20px;
    }
    .dloc-phone-btn {
        min-width: 0;
        width: 100%;
        max-width: 320px;
        font-size: 14px;
        padding: 12px 20px;
    }
    .dloc-row,
    .dloc-row--wide {
        flex-direction: column;
        gap: 16px;
        padding: 20px 0;
    }
    .dloc-row > .dloc-col {
        width: 100%;
    }
    .dloc-row .dloc-col--text {
        order: 1;
    }
    .dloc-row .dloc-col--media {
        order: 2;
    }
    .dloc-service-title {
        font-size: 22px;
        padding: 20px 0 8px;
    }
    .dloc-title-dark {
        font-size: 22px;
    }
    .dloc-title-blue {
        font-size: 20px;
    }
    .dloc-p {
        font-size: 16px;
        line-height: 26px;
    }
    .dloc-list {
        font-size: 16px;
        line-height: 26px;
        padding-left: 24px;
    }
    .dloc-move {
        margin-top: 40px;
    }
    .dloc-move h2 {
        font-size: 22px;
    }
    .dloc-move p {
        max-width: 100%;
        font-size: 16px;
        line-height: 26px;
    }
    .dloc-move-btn {
        min-width: 0;
        width: 100%;
        max-width: 320px;
    }
    .dloc-offers-tabs {
        gap: 10px;
        flex-wrap: wrap;
    }
    .dloc-offers-tab {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
        max-width: none;
        min-height: 80px;
        padding: 15px 10px;
        font-size: 16px;
        line-height: 18px;
    }
    .dloc-offers-tab.is-active {
        font-size: 16px;
        line-height: 20px;
    }
    .dloc-offers-panel {
        padding: 0px;
        background-color: white;
    }
    .dloc-offers-ribbon {
        width: 76px;
        height: 86px;
        right: 10px;
        font-size: 11px;
        padding: 10px 4px;
    }
    .dloc-offers-ribbon strong {
        font-size: 13px;
    }
    .dloc-offers-grid {
        flex-direction: column;
        gap: 20px;
    }
    .dloc-offers-media {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .dloc-offers-media img {
        border-radius: 20px;
        min-height: 200px;
    }
    .dloc-offers-body h3 {
        font-size: 22px;
        max-width: 100%;
    }
    .dloc-offers-sub {
        font-size: 16px;
    }
    .dloc-offers-list li {
        font-size: 16px;
    }
    .dloc-offers-info strong {
        font-size: 18px;
    }
    .dloc-offers-cta {
        min-width: 0;
        width: 100%;
        /* Was 300px — narrower than the text column it sits under, so the
           longest label ("Obtenez une estimation en ligne instantanée et
           gratuite.") broke onto three lines with the last one nearly empty.
           Filling the column gets it back to two and squares the button up
           with the copy above it. */
        max-width: 100%;
        padding: 14px 18px;
        line-height: 1.4;
    }
    .dloc-reviews {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .dloc-review-heading {
        font-size: 18px;
    }
    .dloc-map {
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        margin: 32px 0 24px;
    }
    .dloc-map-img {
        flex: 1;
    }
    .dloc-map-text {
        font-size: 16px;
        line-height: 60px;
        text-align: left;
    }
    .dloc-contact {
        grid-template-columns: 1fr;
        margin-top: 40px;
        min-height: auto;
    }
    .dloc-contact-img {
        min-height: 240px;
        max-height: 280px;
    }
    .dloc-contact-form-wrap {
        padding: 24px 20px;
    }
    .dloc-contact-form h2 {
        font-size: 42px;
    }
}

/* ========================================================================
   DELIVERY LOCATION PAGES — original (kept for backward compat)
   ======================================================================== */
.delivery-service-title {
    font-size: 32px;
    font-weight: 600;
    color: #32323b;
    padding: 32px 0 16px;
    margin: 0;
}
.content-row-link-title {
    text-decoration: none;
    display: inline-block;
}
.content-row-link-title:hover .content-row-title-blue {
    text-decoration: underline;
}
.content-row-title-blue {
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-ink-2,#3155E7);
    margin: 0 0 12px;
    cursor: pointer;
}

/* Phone button icon */
.btn-cta .btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Map callout (blue card with image + large text) */
.delivery-map-callout {
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    border-radius: 16px;
    padding: 32px;
    margin: 48px 0;
    display: flex;
    align-items: center;
    gap: 32px;
}
.delivery-map-image {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.delivery-map-image img {
    max-width: 100%;
    height: auto;
}
.delivery-map-text {
    flex: 1;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 500;
    color: #fff;
}

/* Contact form container (image left, form right) */
.delivery-contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 64px 0 48px;
    align-items: stretch;
}
.delivery-contact-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.delivery-contact-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.delivery-contact-form-wrap {
    display: flex;
    align-items: center;
    padding: 16px;
}
.delivery-contact-form {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.delivery-contact-title {
    color: var(--brand-ink,#061D5B);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}
.delivery-contact-form .form-label {
    color: #828282;
    font-weight: 300;
    font-size: 14px;
}
.delivery-contact-form .form-input,
.delivery-contact-form .form-textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
}
.delivery-contact-form .required {
    color: #ef4444;
}
.delivery-contact-form .btn-submit {
    width: 100%;
    margin-top: 8px;
}

/* Responsive adjustments for service pages */
@media (max-width: 1024px) {
    .social-accounts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .delivery-map-text {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .content-row {
        flex-direction: column;
        gap: 24px;
        padding: 20px 0;
    }
    .content-row .content-row-text {
        order: 1;
    }
    .content-row .content-row-media {
        order: 2;
    }
    .content-row-title {
        font-size: 22px;
    }
    .content-row-paragraph,
    .content-row-list {
        font-size: 16px;
        line-height: 26px;
    }

    .social-accounts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .social-account-text {
        min-height: auto;
    }

    .account-list-title {
        font-size: 20px;
    }
    .account-list li {
        font-size: 16px;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .testimonial-card {
        padding: 24px 20px;
    }

    .leave-review-panel {
        padding: 3rem;
    }
    .leave-review-title {
        font-size: 18px;
    }
    .leave-review-stars i {
        font-size: 32px;
    }

    .support-contact-title {
        font-size: 18px;
    }
    .support-email {
        font-size: 16px;
        max-width: 100%;
    }

    .delivery-service-title {
        font-size: 22px;
        padding: 20px 0 12px;
    }
    .content-row-title-blue {
        font-size: 20px;
    }
    .delivery-map-callout {
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }
    .delivery-map-image {
        flex: 1;
    }
    .delivery-map-text {
        font-size: 20px;
        text-align: center;
        line-height: 1.4;
    }
    .delivery-contact-container {
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 40px 0;
    }
    .delivery-contact-title {
        font-size: 28px;
    }
}

/* ========== MOVING SERVICES — MOBILE OVERRIDES ========== */
@media (max-width: 768px) {
    /* Taller banner on mobile */
    .service-banner {
        min-height: 420px;
        margin-top: 40px;
    }

    /* Instant online estimate CTA — fit content, don't stretch full width */
    .cta-btn-wide {
        width: auto;
        max-width: 90%;
        display: inline-block;
        padding: 12px 16px;
    }

    /* Force content order in service rows: Title/Description first, Image after */
    .service-flex-row,
    .service-flex-row-reverse,
    .service-flex-row-mt,
    .service-flex-row-margin {
        display: flex;
        flex-direction: column;
    }
    .service-flex-img {
        min-height: auto;
    }
    .service-flex-row > .service-flex-col:has(> .service-flex-img),
    .service-flex-row-reverse > .service-flex-col:has(> .service-flex-img),
    .service-flex-row-mt > .service-flex-col:has(> .service-flex-img),
    .service-flex-row-margin > .service-flex-col:has(> .service-flex-img) {
        order: 2;
    }
    .service-flex-row > .service-flex-col:not(:has(> .service-flex-img)),
    .service-flex-row-reverse
        > .service-flex-col:not(:has(> .service-flex-img)),
    .service-flex-row-mt > .service-flex-col:not(:has(> .service-flex-img)),
    .service-flex-row-margin
        > .service-flex-col:not(:has(> .service-flex-img)) {
        order: 1;
    }

    /* Our Offers tabs — horizontal scroll slider on mobile (legacy offer-tabs) */
    .offer-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        gap: 12px;
        padding: 4px 4px 12px;
        margin: 0 -4px;
        scrollbar-width: none;
    }
    .offer-tabs::-webkit-scrollbar {
        display: none;
    }
    .offer-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 180px;
        max-width: none;
        scroll-snap-align: start;
    }

    /* Our Offers tabs (dloc-offers) — horizontal scroll slider on mobile */
    .dloc-offers-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        gap: 12px;
        padding: 4px 4px 12px;
        margin: 0 -4px;
        scrollbar-width: none;
    }
    .dloc-offers-tabs::-webkit-scrollbar {
        display: none;
    }
    .dloc-offers-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 200px;
        max-width: none;
        scroll-snap-align: start;
    }
}

/* ========== BOXES & PACKAGING ACCESSORIES ========== */
.pkg-accessories {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
}

.pkg-accessories-viewport {
    flex: 1;
    overflow: hidden;
}

.pkg-accessories-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 3rem 1rem;
    scrollbar-width: none;
}
.pkg-accessories-track::-webkit-scrollbar {
    display: none;
}

.pkg-accessory-card {
    flex: 0 0 calc((100% - 24px * 3) / 5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.pkg-accessory-media {
    aspect-ratio: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.pkg-accessory-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 198px;
    max-height: 162px;
    margin-bottom: 0.5rem;
}

.pkg-accessory-title {
    font-size: 18px;
    font-weight: 700;
    color: #32323b;
    margin: 0 0 6px;
}

.pkg-accessory-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.35;
    margin: 0 0 10px;
    flex: 1;
}

.pkg-accessory-price {
    font-size: 18px;
    font-weight: 700;
    color: #1f9d55;
    margin: 0;
}

.pkg-accessories-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--brand-ink,#061D5B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition:
        background 0.15s,
        color 0.15s,
        transform 0.15s;
    padding: 0;
}

.pkg-accessories-arrow:hover {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
}

.pkg-accessories-arrow:active {
    transform: scale(0.95);
}

.pkg-accessories-footnote {
    text-align: center;
    font-size: 14px;
    color: #555;
    font-weight: 600;
    margin: 8px 0 32px;
}

.pkg-accessories-footnote-danger {
    color: #d32f2f;
}

@media (max-width: 768px) {
    .pkg-accessories {
        gap: 6px;
    }
    .pkg-accessory-card {
        flex: 0 0 calc((100% - 16px) / 2);
        padding: 12px;
    }
    .pkg-accessories-track {
        gap: 16px;
    }
    .pkg-accessory-title {
        font-size: 15px;
    }
    .pkg-accessory-desc {
        font-size: 12px;
    }
    .pkg-accessory-price {
        font-size: 16px;
    }
    .pkg-accessories-arrow {
        width: 28px;
        height: 28px;
    }
    .pkg-accessories-arrow svg {
        width: 8px;
        height: 14px;
    }
}

/* ==========================================================================
   ABOUT US PAGE — matching reference screenshot
   ========================================================================== */

/* Banner — inherits .service-banner heights (75vh → 85vh → 100vh) */
.about-banner {
}

/* "About Us" centered title */
.about-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-ink,#061D5B);
    text-align: center;
    margin: 20px 0 24px;
}

/* Blue arrow strip — band with pointed arrow head on the right
   (matches the existing .arrow-section polygon used elsewhere on the site) */
.about-arrow-strip {
    background-color: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    margin-bottom: 48px;
    clip-path: polygon(
        0% 30%,
        92% 30%,
        92% 0%,
        100% 50%,
        92% 100%,
        92% 70%,
        0% 70%
    );
}
.about-arrow-strip-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    padding: 0 6%;
}

/* Page body */
.about-page {
    color: #1f2937;
    padding-bottom: 40px;
}

/* Split row — image + text side by side */
.about-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 5.2%;
}
.about-split-media {
    border-radius: 10px;
    overflow: hidden;
}
.about-split-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Headings + body text */
.about-heading {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}
.about-heading-center {
    font-size: 26px;
    font-weight: 700;
    color: #32323b;
    text-align: center;
}
.about-subtitle-center {
    font-size: 16px;
    color: #6b7280;
    text-align: left;
    margin-bottom: 28px;
    line-height: 1.6;
}
.about-subheading {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    margin: 14px 0 8px;
}
.about-text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    text-align: left;
    margin: 8px 0px;
    font-weight: 300;
}

/* Dot-bullet list */
.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    font-weight: 300;
}
.about-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bg-main,#061D5B);
}

/* Chevron checklist */
.about-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.about-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 0px 8px;
    font-size: 16px;
    color: #404040;
    line-height: 1.5;
    /* border-bottom: 1px solid #e5e7eb; */
    font-weight: 300;
}
.about-check-list li:last-child {
    border-bottom: none;
}
.about-check-list li i {
    color: var(--brand-ink,#061D5B);
    font-size: 13px;
    flex-shrink: 0;
}

/* Mission / Vision / Values cards */
.about-mvv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 5.2%;
}
.about-card {
    text-align: center;
    padding: 80px 70px;
    background: #f6f6ff;
    border-radius: 12px;
}
.about-card-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.about-card-icon img {
    width: 84px;
    height: 84px;
    object-fit: contain;
}
.about-card-title {
    font-size: 30px;
    font-weight: 700;
    color: #32323b;
    margin: 2% 0%;
}

.about-card-text {
    font-size: 16px !important;
    color: #000000;
    line-height: 1.6;
    text-align: center;
    margin: 0;
    font-weight: 300;
    text-align: justify;
}

/* Digital/Human heading wrapper */
.about-digital-header {
    margin-bottom: 24px;
}

/* What we offer */
.about-offer-block {
    margin: 0px 0;
}
.about-offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 20px;
}
.about-offer-card {
    position: relative;
    border-radius: 10px;
    min-height: 130px;
    display: flex;
    padding: 14px 16px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    align-items: center;
    justify-content: center;
}
.about-offer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}
.about-offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.about-offer-label {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.about-offer-moving {
    background-image: url("../images/moving.png");
}
.about-offer-delivery {
    background-image: url("../images/Delivery.png");
}
.about-offer-storage {
    background-image: url("../images/storage.png");
}
.about-offer-packing {
    background-image: url("../images/Packing.png");
}

/* Our greatest Strength — blue block */
.about-strength {
    background: var(--bg-main,#061D5B);
    color: var(--brand-on-main,#fff);
    padding: 2.5rem;
    border-radius: 34px;
    text-align: center;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}
.about-strength-decor {
    position: absolute;
    right: 2%;
    bottom: 0;
    pointer-events: none;
    max-height: 80%;
}
.about-strength-heading {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}
.about-strength-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 1rem;
    font-weight: 100;
}

/* FAQ section */
.about-faq {
    text-align: center;
    margin: 30px 0 16px;
}
.about-faq-heading {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}
.about-faq-empty {
    font-size: 24px !important;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* ---- Tablet ≥ 768 px ---- */
@media (max-width: 768px) {
    .about-section-title {
        font-size: 26px;
        margin: 0px;
    }
    .about-card {
        padding: 48px 50px;
    }
    .about-split {
        display: flex;
        flex-direction: column-reverse;
    }
}
@media (min-width: 768px) {
    .about-section-title {
        font-size: 40px;
        margin: 32px 0 48px;
    }
    .about-arrow-strip {
        min-height: 200px;
    }
    .about-arrow-strip-inner {
        font-size: 22px;
    }

    .about-split {
        grid-template-columns: 1fr 1fr;
        gap: 7%;
    }
    .about-heading {
        font-size: 42px;
    }
    .about-heading-center {
        font-size: 46px;
    }
    .about-subtitle-center {
        font-size: 18px;
        text-align: center;
    }
    .about-subheading {
        font-size: 18px;
    }
    .about-text,
    .about-list li {
        font-size: 18px;
    }

    .about-mvv-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .about-card-title {
        font-size: 30px;
    }
    .about-card-text {
        font-size: 18px !important;
        font-weight: 300;
        text-align: justify;
    }

    .about-offer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .about-offer-card {
        min-height: 170px;
        align-items: end;
        justify-content: left;
    }
    .about-offer-label {
        font-size: 30px;
        padding: 16px;
    }

    .about-strength {
        padding: 78px;
    }
    .about-strength-heading {
        font-size: 46px;
    }
    .about-strength-text {
        font-size: 18px;
    }

    .about-faq-heading {
        font-size: 48px;
        margin-top: 4rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
}

/* ---- Desktop ≥ 1024 px ---- */
@media (min-width: 1024px) {
    .about-offer-card {
        min-height: 250px;
    }
    .about-arrow-strip {
        min-height: 380px;
    }
    .about-arrow-strip-inner {
        font-size: 40px;
    }
}

/* ========== Career Page (source-mirrored UI) ========== */
/* .career-banner-source inherits .service-banner heights (75vh → 85vh → 100vh) */
.career-banner-source .banner-bg-career-source {
    background-image: url("../images/blogdetail.png");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
}
.career-title-source {
    text-align: center;
    color: var(--brand-ink,#061D5B);
    font-size: 26px;
    font-weight: 700;
    margin: 24px 0 0;
}
@media (min-width: 768px) {
    .career-title-source {
        font-size: 40px;
    }
}
.career-page {
    padding: 0 7% 5%;
}

/* Split rows (IMG + TEXT) */
.career-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7%;
    align-items: center;
    margin: 4% 0 4% 0;
}
.career-split--reverse .career-split-media {
    order: 2;
}
.career-split-media img {
    width: 100%;
    height: auto;
    display: block;
}
.career-split-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.career-heading {
    font-size: 26px;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .career-heading {
        font-size: 42px;
        line-height: 1.15;
    }
}

.career-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.career-bullet-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #32323b;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 4px;
}
@media (min-width: 768px) {
    .career-bullet-list li {
        font-size: 18px;
    }
}
.career-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
    margin-top: 8px;
}

@media (max-width: 767px) {
    .career-split {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .career-split--reverse .career-split-media {
        order: 0;
    }
    .career-split:not(.career-split--reverse) .career-split-media {
        order: 2;
    }
}

/* Growth callout */
.career-growth {
    position: relative;
    background: var(--bg-main,#061D5B);
    border-radius: 34px;
    padding: 48px 48px;
    color: var(--brand-on-main,#fff);
    text-align: center;
    overflow: hidden;
    margin: 0px 0 32px;
}
@media (min-width: 768px) {
    .career-growth {
        min-height: 353px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
.career-growth-decor {
    position: absolute;
    right: 2%;
    bottom: 0;
    pointer-events: none;
    max-height: 90%;
}
.career-growth-heading {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}
@media (min-width: 768px) {
    .career-growth-heading {
        font-size: 46px;
    }
}
.career-growth-text {
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    margin: 0 auto;
    max-width: 680px;
    line-height: 1.5;
    text-align: center;
}
@media (min-width: 768px) {
    .career-growth-text {
        font-size: 22px;
    }
}

/* ==========================================================
   Testimonials slider — 3 cards on desktop, 1 on mobile
   ========================================================== */
.career-testimonials {
    margin: 48px 0;
    margin-top: 4%;
    padding-top: 2rem;
    position: relative;
}

/* Heading — centered above slider */
.career-testimonials-heading {
    text-align: center;
    color: #35343a;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 4.5%;
}
@media (min-width: 768px) {
    .career-testimonials-heading {
        font-size: 46px;
    }
}

/* Prev/next arrows — right-aligned on mobile, absolutely positioned
   on the top-right of the section on desktop so the heading stays
   perfectly centered. */
.career-testimonials-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 12px;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .career-testimonials-nav {
        position: absolute;
        top: 0;
        right: 0;
        margin-bottom: 0;
    }
}
.career-testimonial-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--btn-cta,#00007E);
    color: var(--btn-cta-ink,#fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        opacity 0.2s;
    padding: 0;
}
.career-testimonial-nav svg {
    display: block;
}
.career-testimonial-nav:hover {
    background: var(--btn-cta,#0A2A7A);
}
.career-testimonial-nav:disabled {
    cursor: not-allowed;
}

/* Viewport clips; track slides via JS transform */
.career-testimonials-viewport {
    overflow: hidden;
    padding: 8px 0 16px;
    /* padding-top: 3.5%; */
}
.career-testimonials-track {
    display: flex;
    /* Always row so translateX in the slider JS actually moves the track —
       on mobile the cards each take 100% of the viewport so only one is
       visible at a time and the prev/next + dots paginate through them. */
    flex-direction: row;
    gap: 20px;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Card — soft grey quote card */
.career-testimonial-card {
    background: #f6f6ff;
    border-radius: 16px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

/* Decorative quote mark */
.career-testimonial-quote {
    color: var(--brand-ink,#061D5B);
    font-size: 36px;
    line-height: 1;
    display: inline-block;
}

.career-testimonial-title {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
}
.career-testimonial-text {
    color: #4b5563;
    font-size: 22px;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}
.career-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
}
.career-testimonial-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.career-testimonial-author strong {
    display: block;
    color: var(--brand-ink,#061D5B);
    font-size: 22px;
    font-weight: 700;
}
.career-testimonial-author span {
    display: block;
    color: #6b7280;
    font-size: 19px;
    margin-top: 2px;
}

/*blog-child-author*/

.blog-child-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2%;
    margin-bottom: 3%;
}
.blog-child-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.blog-child-author strong {
    display: block;
    color: #000000;
    font-size: 16px;
    font-weight: 300;
}
.blog-child-author span {
    display: block;
    color: #000000;
    font-size: 22px;
    font-weight: 500;
    margin-top: 2px;
}

/* Pagination dots */
.career-testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.career-testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    padding: 0;
    transition:
        background 0.2s,
        transform 0.2s;
}
.career-testimonial-dot {
    min-height: 15px !important;
    width: 15px !important;
}

.career-testimonial-dot.is-active {
    background: var(--bg-main,#061D5B);
    transform: scale(1.25);
}

/* Desktop — show 3 cards */
@media (min-width: 768px) {
    .career-testimonial-card {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
        padding: 32px 30px 28px;
    }
     .review-testimonial-card {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
        padding: 32px 30px 28px;
    }
    .career-testimonial-quote {
        font-size: 42px;
    }
    .career-testimonial-title {
        font-size: 25px;
        margin: 2% 0 0 0;
    }
}

/* Slider sizing for service-location review cards (.dloc-review) when they
   live inside the shared <x-testimonials-slider> track. Mirrors the
   .career-testimonial-card sizing so 3 cards fit per viewport on desktop and
   each card spans full width on mobile, matching the original .dloc-reviews
   grid layout visually. */
.career-testimonials-track > .dloc-review {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .career-testimonials-track > .dloc-review {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}

/* ==========================================================
   Application form — "Apply now" block
   ========================================================== */
.career-apply-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: linear-gradient(90.23deg, #e0e0e0 0.17%, #fff 99.78%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(6, 29, 91, 0.08);
    margin: 0px 0;
    border: 1px solid #eef0f4;
}
.career-apply-img {
    background: var(--bg-main,#061D5B);
    position: relative;
    min-height: 220px;
}
.career-apply-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.career-apply-form-wrap {
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
}
.career-apply-intro {
    margin-bottom: 24px;
    text-align: center;
}
.career-apply-heading {
    color: var(--brand-ink,#061D5B);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

/* Form layout */
.career-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.career-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.career-form-group {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0;
}
.career-form-label {
    display: block;
    color: #828282;
    font-weight: 400;
    font-size: 16px;
    margin: 12px 0 0;
}

/* Inputs + select share the same clean pill look */
.career-form-input,
.career-form-select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    color: #111827;
    background: transparent;
    box-sizing: border-box;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        background 0.15s;
    font-family: inherit;
}
.career-form-select {
    background: #fff;
}
.career-form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}
.career-form-input:hover,
.career-form-select:hover {
    border-color: #c7d2fe;
}
.career-form-input:focus,
.career-form-select:focus {
    outline: none;
    border-color: var(--btn-cta,#061D5B);
    box-shadow: 0 0 0 4px rgba(6, 29, 91, 0.08);
}

/* Select wrap — custom chevron (removes default browser arrow) */
.career-form-select-wrap {
    position: relative;
}
.career-form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    cursor: pointer;
}
.career-form-select-chevron {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
    transition: color 0.15s;
}
.career-form-select:focus ~ .career-form-select-chevron {
    color: var(--brand-ink,#061D5B);
}

/* File upload — full-width dashed drop area */
.career-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    min-height: 56px;
    padding: 12px 22px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    background: #3b82f6;
    transition:
        background 0.15s,
        border-color 0.15s;
    text-align: center;
}
.career-upload-label:hover {
    background: #eef2ff;
    border-color: var(--btn-cta,#061D5B);
}
.career-upload-label svg {
    flex-shrink: 0;
}
.career-upload-label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Submit button */
.career-submit-btn {
    width: 100%;
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    border: 0;
    padding: 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition:
        background 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}
.career-submit-btn:hover {
    background: var(--btn-cta,#0A2A7A);
    box-shadow: 0 6px 20px rgba(6, 29, 91, 0.25);
}
.career-submit-btn:active {
    transform: translateY(1px);
}

/* ---- Desktop: image left + form right ---- */
@media (min-width: 768px) {
    .career-apply-block {
        grid-template-columns: 1fr 1.1fr;
    }
    .career-apply-img {
        min-height: auto;
    }
    .career-apply-img img {
        min-height: 100%;
    }
    .career-apply-form-wrap {
        padding: 48px 48px 44px;
        justify-content: center;
    }
    .career-apply-heading {
        font-size: 32px;
    }
    .career-form-row {
        grid-template-columns: 1fr;
    }
    .career-testimonials-track{
         display: flex;
         flex-direction: row;
         gap: 20px;
         transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    }
}

@media (min-width: 1024px) {
    .career-apply-heading {
        font-size: 38px;
    }
    .career-apply-form-wrap {
        padding: 56px 64px 52px;
    }
}

/* ========== Accreditations Page (source-mirrored UI) ========== */
/* .accred-banner inherits .service-banner heights (75vh → 85vh → 100vh) */
.banner-bg-accred {
    background-image: url("../images/blogdetail.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
}

.accred-title {
    text-align: center;
    color: var(--brand-ink,#061D5B);
    font-size: 26px;
    font-weight: 700;
    margin: 24px 0 0;
}
@media (min-width: 768px) {
    .accred-title {
        font-size: 40px;
    }
}

.accred-section {
    padding: 48px 0;
}
.accred-section--alt {
    background: #f6f6ff;
}

.accred-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6%;
    align-items: center;
    padding: 0 3%;
}
.accred-split--reverse .accred-split-media {
    order: 2;
}
.accred-split-media {
    display: flex;
    align-items: center;
    justify-content: center;
}
.accred-split-media img {
    max-width: 100%;
    height: auto;
    display: block;
}
.accred-split-media--sm img {
    max-width: 75%;
}
.accred-split-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.accred-heading {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .accred-heading {
        font-size: 42px;
    }
}

.accred-text {
    color: #32323b;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 16px;
}
@media (min-width: 768px) {
    .accred-text {
        font-size: 18px;
    }
}

.accred-download-btn {
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    width: 162px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 400;
    margin-top: 8px;
    transition: background 0.2s;
    font-size: 16px;
}
.accred-download-btn:hover {
    background: #000060;
    color: #fff;
}

@media (max-width: 767px) {
    .accred-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    /* Force: logo → description → download button on every section,
       including the reverse layout where body precedes media in the DOM. */
    .accred-split .accred-split-media {
        order: 0;
    }
    .accred-split .accred-split-body {
        order: 1;
    }
}

/* Our Blogs section */
.accred-blogs-section {
    padding: 3.5% 0;
}
.accred-blogs-heading {
    text-align: center;
    color: #32323b;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 0px;
}

.accred-blogs-subtitle {
    text-align: center;
    color: #404040;
    font-weight: 300;
    font-size: 18px;
    padding-bottom: 3.5%;
}
.accred-blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
@media (min-width: 768px) {
    .accred-blogs-heading {
        font-size: 46px;
    }

    .accred-blogs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
.accred-blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.accred-blog-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0.5rem;
}
.accred-blog-body {
    padding: 16px 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.accred-blog-body h3 {
    color: #32323b;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.accred-blog-date {
    color: var(--brand-ink,#00007E);
    font-size: 12px !important;
    margin: 0 0 8px;
}
.accred-blog-excerpt {
    color: #404040;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.accred-blog-btn {
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    align-self: flex-start;
    margin-top: 8px;
    font-size: 13px;
    width: 130px;
}
.accred-blog-btn:hover {
    background: #2544bd;
    color: #fff;
}

/* Blog index pagination — matches the site's navy primary palette and the
   `.btn-primary` button shape so it doesn't feel out of place under the grid. */
.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 32px 0 16px;
}
.blog-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--brand-ink,#061D5B);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-pagination-link:hover {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--btn-cta,#061D5B);
}
.blog-pagination-link.is-current {
    background: var(--btn-cta,#061D5B);
    color: var(--btn-cta-ink,#fff);
    border-color: var(--bg-main,#061D5B);
    cursor: default;
}
.blog-pagination-link.is-disabled {
    color: #9ca3af;
    background: #f9fafb;
    cursor: not-allowed;
}
.blog-pagination-link.is-disabled:hover {
    background: #f9fafb;
    color: #9ca3af;
    border-color: #d1d5db;
}
.blog-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 38px;
    color: #6b7280;
    font-size: 14px;
}

.accred-faq-section {
    padding: 30px 0 60px;
    background: #fff;
}

.accred-no-blog {
    text-align: center;
    color: #000;
    font-size: 22px;
    font-weight: 700;
    margin: 24px 0;
}

/*community posts*/

.community-section {
    padding: 48px 0;
}
.community-section--alt {
    background: #fff;
}

.community-blogs-section {
    padding: 3.5% 0;
}


/* .community-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
} */
 .community-blog-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
}

.community-blog-card {
    min-width: 350px;
    flex: 0 0 auto;
}
@media (min-width: 768px) {

    .community-blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
.community-blog-card {
    background: #f6f6ff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.community-blog-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0.5rem;
}
.community-blog-card-body {
    padding: 16px 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.community-blog-card-body h3 {
    color: #32323b;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.community-blog-date {
    color: var(--brand-ink,#00007E);
    font-size: 12px !important;
    margin: 0 0 8px;
}
.community-blog-excerpt {
    color: #404040;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.community-blog-btn {
    background: var(--bg-secondary,#3155E7);
    color: var(--brand-on-secondary,#fff);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    align-self: flex-start;
    margin-top: 8px;
    font-size: 13px;
    width: 130px;
}
.community-blog-btn:hover {
    background: #2544bd;
    color: #fff;
}

/*banner-background-privacy-policy*/

.banner-bg-privacy-policy {
    background-image: url("../images/Packingimg.png");
}

/* ========== FRONTEND FLASH BANNER ==========
   Used by the frontend layout to surface session('error') / session('success')
   messages right below the site header. */
.frontend-flash {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.frontend-flash > .container {
    /* Mobile-safe: overrides the global .container max-width so long
       messages still wrap inside the viewport instead of being clipped. */
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5;
}
.frontend-flash-error {
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    color: #991b1b;
}
.frontend-flash-success {
    background: #ecfdf5;
    border-bottom: 1px solid #a7f3d0;
    color: #065f46;
}
/* On mobile the home-page hero collapses .header-spacer to 0, which lets
   the 64 px fixed header overlap any content rendered right after the
   spacer — including this flash strip. Push the strip down by the
   header height so the success / error message stays visible (mirrors
   the same compensation .dashboard-layout uses). When the flash is
   immediately followed by .dashboard-layout, drop that layout's own
   64 px margin-top so the two don't stack into a double gap. */
@media (max-width: 768px) {
    .frontend-flash { margin-top: 64px; }
    .frontend-flash + .dashboard-layout { margin-top: 0; }
}
@media (max-width: 480px) {
    .frontend-flash {
        padding: 10px 0;
        font-size: 13px;
        text-align: left;
    }
    .frontend-flash > .container { padding: 0 12px; }
}