/* City Hero Section Styles */



/* Font Imports */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');



/* Base Font Settings */

.city-hero-section {

    font-family: 'Plus Jakarta Sans', sans-serif;

}


.recommended-movers-grid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 22px;

    align-items: stretch;

}



.mover-card {

    background: rgb(255, 255, 255);

    border: 1px solid rgb(226, 232, 240);

    border-radius: 14px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 12px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    box-shadow: rgba(18, 48, 91, 0.05) 0px 2px 10px;

    transition: box-shadow 0.3s ease;

}



.mover-card:hover {

    box-shadow: rgba(18, 48, 91, 0.1) 0px 4px 20px;

}



.mover-card.editor-choice {

    border: 2px solid rgb(242, 111, 33);

    box-shadow: rgba(242, 111, 33, 0.18) 0px 10px 28px;

}



.mover-card.editor-choice:hover {

    box-shadow: rgba(242, 111, 33, 0.25) 0px 12px 32px;

}



.editor-choice-badge {

    background: rgb(242, 111, 33);

    color: rgb(255, 255, 255);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    padding: 6px 14px;

    border-radius: 999px;

    margin-bottom: 2px;

}



.mover-category-badge {

    background: rgb(253, 235, 221);

    color: rgb(192, 85, 18);

    font-size: 12.5px;

    font-weight: 700;

    padding: 5px 12px;

    border-radius: 999px;

}



.author-block {
    background: #ffffff;
    border: 1px solid #e4eefb;
    border-radius: 20px;
    padding:19px 32px;
}
.author-block__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.wrritenby {
    margin-bottom: 0;
}
.author-block__top {
    display: flex;
    align-items: center;
    gap: 16px;
}
.writer-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid #eef4fb;
}
.author-block__date {
    color: #53565b;
    font-size: 13px;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.author-block__badge {
    background: #eaf7ee;
    color: #1a8f4c;
    border: 1px solid #c8ecd4;
}
.author-block__badge svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
}

.author-block__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
     background: #eaf7ee;
    color: #1a8f4c;
    border: 1px solid #c8ecd4;
    font-size: 13px;
    font-weight: 600;
    font-family: "Plus Jakarta Sans", sans-serif;
    
    padding: 4px 12px;
    border-radius: 20px;
}
.mover-logo-link {

    height: 62px;

    display: flex;

    align-items: center;

    text-decoration: none;

}



.mover-logo {

    max-height: 58px;

    max-width: 190px;

    object-fit: contain;

}



