/* Styles for interior pages. */
.interior {
    --interior-accent: #c9ed46;
    --interior-ease: cubic-bezier(.2,.72,.25,1);
    --interior-frame: min(1200px, calc(100% - 48px));
    --interior-gap: clamp(24px, 4vw, 64px);
    background: #edf2f7;
}

.interior #main,
.interior :is(.footer-cta, .site-footer) {
    --ink: #141d35;
    --muted: #47566c;
    --paper: #edf2f7;
    --line: #d8e1ee;
    --navy: #17233c;
    --violet: #334e83;
    --lime: #c9ed46;
    --lime-2: #a8cf30;
}

.interior #main { padding-block-start: 117px; color: var(--ink); }
.interior #main .container { width: var(--interior-frame); }
.interior .site-noise { display: none; }

.interior #main :where(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid #4c64bf;
    outline-offset: 3px;
}

.interior #main :where(.section, article, .form-card, .tracking-result-section)[id] {
    scroll-margin-block-start: 142px;
}

@media (max-width: 850px) {
    .interior #main { padding-block-start: 107px; }
}

@media (max-width: 560px) {
    .interior { --interior-frame: calc(100% - 28px); }
}

/* Light editorial surfaces with technical panels for media and logistics. */
.interior #main :is(.page-hero, .tracking-hero) {
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: clamp(24px, 3.5vw, 54px) 0 clamp(28px, 4vw, 64px);
    background: #e8eef5;
    border-block-end: 1px solid #d5dfec;
    color: var(--ink);
}

.interior #main :is(.page-hero, .tracking-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(90deg, #7183a416 1px, transparent 1px),
                      linear-gradient(#7183a416 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(#000, transparent 96%);
    pointer-events: none;
}

.interior #main :is(.page-hero, .tracking-hero)::after {
    content: "";
    position: absolute;
    inset: auto;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: min(46%, 570px);
    height: 3px;
    border-radius: 0;
    filter: none;
    transform-origin: right;
    background: linear-gradient(90deg, transparent, #a6cb37 60%);
    pointer-events: none;
}
html[dir="ltr"] .interior #main :is(.page-hero, .tracking-hero)::after { transform-origin: left; }

.interior #main :is(.page-hero-grid, .tracking-wrap) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .87fr);
    align-items: stretch;
    gap: clamp(24px, 4vw, 58px);
    padding: clamp(21px, 4.15vw, 62px);
    background: #fff;
    border: 1px solid #d2ddea;
    border-radius: 20px;
    box-shadow: 0 13px 34px #18365a10;
}

.interior #main :is(.page-hero-grid, .tracking-wrap) > :first-child {
    min-width: 0;
    align-self: center;
}

.interior #main :is(.page-hero, .tracking-hero, .form-intro) h1 {
    max-width: 20ch;
    margin: 0 0 13px;
    color: #152442;
    font-size: clamp(2rem, 3.65vw, 4.15rem);
    line-height: 1.24;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.interior #main :is(.page-hero, .tracking-copy, .form-intro) p {
    max-width: 59ch;
    color: #47566c;
    font-size: clamp(.94rem, 1.08vw, 1.05rem);
    line-height: 1.9;
}

.interior #main :is(.page-hero, .form-intro) .breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    width: fit-content;
    padding: 2px 0;
    margin-block-end: 15px;
    background: transparent;
    color: #495979;
    border: 0;
    font-size: .8rem;
}
.interior #main :is(.page-hero, .form-intro) .breadcrumb a { color: #243e73; }

.interior #main :is(.page-hero, .tracking-hero, .form-intro) .eyebrow {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-block-end: 12px;
    padding: 5px 10px;
    color: #334962;
    background: #edf3f8;
    border: 1px solid #dce6ef;
    border-radius: 6px;
}
.interior #main :is(.page-hero, .tracking-hero, .form-intro) .eyebrow::before {
    width: 12px;
    background: #8cac2f;
}

.interior #main .page-hero h1::after { display: none; }

