/* =========================================================
   PREMIUM SEA FREIGHT PAGE
   Gold / White / Black | responsive | all declarations !important
========================================================= */

.sea-freight-page {
    --sf-gold: #c9a45c !important;
    --sf-gold-light: #ead7a9 !important;
    --sf-black: #111111 !important;
    --sf-white: #ffffff !important;
    color: #252525 !important;
    background: #ffffff !important;
    overflow: clip !important;
}

.sea-freight-page *,
.sea-freight-page *::before,
.sea-freight-page *::after {
    box-sizing: border-box !important;
}

.sea-freight-page h1,
.sea-freight-page h2,
.sea-freight-page h3,
.sea-freight-page p {
    margin-top: 0 !important;
}

.sea-freight-page a {
    text-decoration: none !important;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease !important;
}

.sea-freight-page button {
    font: inherit !important;
}

.sea-freight-page .sf-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
}

.sea-freight-page .sf-breadcrumb {
    padding: 17px 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #eee9df !important;
}

.sea-freight-page .sf-breadcrumb .sf-container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 11px !important;
    color: #888 !important;
    font-size: 11px !important;
}

.sea-freight-page .sf-breadcrumb a {
    color: #555 !important;
}

.sea-freight-page .sf-breadcrumb a:hover {
    color: #a7833e !important;
}

.sea-freight-page .sf-breadcrumb .fa-angle-right {
    color: #c9a45c !important;
}

.sea-freight-page .sf-hero {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 545px !important;
    padding: 88px 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background-color: #111 !important;
    background-image: url("../images/water-dark.jpg") !important;
    background-size: cover !important;
    background-position: center 54% !important;
}

.sea-freight-page .sf-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.79) 49%, rgba(8,8,8,.25) 100%) !important;
}

.sea-freight-page .sf-hero-inner {
    position: relative !important;
}

.sea-freight-page .sf-hero-copy {
    max-width: 760px !important;
}

.sea-freight-page .sf-eyebrow,
.sea-freight-page .sf-section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 19px !important;
    color: #c9a45c !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    line-height: 1.7 !important;
    text-transform: uppercase !important;
}

.sea-freight-page .sf-eyebrow > span {
    display: inline-block !important;
    width: 34px !important;
    height: 2px !important;
    background: #c9a45c !important;
}

.sea-freight-page .sf-hero h1 {
    margin-bottom: 23px !important;
    color: #fff !important;
    font-size: clamp(42px, 5.4vw, 70px) !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    line-height: 1.1 !important;
}

.sea-freight-page .sf-hero h1 em,
.sea-freight-page .sf-heading h2 em,
.sea-freight-page .sf-intro h2 em,
.sea-freight-page .sf-contact-card h2 em {
    color: #c9a45c !important;
    font-style: normal !important;
}

.sea-freight-page .sf-hero-copy > p {
    max-width: 610px !important;
    margin-bottom: 27px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
}

.sea-freight-page .sf-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    min-height: 51px !important;
    padding: 14px 21px !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    cursor: pointer !important;
}

.sea-freight-page .sf-button-gold {
    color: #111 !important;
    background: #c9a45c !important;
    border-color: #c9a45c !important;
}

.sea-freight-page .sf-button-gold:hover {
    color: #111 !important;
    background: #ead7a9 !important;
    border-color: #ead7a9 !important;
    transform: translateY(-2px) !important;
}

.sea-freight-page .sf-button-dark {
    color: #fff !important;
    background: #111 !important;
    border-color: #111 !important;
}

.sea-freight-page .sf-button-dark:hover {
    color: #111 !important;
    background: #c9a45c !important;
    border-color: #c9a45c !important;
}

.sea-freight-page .sf-hero-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 13px 23px !important;
    margin-top: 34px !important;
}

.sea-freight-page .sf-hero-points span {
    color: rgba(255,255,255,.84) !important;
    font-size: 10px !important;
}

.sea-freight-page .sf-hero-points i {
    margin-right: 6px !important;
    color: #c9a45c !important;
}