.mover-logo-fallback {

    width: 56px;

    height: 56px;

    border-radius: 14px;

    background: rgb(18, 48, 91);

    color: rgb(255, 255, 255);

    font-size: 24px;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.mover-name {

    font-size: 18px;

    font-weight: 700;

    color: rgb(18, 48, 91);

}



.mover-rating {

    display: flex;

    align-items: center;

    gap: 8px;

}



.mover-stars {

    position: relative;

    display: inline-block;

    font-size: 17px;

    line-height: 1;

    color: rgb(216, 222, 231);

    letter-spacing: 2px;

}



.mover-stars-fill {

    position: absolute;

    left: 0px;

    top: 0px;

    overflow: hidden;

    white-space: nowrap;

    color: rgb(245, 166, 35);

}



.mover-rating-text {

    font-size: 14.5px;

    color: rgb(106, 122, 142);

}



.mover-rating-text strong {

    color: rgb(18, 48, 91);

}



.mover-cta-button {

    display: block;

    width: 100%;

    box-sizing: border-box;

    background: rgb(242, 111, 33);

    color: rgb(255, 255, 255);

    font-weight: 700;

    font-size: 15.5px;

    padding: 14px 0px;

    border-radius: 10px;

    text-align: center;

    margin-top: auto;

    text-decoration: none;

    transition: background 0.2s;

}



.mover-cta-button:hover {

    background: rgb(212, 94, 18);

}



.mover-footer-text {

    font-size: 12.5px;

    color: rgb(106, 122, 142);

}



/* Our Recommended Movers Section Responsive Styles */

@media (max-width: 992px) {

    .recommended-movers-grid {

        grid-template-columns: 1fr 1fr;

        gap: 18px;

    }

}



@media (max-width: 768px) {

    .recommended-movers-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .recommended-movers-section {

        padding: 30px 0px 10px;

    }



    .recommended-movers-title {

        font-size: 24px;

    }



    .recommended-movers-description {

        font-size: 14px;

    }

}



/* Intro Section Styles */

.intro-section {



    font-family: 'Plus Jakarta Sans', sans-serif;

}



.intro-content {



    display: flex;

    flex-direction: column;

    gap: 14px;

    font-size: 16.5px;

    line-height: 1.65;

    color: rgb(53, 72, 94);

}



.intro-content p {

    margin: 0px;

}


/* Paragraph Font Settings */

.city-hero-section p {

    font-family: 'Plus Jakarta Sans', sans-serif;

}



/* Global Paragraph Settings */

p {

    font-family: 'Plus Jakarta Sans', sans-serif;

}



/* Global Heading Settings - Noto Serif */

h1, h2, h3, h4, h5, h6 {

    font-family: 'Noto Serif', serif;

}



/* Span Styles */

span {

    font-family: 'Plus Jakarta Sans', sans-serif;

}



/* Table Styles */

table {

    width: 100%;

    border-collapse: collapse;

    font-family: 'Plus Jakarta Sans', sans-serif;

}



table th {

    background: rgb(18, 48, 91);

    color: rgb(255, 255, 255);

    text-align: left;

    padding: 13px 18px;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    font-weight: 600;

}



table td {

    padding: 13px 18px;

    border-top: 1px solid rgb(238, 242, 247);

    font-size: 15px;

    color: rgb(18, 48, 91);

}



table tr:nth-child(even) {

    background: rgb(248, 250, 252);

}



table tr:hover {

    background: rgb(243, 247, 252);

}



.city-hero-section {

    background: linear-gradient(rgb(18, 48, 91) 0%, rgb(23, 58, 108) 100%);

    color: rgb(255, 255, 255);

}



.city-hero-container {

    max-width: 1080px;

    margin: 0px auto;

    padding: 20px 20px 46px;

}



.city-hero-breadcrumb {

    font-size: 13px;

    color: rgb(159, 180, 210);

    margin-bottom: 22px;

}



.city-hero-breadcrumb a {

    color: rgb(159, 180, 210);

    text-decoration: none;

}



.city-hero-breadcrumb a:hover {

    color: rgb(255, 255, 255);

}



.city-hero-breadcrumb span {

    margin: 0px 6px;

}



.city-hero-breadcrumb-current {

    color: rgb(220, 230, 244);

}



.city-hero-grid {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 44px;

    align-items: start;

}



.city-hero-content {

    display: flex;

    flex-direction: column;

    margin: auto;

}





.city-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(242, 111, 33, 0.16);

    border: 1px solid rgba(242, 111, 33, 0.45);

    color: rgb(255, 178, 122);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    padding: 7px 14px;

    border-radius: 999px;

    margin-bottom: 14px;

    width:fit-content;

}



.city-hero-title {

   font-family: 'Noto Serif', serif;

    font-size: clamp(30px, 3.6vw, 42px);

    line-height: 1.2;

    font-weight: 700;

    margin: 0px 0px 14px;

    letter-spacing: -0.5px;

}



.city-hero-description {

    font-size: 17px;

    line-height: 1.65;

    color: rgb(201, 215, 235);

    margin: 0px 0px 22px;

    max-width: 620px;

}



.city-hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.city-hero-feature {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 10px;

    padding: 10px 16px;

    font-size: 14px;

}



.city-hero-feature strong {

    color: rgb(255, 178, 122);

}



.city-hero-form {

    background: rgb(255, 255, 255);

    border-radius: 16px;

    padding: 26px 26px 22px;

    box-shadow: rgba(4, 18, 42, 0.35) 0px 18px 44px;

    color: rgb(53, 72, 94);

}



.city-hero-form-title {

    margin: 0px 0px 18px;

    font-size: 21px;

    color: rgb(18, 48, 91);

    font-weight: 700;

    font-family: 'Plus Jakarta Sans', sans-serif;

}