.interior #main .page-hero-grid > :nth-child(2),
.interior #main .tracking-visual {
    align-self: stretch;
    justify-self: stretch;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: clamp(200px, 23vw, 315px);
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border: 1px solid #25395d;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #a4b6d41b 1px, transparent 1px),
        linear-gradient(#a4b6d41b 1px, transparent 1px),
        linear-gradient(145deg, #172e50, #101b34);
    background-size: 27px 27px, 27px 27px, auto;
    box-shadow: none;
    animation: none;
    overflow: hidden;
    color: #e3edff;
}
.interior #main .page-hero-grid > :nth-child(2):hover { transform: none; }
.interior #main .page-hero-grid > :nth-child(2)::after {
    content: "";
    position: absolute;
    inset: auto 14px 14px auto;
    width: 26px;
    height: 10px;
    border: 0;
    border-inline-end: 2px solid #c9ed46;
    border-block-end: 2px solid #c9ed46;
    border-radius: 0;
    animation: none;
    pointer-events: none;
}
.interior #main .page-hero-mark img { width: min(170px, 55%); }
.interior #main .page-hero-icons { gap: clamp(9px, 1.2vw, 20px); }
.interior #main .page-hero-icons .icon { color: var(--interior-accent); }
.interior #main :is(.service-hero-icon, .contact-orbit) > .icon { color: var(--interior-accent); }
.interior #main .tracking-visual { display: grid; place-items: center; }
.interior #main .tracking-visual .radar { width: min(270px, 75%); height: auto; aspect-ratio: 1; }
.interior #main .tracking-help { color: #4b5970; }
.interior[data-page="laws"] #main .page-hero-grid { grid-template-columns: 1fr; }

.interior #main .section { padding-block: clamp(42px, 5.5vw, 82px); }
.interior #main :is(.section-head, .form-head) { margin-block-end: clamp(20px, 3.5vw, 38px); }
.interior #main :is(.section-head, .form-head) h2 {
    font-size: clamp(1.65rem, 2.4vw, 2.6rem);
    line-height: 1.35;
    text-wrap: balance;
}
.interior #main .section-head h2 {
    display: block;
    background: none;
    color: var(--ink);
}
.interior #main .section-head.centered h2 { border: 0; padding: 0; }
.interior #main .section-head h2::after {
    content: "";
    display: block;
    position: static;
    width: 42px;
    height: 3px;
    margin: 10px 0 0;
    translate: none;
    transform: none;
    opacity: 1;
    background: #94b928;
}
.interior #main .section-head.centered h2::after { margin-inline: auto; }
.interior #main :is(.mission-section, .values-section, .cargo-decision-section, .capability-stat-section) {
    background: #e6edf5;
}
.interior #main :is(.story-copy, .service-detail-copy, .career-copy) {
    max-width: 66ch;
    border-inline-start: 1px solid #a7b6d0;
    padding-inline-start: clamp(14px, 2.7vw, 33px);
}
.interior #main :is(.service-full-card, .industry-card, .related-card, .mission-card, .value-card,
    .contact-card, .location-card, .capability-stat, .capability-stack-card, .news-list-item,
    .tracking-placeholder > div, .shipment-card, .empty-result, .success-card) {
    min-width: 0;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 16px;
    box-shadow: 0 8px 26px #1424430b;
}
.interior #main :is(.service-full-card, .industry-card, .mission-card, .capability-stack-card, .contact-card) {
    padding: clamp(19px, 3vw, 34px);
}
.interior #main :is(.service-full-card, .related-card) .btn { max-width: 100%; white-space: normal; }
.interior #main .services-full-grid {
    gap: clamp(12px, 1.8vw, 22px);
    align-items: stretch;
}
.interior #main .service-full-card {
    grid-template-columns: minmax(42px, 63px) minmax(0, 1fr);
    align-items: start;
    border-radius: 12px;
}
.interior #main .service-full-card::before,
.interior #main .service-full-card::after { content: none; }
.interior #main .service-full-card h2 { line-height: 1.32; }
.interior #main .service-full-card .service-full-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}
.interior #main .service-full-card .service-full-icon svg { width: min(32px, 65%); }
.interior #main .service-full-icon {
    background: #eaf0f8;
    color: #34458b;
    border: 1px solid #d9e4f1;
    border-radius: 12px;
    box-shadow: none;
}
.interior #main :is(.service-full-card, .industry-card, .contact-card, .location-card, .related-card) {
    transition: border-color 160ms ease, box-shadow 180ms ease, translate 180ms var(--interior-ease);
}
@media (hover: hover) and (pointer: fine) {
    .interior #main :is(.service-full-card, .industry-card, .contact-card, .location-card, .related-card):hover {
        border-color: #9db45e;
        box-shadow: 0 14px 30px #14244314;
        translate: 0 -3px;
    }
}
.interior #main :is(.steps-dark, .service-selector, .ops-flow-section, .facility-section) {
    background: #101a35;
}
.interior #main :is(.steps-dark, .service-selector, .ops-flow-section, .facility-section) :is(.section-head h2, .section-head p) {
    color: #fff;
}
.interior #main :is(.mini-steps > div, .facility-stats > div) {
    background: #172340;
    border-color: #ffffff23;
    border-radius: 14px;
}
.interior #main .news-list-item { padding: clamp(12px, 2vw, 22px); }
.interior #main .news-list-art {
    border-radius: 12px;
    background: repeating-linear-gradient(140deg, #334f805c 0 1px, transparent 1px 18px), #142140;
}
.interior #main .news-list-art b { color: var(--interior-accent); }
.interior #main .faq-list details {
    border-radius: 12px;
    background: #fff;
    border-color: #dbe3ed;
    box-shadow: none;
}
.interior #main .faq-list details[open] {
    background: #f6f8ef;
    border-color: #adb990;
}
.interior #main .check-list .icon { flex: none; }
.interior #main .regulations-table { background: #fff; box-shadow: 0 6px 26px #1424430c; }
.interior #main .regulations-table thead { background: #14203d; color: #fff; }
.interior #main .regulations-table tbody tr:nth-child(even) { background: #edf2f8; }
.interior #main .regulations-table a { color: #32478c; }

