/* Add background box for journey-wrapper similar to logo-group */
.journey-wrapper {
	background: rgba(255,255,255,0.85);
	border-radius: 1.2rem;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.07);
	padding: 2rem 1.5rem;
	margin: 2rem 0;
}
/* Add half-transparent background to logo-group to avoid confusion with site background */
.logo-group {
	background: rgba(255, 255, 255, 0.92); /* light, less transparent */
	border-radius: 18px;
	padding: 1.2rem 1.5rem 1.2rem 1.5rem;
	margin-bottom: 2.2rem;
	box-shadow: 0 4px 18px -6px rgba(0,0,0,0.10);
}
* { box-sizing: border-box; }
/* Global page background image */
body { margin:0; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#1d2433; line-height:1.55;
	background-color:#fff; /* fallback */
	background-image:url('/images/bg/background.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed; /* subtle parallax; may be ignored on some mobile browsers */
	/* Reserve space for fixed footer; JS updates --footer-h dynamically */
	padding-bottom: var(--footer-h, 84px);
}
/* Simple modal (thank you popup) */
.modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.55); display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none !important; }
.modal .modal-dialog { position: relative; width: min(520px, 92vw); border-radius: 14px; border: 1px solid var(--border); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 1.2rem 1rem 1rem; }
.modal .modal-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.06); border: 1px solid var(--border); cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.modal .modal-close:hover { background: rgba(0,0,0,0.1); }
.modal #thankyou-text { margin: 0 0 .9rem; font-size: 1rem; color: #0e2350; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.modal .modal-actions .btn { min-width: 88px; }
:root { --accent:#0052cc; --accent-alt:#0b6efd; --bg-soft:#f5f8fc; --border:#e2e8f0; }
/* Liquid glass (iOS style) header */
header { position:sticky; top:0; z-index:50; /* raised above panels */
	background:linear-gradient(135deg,rgba(255,255,255,0.42),rgba(255,255,255,0.16)) border-box;
	-webkit-backdrop-filter:blur(14px) saturate(180%) contrast(105%);
	backdrop-filter:blur(14px) saturate(180%) contrast(105%);
	border-bottom:1px solid rgba(255,255,255,0.4);
	box-shadow:0 2px 8px -2px rgba(15,23,42,0.08), 0 1px 0 rgba(255,255,255,0.5) inset;
	position:sticky; top:0; isolation:isolate; overflow:clip; /* allow layered pseudo elements */
	transition:background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease, border-color .4s ease;
}
/* Subtle noise / sheen overlay */
header::before { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.35;
	background:
		linear-gradient(160deg,rgba(255,255,255,0.35),rgba(255,255,255,0.05)),
		url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iYiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii4zIiBudW1PY3RhdmVzPSI1IiAvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsdGVyPSJ1cmwoI2IpIiBvcGFjaXR5PSIuNCIvPjwvc3ZnPg==");
	background-size:cover, 120px 120px;
}
/* Highlight line (specular) */
header::after { content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent);
	opacity:.85;
}
/* Scroll intensified state */
header.scrolled { background:linear-gradient(135deg,rgba(255,255,255,0.52),rgba(255,255,255,0.20));
	-webkit-backdrop-filter:blur(18px) saturate(200%) contrast(110%);
	backdrop-filter:blur(18px) saturate(200%) contrast(110%);
	box-shadow:0 4px 18px -6px rgba(15,23,42,0.18), 0 1px 0 rgba(255,255,255,0.45) inset;
	border-bottom-color:rgba(255,255,255,0.35);
}
/* Reduced motion respect: tone down transitions */
@media (prefers-reduced-motion:reduce){ header { transition:none; } }
.nav { display:flex; align-items:center; justify-content:space-between; width:100%; margin:0; padding:0.75rem 1.25rem 0.75rem 0; }
.nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
.nav a { text-decoration:none; color:#1d2433; font-weight:500; }
.nav a:hover { color:var(--accent); }
.logo { font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:.9rem; }
.logo-img { height:26px; width:auto; display:block; margin-left:0; }
.logo-text { display:flex; flex-direction:column; gap:0.15rem; }
.site-cn-name { font-size:0.85rem; font-weight:600; color:#0e2350; line-height:1.2; }
.site-name { font-size:0.75rem; font-weight:500; color:#4a5568; line-height:1.2; }
#hero { padding:6rem 1.25rem 4rem; text-align:center; background:linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); color:#0e2350; }
#hero h1 { margin:0 0 1rem; font-size:clamp(1.8rem,4vw,3rem); }
#hero p { margin:0 0 1.5rem; font-size:1.1rem; opacity:.9; }
.btn { background:var(--accent); color:#fff; padding:0.7rem 1.2rem; border-radius:6px; display:inline-block; text-decoration:none; font-weight:600; border:none; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.btn:hover { background:var(--accent-alt); }
/* Button disabled and loading states */
.btn:disabled { opacity:.65; cursor:not-allowed; }
.btn.loading { position:relative; color:transparent; }
.btn.loading::after { content:""; position:absolute; left:50%; top:50%; width:1em; height:1em; margin:-0.5em 0 0 -0.5em; border-radius:50%; border:2px solid rgba(255,255,255,0.6); border-top-color:#fff; animation:btn-spin .6s linear infinite; }
@keyframes btn-spin { to { transform:rotate(360deg); } }
main section { max-width:960px; margin:0 auto; padding:3rem 1.25rem; }
/* Make the Habors section wider than the default */
#advantages { max-width:1200px; }
#services { background: rgba(255,255,255,0.85); border:1px solid var(--border); border-radius:18px; box-shadow:0 4px 14px -4px rgba(0,0,0,0.18); }
main h2 { margin-top:0; font-size:2.4rem; }
#about p { white-space:pre-line; }

/* Make the intro paragraph in #advantages bigger */
#advantages > p[data-i18n="advantages.intro"] {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
/* About alternating rows */
.about-rows { display:flex; flex-direction:column; gap:3.2rem; margin-top:2rem; }
.about-row { display:grid; gap:2.5rem; align-items:center; background: rgba(255,255,255,0.92); border:1px solid var(--border); border-radius:18px; padding:1.2rem 1.4rem; box-shadow:0 4px 18px -6px rgba(0,0,0,0.10); }
/* default 2-column layout */
@media (min-width:860px){ .about-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.about-row:nth-child(even) { direction:rtl; }
.about-row:nth-child(even) > * { direction:ltr; }
.ar-text { display:flex; flex-direction:column; gap:1rem; }
.ar-text h3 { margin:0; font-size:2.1rem; letter-spacing:.5px; font-weight:700; color:#0e2350; }
.ar-text p { margin:0; font-size:1.15rem; line-height:1.65; color:#2b3342; }
.ar-media { position:relative; }
.ar-image { width:100%; aspect-ratio:4/3; border-radius:18px; background:#0e2350 center/cover no-repeat; position:relative; overflow:hidden; box-shadow:0 6px 18px -4px rgba(0,0,0,.18); }
.ar-image::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(14,35,80,.25),rgba(14,35,80,.55)); mix-blend-mode:multiply; }
.img-1 { background-image:url('/images/port.png'); }
.img-2 { background-image:url('/images/business_flow.png'); }
.img-3 { background-image:linear-gradient(135deg,#0e2350,#134b9c); }
.img-4 { background-image:linear-gradient(135deg,#083a2a,#0d6e52); }
/* subtle decorative line */
.about-row { position:relative; }
.about-row::before { content:""; position:absolute; left:0; right:0; top:-1.6rem; height:1px; background:linear-gradient(90deg,transparent, #d9e2ef 15%, #d9e2ef 85%, transparent); }
.about-row:first-child::before { display:none; }
@media (max-width:859.98px){
	.about-row { grid-template-columns:1fr; }
	.about-row:nth-child(even){ direction:ltr; }
	.ar-image { aspect-ratio:16/9; }
}
/* Logistics Flow Diagram */
.logistics-flow { margin:3.5rem auto 2.5rem; max-width:780px; display:flex; flex-direction:column; align-items:center; gap:1rem; font-size:0; }
.flow-title { font-size:1rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin:0 0 .5rem; color:#0e2350; }
.flow-row { display:flex; gap:2.2rem; justify-content:center; align-items:flex-start; }
.flow-row.single { gap:0; justify-content:center; }
.flow-card { background:#f5f8fc; border:1px solid var(--border); border-radius:12px; padding:1rem .9rem 1.1rem; width:200px; text-align:center; position:relative; box-shadow:0 2px 4px rgba(0,0,0,.04); }
.flow-card h4 { margin:.4rem 0 .35rem; font-size:.85rem; font-weight:600; letter-spacing:.3px; }
.flow-card p { margin:0; font-size:.62rem; color:#5a6475; letter-spacing:.2px; }
.flow-icon { width:42px; height:42px; margin:0 auto; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.fc-blue { background:#eef4ff; }
.fc-green { background:#eefbf1; }
.fc-cyan { background:#effcfe; }
.fc-purple { background:#f7f3ff; }
.fc-orange { background:#fff7ed; }
.fc-pink { background:#fdf5f6; }
.fc-yellow { background:#fefce8; }
.flow-arrow { font-size:1.3rem; display:flex; align-items:center; margin:0 .2rem; color:#1d2433; }
.flow-connect { font-size:1.1rem; line-height:1; margin:.2rem 0 .4rem; position:relative; display:flex; align-items:center; justify-content:center; color:#1d2433; }
.logistics-flow .flow-row.middle::before,
.logistics-flow .flow-row.middle::after,
.logistics-flow .flow-row.middle::marker { content:""; }
/* Decorative horizontal lines between middle row connectors */
.logistics-flow .flow-row.middle { position:relative; }
.logistics-flow .flow-row.middle::before { content:""; position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:300px; height:1px; background:#1d2433; opacity:.4; }
.logistics-flow .flow-row.middle::after { content:""; position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); width:300px; height:1px; background:#1d2433; opacity:.4; }
@media (max-width:860px){
	.logistics-flow { max-width:100%; }
	.flow-row { flex-wrap:wrap; gap:1.2rem; }
	.flow-card { width:44%; min-width:180px; }
	.flow-arrow { display:none; }
	.logistics-flow .flow-row.middle::before,
	.logistics-flow .flow-row.middle::after { display:none; }
}
@media (max-width:560px){
	.flow-card { width:100%; }
	.flow-row.middle { justify-content:center; }
}
/* Business (formerly Advantages) cards */
.adv-cards { display:grid; gap:1.5rem; margin-top:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.adv-card { background:var(--bg-soft); border:1px solid var(--border); padding:1.1rem 1rem 1.2rem; border-radius:10px; display:flex; flex-direction:column; gap:0.5rem; box-shadow:0 2px 4px rgba(0,0,0,.04); }
.adv-card h3 { margin:0 0 .25rem; font-size:1.05rem; color:#0e2350; }
.adv-card p { margin:0 0 .5rem; font-size:.85rem; line-height:1.45; }
.adv-card ul { margin:0; padding-left:1.05rem; display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; }
.adv-card li { list-style:disc; }
/* New Incoterm design */
.incoterm-box { position:relative; margin:1.25rem 0; display:flex; align-items:center; gap:.5rem; }
/* Add margin between rows */
.incoterm-box + .incoterm-box { margin-top:2rem; }
.incoterm-box::before, .incoterm-box::after { content:""; }
.inc-nav { background:rgba(255,255,255,0.85); border:1px solid var(--border); backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.4rem; line-height:1; color:#0e2350; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:background .3s, transform .3s; flex:0 0 auto; }
.inc-nav:hover { background:rgba(255,255,255,0.95); transform:scale(1.05); }
.inc-nav:active { transform:scale(.92); }
.inc-nav:disabled { opacity:.45; cursor:default; box-shadow:none; }
.incoterm-grid { display:flex; gap:1.1rem; flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; padding:.6rem .25rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.incoterm-grid::-webkit-scrollbar { height:8px; }
.incoterm-grid::-webkit-scrollbar-track { background:transparent; }
.incoterm-grid::-webkit-scrollbar-thumb { background:#c2c9d3; border-radius:4px; }
.incoterm-grid.full-bleed { left:auto; right:auto; margin:0; width:auto; padding:.6rem .25rem 1rem; }
.incoterm-grid::after { content:""; position:absolute; inset:auto; pointer-events:none; }
.incoterm-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.1rem 1.4rem; box-shadow:0 2px 4px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:.9rem; position:relative; min-width:320px; flex:0 0 320px; scroll-snap-align:start; }
.incoterm-card .ic-header { display:flex; gap:.9rem; align-items:center; }
.incoterm-card .ic-header h3 { margin:0; font-size:1rem; }
.incoterm-card .ic-header h3 .title-explain { font-size:0.75rem; font-weight:400; color:#5a6475; opacity:0.85; }
.ic-icon { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.25rem; background:linear-gradient(135deg,#0e2350,#134b9c); color:#fff; }
.incoterm-card.cif .ic-icon { background:linear-gradient(135deg,#058b3f,#22b559); }
.incoterm-card.ddu .ic-icon { background:linear-gradient(135deg,#b85100,#ff8c1a); }
.incoterm-card.ddp .ic-icon { background:linear-gradient(135deg,#9333ea,#c084fc); }
.incoterm-card.local-warehouse .ic-icon { background:linear-gradient(135deg,#7a3cff,#b388ff); }
.incoterm-card.engineering-logistics .ic-icon { background:linear-gradient(135deg,#0b7a75,#1cc4b7); }
.ic-sub { font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; color:#5a6475; }
.ic-desc { font-size:.78rem; line-height:1.4; margin:0; }
.ic-resp { display:flex; flex-direction:column; gap:.7rem; }
.resp-block { background:var(--bg-soft); border:1px solid var(--border); padding:.65rem .6rem .7rem; border-radius:8px; }
.resp-title { font-size:.65rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; margin:0 0 .45rem; display:flex; align-items:center; gap:.35rem; }
.resp-title.seller::before { content:"$"; font-weight:700; color:#058b3f; }
.resp-title.buyer::before { content:"\25CF"; font-size:.5rem; color:#1d53b3; }
.badge-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.badge { background:#fff; border:1px solid var(--border); padding:.25rem .55rem; font-size:.62rem; border-radius:999px; line-height:1.1; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.risk-box { background:#ffecec; color:#a43333; font-size:.68rem; padding:.55rem .7rem; border-radius:8px; border:1px solid #f5c6c6; margin-top:auto; }

/* Journey */
.journey-wrapper { margin-top:3rem; }
.journey-title { text-align:center; font-size:1rem; font-weight:600; margin:0 0 1.4rem; letter-spacing:.5px; text-transform:uppercase; color:#0e2350; }
.journey-timeline { list-style:none; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; padding:0; margin:0 0 1.4rem; position:relative; }
.journey-timeline li { flex:1; min-width:110px; display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.65rem; text-align:center; color:#333; }
.journey-timeline .risk { color:#b93535; font-weight:600; }
.j-icon { width:40px; height:40px; border-radius:50%; background:#1d1d1f; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.journey-timeline li:nth-child(2) .j-icon, .journey-timeline li:nth-child(4) .j-icon { background:#ddd; color:#333; }
.journey-timeline .risk .j-icon { background:#ff4d4f; }

/* Key points */
.key-points { border:1px solid var(--border); background:#fff; border-radius:12px; padding:1rem 1rem .9rem; display:flex; flex-direction:column; gap:.55rem; font-size:.65rem; }
.kp-row { display:flex; align-items:center; gap:.5rem; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.risk { background:#ff4d4f; }
.dot.insurance { background:#1d53b3; }
.dot.cost { background:#058b3f; }

/* Comparison table */
.comparison-wrapper { margin-top:2.5rem; }
.cmp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.7rem; }
.cmp-table th, .cmp-table td { padding:.55rem .65rem; border:1px solid var(--border); background:#fff; text-align:left; }
.cmp-table th { background:#0e2350; color:#fff; font-weight:600; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; }
.cmp-table tbody tr:nth-child(even) td { background:#f8fafe; }
.cmp-table td:first-child { font-weight:600; background:#f1f5f9; }
.table-scroll { overflow-x:auto; }

/* Business illustration */
.biz-illustration { margin:1.5rem 0 2rem; text-align:center; }
.biz-illustration img { max-width:100%; height:auto; display:block; margin:0 auto; }
.biz-illustration figcaption { font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; color:#5a6475; margin-top:.55rem; }

/* Map Embed Responsive + horizontal slider */
.map-embed { flex:0 0 92%; margin:0 1rem; border:1px solid var(--border); background:#fff; border-radius:14px; padding:0; overflow:hidden; box-shadow:0 4px 10px -2px rgba(0,0,0,.08); scroll-snap-align:start; }
.map-embed iframe { width:100%; height:480px; display:block; border:0; background:#f1f5f9; }
.map-embed.map-img img { width:100%; height:480px; display:block; object-fit:cover; background:#f1f5f9; }
.map-grid { display:flex; gap:0; margin:2rem 0 2.5rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 0.5rem; }
.map-grid, .incoterm-grid { cursor: grab; user-select: none; }
.map-grid.dragging, .incoterm-grid.dragging { cursor: grabbing; }
.map-grid::-webkit-scrollbar { height:10px; }
.map-grid::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); border-radius:999px; }
.map-grid::-webkit-scrollbar-track { background:transparent; }
@media (min-width:1100px){ .map-embed { flex-basis:46%; margin:0 0.75rem; } }
/* On wide screens, show two items per row: maps on first row, images on second */
@media (min-width:1100px){
    .map-grid { flex-wrap:wrap; overflow-x:visible; scroll-snap-type:none; padding:0; }
}
/* Keep slider behavior at all sizes; reduce height on wide screens */
@media (min-width:1100px){
	.map-embed iframe, .map-embed.map-img img { height:360px; }
}
@media (max-width:900px){ .map-embed iframe, .map-embed.map-img img { height:420px; } }
@media (max-width:700px){ .map-embed { border-radius:12px; } .map-embed iframe, .map-embed.map-img img { height:380px; } }
@media (max-width:560px){ .map-embed iframe, .map-embed.map-img img { height:330px; } }
@media (max-width:460px){ .map-embed iframe, .map-embed.map-img img { height:300px; } }
@media (max-width:380px){ .map-embed iframe, .map-embed.map-img img { height:260px; } }

@media (max-width:660px){
	.incoterm-card { padding:1rem .9rem 1.1rem; min-width:280px; }
	.badge { font-size:.58rem; }
	.journey-timeline li { min-width:90px; }
}
@media (max-width:520px){ .incoterm-card { min-width:250px; } }
@media (min-width:1100px){ .incoterm-grid { justify-content:flex-start; overflow-x:auto; } }
form { display:grid; gap:1rem; max-width:600px; }
label { display:grid; gap:0.35rem; font-size:0.9rem; }
input, textarea { padding:0.65rem 0.7rem; border:1px solid var(--border); border-radius:5px; font:inherit; }
input:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:2px; }
#phone-local { flex:1; }
.phone-field .phone-input-wrapper { display:flex; gap:.5rem; align-items:stretch; position:relative; }
.phone-country-btn { display:flex; align-items:center; gap:.4rem; padding:.55rem .65rem; border:1px solid var(--border); background:#f8fafc; border-radius:5px; cursor:pointer; font:inherit; line-height:1; position:relative; }
.phone-country-btn:focus { outline:2px solid var(--accent); outline-offset:2px; }
.phone-country-btn .flag { font-size:1.05rem; line-height:1; }
.phone-country-btn .dial { font-size:.8rem; font-weight:600; letter-spacing:.5px; color:#0e2350; }
.phone-country-btn .caret { font-size:.65rem; margin-left:.15rem; opacity:.7; }
.phone-country-btn[aria-expanded="true"] { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.phone-country-list { position:absolute; top:100%; left:0; margin:.4rem 0 0; padding:.35rem 0; list-style:none; background:#fff; border:1px solid var(--border); border-radius:10px; width:250px; max-height:280px; overflow:auto; box-shadow:0 8px 26px -6px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1); font-size:.75rem; z-index:60; }
.phone-country-list li { display:flex; gap:.55rem; align-items:center; padding:.45rem .65rem; cursor:pointer; line-height:1.15; }
.phone-country-list li .c-flag { font-size:1rem; }
.phone-country-list li .c-code { margin-left:auto; font-weight:600; color:#0e2350; }
.phone-country-list li:hover, .phone-country-list li[aria-selected="true"] { background:#f1f5f9; }
.phone-country-search { position:sticky; top:0; padding:.35rem .5rem .4rem; background:#fff; border-bottom:1px solid var(--border); display:flex; }
.phone-country-search input { width:100%; padding:.45rem .55rem; font-size:.7rem; border:1px solid var(--border); border-radius:6px; }
.phone-country-empty { padding:.6rem .75rem; font-size:.65rem; color:#5a6475; }
.phone-input-wrapper.open .phone-country-btn { border-bottom-left-radius:5px; border-bottom-right-radius:5px; }
@media (max-width:520px){
	.phone-field .phone-input-wrapper { flex-wrap:wrap; }
	.phone-country-btn { flex:0 0 auto; }
	#phone-local { flex:1 1 100%; }
	.phone-country-list { width:calc(100vw - 2rem); left:50%; transform:translateX(-50%); }
}
#form-status { font-size:0.85rem; min-height:1.2rem; }
/* Liquid glass (iOS style) footer: fixed and always visible */
footer { position:fixed; left:0; right:0; bottom:0; z-index:55;
	background:linear-gradient(135deg,rgba(255,255,255,0.42),rgba(255,255,255,0.16)) border-box;
	-webkit-backdrop-filter:blur(14px) saturate(180%) contrast(105%);
	backdrop-filter:blur(14px) saturate(180%) contrast(105%);
	border-top:1px solid rgba(255,255,255,0.4);
	box-shadow:0 -2px 8px -2px rgba(15,23,42,0.08), 0 -1px 0 rgba(255,255,255,0.5) inset;
	isolation:isolate; overflow:clip;
	color:#1d2433; text-align:center; padding:.9rem 1rem; padding-right:280px; font-size:0.85rem;
    display:flex; align-items:center; justify-content:center;
}
/* Social icons on right corner of footer */
footer .footer-social { position:absolute; right:.9rem; top:50%; transform:translateY(-50%); display:flex; gap:.75rem; }
footer .footer-social .icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
	background: rgba(14,35,80,0.55); border:1px solid rgba(255,255,255,0.55); color:#fff; text-decoration:none; transition:.25s ease; }
footer .footer-social .icon:hover { background: rgba(14,35,80,0.85); transform:translateY(-1px); }
footer .footer-social .icon i { font-size:22px; line-height:1; }
/* Subtle noise / sheen overlay for footer */
footer::before { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.32;
	background:
		linear-gradient(20deg,rgba(255,255,255,0.35),rgba(255,255,255,0.05)),
		url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iYiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii4zIiBudW1PY3RhdmVzPSI1IiAvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsdGVyPSJ1cmwoI2IpIiBvcGFjaXR5PSIuNCIvPjwvc3ZnPg==");
	background-size:cover, 120px 120px;
}
/* Highlight line at top edge of footer */
footer::after { content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent);
	opacity:.85;
}
@media (prefers-reduced-motion:reduce){ footer { transition:none; } }
.lang-switch button { background:transparent; border:1px solid var(--border); padding:0.3rem 0.6rem; border-radius:4px; cursor:pointer; font-size:0.7rem; }
.lang-switch button:hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:800px){
	/* Make header two rows on small screens */
	.nav { flex-direction:column; align-items:flex-start; gap:.4rem; }
	.logo { width:100%; }
	.nav ul { width:100%; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; }
	.nav ul > li { flex:0 1 calc(50% - 1.2rem); }
	.nav ul > li.lang-switch { flex:1 1 100%; display:flex; gap:.5rem; justify-content:flex-start; }
		#hero { padding-top:6rem; }
}

/* Logo wall */
.logo-wall { display:flex; flex-direction:column; gap:3rem; margin-top:1.5rem; }
.logo-sub { margin:0 0 1rem; font-size:0.9rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color:#0e2350; }
.logo-row { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; align-items:center; }
.logo-row li { flex:0 0 auto; display:flex; align-items:center; justify-content:center; max-height:70px; }
.logo-row img { max-height:60px; max-width:120px; width:auto; height:auto; object-fit:contain; filter:grayscale(0.15) contrast(1.1); opacity:.9; transition:.25s ease; }
.logo-row img:hover { filter:grayscale(0) contrast(1.05); opacity:1; transform:translateY(-2px); }
@media (max-width:680px){
	.logo-row { gap:1rem 1.4rem; }
	.logo-row img { max-height:48px; max-width:100px; }
}

/* Floating Contact Panel (desktop) */
.contact-panel { position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; padding:2rem 1.4rem 1.7rem; box-shadow:0 4px 14px -4px rgba(0,0,0,.18); }
.contact-panel h2 { margin-top:0; font-size:1.25rem; }
.contact-panel form { max-width:100%; }
.contact-panel input, .contact-panel textarea { background:#f8fafc; }
.contact-panel input:focus, .contact-panel textarea:focus { background:#fff; }

@media (min-width:1200px){
	/* reserve space so main content not hidden */
	main { margin-right:490px; }
	.contact-panel { position:fixed; top:90px; right:28px; width:420px; max-height:calc(100vh - 120px); overflow:auto; scrollbar-width:thin; scrollbar-color:#c2c9d3 transparent; z-index:25; }
	.contact-panel::-webkit-scrollbar { width:8px; }
	.contact-panel::-webkit-scrollbar-track { background:transparent; }
	.contact-panel::-webkit-scrollbar-thumb { background:#c2c9d3; border-radius:4px; }
}

/* Medium screens: keep in-flow but make sure width pleasant */
@media (min-width:900px) and (max-width:1199.98px){
	.contact-panel { max-width:574px; margin:0 auto; }
}

/* Mobile adjustments */
@media (max-width:599.98px){
	.contact-panel { padding:1.6rem 1rem 1.4rem; border-radius:14px; }
	.contact-panel h2 { font-size:1.15rem; }
}

/* Certifications Carousel */
.cert-carousel { position:relative; margin:2rem auto 3rem; max-width:960px; display:flex; align-items:center; gap:.75rem; }
.cc-viewport { overflow:hidden; flex:1; }
.cc-track { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; scroll-behavior:smooth; }
.cc-slide { flex:0 0 clamp(180px,24%,220px); position:relative; border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:0 4px 10px -3px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; padding:1rem; }
.cc-slide img { max-width:100%; max-height:140px; width:auto; height:auto; object-fit:contain; filter:grayscale(.1) contrast(1.05); transition:.3s ease; }
.cc-slide img:hover { filter:grayscale(0) contrast(1.05); transform:scale(1.03); }
.cc-nav { background:rgba(255,255,255,0.8); border:1px solid var(--border); backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.4rem; line-height:1; color:#0e2350; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:background .3s, transform .3s; }
.cc-nav:hover { background:rgba(255,255,255,0.95); transform:scale(1.05); }
.cc-nav:active { transform:scale(.92); }
.cc-dots { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); display:flex; gap:.45rem; }
.cc-dots button { width:8px; height:8px; border-radius:50%; border:none; background:#c4ccd6; padding:0; cursor:pointer; transition:.3s; }
.cc-dots button[aria-current="true"] { background:#0e2350; width:18px; border-radius:8px; }
@media (max-width:780px){
	.cert-carousel { gap:.5rem; }
	.cc-track { gap:.9rem; }
	.cc-slide { flex:0 0 clamp(160px,42%,200px); }
}
@media (max-width:520px){
	.cc-slide { flex:0 0 70%; }
	.cc-nav { width:34px; height:34px; font-size:1.2rem; }
}

/* Services gallery: larger preview cards without affecting certifications */
.services-carousel { max-width: 1200px; }
.services-carousel .cc-slide { flex: 0 0 clamp(260px, 65%, 820px); }
.services-carousel .cc-slide img { max-height: 320px; }
@media (max-width: 780px){
	.services-carousel .cc-slide { flex-basis: 80%; }
	.services-carousel .cc-slide img { max-height: 280px; }
}
@media (max-width: 520px){
	.services-carousel .cc-slide { flex-basis: 88%; }
	.services-carousel .cc-slide img { max-height: 240px; }
}

/* Logistics Flow Diagram */
.logistics-flow {
	margin: 2.5rem auto 2rem auto;
	background: rgba(255,255,255,0.7);
	border-radius: 1.2rem;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.07);
	padding: 1.62rem 1.22rem; /* another ~10% smaller */
	max-width: 972px; /* another ~10% smaller */
	display: block;
}
.flow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.8rem;
	gap: 2.05rem; /* another ~10% smaller */
}
.flow-card {
	background: #fff;
	border-radius: 1.3rem;
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.09);
	padding: 1.8rem 1.8rem 1.4rem 1.8rem; /* another ~10% smaller */
	margin: 0 0.57rem; /* another ~10% smaller */
	min-width: 146px; /* another ~10% smaller */
	max-width: 211px; /* another ~10% smaller */
	flex: 1 1 146px; /* another ~10% smaller */
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow 0.2s;
}
/* Ensure legacy width:200px is reduced within logistics-flow context (shrink again by ~10%) */
.logistics-flow .flow-card { width: 162px; }
.flow-card h4 {
	font-size: 1.35rem;
	margin: 0.7rem 0 0.3rem 0;
}
.flow-card p {
	font-size: 1.08rem;
	margin: 0;
	color: #444;
}
.flow-icon {
	font-size: 2.7rem;
	margin-bottom: 0.3rem;
}
.flow-arrow.horiz {
	font-size: 2.5rem;
	margin: 0 1.2rem;
	color: #b0b0b0;
}
.flow-connect {
	text-align: center;
	font-size: 2.1rem;
	color: #b0b0b0;
	margin-bottom: 1.1rem;
}
.flow-connect.triple {
	font-size: 2.5rem;
}

/* Lightbox (full-screen image preview) */
.lightbox { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.75); display:grid; place-items:center; animation:lb-fade-in .18s ease; }
.lightbox.closing { animation:lb-fade-out .18s ease forwards; }
.lb-inner { position:relative; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; outline:none; }
.lb-img { width:100vw; height:100vh; object-fit:cover; object-position:center; border-radius:0; box-shadow:none; background:#000; }
.lb-close { position:absolute; top:10px; right:10px; width:38px; height:38px; border:none; border-radius:50%; background:rgba(255,255,255,0.9); color:#0e2350; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.lb-close:hover { background:#fff; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,0.9); color:#0e2350; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,0.3); }
.lb-arrow.prev { left:12px; }
.lb-arrow.next { right:12px; }
.lb-arrow:hover { background:#fff; }
.lb-arrow:disabled { opacity:.4; cursor:default; box-shadow:none; }
.lb-count { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:.9rem; background:rgba(0,0,0,0.4); padding:.25rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,0.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@keyframes lb-fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes lb-fade-out { from { opacity:1 } to { opacity:0 } }
/* Prevent background scroll when lightbox open */
body.lb-open { overflow:hidden; }

/* A11y utility to provide semantic headings without visual impact */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* SEO intro block styling + reveal animation */
.seo-intro {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0.85rem 1rem;
	background: rgba(255,255,255,0.92);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 6px 20px -10px rgba(0,0,0,0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease;
}
.seo-intro.is-visible { opacity: 1; transform: none; }
.seo-intro p { margin: 0; font-size: 1.05rem; color: #1d2433; }
.seo-intro a { color: var(--accent); font-weight: 600; text-decoration: none; }
.seo-intro a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce){
	.seo-intro { transition: none; transform: none; opacity: 1; }
}

/* Intro video section */
.intro-video { max-width: 1400px; margin: 2rem auto 2rem; padding: 0 1rem; }
.intro-video .video-frame { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px -8px rgba(0,0,0,.28); aspect-ratio: 16/9; }
/* Make the video fill the frame and crop edges if needed to avoid black bars */
.intro-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Make YouTube iframe fill the frame completely */
.intro-video iframe { position:absolute; inset:0; width:100%; height:100%; display:block; border:0; }

/* Big picture viewer for certifications */
.cert-viewer { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.cv-stage { position:relative; background: #fff; border:1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 22px -8px rgba(0,0,0,.18); aspect-ratio:16/9; cursor: zoom-in; }
.cv-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit: contain; background:#0b1a2f; }
/* Sliding animation states */
.cv-stage img.cv-enter { transform: translateX(-100%); }
.cv-stage img.cv-leave { transform: translateX(0%); }
.cv-stage img.cv-animate { transition: transform .6s ease; }
.cv-stage img.cv-leave.cv-animate { transform: translateX(25%); }
.cv-tabs { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top: .9rem; }
.cv-tab { background:#fff; border:1px solid var(--border); border-radius: 999px; padding:.45rem .75rem; font-size:.8rem; cursor:pointer; color:#0e2350; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.cv-tab[aria-selected="true"] { background:#0e2350; color:#fff; border-color:#0e2350; }
.cv-tab:focus { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:680px){
	.cv-stage { aspect-ratio: 4/3; }
	.cv-tab { font-size:.72rem; padding:.35rem .6rem; }
}