.sea-freight-page .sf-hero-badge {
    position: absolute !important;
    right: 30px !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 19px 23px !important;
    border: 1px solid rgba(201,164,92,.45) !important;
    background: rgba(17,17,17,.82) !important;
    color: #c9a45c !important;
}

.sea-freight-page .sf-hero-badge > i {
    font-size: 30px !important;
}

.sea-freight-page .sf-hero-badge span {
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.7px !important;
    line-height: 1.8 !important;
}

.sea-freight-page .sf-hero-bottomline {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #c9a45c, #ead7a9, transparent) !important;
}

.sea-freight-page .sf-intro {
    padding: 82px 0 !important;
    background: #fff !important;
}

.sea-freight-page .sf-intro-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 65px !important;
    align-items: start !important;
}

.sea-freight-page .sf-intro h2,
.sea-freight-page .sf-heading h2,
.sea-freight-page .sf-contact-card h2 {
    margin-bottom: 0 !important;
    color: #111 !important;
    font-size: clamp(32px, 3.7vw, 47px) !important;
    font-weight: 800 !important;
    letter-spacing: -1.2px !important;
    line-height: 1.2 !important;
}

.sea-freight-page .sf-intro-copy p {
    margin-bottom: 13px !important;
    color: #777 !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}

.sea-freight-page .sf-services {
    padding: 88px 0 90px !important;
    background: #f8f7f4 !important;
}

.sea-freight-page .sf-heading {
    max-width: 720px !important;
    margin: 0 auto 43px !important;
    text-align: center !important;
}

.sea-freight-page .sf-heading h2 {
    margin-bottom: 15px !important;
}

.sea-freight-page .sf-heading > p {
    margin-bottom: 0 !important;
    color: #777 !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
}

.sea-freight-page .sf-services-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 17px !important;
}

.sea-freight-page .sf-service-card {
    position: relative !important;
    display: flex !important;
    grid-column: span 2 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 300px !important;
    padding: 25px 23px 21px !important;
    overflow: hidden !important;
    border: 1px solid #e8e3d9 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #242424 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: 0 8px 28px rgba(18,18,18,.025) !important;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease !important;
}

.sea-freight-page .sf-service-card:nth-child(4) {
    grid-column: 2 / span 2 !important;
}

.sea-freight-page .sf-service-card:nth-child(5) {
    grid-column: 4 / span 2 !important;
}

.sea-freight-page .sf-service-card::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 3px !important;
    content: "" !important;
    background: #c9a45c !important;
    transition: width .3s ease !important;
}

.sea-freight-page .sf-service-card:hover {
    border-color: #d3b779 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 42px rgba(30,24,12,.08) !important;
}

.sea-freight-page .sf-service-card:hover::before,
.sea-freight-page .sf-service-card.is-selected::before {
    width: 100% !important;
}

.sea-freight-page .sf-service-card.is-selected {
    border-color: #c9a45c !important;
    background: linear-gradient(145deg, #fff 0%, #fffdf8 100%) !important;
    box-shadow: 0 14px 35px rgba(148,112,42,.12) !important;
}

.sea-freight-page .sf-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 23px !important;
}

.sea-freight-page .sf-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid #eee4ce !important;
    border-radius: 5px !important;
    background: #fbf7ee !important;
    color: #a7833e !important;
    font-size: 20px !important;
    flex: 0 0 48px !important;
}

.sea-freight-page .sf-card-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25px !important;
    height: 25px !important;
    border: 1px solid #ded8ca !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 10px !important;
    transition: all .25s ease !important;
}

.sea-freight-page .sf-service-card.is-selected .sf-card-check {
    border-color: #c9a45c !important;
    background: #c9a45c !important;
    color: #111 !important;
}

.sea-freight-page .sf-card-number {
    margin-bottom: 8px !important;
    color: #a7833e !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
}

.sea-freight-page .sf-card-title {
    display: block !important;
    margin-bottom: 12px !important;
    color: #161616 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -.45px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.sea-freight-page .sf-card-description {
    display: block !important;
    margin-bottom: 22px !important;
    color: #777 !important;
    font-size: 11px !important;
    line-height: 1.85 !important;
}