.city-hero-form-inner {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.city-hero-form-label {

    display: block;

}



.city-hero-form-label span {

    display: block;

    font-size: 13px;

    font-weight: 600;

    color: rgb(18, 48, 91);

    margin-bottom: 5px;

}



.city-hero-form-input {

    width: 100%;

    box-sizing: border-box;

    height: 50px;

    border: 1.5px solid rgb(203, 214, 226);

    border-radius: 10px;

    padding: 0px 14px;

    font-size: 16px;

    font-family: 'Noto Serif', serif;

    color: rgb(18, 48, 91);

    outline: none;

}



.city-hero-form-input:focus {

    border-color: rgb(242, 111, 33);

}



.city-hero-form-button {

    height: 54px;

    border: none;

    border-radius: 10px;

    background: rgb(242, 111, 33);

    color: rgb(255, 255, 255);

    font-size: 17px;

    font-weight: 700;

    font-family: 'Noto Serif', serif;

    cursor: pointer;

    margin-top: 2px;

    transition: background 0.2s ease;

}



.city-hero-form-button.w-100 {

    width: 100%;

}



.city-hero-form-button:hover {

    background: rgb(212, 94, 18);

}



.city-hero-form-footer {

    margin: 12px 0px 0px;

    text-align: center;

    font-size: 13px;

    color: rgb(106, 122, 142);

}

a{

        font-family: 'Noto Serif';

}

.mgm-btn-sm {

    font-size: 13.5px;

    padding: 9px 14px;

        font-family: 'Noto Serif';

}

/* Responsive */

@media (max-width: 992px) {

    .city-hero-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .city-hero-form {

        box-shadow: rgba(4, 18, 42, 0.2) 0px 12px 30px;

    }

}



@media (max-width: 768px) {

    .city-hero-container {

        padding: 20px 15px 40px;

    }

    

    .city-hero-title {

        font-size: 28px;

    }

    

    .city-hero-description {

        font-size: 16px;

    }

    

    .city-hero-features {

        flex-direction: column;

    }

    

    .step {

        flex-direction: column;

        align-items: stretch;

    }

    

    .step > div {

        min-width: 100% !important;

    }

}

/* MGM Resources Section */

.mgm-resources-section {

    padding: 44px 0px 10px;

}



.mgm-resources-section h3 {

    margin: 0px 0px 6px;

    font-size: 22px;

    color: rgb(18, 48, 91);

    font-weight: 700;

}



.mgm-resources-section p {

    margin: 0px 0px 18px;

    font-size: 15.5px;

    color: rgb(106, 122, 142);

}



.mgm-resources-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

}.mgm-h3 {

      font-size: 20px;

    color: var(--mgm-navy);

    font-weight: 500;

    margin: 0 0 12px;

    line-height: 1.35;

}

.mgm-process-list {

    list-style: none;

    margin: 0 20px 20px;

    padding: 0;

}

.mgm-process-list li {

    position: relative;

    padding-left: 24px;

    margin: 0 0 21px;

    line-height: 1.7;

    color: var(--mgm-text);

        font-weight: 300;

}

.mgm-process-list li::before {

    content: "•";

    position: absolute;

    left: 0;

    color: var(--mgm-orange);

    

    font-weight: 700;

}

.mgm-process-list strong {

    color: var(--mgm-navy);

}

.mgm-lead {

     font-size: 16px;

    line-height: 1.7;

    margin: 0 0 20px;

    color: rgb(53, 72, 94);

    font-weight: 300;

}



/* === CHECKLIST CARD STYLES === */

.mgm-checklist-card {

    background: #ffffff;

    border: 1.5px solid #E2E8F0;

    border-left: 4px solid var(--mgm-orange);

    border-radius: 12px;

    padding: 24px;

}



.mgm-checklist-text {

    margin: 0;

    font-size: 16px;

    line-height: 1.7;

    color: var(--mgm-text);

}



.mgm-checklist-text a {

    color: #1B5FAE;

    font-weight: 600;

    text-decoration: none;

}



.mgm-checklist-text a:hover {

    color: var(--mgm-orange);

}

.mgm-h4 {

    font-size: 18px;

    color: var(--mgm-navy);

    font-weight: 500;

    margin: 0 0 12px;

    line-height: 1.35;

}

.mgm-note {

    margin: 18px 0 0;

    background: #FFF8F3;

    border: 1px solid #F6DFCB;

    border-radius: 12px;

    padding: 16px 18px;

    font-size: 15px;

    line-height: 1.65;

    color: var(--mgm-text);

}

