/* ==========================================================
   CARGONNECT LANDING PAGE — FINAL V1
   Existing homepage/nav/hero styling preserved first.
   New landing sections are added below.
========================================================== */

:root {
    --landing-yellow: #FFD53D;
    --landing-yellow-soft: #FFF4C7;
    --landing-orange: #D95B0B;
    --landing-orange-dark: #B84905;
    --landing-peach: #FFF0E7;
    --landing-navy: #16243A;
    --landing-text: #111111;
    --landing-muted: #6B7280;
    --landing-border: #E1E4E8;
    --landing-light: #F5F6F7;
    --landing-shadow: 0 8px 20px rgba(28, 36, 45, .10);
}


/* ==========================================================
   EXISTING HOME PAGE
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #111111;
}

button,
input,
textarea {
    font-family: 'Inter', Arial, sans-serif;
}

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


nav {
    display: flex;
    align-items: center;
    padding: 0 50px;

    height: 70px;

    position: sticky;
    top: 0;
    z-index: 1000;

    overflow: visible;

    background: #FFDB57;
}

.logo-banner {
    background: white;
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.25);
    height: 140px;
    display: flex;
    align-items: center;
    z-index: 10;
}

.logo-banner img {
    height: 100px;
    padding-top: 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    position: absolute;
    left: 0;
    right: 0;
    justify-content: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.nav-links li {
    pointer-events: auto;
}

.nav-links a {
    text-decoration: none;
    color: #000000;
    font-size: 1.1rem;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: #D35400;
}

.hero {
    height: 80vh;
    background:
        url("../images/backgrounds/cargo-bg-hp-without-yellow.png")
        no-repeat
        center
        center / cover;

    display: flex;
    align-items: center;

    padding-left: 100px;

    color: white;

    position: relative;
}

.hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.hero h1 {
    color: #ffffff;
    font-size: 3.5rem;
    margin-top: -20px;
}

.hero h1 span {
    color: #FFD53D;
    font-size: 3.5rem;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.hero-button-link {
    text-decoration: none;
}

.btn-primary,
.btn-secondary {
    background: #3a3a3a44;
    color: white;
    border: solid 1px white;
    padding: 15px 20px;
    font-size: 1rem;
    cursor: pointer;
}

.btn-primary:hover,
.btn-secondary:hover {
    background: #D35400;
    color: white;
    border: solid 1px white;
}

.tracking-box {
    background: white;
    display: flex;
    width: 85%;
    max-width: 1000px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.tracking-icon {
    background:
        url("../images/backgrounds/track-orange-with-bg-left.png")
        no-repeat
        center
        center / cover;

    color: white;
    padding: 20px;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
}

.tracking-input-area {
    padding: 30px;
    width: 70%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.tracking-input-area input {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Public tracking: scoped to preserve the rest of the landing page. */