.sea-freight-page .sf-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding-top: 15px !important;
    border-top: 1px solid #f0ece4 !important;
}

.sea-freight-page .sf-card-footer > span {
    color: #8a806e !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
}

.sea-freight-page .sf-card-footer > span i {
    margin-right: 4px !important;
    color: #b99a56 !important;
}

.sea-freight-page .sf-card-footer b {
    flex: 0 0 auto !important;
    color: #a7833e !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.sea-freight-page .sf-card-footer b i {
    margin-left: 4px !important;
    transition: transform .2s ease !important;
}

.sea-freight-page .sf-service-card:hover .sf-card-footer b i,
.sea-freight-page .sf-service-card.is-selected .sf-card-footer b i {
    transform: translateX(3px) !important;
}

.sea-freight-page .sf-detail-panel {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 22px !important;
    margin-top: 25px !important;
    padding: 27px 30px !important;
    border: 1px solid #e6dcc7 !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: 0 12px 35px rgba(30,24,12,.035) !important;
}

.sea-freight-page .sf-detail-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 5px !important;
    background: #171717 !important;
    color: #d8b66e !important;
    font-size: 22px !important;
}

.sea-freight-page .sf-detail-label,
.sea-freight-page .sf-detail-action > span {
    display: block !important;
    margin-bottom: 8px !important;
    color: #a7833e !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
}

.sea-freight-page .sf-detail-copy h3 {
    margin-bottom: 7px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.sea-freight-page .sf-detail-copy p {
    max-width: 680px !important;
    margin-bottom: 0 !important;
    color: #777 !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
}

.sea-freight-page .sf-detail-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
}

.sea-freight-page .sf-info-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 18px !important;
    padding: 17px 20px !important;
    border: 1px solid #eae4d8 !important;
    border-radius: 4px !important;
    background: #fdfbf7 !important;
}

.sea-freight-page .sf-info-note > i {
    margin-top: 2px !important;
    color: #ad8b46 !important;
    font-size: 15px !important;
}

.sea-freight-page .sf-info-note p {
    margin-bottom: 0 !important;
    color: #80796e !important;
    font-size: 10px !important;
    line-height: 1.8 !important;
}

.sea-freight-page .sf-process {
    padding: 86px 0 !important;
    background: #fff !important;
}

.sea-freight-page .sf-heading-dark {
    margin-bottom: 40px !important;
}

.sea-freight-page .sf-process-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 17px !important;
}

.sea-freight-page .sf-process-item {
    position: relative !important;
    min-width: 0 !important;
    padding: 29px 27px !important;
    border: 1px solid #eee9df !important;
    background: #fff !important;
}

.sea-freight-page .sf-process-index {
    position: absolute !important;
    top: 20px !important;
    right: 22px !important;
    color: #e7dfd0 !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
}

.sea-freight-page .sf-process-item > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 43px !important;
    height: 43px !important;
    margin-bottom: 24px !important;
    border-radius: 4px !important;
    background: #f9f4e9 !important;
    color: #a7833e !important;
    font-size: 18px !important;
}

.sea-freight-page .sf-process-item h3 {
    margin-bottom: 9px !important;
    color: #171717 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.sea-freight-page .sf-process-item p {
    margin-bottom: 0 !important;
    color: #777 !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
}

.sea-freight-page .sf-contact-section {
    padding: 0 0 82px !important;
    background: #fff !important;
}

.sea-freight-page .sf-contact-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 35px !important;
    padding: 48px 49px !important;
    overflow: hidden !important;
    border-radius: 7px !important;
    background: #151515 !important;
    isolation: isolate !important;
}

.sea-freight-page .sf-contact-copy {
    position: relative !important;
    z-index: 1 !important;
    max-width: 620px !important;
}

.sea-freight-page .sf-contact-card h2 {
    margin-bottom: 15px !important;
    color: #fff !important;
}

.sea-freight-page .sf-contact-copy > p {
    max-width: 570px !important;
    margin-bottom: 0 !important;
    color: rgba(255,255,255,.68) !important;
    font-size: 12px !important;
    line-height: 1.9 !important;
}