.mgm-official-card {

    background: #ffffff;

    border: 1px solid var(--mgm-border);

    border-left: 5px solid var(--mgm-navy);

    border-radius: 12px;

    padding: 24px;

    box-shadow: 0 2px 10px rgba(18, 48, 91, 0.05);

}

/* === CITY MID-CONTENT SECTIONS ===

   Scope: city page mid content — "How to Choose", "How Much Do Movers Cost",

   "Mistakes to Avoid". All classes are prefixed .mgm- so nothing here can

   collide with or override existing city-page styles. Append to the end of

   the city-page stylesheet. No !important is used.

   Breakpoints: mobile < 768px · tablet 768–1023px · desktop >= 1024px

   ================================================================= */



/* --- Local tokens: fall back to the site variables when present ---------- */

.mgm-mid {

    --mgm-ink: var(--ink, #16202c);

    --mgm-muted: var(--muted, #5b6472);

    --mgm-line: #e6eaf0;

    --mgm-badge-bg: #eaf1fd;

    --mgm-badge-ring: #dbeafe;

    --mgm-card-radius: 12px;

    --mgm-card-shadow: 0 2px 10px rgba(16, 24, 40, .06);

    --mgm-card-shadow-hover: 0 6px 18px rgba(16, 24, 40, .10);

    --mgm-heading-font: 'Noto Serif', Georgia, serif;

    --mgm-body-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    margin-block: 48px;

}



/* --- Shared section shell: site-standard centered max width -------------- */

.mgm-shell {

    width: 100%;

    max-width: 1080px;

    

    padding-inline: 16px;

}



/* Outer white plate each section sits on (matches .section-card treatment) */





/* --- Typography ---------------------------------------------------------- */

.mgm-mid .mgm-h2 {

    font-family: var(--mgm-heading-font);

    font-size: 32px;

    line-height: 1.25;

    font-weight: 700;

    color: var(--mgm-ink);

    margin: 0 0 14px;

    text-wrap: pretty;

}



.mgm-mid .mgm-h3 {

    font-family: var(--mgm-heading-font);

    font-size: 22px;

    line-height: 1.3;

    font-weight: 700;

    color: var(--mgm-ink);

    margin: 8px 0 18px;

}



.mgm-mid .mgm-lead {

    font-family: var(--mgm-body-font);

    font-size: 16px;

    line-height: 28px;

    color: var(--mgm-muted);

    margin: 0 0 12px;

  

    text-wrap: pretty;

}

.qute-button{

   flex: 0 0 auto; height: 50px; padding: 0px 28px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 10px; background: rgb(242, 111, 33); color: rgb(255, 255, 255); font-size: 15.5px; font-weight: 700; font-family: 'Noto Serif', serif; cursor: pointer;

}

/* --- Icon badge (soft circle, shared by all three blocks) ---------------- */

.mgm-icon-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: var(--mgm-badge-bg);

    box-shadow: inset 0 0 0 1px var(--mgm-badge-ring);

}



.mgm-icon-badge img {

    display: block;

    width: 28px;

    height: 28px;

}



.mgm-icon-badge-sm {

    width: 48px;

    height: 48px;

}



.mgm-icon-badge-sm img {

    width: 24px;

    height: 24px;

}



/* --- 1. Tip grid (6 cards: 3 / 2 / 1 columns) ---------------------------- */

.mgm-tip-grid {

    margin-top: 26px;

}



/* Bootstrap columns are flex children, so equal-height cards come free */

.mgm-tip-grid > [class*="col-"] {

    display: flex;

}



.mgm-tip-card {

    display: flex;

    flex-direction: column;

    gap: 12px;

    width: 100%;

    background: #fff;

    border: 1px solid var(--mgm-line);

    border-radius: var(--mgm-card-radius);

    box-shadow: var(--mgm-card-shadow);

    padding: 24px;

    transition: box-shadow .2s ease, transform .2s ease;

}



.mgm-tip-card:hover {

    box-shadow: var(--mgm-card-shadow-hover);

    transform: translateY(-2px);

}



.mgm-mid .mgm-tip-title {

    font-family: var(--mgm-heading-font);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

    color: var(--mgm-ink);

    margin: 0;

}



.mgm-mid .mgm-tip-desc {

    font-family: var(--mgm-body-font);

    font-size: 15px;

    line-height: 26px;

    color: var(--mgm-muted);

    margin: 0;

}



/* --- 2. Cost section header row (text + primary pill CTA) --------------- */

.mgm-section-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;

}