.home-tracking-field { flex: 1; min-width: 0; }
.tracking-input-area .home-tracking-field input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; }
.tracking-validation { display: block; color: #a12b17; font-size: 14px; line-height: 1.5; text-align: left; }
.tracking-validation:empty { display: none; }
.tracking-validation:not(:empty) { margin-top: 8px; }
.public-tracking[hidden] { display: none !important; }
.public-tracking { padding-top: 66px; background: #fff; color: #252525; }
.public-tracking *, .public-tracking *::before, .public-tracking *::after { box-sizing: border-box; }
.public-tracking-banner { min-height: 180px; display: grid; place-items: center; padding: 40px 20px; background: #ffda39 url('../images/backgrounds/shipment-booking-form-yellow-header-bg.png') center / cover; }
.public-tracking-banner h2 { margin: 0; font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; color: #111; text-align: center; }
.public-tracking-body { background: #f0f1f2; padding: 24px 24px 54px; }
.public-tracking-tools, .public-tracking-search, .public-tracking-card { width: 100%; max-width: 806px; margin-left: auto; margin-right: auto; }
.public-tracking-tools { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.tracking-close { display: inline-flex; align-items: center; gap: 10px; padding: 7px 0; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #414141; cursor: pointer; }
.tracking-close span { font-size: 24px; line-height: 1; }
.public-tracking-searchbox { display: flex; align-items: center; min-height: 64px; border: 1px solid #858585; border-radius: 12px; background: white; overflow: hidden; box-shadow: 0 1px 3px #00000010; }
.tracking-package-icon { width: 32px; height: 32px; margin-left: 22px; flex-shrink: 0; color: #757575; }
.public-tracking-searchbox input { width: 100%; min-width: 0; flex: 1; border: 0; outline: 0; padding: 18px 16px; background: transparent; color: #222; font: inherit; font-size: 16px; }
.public-tracking-searchbox input::placeholder { color: #676767; }
.public-tracking-searchbox button { align-self: stretch; width: 68px; flex-shrink: 0; display: grid; place-items: center; border: 0; background: #ffda39; color: #c9550c; cursor: pointer; }
.public-tracking-searchbox button svg { width: 32px; height: 32px; }
.public-tracking-searchbox button:hover { background: #ffcc22; }
.public-tracking-searchbox:focus-within { outline: 3px solid #a74b0a; outline-offset: 3px; }
.public-tracking button:focus-visible, .tracking-input-area input:focus-visible, .tracking-input-area button:focus-visible { outline: 3px solid #994000; outline-offset: 3px; }
#tracking-search-hint { margin: 22px 0 0; text-align: center; font-size: 15px; line-height: 1.6; color: #414141; }
.public-tracking-card { margin-top: 52px; overflow: hidden; background: white; border-radius: 13px; box-shadow: 0 10px 25px #00000022; }
.tracking-card-bar { min-height: 52px; padding: 14px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; background: #ffda28; font-size: 15px; color: #222; overflow-wrap: anywhere; }
.tracking-status-badge { background: #ffffffa8; border-radius: 20px; padding: 5px 11px; font-size: 13px; font-weight: 600; }
.tracking-card-content { padding: 46px 44px 40px; }
.tracking-route { display: grid; grid-template-columns: 1fr 150px 1fr; gap: 24px; align-items: center; text-align: center; }
.tracking-place > span { display: block; margin-bottom: 8px; font-size: 13px; color: #636363; }
.tracking-place h3 { margin: 0; color: #242424; font-size: 18px; line-height: 1.4; text-transform: uppercase; overflow-wrap: anywhere; }
.tracking-route-arrow { color: #666; font-size: 13px; line-height: 1.4; }
.tracking-arrow-line { position: relative; height: 3px; margin-top: 12px; background: #b9b9b9; }
.tracking-arrow-line::after { content: ''; position: absolute; right: -1px; top: -5px; border-left: 15px solid #b9b9b9; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tracking-status-description { margin: 27px 0 0; text-align: center; font-size: 15px; line-height: 1.6; color: #444; }
.tracking-mode { text-align: center; margin: 9px 0 0; font-size: 14px; color: #636363; }
.tracking-timeline { margin: 38px 0 0; padding: 0; list-style: none; }
.tracking-event { position: relative; display: grid; grid-template-columns: 145px 22px 1fr; gap: 16px; padding: 0 0 28px; color: #555; }
.tracking-event:last-child { padding-bottom: 0; }
.tracking-event:not(:last-child)::after { content: ''; position: absolute; left: 171px; top: 21px; bottom: -1px; width: 2px; background: #d2d2d2; }
.tracking-event-time { text-align: right; font-size: 14px; line-height: 1.5; }
.tracking-event-time span { display: block; }
.tracking-event-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #767676; color: white; font-size: 14px; font-weight: 700; }
.tracking-event.is-latest { color: #242424; }
.tracking-event.is-latest .tracking-event-marker { background: #dc590f; }
.tracking-event-detail h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.4; font-weight: 700; }
.tracking-event-detail p { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.tracking-state { min-height: 305px; padding: 58px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tracking-state h3 { margin: 20px 0 8px; font-size: 20px; }
.tracking-state p { margin: 0; max-width: 480px; color: #565656; font-size: 15px; line-height: 1.6; }
.tracking-state-symbol { display: block; font-size: 72px; color: #8a8a8a; line-height: 1; }
.tracking-spinner { width: 42px; height: 42px; border: 4px dotted #dc590f; border-radius: 50%; animation: public-tracking-spin 1.1s linear infinite; }
.tracking-privacy, .tracking-timezone { max-width: 806px; margin: 22px auto 0; color: #575757; text-align: center; font-size: 13px; line-height: 1.6; }
.tracking-timezone { margin-top: 5px; }
.tracking-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes public-tracking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tracking-spinner { animation: none; } }
@media (max-width: 768px) {
    .public-tracking { padding-top: 126px; }
    .public-tracking-banner { min-height: 135px; }
    .public-tracking-body { padding: 20px 16px 36px; }
    .public-tracking-card { margin-top: 30px; }
    .tracking-card-content { padding: 30px 20px; }
    .tracking-route { grid-template-columns: 1fr 70px 1fr; gap: 12px; }
    .tracking-place h3 { font-size: 16px; }
    .tracking-route-arrow { font-size: 12px; }
    .tracking-event { grid-template-columns: 96px 22px 1fr; gap: 12px; }
    .tracking-event:not(:last-child)::after { left: 118px; }
    .tracking-event-time { font-size: 13px; }
    .tracking-package-icon { margin-left: 14px; width: 26px; }
    .public-tracking-searchbox input { padding-left: 10px; font-size: 14px; }
    .public-tracking-searchbox button { width: 55px; }
}
@media (max-width: 420px) {
    .tracking-route { grid-template-columns: 1fr; gap: 16px; }
    .tracking-route-arrow { width: 110px; margin: 0 auto; }
    .tracking-event { grid-template-columns: 22px 1fr; gap: 6px 12px; }
    .tracking-event-time { grid-column: 2; text-align: left; }
    .tracking-event-time span { display: inline; margin-right: 6px; }
    .tracking-event-marker { grid-row: 1 / span 2; grid-column: 1; }
    .tracking-event-detail { grid-column: 2; }
    .tracking-event:not(:last-child)::after { left: 10px; }
}

.btn-track {
    background: #FFD53D;
    border: none;
    padding: 15px 20px;
    font-weight: bold;
    cursor: pointer;
}


/* ==========================================================
   GLOBAL LANDING SECTION HELPERS
========================================================== */

.landing-kicker,
.contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #222;

    font-size: 14px;
    font-weight: 500;
}

.landing-kicker i,
.contact-kicker i,
.section-pill i {
    width: 5px;
    height: 5px;

    display: inline-block;

    border-radius: 50%;

    background: var(--landing-orange);
}


/* ==========================================================
   ABOUT SLIDER
========================================================== */

.landing-about {
    /*
     * The floating Tracking card remains white.
     * The full transition directly below the Hero stays yellow.
     *
     * Bottom padding is intentionally 0 so the About image/slide
     * ends exactly at the section edge with no white band underneath.
     */
    padding: 0;

    border-top: 68px solid #FFDB57;

    background: #ffffff;
}

.about-slider-shell {
    width: 100%;
    max-width: none;

    margin: 0;
}

.about-slider-tabs {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 0 auto 20px;
    padding: 0 20px;
}

.about-slider-tab {
    min-height: 38px;

    padding: 0 16px;

    border: 1px solid #DADDE1;
    border-radius: 999px;

    background: #ffffff;
    color: #4A515A;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.about-slider-tab:hover,
.about-slider-tab.active {
    border-color: #D95B0B;
    background: #FFF3E9;
    color: #B84805;
}

.about-slider-viewport {
    width: 100%;

    overflow: hidden;

    position: relative;

    background: #ffffff;

    cursor: ew-resize;

    -webkit-tap-highlight-color: transparent;
}

.about-slider-viewport:focus-visible {
    outline: 3px solid rgba(217, 91, 11, .24);
    outline-offset: -3px;
}

.about-slider-track {
    display: flex;

    width: 100%;

    transform: translateX(0);

    transition: transform .45s ease;
}

.about-slide {
    width: 100%;
    height: 680px;

    flex: 0 0 100%;

    position: relative;
    overflow: hidden;
}

.about-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 20px;
}

.about-slider-arrow {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid #D9DDE1;
    border-radius: 50%;

    background: #ffffff;
    color: #2D3339;

    font-size: 18px;

    cursor: pointer;
}

.about-slider-arrow:hover {
    border-color: #D95B0B;
    color: #D95B0B;
}

.about-slider-dots {
    display: flex;
    gap: 8px;
}

.about-slider-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #CDD1D6;

    cursor: pointer;
}

.about-slider-dot.active {
    width: 26px;
    border-radius: 999px;

    background: #D95B0B;
}


/* ----------------------------------------------------------
   About Us slide
---------------------------------------------------------- */

.about-us-slide {
    display: grid;
    grid-template-columns: 46% 54%;

    background: #ffffff;
}

.about-us-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;

    padding: 48px 36px 48px 9%;
}

.about-us-copy h2 {
    margin: 12px 0 24px;

    color: #0B0B0B;

    font-size: clamp(34px, 3.7vw, 50px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.about-us-copy h2 span {
    color: #D95B0B;
}

.about-us-copy p {
    max-width: 460px;

    margin: 0 0 18px;

    color: #181818;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.about-us-visual {
    height: 100%;
    min-width: 0;

    display: flex;
    align-items: stretch;
    justify-content: flex-end;

    overflow: hidden;
}

.about-us-visual img {
    width: 100%;
    height: 100%;

    display: block;

    /*
     * Fill the entire right-side panel so no white band appears
     * underneath the supplied About image.
     *
     * The asset was already prepared/cut for this layout, so filling
     * the panel directly gives the closest match to the reference.
     */
    object-fit: fill;
    object-position: right center;

    max-width: 100%;
}


/* ----------------------------------------------------------
   Process slide
---------------------------------------------------------- */

.process-slide {
    padding: 30px 7% 28px;

    background:
        linear-gradient(
            to bottom,
            #FFD53D 0,
            #FFD53D 36%,
            #FFFFFF 36%,
            #FFFFFF 100%
        );
}

.process-heading span {
    display: block;

    margin-bottom: 7px;

    color: #111;

    font-size: 16px;
    font-weight: 500;
}

.process-heading h2 {
    margin: 0;

    color: #050505;

    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.14;
}

.process-grid {
    width: min(1010px, 100%);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 26px 42px;

    margin: 30px auto 0;
}

.process-card {
    min-height: 185px;

    padding: 18px 28px;

    position: relative;

    border-radius: 8px;

    background: #ffffff;

    box-shadow: var(--landing-shadow);
}

.process-number {
    display: block;

    margin-bottom: 7px;

    color: #95989D;

    font-size: 13px;
    font-weight: 500;
}

.process-card > img {
    width: 54px;
    height: 54px;

    display: block;

    object-fit: contain;
}

.process-card h3 {
    margin: 12px 0 6px;

    color: #090909;

    font-size: 21px;
    font-weight: 700;
}

.process-card p {
    margin: 0;

    color: #242424;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.process-image-card {
    padding: 0;

    overflow: hidden;
}

.process-image-card .process-number {
    position: absolute;
    top: 20px;
    left: 26px;
    z-index: 2;

    color: #ffffff;

    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.process-image-card > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ----------------------------------------------------------
   How It Works slide
---------------------------------------------------------- */

.how-it-works-slide {
    padding: 28px 24px 30px;

    background:
        linear-gradient(
            rgba(255,255,255,.96),
            rgba(255,255,255,.96)
        ),
        url("../images/landingpage/dotted-services-bg-our-services.png")
        center
        bottom / cover
        no-repeat;
}

.how-heading {
    text-align: center;
}

.how-heading span {
    display: block;

    margin-bottom: 6px;

    color: #111;

    font-size: 17px;
    font-weight: 500;
}

.how-heading h2 {
    margin: 0;

    color: #050505;

    font-size: clamp(30px, 3.4vw, 43px);
    font-weight: 800;
    line-height: 1.05;
}

.journey-grid {
    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        44px
        minmax(120px, 1fr)
        44px
        minmax(120px, 1fr)
        44px
        minmax(120px, 1fr)
        44px
        minmax(120px, 1fr)
        44px
        minmax(120px, 1fr);

    align-items: start;

    gap: 0;

    margin: 44px auto 0;

    max-width: 1180px;
}

.journey-step {
    text-align: center;
}

.journey-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 12px;

    border-radius: 50%;

    overflow: hidden;

    background: #FFD53D;
}

.journey-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

.journey-step h3 {
    margin: 0;

    color: #101010;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.journey-step p {
    margin: 10px auto 0;

    color: #333;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

.journey-arrow {
    padding-top: 32px;

    color: #D95B0B;

    font-size: 32px;
    font-weight: 700;

    text-align: center;
}


/* ----------------------------------------------------------
   Why Choose slide
---------------------------------------------------------- */

.why-choose-slide {
    display: grid;
    grid-template-columns: 46% 54%;
    gap: 0;

    width: 100%;

    background: #ffffff;
}

.why-choose-image {
    height: 100%;
    min-width: 0;

    overflow: hidden;
}

.why-choose-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}

.why-choose-content {
    padding: 38px 7% 34px 4%;

    position: relative;

    background:
        linear-gradient(
            rgba(255,255,255,.93),
            rgba(255,255,255,.93)
        ),
        url("../images/landingpage/dotted-services-bg-our-services.png")
        right
        center / 78%
        no-repeat;
}

.why-choose-content h2 {
    margin: 0 0 28px;

    color: #070707;

    font-size: clamp(34px, 3.7vw, 50px);
    font-weight: 800;
    line-height: 1.03;
}

.why-list {
    display: grid;
    gap: 18px;
}

.why-item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;

    gap: 18px;
}

.why-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #FFD53D;
}

.why-icon svg {
    width: 38px;
    height: 38px;

    fill: none;
    stroke: #111;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.why-item h3 {
    margin: 0 0 3px;

    color: #111;

    font-size: 16px;
    font-weight: 700;
}

.why-item p {
    margin: 0;

    color: #444;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}


/* ==========================================================
   SERVICES PREVIEW
========================================================== */

.landing-services {
    padding: 82px 6% 86px;

    background:
        #ffffff
        url("../images/landingpage/dotted-services-bg-our-services.png")
        center
        75px / 82%
        no-repeat;

    text-align: center;
}

.landing-section-heading > span {
    display: block;

    margin-bottom: 6px;

    color: #111;

    font-size: 16px;
    font-weight: 500;
}

.landing-section-heading h2 {
    margin: 0;

    color: #D95B0B;

    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.02;
}

.service-preview-grid {
    width: min(1110px, 100%);

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

    gap: 38px;

    margin: 78px auto 55px;
}

.service-preview-card {
    overflow: hidden;

    border-radius: 14px;

    box-shadow: var(--landing-shadow);

    background: #ffffff;
}

.service-preview-card img {
    width: 100%;
    height: auto;

    display: block;
}

.services-toggle-btn {
    min-width: 200px;
    min-height: 46px;

    padding: 0 22px;

    border: none;

    background: #D95B0B;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.services-toggle-btn:hover {
    background: #B84905;
}


/* ==========================================================
   FULL SERVICES
========================================================== */

.full-services {
    width: min(1120px, 100%);

    margin: 80px auto 0;
    padding-top: 40px;

    border-top: 1px solid rgba(0,0,0,.08);
}

.full-services[hidden] {
    display: none !important;
}

.full-services-heading {
    margin-bottom: 58px;
}

.section-pill {
    min-height: 32px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 0 13px;

    border: 1px solid #C8CDD2;
    border-radius: 999px;

    background: #ffffff;
    color: #353B43;

    font-size: 12px;
    font-weight: 500;
}

.full-services-heading h3 {
    margin: 22px 0 0;

    color: #D95B0B;

    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.02;
}

.full-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 70px 48px;
}

.full-service-card {
    position: relative;

    min-height: 435px;

    border-radius: 26px;

    background: #ffffff;

    text-align: center;
}

.full-service-photo {
    width: 100%;
    height: 270px;

    display: block;

    border-radius: 26px;

    object-fit: cover;
}

.full-service-copy {
    width: 86%;
    min-height: 205px;

    margin: -88px auto 0;
    padding: 64px 24px 22px;

    position: relative;

    border-radius: 14px;

    background:
        linear-gradient(
            128deg,
            #ffffff 0%,
            #ffffff 76%,
            #fff0e8 76%,
            #fff0e8 100%
        );

    box-shadow: 0 7px 18px rgba(29, 37, 47, .12);
}

.full-service-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    position: absolute;
    top: -32px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 8px;

    background: #FFD53D;
}

.full-service-icon img {
    width: 40px;
    height: 40px;

    object-fit: contain;
}

.full-service-copy h4 {
    margin: 0;

    color: #10284D;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.full-service-copy p {
    margin: 22px 0 18px;

    color: #7A818A;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}

.full-service-copy button {
    border: none;
    background: transparent;

    color: #F0A800;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   ANNOUNCEMENTS WRAPPER
========================================================== */

.landing-announcements-anchor {
    background: #F1F1F1;
}


/* ==========================================================
   FAQ
========================================================== */

.landing-faq {
    padding: 80px 8% 98px;

    position: relative;
    overflow: hidden;

    background: #ffffff;
}

.landing-faq::after {
    content: "";

    width: 48%;
    height: 78%;

    position: absolute;
    top: 125px;
    right: -4%;

    pointer-events: none;

    opacity: .18;

    background:
        url("../images/landingpage/dotted-services-bg-our-services.png")
        center / contain
        no-repeat;
}

.faq-top,
.faq-list {
    position: relative;
    z-index: 1;
}

.faq-top {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: start;

    gap: 30px;

    width: min(1050px, 100%);

    margin: 0 auto 45px;
}

.faq-heading h2 {
    margin: 0;

    color: #D95B0B;

    font-size: clamp(44px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.05;
}

.faq-intro {
    padding: 0 0 0 44px;
}

.faq-intro p {
    max-width: 430px;

    margin: 0 0 28px;

    color: #222;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.faq-intro button {
    min-width: 150px;
    min-height: 44px;

    border: none;
    border-radius: 999px;

    background: #FFD53D;
    color: #101010;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.faq-list {
    width: min(1050px, 100%);

    display: grid;
    gap: 24px;

    margin: 0 auto;
}

.faq-item {
    overflow: hidden;

    border-radius: 14px;

    background: #FFF0E7;
}

.faq-question {
    width: 100%;
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 18px 0 22px;

    border: none;

    background: transparent;
    color: #111;

    text-align: left;

    cursor: pointer;
}

.faq-question span {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.faq-question i {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex: 0 0 28px;

    border-radius: 7px;

    background: #D95B0B;
    color: #ffffff;

    font-style: normal;
    font-size: 19px;
    font-weight: 500;

    transition: transform .2s ease;
}

.faq-question[aria-expanded="true"] i {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 22px 22px;

    color: #555D66;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}


/* ==========================================================
   CONTACT / INQUIRY
========================================================== */

.landing-contact {
    min-height: 650px;

    padding: 80px 8%;

    background:
        #D9793E
        url("../images/landingpage/inquire-page-bg-orange-with-drawing.png")
        center / cover
        no-repeat;
}

.contact-wrap {
    width: min(1000px, 100%);

    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;

    gap: 64px;

    margin: 0 auto;
}

.inquiry-card {
    min-height: 490px;

    padding: 42px 32px 32px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 9px 22px rgba(91, 44, 18, .16);
}

.inquiry-card h2 {
    margin: 0 0 38px;

    color: #0D2A58;

    font-size: 25px;
    font-weight: 700;
}

.inquiry-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.inquiry-card label {
    display: block;
}

.inquiry-card label > span {
    display: block;

    margin-bottom: 8px;

    color: #0D2A58;

    font-size: 10px;
    font-weight: 700;
}

.inquiry-card input,
.inquiry-card textarea {
    width: 100%;

    border: 1px solid #E1E4E8;

    background: #ffffff;
    color: #252B32;

    font-size: 12px;
    font-weight: 400;
}

.inquiry-card input {
    height: 42px;

    padding: 0 13px;
}

.inquiry-card textarea {
    height: 150px;

    padding: 12px 13px;

    resize: vertical;
}

.inquiry-card input:focus,
.inquiry-card textarea:focus {
    outline: none;

    border-color: #D95B0B;

    box-shadow: 0 0 0 3px rgba(217, 91, 11, .12);
}

.inquiry-message-field {
    margin-top: 22px;
}

.inquiry-submit-btn {
    width: 100%;
    min-height: 44px;

    margin-top: 30px;

    border: none;
    border-radius: 999px;

    background: #FFD53D;
    color: #111;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.inquiry-form-status {
    min-height: 18px;

    margin: 10px 0 0;

    color: #6B7280;

    font-size: 11px;
    font-weight: 500;

    text-align: center;
}

.contact-copy {
    color: #ffffff;
}

.contact-kicker {
    color: #ffffff;
}

.contact-kicker i {
    background: #FFD53D;
}

.contact-copy h2 {
    margin: 30px 0 32px;

    color: #ffffff;

    font-size: clamp(35px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.08;
}

.contact-lead {
    max-width: 540px;

    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.contact-copy hr {
    margin: 34px 0 38px;

    border: none;
    border-top: 1px solid rgba(255,255,255,.9);
}

.contact-copy h3 {
    margin: 0 0 28px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 700;
}

.contact-help-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;

    gap: 34px;
}

.contact-help-card {
    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 12px 20px 12px 0;

    overflow: hidden;

    border-radius: 18px;

    background: #ffffff;
    color: #202832;
}

.contact-help-card > img {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    object-fit: contain;
}

.contact-help-card span {
    display: block;

    margin-bottom: 7px;

    color: #737A83;

    font-size: 11px;
    font-weight: 500;
}

.contact-help-card strong {
    display: block;

    color: #D95B0B;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;

    overflow-wrap: anywhere;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {
    .nav-links {
        gap: 18px;
    }

    .nav-links a {
        font-size: .95rem;
    }

    .hero {
        padding-left: 60px;
    }

    .about-slide {
        height: 720px;
    }

    .process-grid {
        gap: 42px 30px;
    }

    .journey-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 24px;
    }

    .journey-arrow {
        display: none;
    }

    .service-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }
}


@media (max-width: 860px) {
    nav {
        height: auto;
        min-height: 70px;

        padding: 0 20px;
    }

    .logo-banner {
        height: 96px;
    }

    .logo-banner img {
        height: 64px;
        padding-top: 22px;
    }

    .nav-links {
        position: static;

        flex: 1;

        justify-content: flex-end;

        gap: 12px;

        padding-left: 22px;
    }

    .nav-links a {
        font-size: 12px;
    }

    .hero {
        min-height: 640px;
        height: auto;

        padding: 100px 34px 140px;
    }

    .hero h1,
    .hero h1 span {
        font-size: 2.8rem;
    }

    .tracking-box {
        width: calc(100% - 50px);
    }

    .about-slider-tabs {
        overflow-x: auto;

        justify-content: flex-start;

        padding-bottom: 5px;
    }

    .about-slide {
        height: auto;
        min-height: 680px;
    }

    .about-us-slide,
    .why-choose-slide {
        grid-template-columns: 1fr;
    }

    .about-us-copy {
        padding: 60px 8% 38px;
    }

    .about-us-visual {
        min-height: 330px;
    }

    .process-slide {
        padding: 46px 6% 50px;
    }

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

        gap: 24px;

        margin-top: 44px;
    }

    .journey-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 40px 24px;

        margin-top: 50px;
    }

    .why-choose-image {
        min-height: 320px;
    }

    .why-choose-content {
        padding: 48px 8%;
    }

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

    .faq-top {
        grid-template-columns: 1fr;
    }

    .faq-intro {
        padding-left: 0;
    }

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

    .contact-copy {
        order: -1;
    }
}


@media (max-width: 640px) {
    nav {
        align-items: flex-start;

        padding: 0 14px 10px;
    }

    .logo-banner {
        width: 126px;
        height: 86px;

        flex: 0 0 126px;
    }

    .logo-banner img {
        width: 100%;
        height: auto;

        padding-top: 18px;
    }

    .nav-links {
        width: calc(100% - 140px);

        overflow-x: auto;

        justify-content: flex-start;

        padding: 24px 0 8px 14px;

        white-space: nowrap;
    }

    .hero {
        padding-left: 22px;
        padding-right: 22px;
    }

    .hero h1,
    .hero h1 span {
        font-size: 2.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .tracking-box {
        width: calc(100% - 30px);

        flex-direction: column;

        bottom: -92px;
    }

    .tracking-icon,
    .tracking-input-area {
        width: 100%;
    }

    .tracking-input-area {
        flex-direction: column;
        align-items: stretch;

        padding: 20px;
    }

    .landing-about {
        padding-top: 0;
        border-top-width: 110px;
    }

    .about-slider-tab {
        flex: 0 0 auto;
    }

    .process-grid,
    .journey-grid,
    .service-preview-grid,
    .full-services-grid,
    .inquiry-two-column,
    .contact-help-grid {
        grid-template-columns: 1fr;
    }

    .process-slide {
        background:
            linear-gradient(
                to bottom,
                #FFD53D 0,
                #FFD53D 24%,
                #FFFFFF 24%,
                #FFFFFF 100%
            );
    }

    .journey-grid {
        max-width: 360px;
    }

    .service-preview-grid {
        gap: 24px;
    }

    .landing-services,
    .landing-faq,
    .landing-contact {
        padding-left: 18px;
        padding-right: 18px;
    }

    .full-service-card {
        max-width: 390px;
        margin: 0 auto;
    }

    .faq-heading h2 {
        font-size: 44px;
    }

    .faq-question span {
        font-size: 15px;
    }

    .contact-wrap {
        gap: 40px;
    }

    .inquiry-card {
        padding: 30px 20px;
    }
}


/* ==========================================================
   V1.1.2 — BUTTON-FREE ABOUT SLIDER SAFEGUARD
========================================================== */

.about-slider-tabs,
.about-slider-controls {
    display: none !important;
}


/* ==========================================================
   V1.1.4 — ABOUT VIEWPORT FIT
========================================================== */

@media (min-width: 861px) and (max-height: 850px) {
    .about-slide {
        height: 630px;
    }

    .about-us-copy {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .process-slide {
        padding-top: 24px;
        padding-bottom: 22px;
    }

    .process-grid {
        margin-top: 24px;
        gap: 20px 38px;
    }

    .process-card {
        min-height: 170px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .how-it-works-slide {
        padding-top: 22px;
        padding-bottom: 24px;
    }

    .journey-grid {
        margin-top: 34px;
    }

    .journey-icon {
        width: 80px;
        height: 80px;
    }

    .why-choose-content {
        padding-top: 30px;
        padding-bottom: 28px;
    }
}


/* ==========================================================
   V1.1.6 — ABOUT IMAGE PANEL FIT
========================================================== */

.about-us-visual {
    padding: 0;
    margin: 0;
    background: transparent;
}

.about-us-visual img {
    margin: 0;
    padding: 0;
}


/* ==========================================================
   V1.1.7 — ABOUT HEIGHT / BOTTOM GAP FIX
========================================================== */

.about-slider-shell,
.about-slider-viewport,
.about-slider-track,
.about-slide {
    margin-bottom: 0;
    padding-bottom: 0;
}

.about-us-slide,
.why-choose-slide {
    margin-bottom: 0;
}

.about-us-visual,
.why-choose-image {
    height: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
}

.about-us-visual img,
.why-choose-image img {
    height: 100%;
    margin-bottom: 0;
    vertical-align: top;
}


/* ==========================================================
   V1.1.8 — ABOUT SECTION POLISH
   Keeps the current working slider/navigation logic unchanged.
========================================================== */


/* ----------------------------------------------------------
   Sticky navbar separation
---------------------------------------------------------- */

.landing-nav {
    box-shadow:
        0 5px 14px rgba(17, 24, 39, .16);

    border-bottom:
        1px solid rgba(126, 92, 0, .10);
}


/* ----------------------------------------------------------
   About Us
   Shift the text block slightly toward the image.
---------------------------------------------------------- */

.about-us-copy {
    padding-left: 14%;
    padding-right: 18px;
}


/* ----------------------------------------------------------
   Our Process
   Center heading + make all six cards equal size.
---------------------------------------------------------- */

.process-heading {
    width: 100%;
    max-width: 1120px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.process-heading span,
.process-heading h2 {
    text-align: center;
}

.process-grid {
    width: min(1040px, 100%);

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, 178px);

    gap: 24px 42px;

    margin-top: 28px;
}

.process-card {
    width: 100%;
    height: 178px;
    min-height: 178px;

    padding: 16px 26px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.process-image-card {
    width: 100%;
    height: 178px;
    min-height: 178px;

    display: block;

    padding: 0;
}

.process-image-card > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ----------------------------------------------------------
   How It Works
   Move the journey down slightly and improve readability.
---------------------------------------------------------- */

.journey-grid {
    margin-top: 52px;
}

.journey-icon {
    width: 100px;
    height: 100px;

    margin-bottom: 14px;
}

.journey-step h3 {
    font-size: 16px;
    line-height: 1.22;
}

.journey-step p {
    max-width: 165px;

    margin-top: 11px;

    font-size: 12px;
    line-height: 1.42;
}

.journey-arrow {
    padding-top: 38px;

    font-size: 35px;
}


/* ----------------------------------------------------------
   Why Choose Seven Star Cargo
   Shift the text content slightly farther right.
---------------------------------------------------------- */

.why-choose-content {
    padding-left: 7%;
    padding-right: 6%;
}


/* ----------------------------------------------------------
   Smaller desktop widths
---------------------------------------------------------- */

@media (min-width: 861px) and (max-width: 1180px) {
    .about-us-copy {
        padding-left: 11%;
        padding-right: 16px;
    }

    .process-grid {
        width: min(930px, 100%);
        gap: 22px 28px;
    }

    .journey-icon {
        width: 92px;
        height: 92px;
    }

    .journey-step h3 {
        font-size: 15px;
    }

    .journey-step p {
        font-size: 11.5px;
    }

    .why-choose-content {
        padding-left: 6%;
        padding-right: 5%;
    }
}


/* ----------------------------------------------------------
   Mobile/tablet keeps stacked layouts comfortable.
---------------------------------------------------------- */

@media (max-width: 860px) {
    .about-us-copy {
        padding-left: 8%;
        padding-right: 8%;
    }

    .process-heading {
        text-align: center;
    }

    .process-grid {
        grid-template-rows: none;
    }

    .process-card,
    .process-image-card {
        height: auto;
        min-height: 185px;
    }

    .journey-grid {
        margin-top: 46px;
    }

    .journey-icon {
        width: 94px;
        height: 94px;
    }

    .why-choose-content {
        padding-left: 8%;
        padding-right: 8%;
    }
}


/* ==========================================================
   V1.1.9 — SERVICES SECTION POLISH
========================================================== */

/*
 * Pull the complete Services block upward so the
 * "Explore Our Full Services" button is visible without
 * needing to scroll past the four preview cards.
 */
.landing-services {
    padding-top: 38px;
    padding-bottom: 48px;

    background-position:
        center 42px;
}


/* Smaller, more balanced Services heading. */
.landing-section-heading > span {
    margin-bottom: 5px;

    font-size: 14px;
}

.landing-section-heading h2 {
    font-size: clamp(30px, 3.2vw, 40px);
    line-height: 1.04;
}


/*
 * Reduce the large vertical gap between the heading and cards,
 * and between the cards and the Full Services button.
 */
.service-preview-grid {
    gap: 34px;

    margin-top: 42px;
    margin-bottom: 30px;
}


/*
 * The supplied service PNG files already contain the complete
 * card artwork. Remove the extra white wrapper/frame that CSS
 * was adding around each image.
 */
.service-preview-card {
    overflow: visible;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.service-preview-card img {
    width: 100%;
    height: auto;

    display: block;

    border: 0;
    outline: 0;

    background: transparent;
}


/* Keep the Full Services action compact and clearly visible. */
.services-toggle-btn {
    min-width: 195px;
    min-height: 42px;

    padding: 0 20px;

    font-size: 12px;
}


/* Slightly tighter spacing before the expanded Full Services area. */
.full-services {
    margin-top: 60px;
}


/* ----------------------------------------------------------
   Medium desktop / laptop
---------------------------------------------------------- */

@media (min-width: 861px) and (max-height: 900px) {
    .landing-services {
        padding-top: 30px;
        padding-bottom: 38px;
    }

    .landing-section-heading h2 {
        font-size: clamp(28px, 3vw, 37px);
    }

    .service-preview-grid {
        margin-top: 34px;
        margin-bottom: 24px;
    }
}


/* ----------------------------------------------------------
   Tablet / mobile
---------------------------------------------------------- */

@media (max-width: 860px) {
    .landing-services {
        padding-top: 46px;
        padding-bottom: 54px;
    }

    .service-preview-grid {
        margin-top: 36px;
        margin-bottom: 28px;
    }
}


/* ==========================================================
   V1.1.10 — SERVICES SECTION HEIGHT FIX
========================================================== */

/*
 * Keep the current compact Services layout, but make the section
 * fill the usable viewport below the sticky navbar so the next
 * gray Announcements section is not visible at the bottom.
 *
 * min-height is used instead of a fixed height so expanding
 * "Full Services" can still naturally make the section taller.
 */
.landing-services {
    min-height: calc(100vh - 70px);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-bottom: 64px;
}


/*
 * Keep the preview content near the upper part of the section.
 * The additional height is absorbed below the Full Services button.
 */
.services-heading,
.service-preview-grid,
.services-toggle-btn,
.full-services {
    flex-shrink: 0;
}


/*
 * On shorter laptop screens, keep enough bottom breathing room
 * without pushing the button out of view.
 */
@media (min-width: 861px) and (max-height: 900px) {
    .landing-services {
        min-height: calc(100vh - 70px);
        padding-bottom: 52px;
    }
}


/*
 * On mobile/tablet the section should grow naturally because
 * the service cards stack vertically.
 */
@media (max-width: 860px) {
    .landing-services {
        min-height: auto;
    }
}


/* ==========================================================
   V1.1.12 — FAQ SECTION POLISH
========================================================== */

/*
 * Move the whole FAQ content slightly upward so the fourth
 * question is fully visible within the desktop viewport.
 */
.landing-faq {
    padding-top: 48px;
    padding-bottom: 72px;
}


/* Keep the top block compact and closer to the questions. */
.faq-top {
    margin-bottom: 30px;
}


/* Slightly smaller FAQ heading to better fit the screen. */
.faq-heading h2 {
    font-size: clamp(38px, 4.3vw, 54px);
    line-height: 1.02;
}


/* Slightly tighten intro spacing without changing content. */
.faq-intro p {
    margin-bottom: 22px;
}


/* Tighten the accordion list just enough to reveal the final item. */
.faq-list {
    gap: 18px;
}


/* Slightly reduce question height while keeping readability. */
.faq-question {
    min-height: 58px;
}


/* ----------------------------------------------------------
   Shorter laptop screens
---------------------------------------------------------- */

@media (min-width: 861px) and (max-height: 900px) {
    .landing-faq {
        padding-top: 38px;
        padding-bottom: 56px;
    }

    .faq-top {
        margin-bottom: 24px;
    }

    .faq-heading h2 {
        font-size: clamp(36px, 4vw, 50px);
    }

    .faq-list {
        gap: 16px;
    }

    .faq-question {
        min-height: 56px;
    }
}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 640px) {
    .landing-faq {
        padding-top: 42px;
        padding-bottom: 58px;
    }

    .faq-heading h2 {
        font-size: 38px;
    }
}


/* ==========================================================
   V1.1.13 — FAQ SECTION HEIGHT FIX
========================================================== */

/*
 * Keep the compact FAQ layout from V1.1.12, but make the white
 * FAQ section fill the usable viewport below the 70px sticky navbar.
 *
 * This prevents the orange Contact section from appearing at the
 * bottom while the FAQ section is active.
 *
 * min-height is used so opening an accordion can still make the
 * FAQ section grow naturally.
 */
.landing-faq {
    min-height: calc(100vh - 70px);

    box-sizing: border-box;
}


/*
 * Short laptop screens keep the same full-view behavior.
 */
@media (min-width: 861px) and (max-height: 900px) {
    .landing-faq {
        min-height: calc(100vh - 70px);
    }
}


/*
 * Mobile FAQ content stacks and may be taller than the viewport,
 * so let it size naturally there.
 */
@media (max-width: 860px) {
    .landing-faq {
        min-height: auto;
    }
}


/* ==========================================================
   V1.1.14 — CONTACT SECTION FIT / VISIBILITY FIX
========================================================== */

/*
 * Fit the complete Contact section inside the usable desktop
 * viewport below the 70px sticky navbar.
 *
 * min-height keeps the section full-screen while still allowing
 * it to grow if content becomes taller.
 */
.landing-contact {
    min-height: calc(100vh - 70px);

    display: flex;
    align-items: center;

    padding: 42px 7%;

    box-sizing: border-box;
}


/*
 * Give the two-column layout a little more horizontal room and
 * reduce the gap so the right-side content does not wrap too much.
 */
.contact-wrap {
    width: min(1120px, 100%);

    grid-template-columns: 46% 54%;

    gap: 48px;
}


/* -------------------------
   Inquiry form card
------------------------- */

.inquiry-card {
    min-height: 0;

    padding: 34px 30px 26px;
}

.inquiry-card h2 {
    margin-bottom: 28px;

    font-size: 24px;
}

.inquiry-two-column {
    gap: 18px;
}

.inquiry-message-field {
    margin-top: 18px;
}

.inquiry-card textarea {
    height: 130px;
}

.inquiry-submit-btn {
    min-height: 42px;

    margin-top: 24px;
}

.inquiry-form-status {
    min-height: 14px;

    margin-top: 7px;
}


/* -------------------------
   Right-side content
------------------------- */

.contact-copy h2 {
    margin: 20px 0 24px;

    font-size: clamp(34px, 3.5vw, 46px);
    line-height: 1.04;
}

.contact-lead {
    max-width: 560px;

    font-size: 14px;
    line-height: 1.35;
}

.contact-copy hr {
    margin: 24px 0 26px;
}

.contact-copy h3 {
    margin-bottom: 20px;

    font-size: 22px;
}

.contact-help-grid {
    gap: 22px;
}

.contact-help-card {
    min-height: 78px;

    gap: 12px;

    padding-right: 16px;

    border-radius: 16px;
}

.contact-help-card > img {
    width: 56px;
    height: 56px;

    flex-basis: 56px;
}

.contact-help-card span {
    margin-bottom: 5px;

    font-size: 10px;
}

.contact-help-card strong {
    font-size: 10.5px;
}


/* ----------------------------------------------------------
   Short laptop screens
---------------------------------------------------------- */

@media (min-width: 1101px) and (max-height: 900px) {
    .landing-contact {
        min-height: calc(100vh - 70px);

        padding-top: 30px;
        padding-bottom: 30px;
    }

    .inquiry-card {
        padding-top: 28px;
        padding-bottom: 22px;
    }

    .inquiry-card h2 {
        margin-bottom: 22px;

        font-size: 22px;
    }

    .inquiry-card textarea {
        height: 112px;
    }

    .inquiry-submit-btn {
        margin-top: 20px;
    }

    .contact-copy h2 {
        margin-top: 16px;
        margin-bottom: 18px;

        font-size: clamp(32px, 3.2vw, 42px);
    }

    .contact-copy hr {
        margin-top: 20px;
        margin-bottom: 22px;
    }

    .contact-copy h3 {
        margin-bottom: 16px;
    }

    .contact-help-card {
        min-height: 72px;
    }
}


/* ----------------------------------------------------------
   Tablet / mobile
   Preserve the stacked layout and natural content height.
---------------------------------------------------------- */

@media (max-width: 1100px) {
    .landing-contact {
        min-height: auto;

        display: block;

        padding-top: 56px;
        padding-bottom: 56px;
    }

    .contact-wrap {
        width: min(760px, 100%);
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* ==========================================================
   V1.1.15 — LANDING PAGE FOOTER
========================================================== */

.landing-footer {
    width: 100%;

    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px 24px;

    box-sizing: border-box;

    background: #FFDB57;
}

.landing-footer p {
    margin: 0;

    color: #111111;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-align: center;
}


/* Mobile */
@media (max-width: 640px) {
    .landing-footer {
        min-height: 56px;

        padding: 14px 18px;
    }

    .landing-footer p {
        font-size: 12px;
    }
}


/* ==========================================================
   V1.1.16 — CONTACT HELP ICON OUTSIDE-CARD FIX
========================================================== */

/*
 * Match the supplied UI reference:
 * the yellow phone/email icon block sits partly OUTSIDE the
 * white help card instead of being contained inside it.
 */
.contact-help-card {
    position: relative;

    overflow: visible;

    margin-left: 24px;

    padding:
        12px
        18px
        12px
        72px;
}


/*
 * Pull the complete supplied icon asset across the card edge.
 * The asset already includes the yellow square + dark triangle.
 */
.contact-help-card > img {
    position: absolute;

    left: -24px;
    top: 50%;

    width: 62px;
    height: 62px;

    margin: 0;

    transform: translateY(-50%);

    object-fit: contain;

    z-index: 2;
}


/* Keep the text vertically centered and clear of the icon. */
.contact-help-card > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Slightly restore the comfortable dimensions from the reference. */
.contact-help-card {
    min-height: 82px;

    border-radius: 18px;
}


/* Email text still wraps safely on narrower screens. */
.contact-help-card strong {
    overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   Short desktop / laptop screens
---------------------------------------------------------- */

@media (min-width: 1101px) and (max-height: 900px) {
    .contact-help-card {
        min-height: 76px;

        margin-left: 22px;

        padding-left: 68px;
    }

    .contact-help-card > img {
        left: -22px;

        width: 58px;
        height: 58px;
    }
}


/* ----------------------------------------------------------
   Tablet / mobile
---------------------------------------------------------- */

@media (max-width: 1100px) {
    .contact-help-card {
        margin-left: 22px;

        padding-left: 68px;
    }

    .contact-help-card > img {
        left: -22px;
    }
}


/* ==========================================================
   V1.1.17 — FAQ VERTICAL CENTERING
========================================================== */

/*
 * Keep the FAQ section height, padding, accordion sizes,
 * and viewport behavior exactly as they are.
 *
 * Only move the visible FAQ content slightly downward so the
 * whole group looks vertically centered inside the white section.
 */
.faq-top,
.faq-list {
    transform: translateY(22px);
}


/* Slightly smaller adjustment on shorter screens. */
@media (min-width: 861px) and (max-height: 900px) {
    .faq-top,
    .faq-list {
        transform: translateY(16px);
    }
}


/* Mobile keeps its natural stacked positioning. */
@media (max-width: 860px) {
    .faq-top,
    .faq-list {
        transform: none;
    }
}


/* ==========================================================
   CARGONNECT V1.1.19
   PUBLIC INQUIRY SUBMISSION STATUS
   ========================================================== */

.inquiry-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}

.inquiry-submit-btn:disabled {
    cursor: wait;

    opacity: .74;
}

.inquiry-form-status.success {
    color: #0B7138;
}

.inquiry-form-status.error {
    color: #A72820;
}