@media (max-width: 620px) {
    .interior #main .regulations-table {
        display: block;
        background: transparent;
        box-shadow: none;
    }

    .regulations-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .regulations-table tbody {
        display: grid;
        gap: 10px;
    }

    .interior #main .regulations-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px 12px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid #d2ddea;
        border-radius: 10px;
    }

    .regulations-table tbody :is(th, td) {
        padding: 0;
        border: 0;
    }

    .regulations-table tbody th {
        grid-column: 1 / -1;
        font-size: .92rem;
        line-height: 1.65;
    }

    .regulations-table tbody td:first-of-type {
        color: #47566c;
        font-size: .81rem;
    }

    /* Keep the PDF action away from the floating WhatsApp button on the left. */
    html[dir="rtl"] .regulations-table tbody td:first-of-type {
        grid-column: 2;
        grid-row: 2;
    }

    html[dir="rtl"] .regulations-table tbody td:last-of-type {
        grid-column: 1;
        grid-row: 2;
    }

    .interior #main .regulations-table a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 58px;
        min-height: 44px;
        padding: 0 11px;
        color: #263d77;
        background: #edf2f8;
        border: 1px solid #c8d4e5;
        border-radius: 8px;
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
    }
}

.interior #main :is(.form-page, .success-page)::after { content: none; }
.interior #main .form-page {
    position: relative;
    isolation: isolate;
    padding: clamp(36px, 5.5vw, 76px) 0;
    background: #e7eef6;
}
.interior #main .form-page::before {
    background-image: linear-gradient(90deg, #6f88a51c 1px, transparent 1px), linear-gradient(#6f88a51c 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(#000, transparent 75%);
}
.interior #main .form-page-grid {
    align-items: start;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.15fr);
    gap: var(--interior-gap);
}
.interior #main .form-intro {
    padding: clamp(20px, 2.8vw, 42px);
    background: #f7fafd;
    border: 1px solid #cfdbeb;
    border-radius: 15px;
    box-shadow: none;
    backdrop-filter: none;
    color: #172b47;
}
.interior #main .form-intro :is(.form-benefits span, .form-side-contact small) { color: #364a64; }
.interior #main .form-intro .form-benefits span { background: #ebf1f8; border-color: #dce7f2; }
.interior #main .form-intro .form-benefits .icon { color: #617b22; }
.interior #main .form-intro .form-side-contact {
    margin-block-start: 22px;
    border-color: #dbe4f0;
    background: #fff;
    backdrop-filter: none;
}
.interior #main .form-intro .form-side-contact a { color: #253d6a; }
.interior #main .form-intro h1 { font-size: clamp(1.95rem, 3vw, 3.25rem); }
.interior #main .form-card {
    position: relative;
    min-width: 0;
    padding: clamp(18px, 3.3vw, 46px);
    background: #fff;
    border: 1px solid #d6e0ed;
    border-block-start: 4px solid #a6ce2e;
    border-radius: 18px;
    box-shadow: 0 18px 50px #0d1b4123;
}
.interior #main .form-card :is(input, select, textarea):not([type="checkbox"], [type="radio"]) {
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    background: #f7f9fc;
    border-color: #cad4e4;
    border-radius: 9px;
    color: var(--ink);
    font-size: .94rem;
}
.interior #main .form-card :is(input, select, textarea):focus {
    transform: none;
    background: #fff;
    border-color: #6177f0;
    box-shadow: 0 0 0 3px #6177f019;
}
.interior #main .form-card label { min-width: 0; }
.interior #main .form-card :is(input, textarea, select):user-invalid { border-color: #ae3138; }
.interior #main .form-card .btn { white-space: normal; }
.interior #main .tracking-search {
    border-radius: 14px;
    border: 1px solid #c4d0e03f;
    background: #ebf1f8;
    box-shadow: none;
}
.interior #main .tracking-search input { border-radius: 8px; }
.interior #main .tracking-visual .radar i { animation: none; }
.interior #main .tracking-result-section { background: #eef2f7; }
.interior #main .shipment-card { border-block-start: 4px solid #a6ce2e; }
.interior #main .shipment-meta > div { min-width: 0; overflow-wrap: anywhere; }
.interior #main .shipment-status { color: #152937; background: #d9ed9f; }
.interior #main .success-page {
    padding: clamp(40px, 6.5vw, 92px) 0;
    background: linear-gradient(180deg, #e3eaf3 0 52%, #edf2f7 52%);
}
.interior #main .success-card { border-block-start: 4px solid #a6ce2e; }
.interior #main .success-card h1 { text-wrap: balance; }
.interior #main .success-icon { color: #183448; background: #d7ee84; box-shadow: none; animation: none; }
.interior #main .btn-primary,
.interior .footer-cta .btn-primary {
    background: #c9f23e;
    color: #141b22;
    border: 1px solid #a4c82c;
    box-shadow: none;
}
.interior #main .btn:active { scale: .985; }
.interior .footer-cta { background: #d9f67f; color: #121b33; }
.interior .site-footer { background: #0d152d; }
.interior .site-footer .footer-grid { border-block-start: 1px solid #ffffff1a; }

/* Content is visible by default. Motion is an optional enhancement. */
.interior :is(.reveal, .motion-reveal) {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    translate: none;
}
.interior #main :is(.page-hero, .tracking-hero, .form-page) :is(.console-ring, .news-wave i, .cargo-orbit, .contact-orbit) {
    animation-iteration-count: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .interior #main :is(.page-hero, .tracking-hero)::after { animation: interior-route-in 620ms var(--interior-ease) both; }
}
@keyframes interior-route-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .interior *, .interior *::before, .interior *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 800px) {
    .interior #main :is(.page-hero-grid, .tracking-wrap, .form-page-grid) {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .interior #main :is(.page-hero, .tracking-hero) { padding-block: 19px 30px; }
    .interior #main :is(.page-hero, .tracking-hero, .form-intro) h1 { max-width: 22ch; }
    .interior #main .page-hero-grid > :nth-child(2),
    .interior #main .tracking-visual { display: none; }
    .interior #main .form-intro { padding: 16px; }
    .interior #main .form-intro .form-benefits { gap: 6px; margin-block: 13px; }
    .interior #main .form-intro .form-benefits span { padding-block: 5px; }
    .interior #main .form-intro .form-side-contact { margin-block-start: 13px; padding: 9px 12px; }
    .interior #main .success-actions { flex-wrap: wrap; }
}
@media (max-width: 430px) {
    .interior #main .form-grid { grid-template-columns: minmax(0, 1fr); }
    .interior #main .service-full-card { grid-template-columns: 44px minmax(0, 1fr); }
    .interior #main .shipment-progress { gap: 5px; }
    .interior #main .shipment-progress span { line-height: 1.45; font-size: .7rem; }
}