.sea-freight-page .sf-contact-actions {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 17px !important;
    min-width: 205px !important;
}

.sea-freight-page .sf-contact-phone {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: #fff !important;
}

.sea-freight-page .sf-contact-phone > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(201,164,92,.55) !important;
    border-radius: 50% !important;
    color: #d7b66d !important;
}

.sea-freight-page .sf-contact-phone span {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.sea-freight-page .sf-contact-phone small {
    color: #c9a45c !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
}

.sea-freight-page .sf-contact-phone strong {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.sea-freight-page .sf-contact-watermark {
    position: absolute !important;
    right: 230px !important;
    bottom: -40px !important;
    z-index: -1 !important;
    color: rgba(255,255,255,.035) !important;
    font-size: 230px !important;
    transform: rotate(-10deg) !important;
}

@media (max-width: 1050px) {
    .sea-freight-page .sf-services-grid {
        gap: 13px !important;
    }

    .sea-freight-page .sf-service-card {
        padding: 22px 19px 19px !important;
    }

    .sea-freight-page .sf-card-title {
        font-size: 18px !important;
    }

    .sea-freight-page .sf-detail-panel {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .sea-freight-page .sf-detail-action {
        grid-column: 2 !important;
    }
}

@media (max-width: 767px) {
    .sea-freight-page .sf-container {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    .sea-freight-page .sf-hero {
        min-height: 530px !important;
        padding: 70px 0 75px !important;
        background-position: 57% center !important;
    }

    .sea-freight-page .sf-hero-overlay {
        background: linear-gradient(90deg, rgba(8,8,8,.93) 0%, rgba(8,8,8,.78) 68%, rgba(8,8,8,.54) 100%) !important;
    }

    .sea-freight-page .sf-hero h1 {
        font-size: clamp(37px, 9vw, 52px) !important;
        letter-spacing: -1.4px !important;
    }

    .sea-freight-page .sf-hero-copy > p {
        max-width: 520px !important;
        font-size: 12px !important;
    }

    .sea-freight-page .sf-hero-points {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 25px !important;
    }

    .sea-freight-page .sf-hero-badge {
        right: 18px !important;
        padding: 12px 15px !important;
    }

    .sea-freight-page .sf-hero-badge > i {
        font-size: 22px !important;
    }

    .sea-freight-page .sf-intro {
        padding: 58px 0 !important;
    }

    .sea-freight-page .sf-intro-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    .sea-freight-page .sf-intro h2,
    .sea-freight-page .sf-heading h2,
    .sea-freight-page .sf-contact-card h2 {
        font-size: clamp(30px, 7.5vw, 39px) !important;
        letter-spacing: -.8px !important;
    }

    .sea-freight-page .sf-services {
        padding: 62px 0 !important;
    }

    .sea-freight-page .sf-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .sea-freight-page .sf-service-card,
    .sea-freight-page .sf-service-card:nth-child(4),
    .sea-freight-page .sf-service-card:nth-child(5) {
        grid-column: auto !important;
        min-height: 285px !important;
        padding: 17px 14px 15px !important;
        border-radius: 6px !important;
    }

    .sea-freight-page .sf-service-card:nth-child(4) {
        grid-column: 1 / -1 !important;
        min-height: 245px !important;
    }

    .sea-freight-page .sf-card-top {
        margin-bottom: 17px !important;
    }

    .sea-freight-page .sf-card-icon {
        width: 39px !important;
        height: 39px !important;
        flex-basis: 39px !important;
        font-size: 17px !important;
    }

    .sea-freight-page .sf-card-check {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        font-size: 9px !important;
    }

    .sea-freight-page .sf-card-number {
        margin-bottom: 7px !important;
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
    }

    .sea-freight-page .sf-card-title {
        margin-bottom: 9px !important;
        font-size: clamp(15px, 4.2vw, 19px) !important;
        letter-spacing: -.3px !important;
        line-height: 1.3 !important;
    }

    .sea-freight-page .sf-card-description {
        margin-bottom: 16px !important;
        font-size: 10px !important;
        line-height: 1.7 !important;
    }

    .sea-freight-page .sf-card-footer {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 11px !important;
    }

    .sea-freight-page .sf-card-footer > span,
    .sea-freight-page .sf-card-footer b {
        font-size: 8px !important;
    }

    .sea-freight-page .sf-service-card:nth-child(4) .sf-card-footer {
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .sea-freight-page .sf-detail-panel {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 14px !important;
        margin-top: 17px !important;
        padding: 20px 17px !important;
    }

    .sea-freight-page .sf-detail-icon {
        width: 43px !important;
        height: 43px !important;
        font-size: 18px !important;
    }

    .sea-freight-page .sf-detail-copy h3 {
        font-size: 17px !important;
    }

    .sea-freight-page .sf-detail-copy p {
        font-size: 10px !important;
    }

    .sea-freight-page .sf-detail-action {
        grid-column: 1 / -1 !important;
        padding-top: 7px !important;
    }

    .sea-freight-page .sf-detail-action .sf-button {
        width: 100% !important;
    }

    .sea-freight-page .sf-info-note {
        padding: 14px !important;
    }

    .sea-freight-page .sf-info-note p {
        font-size: 9px !important;
    }

    .sea-freight-page .sf-process {
        padding: 60px 0 !important;
    }

    .sea-freight-page .sf-process-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .sea-freight-page .sf-process-item {
        padding: 22px !important;
    }

    .sea-freight-page .sf-process-item > i {
        margin-bottom: 17px !important;
    }

    .sea-freight-page .sf-contact-section {
        padding-bottom: 60px !important;
    }

    .sea-freight-page .sf-contact-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 27px !important;
        padding: 30px 22px !important;
    }

    .sea-freight-page .sf-contact-copy > p {
        font-size: 11px !important;
    }

    .sea-freight-page .sf-contact-actions {
        min-width: 0 !important;
        width: 100% !important;
    }

    .sea-freight-page .sf-contact-actions .sf-button {
        width: 100% !important;
    }

    .sea-freight-page .sf-contact-phone {
        justify-content: center !important;
    }

    .sea-freight-page .sf-contact-watermark {
        right: -12px !important;
        bottom: -12px !important;
        font-size: 140px !important;
    }
}

@media (max-width: 380px) {
    .sea-freight-page .sf-container {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .sea-freight-page .sf-hero h1 {
        font-size: 34px !important;
    }

    .sea-freight-page .sf-services-grid {
        gap: 9px !important;
    }

    .sea-freight-page .sf-service-card,
    .sea-freight-page .sf-service-card:nth-child(4),
    .sea-freight-page .sf-service-card:nth-child(5) {
        padding: 14px 10px 13px !important;
    }

    .sea-freight-page .sf-card-title {
        font-size: 15px !important;
    }

    .sea-freight-page .sf-card-description {
        font-size: 9px !important;
    }

    .sea-freight-page .sf-card-footer > span,
    .sea-freight-page .sf-card-footer b {
        font-size: 7px !important;
    }

    .sea-freight-page .sf-detail-panel {
        padding: 16px 13px !important;
    }

    .sea-freight-page .sf-contact-card {
        padding: 25px 17px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sea-freight-page *,
    .sea-freight-page *::before,
    .sea-freight-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =====================================================
   SEA FREIGHT — MOBILE SERVICE PICKER
   Mobile-only override. Desktop styles remain unchanged.
===================================================== */
@media (max-width: 767px) {
    .sea-freight-page .sf-services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        border-top: 1px solid #e8e3d9 !important;
    }

    .sea-freight-page .sf-service-card,
    .sea-freight-page .sf-service-card:nth-child(4),
    .sea-freight-page .sf-service-card:nth-child(5) {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) 24px !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 19px 2px !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-bottom: 1px solid #e8e3d9 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        text-align: left !important;
        transform: none !important;
        white-space: normal !important;
        transition: background .2s ease !important;
    }

    /* Use the existing decorative line as a numbered index on mobile. */
    .sea-freight-page .sf-service-card::before {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        padding-top: 1px !important;
        content: counter(sf-mobile-service, decimal-leading-zero) !important;
        color: #a7833e !important;
        background: none !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: .5px !important;
        line-height: 1.6 !important;
        transition: color .2s ease !important;
    }

    .sea-freight-page .sf-services-grid {
        counter-reset: sf-mobile-service !important;
    }

    .sea-freight-page .sf-service-card {
        counter-increment: sf-mobile-service !important;
    }

    .sea-freight-page .sf-card-top {
        display: contents !important;
    }

    .sea-freight-page .sf-card-icon {
        display: none !important;
    }

    .sea-freight-page .sf-card-check {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        margin: 0 !important;
        border: 1px solid #d8d0c3 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: transparent !important;
        font-size: 10px !important;
    }

    .sea-freight-page .sf-card-number {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 0 5px !important;
        color: #a7833e !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
        line-height: 1.5 !important;
    }

    .sea-freight-page .sf-card-title {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        margin: 0 0 7px !important;
        color: #171717 !important;
        font-size: 16px !important;
        font-weight: 750 !important;
        letter-spacing: -.25px !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere !important;
    }

    /* Keep mobile choices compact: show the number, title and selection control only. */
    .sea-freight-page .sf-card-description,
    .sea-freight-page .sf-card-footer {
        display: none !important;
    }

    .sea-freight-page .sf-card-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .sea-freight-page .sf-card-footer,
    .sea-freight-page .sf-service-card:nth-child(4) .sf-card-footer {
        grid-column: 2 / 4 !important;
        grid-row: 4 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 0 0 !important;
        border-top: 1px solid #f0ece4 !important;
    }

    .sea-freight-page .sf-card-footer > span,
    .sea-freight-page .sf-card-footer b {
        font-size: 10px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere !important;
    }

    .sea-freight-page .sf-card-footer b {
        color: #a7833e !important;
        white-space: nowrap !important;
    }

    .sea-freight-page .sf-service-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .sea-freight-page .sf-service-card.is-selected {
        padding-left: 10px !important;
        padding-right: 10px !important;
        border-bottom-color: #d8bd83 !important;
        background: #fffdf8 !important;
        box-shadow: inset 3px 0 0 #c9a45c !important;
    }

    .sea-freight-page .sf-service-card.is-selected::before {
        color: #8d6828 !important;
    }

    /* Make the selected-service summary and continuation action obvious. */
    .sea-freight-page .sf-detail-panel {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding: 18px 15px !important;
        border: 1px solid #e6dcc7 !important;
        border-radius: 6px !important;
        background: #fff !important;
    }

    .sea-freight-page .sf-detail-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 17px !important;
    }

    .sea-freight-page .sf-detail-label {
        margin-bottom: 6px !important;
        font-size: 8px !important;
        letter-spacing: 1.3px !important;
    }

    .sea-freight-page .sf-detail-copy h3 {
        margin-bottom: 7px !important;
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .sea-freight-page .sf-detail-copy p {
        font-size: 11px !important;
        line-height: 1.7 !important;
    }

    .sea-freight-page .sf-detail-action {
        grid-column: 1 / -1 !important;
        gap: 8px !important;
        padding-top: 12px !important;
        border-top: 1px solid #f0ece4 !important;
    }

    .sea-freight-page .sf-detail-action > span {
        margin-bottom: 0 !important;
    }

    .sea-freight-page .sf-detail-action .sf-button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 380px) {
    .sea-freight-page .sf-service-card,
    .sea-freight-page .sf-service-card:nth-child(4),
    .sea-freight-page .sf-service-card:nth-child(5) {
        grid-template-columns: 28px minmax(0, 1fr) 22px !important;
        column-gap: 9px !important;
        padding: 17px 1px !important;
    }

    .sea-freight-page .sf-card-title {
        font-size: 15px !important;
    }

    .sea-freight-page .sf-card-footer > span,
    .sea-freight-page .sf-card-footer b {
        font-size: 9px !important;
    }
}

/* Mobile refinement: hide SERVICE 01, SERVICE 02, etc. labels only on mobile. */
@media (max-width: 767px) {
    .sea-freight-page .sf-card-number {
        display: none !important;
    }
}