.mgm-section-header-text {

    min-width: 0;

}



.mgm-section-header-text > :last-child {

    margin-bottom: 0;

}



/* Sizing only — colours/fill stay with the existing .qute-button style */

.mgm-header-cta {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;      /* >= 44px tap target */

    padding-inline: 28px;

    white-space: nowrap;

    text-decoration: none;

}



/* --- Cost factors (2 x 2 grid, tip-card styling) ------------------------ */

.mgm-factor-grid > [class*="col-"] {

    display: flex;

}



.mgm-cost-factor {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    width: 100%;

    background: #fff;

    border: 1px solid var(--mgm-line);

    border-radius: var(--mgm-card-radius);

    box-shadow: var(--mgm-card-shadow);

    padding: 22px;

    transition: box-shadow .2s ease;

}



.mgm-cost-factor:hover {

    box-shadow: var(--mgm-card-shadow-hover);

}



.mgm-cost-factor-body {

    min-width: 0;

}



.mgm-mid .mgm-factor-title {

    font-family: var(--mgm-heading-font);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

    color: var(--mgm-ink);

    margin: 0 0 6px;

}



.mgm-mid .mgm-factor-desc {

    font-family: var(--mgm-body-font);

    font-size: 15px;

    line-height: 26px;

    color: var(--mgm-muted);

    margin: 0;

}



/* CMS-managed copy that follows the grid inside the same section */

.mgm-rich-content {

    margin-top: 32px;

}



.mgm-rich-content > :last-child {

    margin-bottom: 0;

}



/* --- 3. Mistake step list (single column, generous rhythm) -------------- */

.mgm-step-list {

    list-style: none;

    margin: 28px 0 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.mgm-step-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    background: #fff;

    border: 1px solid var(--mgm-line);

    border-radius: var(--mgm-card-radius);

    box-shadow: var(--mgm-card-shadow);

    padding: 22px 24px;

        width: fit-content;

}



.mgm-step-body {

    min-width: 0;

    max-width: 78ch;

}



.mgm-mid .mgm-step-title {

    font-family: var(--mgm-heading-font);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;

    color: var(--mgm-ink);

    margin: 0 0 6px;

}



.mgm-mid .mgm-step-desc {

    font-family: var(--mgm-body-font);

    font-size: 15px;

    line-height: 27px;

    color: var(--mgm-muted);

    margin: 0;

}



/* --- Inline links inside these blocks ---------------------------------- */

.mgm-mid a:focus-visible {

    outline: 2px solid currentColor;

    outline-offset: 2px;

    border-radius: 4px;

}



/* --- Tablet: 768–1023px ------------------------------------------------- */

@media (max-width: 1023px) {

    

    .mgm-mid .mgm-h2 {

        font-size: 28px;

    }

}



/* --- Mobile: < 768px ---------------------------------------------------- */

@media (max-width: 767px) {

    .mgm-mid {

        margin-block: 32px;

    }



 

    .mgm-mid .mgm-h2 {

        font-size: 24px;

    }



    .mgm-mid .mgm-h3 {

        font-size: 20px;

    }



    /* Header row stacks; CTA becomes a full-width pill */

    .mgm-section-header {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

    }



    .mgm-header-cta {

        width: 100%;

        min-height: 48px;

    }



    .mgm-tip-card,

    .mgm-cost-factor,

    .mgm-step-item {

        padding: 20px 18px;

    }



    .mgm-cost-factor,

    .mgm-step-item {

        gap: 14px;

    }



    .mgm-mid .mgm-tip-title,

    .mgm-mid .mgm-factor-title,

    .mgm-mid .mgm-step-title {

        font-size: 18px;

    }

}



/* --- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .mgm-tip-card,

    .mgm-cost-factor {

        transition: none;

    }



    .mgm-tip-card:hover {

        transform: none;

    }

}