/*
Theme Name: OmniShield Express
Description: A distinctive navy, mint and copper identity for global logistics.
Version: 1.0.0
License: GPL-2.0-or-later
*/
@font-face { font-family: Manrope; src: url('assets/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root { --navy:#081c2b; --navy-soft:#102b3b; --mint:#a7f0d3; --ivory:#f7f6ef; --copper:#fa9572; --ink:#152d39; --quiet:#61727b; --line:#dde4df; font:16px/1.65 Manrope,Arial,Helvetica,sans-serif; color:var(--ink); background:var(--ivory); }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--copper); outline-offset:4px; }
.shell { width:min(90%,1320px); margin:auto; }
.announcement { background:var(--mint); font-size:.69rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.announcement .shell { display:flex; justify-content:space-between; padding:.6rem 0; }
.masthead { background:var(--navy); color:white; border-bottom:1px solid #ffffff1a; }
.masthead .shell { display:flex; align-items:center; gap:2rem; padding:1.35rem 0; }
.wordmark { display:flex; align-items:center; gap:.7rem; margin-right:auto; line-height:1.1; font-size:1.4rem; font-weight:700; letter-spacing:-.04em; }
.wordmark small { display:block; font-size:.56rem; font-weight:500; letter-spacing:.42em; margin-top:.4rem; }
.wordmark svg { width:40px; height:47px; color:var(--mint); flex-shrink:0; }
.main-nav { display:flex; gap:1.7rem; font-size:.8rem; }
.main-nav a { color:#d7e2e4; }
.main-nav a:hover { color:var(--mint); }
.button,button { display:inline-flex; align-items:center; justify-content:center; gap:1.8rem; border:0; border-radius:7px; padding:.9rem 1.3rem; font-size:.8rem; font-weight:700; cursor:pointer; background:var(--mint); color:var(--navy); }
.button.dark { background:var(--navy); color:white; }
.button.outline { background:transparent; color:inherit; border:1px solid #ffffff50; }
.hero { position:relative; overflow:hidden; background:var(--navy); color:var(--ivory); }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; min-height:660px; align-items:center; gap:1rem; padding-block:4rem 6rem; }
.hero-copy { max-width:660px; }
.eyebrow { font-size:.64rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
.hero .eyebrow { color:var(--mint); display:flex; gap:.8rem; align-items:center; }
.eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--copper); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.055em; line-height:1.07; }
h1 { font-size:clamp(3.5rem,5.9vw,6.4rem); font-weight:500; margin:1.5rem 0; }
h1 em { font-style:normal; color:var(--mint); }
.hero-description { color:#beced2; max-width:43ch; font-size:.95rem; line-height:1.8; margin:1.8rem 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-footnote { display:flex; align-items:center; gap:1rem; font-size:.67rem; color:#a9bfc5; margin-top:2.2rem; }
.hero-footnote span { border:1px solid #ffffff25; border-radius:50%; width:30px; height:30px; display:grid; place-items:center; color:var(--mint); }
.hero-art { position:absolute; width:66%; height:100%; right:-6%; top:0; object-fit:cover; object-position:62% center; opacity:.94; }
.hero::after { position:absolute; content:""; inset:0; background:linear-gradient(90deg,var(--navy) 25%,#081c2b55 58%,transparent 75%); }
.hero-copy { position:relative; z-index:2; }
.art-caption { z-index:2; justify-self:end; align-self:end; color:#c7dbda; font-size:.57rem; letter-spacing:.2em; text-transform:uppercase; }
.tracking-dock { position:relative; z-index:3; margin-top:-2.7rem; display:grid; grid-template-columns:1fr 1.7fr; align-items:center; gap:2rem; padding:1.8rem 2rem; border-radius:12px; background:white; box-shadow:0 15px 50px #081c2b10; }
.tracking-dock h2 { font-size:1.45rem; letter-spacing:-.04em; margin:.3rem 0; }
.tracking-dock p { margin:0; font-size:.76rem; color:var(--quiet); }
.track-input { display:flex; gap:.7rem; }
.track-input input { width:100%; min-width:0; background:#f6f8f4; border:1px solid var(--line); padding:.9rem 1rem; border-radius:6px; font-size:.8rem; }
.track-input button { flex-shrink:0; }
.section { padding-block:6rem; }
.section-head { display:flex; gap:2rem; justify-content:space-between; align-items:end; margin-bottom:2.5rem; }
h2 { font-size:clamp(2.3rem,3.4vw,3.8rem); font-weight:500; }
.section-head h2 { margin-bottom:0; max-width:19ch; }
.section-head > p { max-width:37ch; font-size:.9rem; color:var(--quiet); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.service-card { border:1px solid var(--line); border-radius:12px; padding:1.8rem; background:#ffffff70; transition:transform .2s,border-color .2s; }
.service-card:hover { transform:translateY(-4px); border-color:#7eaa9c; }
.service-card .card-top { display:flex; justify-content:space-between; color:#668478; margin-bottom:2rem; }
.service-card h3 { font-size:1.35rem; letter-spacing:-.035em; }
.service-card p { font-size:.8rem; color:var(--quiet); min-height:4.5em; }
.service-card .more { font-size:.72rem; font-weight:700; }
.service-card.featured { background:var(--navy); color:white; }
.service-card.featured p { color:#bacdd0; }
.service-card.featured .card-top { color:var(--mint); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.split-image { width:100%; aspect-ratio:1.08; object-fit:cover; border-radius:16px; }
.split-copy h2 { max-width:15ch; }
.split-copy > p { color:var(--quiet); font-size:.9rem; }
.promise { border-top:1px solid var(--line); padding:1rem 0; display:flex; gap:1.3rem; font-size:.85rem; }
.promise span { color:#588778; }
.promise strong { display:block; margin-bottom:.3rem; }
.promise p { color:var(--quiet); margin:0; font-size:.79rem; }
.navy-panel { background:var(--navy); color:var(--ivory); }
.navy-panel .eyebrow { color:var(--mint); }
.navy-panel .section-head > p { color:#acc2c9; }
.hub-grid { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid #ffffff25; }
.hub { padding:2rem 1.5rem; border-right:1px solid #ffffff25; }
.hub:first-child { padding-left:0; }
.hub:last-child { border-right:0; }
.hub small { color:var(--mint); font-size:.65rem; letter-spacing:.12em; }
.hub h3 { font-size:1.4rem; margin:1rem 0; }
.hub p { color:#a9c0c7; font-size:.76rem; }
.hub a { font-size:.73rem; color:var(--mint); }
.image-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1rem; }
.image-card img { width:100%; height:260px; object-fit:cover; border-radius:12px; }
.image-card h3 { font-size:1.1rem; margin:1rem 0 .4rem; letter-spacing:-.02em; }
.image-card p { font-size:.75rem; color:var(--quiet); }
.cta { background:var(--mint); border-radius:15px; padding:3rem; display:flex; justify-content:space-between; gap:2rem; align-items:center; margin-bottom:5rem; }
.cta h2 { max-width:20ch; margin:.6rem 0; }
.cta p { font-size:.85rem; margin:0; }
.footer { background:var(--navy); color:#c1d0d5; padding:3.5rem 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.footer .wordmark { color:white; margin-bottom:1.4rem; }
.footer p,.footer a:not(.wordmark) { font-size:.75rem; }
.footer h3 { font-size:.85rem; color:white; letter-spacing:0; }
.footer ul { list-style:none; padding:0; }
.footer li { margin:.45rem 0; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid #ffffff20; font-size:.63rem; color:#8ba4af; }
.page-head { background:var(--navy); color:var(--ivory); padding:5rem 0; }
.page-head h1 { max-width:17ch; margin:1rem 0; font-size:clamp(3rem,5vw,5rem); }
.page-head p:not(.eyebrow) { color:#b6cbd0; max-width:57ch; font-size:.95rem; }
.preview-note { padding:1rem 1.3rem; border:1px solid #d2b59b; border-radius:8px; background:#fff4e5; font-size:.85rem; margin:2rem 0; }
.prose { max-width:75ch; }
.prose h2 { font-size:2rem; margin-top:2rem; }
.prose p { color:var(--quiet); }
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.gallery-grid img { width:100%; aspect-ratio:1.6; object-fit:cover; border-radius:12px; }
.gallery-grid p { font-size:.75rem; color:var(--quiet); }
.mobile-menu { display:none; }
.skip { position:absolute; top:-100px; left:1rem; z-index:10; background:var(--mint); padding:.5rem; }
.skip:focus { top:0; }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
@media(max-width:1000px) { .main-nav { gap:1rem; } .masthead .shell { gap:1rem; } .split { gap:2.5rem; } .hero-inner { min-height:610px; } }
@media(max-width:760px) {
    .announcement .shell span:last-child { display:none; }
    .masthead .shell { flex-wrap:wrap; }
    .wordmark { font-size:1.15rem; }
    .wordmark svg { width:32px; height:40px; }
    .masthead .button { padding:.7rem .8rem; font-size:.72rem; }
    .main-nav { order:3; flex-basis:100%; justify-content:space-between; gap:.5rem; font-size:.68rem; padding-top:.7rem; }
    .hero-inner { display:block; min-height:0; padding-block:3.5rem 17rem; }
    h1 { font-size:clamp(3.1rem,12vw,4.7rem); }
    .hero-art { width:100%; height:60%; right:0; top:auto; bottom:0; object-position:68% center; }
    .hero::after { background:linear-gradient(180deg,var(--navy) 12%,#081c2bbb 42%,#081c2b11 75%); }
    .hero-description { max-width:38ch; font-size:.85rem; }
    .art-caption { display:none; }
    .hero-footnote { margin-top:1.5rem; }
    .tracking-dock { margin-top:-1.4rem; grid-template-columns:1fr; gap:1.2rem; padding:1.3rem; }
    .track-input { flex-wrap:wrap; }
    .track-input input { flex-basis:100%; }
    .track-input button { width:100%; }
    .section { padding-block:3.5rem; }
    .section-head { display:block; }
    .section-head h2 { max-width:22ch; }
    .section-head > p { margin-top:1rem; }
    .service-grid { grid-template-columns:1fr; }
    .service-card { padding:1.5rem; }
    .service-card .card-top { margin-bottom:1.4rem; }
    .service-card p { min-height:0; }
    .split { grid-template-columns:1fr; gap:2rem; }
    .split-image { aspect-ratio:1.3; }
    .hub-grid { grid-template-columns:1fr 1fr; }
    .hub { padding:1.5rem 1rem!important; border-bottom:1px solid #ffffff25; }
    .hub:nth-child(2) { border-right:0; }
    .image-grid,.gallery-grid { grid-template-columns:1fr; }
    .image-card img { height:240px; }
    .cta { padding:2rem; display:block; margin-bottom:3rem; }
    .cta .button { margin-top:1.5rem; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
    .footer-grid > div:first-child { grid-column:1/-1; }
    .footer-bottom { flex-direction:column; }
    .page-head { padding:3rem 0; }
}


/* Service-led hero: the supplied photograph becomes a quiet, full-height watermark. */
.hero-watermark { padding-bottom: 1.5rem; }
.hero-watermark .hero-art { width: 100%; height: 100%; right: 0; top: 0; object-fit: contain; object-position: center top; opacity: .48; filter: saturate(.75); }
.hero-watermark::after { z-index: 0; background: linear-gradient(90deg, #081c2b 15%, #081c2bf5 32%, #081c2b96 57%, #081c2b12 100%), linear-gradient(0deg, #081c2b 0%, transparent 55%); }
.hero-watermark .hero-inner { min-height: 0; padding-block: 4.5rem 3rem; grid-template-columns: 1.4fr .6fr; }
.hero-watermark h1 { font-size: clamp(3.2rem, 5.1vw, 5.3rem); line-height: 1.06; letter-spacing: -.055em; margin-block: 1.4rem; }
.hero-watermark .hero-description { max-width: 48ch; font-size: .92rem; margin-block: 1.5rem 1.8rem; }
.hero-watermark .hero-actions { align-items: center; gap: 1.8rem; }
.hero-text-link { color: #f1f5f0; font-size: .78rem; padding-block: .8rem; }
.hero-text-link span { margin-left: .6rem; color: var(--mint); }
.hero-service-note { position: relative; z-index: 2; justify-self: end; align-self: end; padding: 1rem 0 1rem 1.3rem; border-left: 1px solid #a7f0d359; margin-bottom: .5rem; }
.hero-service-note span { font-size: .55rem; letter-spacing: .17em; color: var(--mint); }
.hero-service-note p { font-size: 1.05rem; line-height: 1.5; margin: .6rem 0 0; }
.hero-bottom { position: relative; z-index: 2; }
.hero-watermark .tracking-dock { margin: 0; box-shadow: none; color: var(--ink); border-radius: 10px; padding: 1.45rem 1.8rem; grid-template-columns: .85fr 1.5fr; background: #f7f6effa; }
.hero-watermark .tracking-dock .eyebrow { color: #567466; font-size: .57rem; }
.hero-watermark .tracking-dock h2 { font-size: 1.4rem; }
.hero-watermark .track-input button { background: var(--navy); color: white; }
.hero-assurances { display: flex; justify-content: space-between; gap: 1rem; font-size: .63rem; letter-spacing: .04em; color: #a9c2c6; padding: 1.15rem .2rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* An operational homepage: one service workspace, route preparation and a plain regional directory. */
.home-services, .shipping-process { padding-block: 4.5rem; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.workspace-heading h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); margin-bottom: 0; }
.workspace-heading > p { color: var(--quiet); font-size: .83rem; margin-bottom: .25rem; }
.workspace-heading > a { font-size: .8rem; text-decoration: underline; text-underline-offset: .3em; }
.service-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); border-block: 1px solid #cdd7d0; }
.service-switcher { padding: 1.5rem 1.5rem 1.5rem 0; display: flex; flex-direction: column; gap: .2rem; }
.service-switcher a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-radius: 5px; font-size: .83rem; border: 1px solid transparent; }
.service-switcher a[aria-selected="true"] { background: var(--navy); color: var(--mint); }
.service-switcher a:hover { border-color: #bacbc1; }
.service-panel { position: relative; min-height: 470px; isolation: isolate; overflow: hidden; padding: 2.8rem; background: var(--navy); color: var(--ivory); }
.service-panel[hidden] { display: none; }
.service-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #081c2bf5 10%, #081c2bd9 45%, #081c2b33); }
.service-watermark { position: absolute; z-index: -2; width: 72%; height: 100%; inset: 0 0 0 auto; object-fit: cover; opacity: .6; object-position: center; }
.service-panel-content { position: relative; max-width: 610px; }
.service-panel .eyebrow { color: var(--mint); font-size: .6rem; }
.service-panel h3 { max-width: 20ch; font-size: clamp(1.8rem, 2.5vw, 2.7rem); font-weight: 500; margin-block: 1rem; }
.service-summary { max-width: 49ch; color: #c0d1d5; font-size: .83rem; }
.requirements { margin-block: 1.7rem; }
.requirements h4 { font-size: .7rem; font-weight: 600; color: var(--mint); margin-bottom: .65rem; }
.requirements ul { list-style: none; padding: 0; margin: 0; }
.requirements li { position: relative; padding-left: 1.1rem; margin-block: .35rem; color: #dee7e5; font-size: .77rem; }
.requirements li::before { content: "–"; position: absolute; left: 0; color: var(--mint); }
.service-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; }
.service-panel-actions .button { padding: .8rem 1rem; font-size: .73rem; }
.panel-detail-link { font-size: .73rem; }
.request-strip { padding-block: 4rem; background: #e9eee7; }
.request-layout { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: center; padding: 3rem; background: var(--navy); border-radius: 6px; color: var(--ivory); }
.request-watermark { position: absolute; z-index: -2; height: 100%; width: 68%; left: 0; top: 0; object-fit: cover; object-position: center; opacity: .45; }
.request-layout::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #081c2b55, #081c2b88 35%, #081c2b 65%); }
.request-layout > div { align-self: start; padding-top: 1rem; }
.request-layout .eyebrow { color: var(--mint); font-size: .6rem; }
.request-layout h2 { font-size: clamp(2.1rem, 3.2vw, 3.2rem); max-width: 13ch; }
.request-layout p:not(.eyebrow) { color: #d7e3df; font-size: .82rem; max-width: 35ch; }
.route-request { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: #f7f6ef; color: var(--ink); padding: 1.6rem; border-radius: 6px; }
.route-request label { display: grid; gap: .4rem; font-size: .72rem; font-weight: 600; min-width: 0; }
.route-request label:nth-of-type(3), .route-request button { grid-column: 1/-1; }
.route-request input, .route-request select { min-width: 0; width: 100%; border: 1px solid #ccd7ce; border-radius: 4px; padding: .75rem; background: #fff; color: var(--ink); font-size: .8rem; }
.route-request button { background: var(--navy); color: white; margin-top: .3rem; }
.process-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; list-style: none; padding: 0; margin: 2.5rem 0 0; }
.process-line li { border-top: 1px solid #bbcfc1; padding-top: 1.2rem; }
.process-step { display: inline-grid; width: 25px; height: 25px; place-items: center; border: 1px solid #a9bcb0; border-radius: 50%; font-size: .65rem; margin-bottom: 1.2rem; }
.process-line h3 { font-size: 1rem; letter-spacing: -.02em; }
.process-line p { color: var(--quiet); font-size: .78rem; }
.region-section { border-block: 1px solid var(--line); padding-block: 4rem; background: #fff; }
.region-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6rem; }
.region-intro h2 { font-size: clamp(2rem, 3vw, 3rem); }
.region-intro p:not(.eyebrow) { color: var(--quiet); font-size: .83rem; max-width: 36ch; }
.region-intro a { font-size: .78rem; text-decoration: underline; text-underline-offset: .3em; }
.region-directory > a { display: flex; align-items: center; gap: 1.2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.region-code { font-size: .65rem; width: 35px; color: var(--quiet); }
.region-directory strong { font-size: .92rem; font-weight: 500; }
.region-action { margin-left: auto; font-size: .7rem; color: var(--quiet); }
.region-action b { color: var(--ink); margin-left: 1rem; }
.region-directory > p { color: var(--quiet); font-size: .69rem; margin-top: 1.4rem; }
.support-line { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding-block: 3rem; }
.support-line h2 { font-size: 1.7rem; margin-bottom: 0; }
.support-line > div:last-child { display: grid; gap: .4rem; font-size: .75rem; }
.support-email { font-size: 1rem; text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 980px) {
    .service-workspace { grid-template-columns: 210px minmax(0, 1fr); }
    .service-panel { padding: 2rem; }
    .request-layout { gap: 2rem; padding: 2rem; }
    .region-layout { gap: 3rem; }
}
@media (max-width: 760px) {
    .home-services, .shipping-process { padding-block: 3rem; }
    .workspace-heading { display: block; }
    .workspace-heading > p, .workspace-heading > a { display: block; margin-top: 1rem; }
    .service-workspace { display: block; border: 0; }
    .service-switcher { flex-direction: row; flex-wrap: wrap; gap: .45rem; padding: 0 0 1.2rem; }
    .service-switcher a { font-size: .72rem; padding: .65rem .8rem; border-color: #c5d3c8; }
    .service-switcher a > span:last-child { display: none; }
    .service-panel { padding: 1.6rem; min-height: 475px; border-radius: 6px; }
    .service-watermark { width: 100%; opacity: .4; }
    .service-panel::before { background: linear-gradient(90deg, #081c2be6, #081c2b88); }
    .request-strip { padding-block: 2rem; }
    .request-layout { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; }
    .request-watermark { width: 100%; height: 65%; opacity: .4; object-position: center top; }
    .request-layout::after { background: linear-gradient(0deg, #081c2b 20%, #081c2b88 80%); }
    .request-layout > div { padding-top: .5rem; }
    .request-layout h2 { max-width: none; margin-bottom: 1rem; }
    .route-request { padding: 1.2rem; gap: .8rem; }
    .route-request label { grid-column: 1/-1; }
    .process-line { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .process-line li { padding-top: 1rem; }
    .process-step { margin-bottom: .8rem; }
    .region-section { padding-block: 3rem; }
    .region-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .region-intro h2 br { display: none; }
    .region-action { font-size: .63rem; }
    .region-directory > a { gap: .5rem; }
    .region-directory strong { font-size: .85rem; }
    .support-line { display: block; padding-block: 2.5rem; }
    .support-line > div:last-child { margin-top: 1.3rem; }
}
@media (max-width: 760px) {
    .hero-watermark .hero-art { width: 100%; height: 100%; object-fit: contain; object-position: center top; opacity: .26; }
    .hero-watermark::after { background: linear-gradient(90deg, #081c2bd9, #081c2b44), linear-gradient(0deg, #081c2b, transparent 75%); }
    .hero-watermark .hero-inner { display: block; padding-block: 3rem 2rem; }
    .hero-watermark h1 { font-size: clamp(2.6rem, 10.4vw, 4rem); }
    .hero-watermark .hero-description { font-size: .85rem; }
    .hero-service-note { display: none; }
    .hero-watermark .hero-actions { gap: 1rem; }
    .hero-watermark .tracking-dock { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
    .hero-assurances { flex-wrap: wrap; gap: .65rem 1rem; font-size: .58rem; }
}