/* Ship Chandler Gabon — dark navy / lime theme */
:root {
  --bg: #07111f;
  --bg-2: #0c1a2e;
  --bg-3: #12243d;
  --lime: #c6f135;
  --lime-2: #d9ff5c;
  --text: #dbe4f0;
  --muted: #8d9bb0;
  --line: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .045);
  --r: 16px;
  --r-lg: 26px;
  --head: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { margin: 0; font: 400 16px/1.7 var(--body); color: var(--text); background: var(--bg); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 12% 0%, rgba(198, 241, 53, .07), transparent 40%), radial-gradient(circle at 90% 60%, rgba(56, 120, 255, .08), transparent 45%); }
img { max-width: 100%; display: block; }
a { color: var(--lime); }
h1, h2, h3 { font-family: var(--head); line-height: 1.1; margin: 0 0 .55em; color: #fff; letter-spacing: -.025em; }
h1 { font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
.box { width: min(1240px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--lime); color: var(--bg); padding: .5rem 1rem; }
.skip:focus { left: 1rem; }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.muted { color: var(--muted); }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(12px); }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid rgba(198, 241, 53, .35); background: rgba(198, 241, 53, .08); color: var(--lime); font: 600 .74rem var(--head); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.chip-dark { color: var(--bg); border-color: rgba(7, 17, 31, .3); background: rgba(7, 17, 31, .08); }

/* buttons */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 12px; background: var(--lime); color: var(--bg); font: 700 .9rem var(--head); text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 0 0 0 rgba(198, 241, 53, .5); transition: transform .25s, box-shadow .3s, background .25s; }
.cta:hover { background: var(--lime-2); transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(198, 241, 53, .55); }
.cta-lg { padding: .95rem 1.7rem; font-size: .95rem; }
.ghost { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font: 600 .92rem var(--head); text-decoration: none; padding: .95rem 1.4rem; border-radius: 12px; border: 1px solid var(--line); transition: border-color .25s, color .25s; }
.ghost .ico { transition: transform .25s; }
.ghost:hover { border-color: var(--lime); color: var(--lime); }
.ghost:hover .ico { transform: translateX(4px); }
.dark-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.6rem; border-radius: 12px; background: var(--bg); color: var(--lime); font: 700 .92rem var(--head); text-decoration: none; white-space: nowrap; transition: transform .25s; }
.dark-btn:hover { transform: translateY(-2px); }

/* header */
.top { position: sticky; top: 0; z-index: 60; background: rgba(7, 17, 31, .72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo img { width: 48px; height: auto; background: #fff; border-radius: 10px; padding: 3px; }
.logo span { font: 700 1.05rem/1 var(--head); color: #fff; display: grid; }
.logo b { color: var(--lime); font-weight: 700; }
.nav { display: flex; gap: .4rem; align-items: center; margin: 0 auto; padding: .3rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.nav > a, .dd-t { color: var(--text); text-decoration: none; font: 500 .9rem var(--head); padding: .5rem 1rem; border-radius: 10px; display: inline-block; transition: background .2s, color .2s; }
.nav > a:hover, .dd-t:hover, .dd.open .dd-t { background: rgba(255, 255, 255, .06); color: #fff; }
.nav > a[aria-current], .dd-t[aria-current] { background: var(--lime); color: var(--bg); }
.dd { position: relative; }
.dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; }
.dd-p { position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 10px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transition: .25s; }
.dd:hover > .dd-p, .dd.open > .dd-p { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.svc-grid { list-style: none; margin: 0; padding: .9rem; width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.svc-grid a { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 12px; color: var(--text); text-decoration: none; font: 500 .9rem var(--head); transition: background .2s; }
.svc-grid a .ico { color: var(--lime); }
.svc-grid a:hover { background: rgba(255, 255, 255, .05); }
.dd-ports .dd-p { width: min(1020px, 94vw); transform: translate(-58%, 10px); }
.dd-ports:hover > .dd-p, .dd-ports.open > .dd-p { transform: translate(-58%, 0); }
.mega { padding: 1.3rem; }
.mega-search { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); margin-bottom: 1.2rem; color: var(--muted); }
.mega-search:focus-within { border-color: var(--lime); }
.mega-search input { flex: 1; border: 0; outline: none; background: none; font: inherit; color: #fff; }
.mega-grid { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 1rem 1.5rem; max-height: 56vh; overflow: auto; }
.mega-col:first-child ul { columns: 2; column-gap: 1.2rem; }
.mega-col:nth-child(3) { grid-column: 3; }
.mega-col:nth-child(n+4) { grid-column: 4; }
.mega-region { font: 600 .72rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--lime); margin: 0 0 .5rem; }
.mega ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.mega li { break-inside: avoid; }
.mega li a { display: block; padding: .22rem 0; color: var(--text); text-decoration: none; font-size: .85rem; transition: color .2s; }
.mega li a:hover { color: var(--lime); }
.mega li[hidden], .mega-col[hidden] { display: none; }
.mega-empty { color: var(--muted); margin: 0; }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; place-items: center; }
.burger .ico { width: 22px; height: 22px; }
.sheet { border-top: 1px solid var(--line); padding: .5rem 16px 1.4rem; display: grid; max-height: calc(100vh - 76px); overflow: auto; background: var(--bg-2); }
.sheet[hidden] { display: none; }
.sheet > a:not(.cta), .sheet summary { padding: .85rem 0; border-bottom: 1px solid var(--line); color: #fff; text-decoration: none; font: 600 1rem var(--head); cursor: pointer; }
.sheet .mega { padding: 1rem 0; }
.sheet .mega-grid { grid-template-columns: 1fr; max-height: none; }
.sheet .mega-col { grid-column: auto !important; }
.sheet .cta { margin-top: 1rem; padding: .9rem; }

/* hero slideshow */
.hero { position: relative; min-height: min(90vh, 840px); display: flex; align-items: center; overflow: hidden; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s ease; }
.slide.on { opacity: 1; transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 17, 31, .94) 0%, rgba(7, 17, 31, .7) 45%, rgba(7, 17, 31, .25) 100%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero-in { position: relative; z-index: 2; padding: 5rem 0; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); max-width: 820px; animation: up .9s both; }
.hero h1 span { display: block; color: var(--lime); font-size: .55em; font-weight: 700; margin-top: .4em; }
.hero .chip { animation: up .8s both; }
.hero-lead { max-width: 560px; font-size: 1.1rem; color: var(--text); animation: up .9s .15s both; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 3rem; animation: up .9s .3s both; }
.dots { display: flex; gap: .5rem; }
.dots button { width: 34px; height: 4px; border-radius: 4px; border: 0; background: rgba(255, 255, 255, .25); cursor: pointer; transition: background .3s, width .3s; padding: 0; }
.dots button.on { background: var(--lime); width: 56px; }
@keyframes up { from { opacity: 0; transform: translateY(26px); } }

/* sections */
.sec { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-tight { padding-top: 0; }
.sec-alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, .025) 80%, transparent); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
.head-c { justify-content: center; text-align: center; }
.head-p { max-width: 420px; color: var(--muted); margin: 0; }

/* who */
.who { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; }
.who-card { padding: clamp(1.8rem, 4vw, 3rem); }
.who-card p { color: var(--muted); }
.who-side { display: grid; gap: 1.4rem; grid-template-rows: 1fr auto; }
.who-side figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.who-side img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.flag { display: flex; gap: .6rem; align-items: center; padding: 1.1rem 1.3rem; margin: 0; font-weight: 500; }
.flag .ico { color: var(--lime); }

/* service carousel */
.arrows { display: flex; gap: .5rem; }
.arw { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: #fff; cursor: pointer; display: grid; place-items: center; transition: .25s; }
.arw:hover { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 31%); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--lime) transparent; }
.card { scroll-snap-align: start; position: relative; height: 420px; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: #fff; border: 1px solid var(--line); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(7, 17, 31, .95)); }
.card-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: grid; gap: .3rem; }
.card-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--lime); color: var(--bg); display: grid; place-items: center; margin-bottom: .5rem; }
.card strong { font: 700 1.3rem var(--head); }
.card em { font-style: normal; font-size: .9rem; color: var(--text); }
.card:hover img { transform: scale(1.08); }
.card:hover { border-color: rgba(198, 241, 53, .5); }
.also { margin-top: 1.6rem; color: var(--muted); font-size: .92rem; }
.also a { display: inline-block; margin: .2rem .3rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: .2s; }
.also a:hover { border-color: var(--lime); color: var(--lime); }

/* vessels */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.tags li { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font: 500 .95rem var(--head); transition: .25s; }
.tags li .ico { color: var(--lime); }
.tags li:hover { border-color: var(--lime); transform: translateY(-3px); }

/* why */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.why li { padding: 1.8rem; position: relative; overflow: hidden; transition: border-color .3s, transform .3s; }
.why li::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 241, 53, .18), transparent 70%); top: -90px; right: -90px; opacity: 0; transition: opacity .4s; }
.why li:hover { border-color: rgba(198, 241, 53, .4); transform: translateY(-4px); }
.why li:hover::before { opacity: 1; }
.why p { color: var(--muted); margin: 0; font-size: .93rem; }
.g-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(198, 241, 53, .1); color: var(--lime); margin-bottom: 1.1rem; border: 1px solid rgba(198, 241, 53, .25); }
.g-ico .ico { width: 24px; height: 24px; }

/* port directory */
.dir { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 1.2rem; }
.dir-col { padding: 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--line); }
.dir-col:first-child ul { columns: 2; column-gap: 1rem; }
.dir-col:nth-child(n+4) { grid-column: 4; }
.dir-col:nth-child(5) { margin-top: -0; }
.dir h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }
.dir ul { list-style: none; margin: 0; padding: 0; }
.dir li { break-inside: avoid; }
.dir a { display: block; padding: .25rem 0; color: var(--text); text-decoration: none; font-size: .9rem; transition: color .2s, padding .2s; }
.dir a:hover { color: var(--lime); padding-left: .3rem; }

/* lime band */
.lime { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--r-lg); background: linear-gradient(120deg, var(--lime), #9be15d); color: #1b2a10; }
.lime h2 { color: var(--bg); }
.lime p:last-child { margin: 0; }

/* inner intro */
.intro { position: relative; padding: 5.5rem 0 4rem; overflow: hidden; border-bottom: 1px solid var(--line); }
.intro-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 25%, rgba(7, 17, 31, .5)), linear-gradient(0deg, var(--bg), transparent 50%); }
.intro-in { position: relative; z-index: 2; max-width: 860px; margin-left: max(16px, calc((100vw - 1240px) / 2)); animation: up .8s both; }
.intro h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.intro p { color: var(--text); font-size: 1.06rem; margin: 0; max-width: 680px; }
.path { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; }
.path li + li::before { content: "/"; margin-right: .4rem; color: var(--lime); }
.path a { color: var(--muted); text-decoration: none; }
.path li:last-child a { color: var(--lime); pointer-events: none; }

/* duo, ticks */
.duo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.duo-top { align-items: start; }
.duo figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.duo figure img { width: 100%; height: 520px; object-fit: cover; }
.duo p { color: var(--muted); }
.ticks { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.ticks li { display: flex; gap: .5rem; font-size: .93rem; }
.ticks .ico { color: var(--lime); margin-top: 4px; }

/* services page */
.filter { position: sticky; top: 76px; z-index: 30; background: rgba(7, 17, 31, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.filter-in { display: flex; gap: .45rem; overflow-x: auto; padding: .75rem 0; scrollbar-width: thin; }
.filter a { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font: 500 .84rem var(--head); white-space: nowrap; transition: .2s; }
.filter a .ico { color: var(--lime); }
.filter a:hover, .filter a.on { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.filter a:hover .ico, .filter a.on .ico { color: var(--bg); }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.scard { overflow: hidden; scroll-margin-top: 150px; transition: border-color .3s; }
.scard:hover { border-color: rgba(198, 241, 53, .35); }
.scard-img { position: relative; height: 230px; }
.scard-img img { width: 100%; height: 100%; object-fit: cover; }
.scard-img .card-ico { position: absolute; left: 1.4rem; bottom: -22px; margin: 0; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); }
.scard-body { padding: 2.2rem 1.6rem 1.6rem; }
.scard-body h2 { font-size: 1.5rem; }
.scard-body > p { color: var(--muted); }

/* port pages */
.pl { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
.pside { position: sticky; top: 150px; }
.pside .glass { padding: 1.3rem; max-height: calc(100vh - 180px); overflow: auto; }
.pside ul { list-style: none; margin: 0; padding: 0; }
.pside a { display: block; padding: .45rem .7rem; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .88rem; transition: background .2s, color .2s; }
.pside a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.pside a[aria-current] { background: var(--lime); color: var(--bg); font-weight: 600; }
.prose { max-width: 840px; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.prose h2:first-of-type { margin-top: 2rem; }
.prose p { color: #b9c5d6; }
.prose ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; }
.prose li { padding: .55rem .9rem; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); font-size: .9rem; }
.sign { font: 700 1.15rem/1.4 var(--head); color: var(--lime) !important; padding: 1.3rem 1.5rem; border-radius: var(--r); border: 1px solid rgba(198, 241, 53, .35); background: rgba(198, 241, 53, .06); margin-top: 2rem; }
.prose .lime { margin-top: 3rem; }
.prose .lime h2 { border: 0; margin: 0 0 .4rem; padding: 0; font-size: 1.5rem; }
.prose .lime p { color: #1b2a10; }

/* forms */
.form-box, .tips { padding: clamp(1.5rem, 3vw, 2.4rem); }
.tips .ticks { grid-template-columns: 1fr; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.2rem 0 1.5rem; }
.fi { display: grid; gap: .35rem; }
.fi-full { grid-column: 1 / -1; }
.fi label { font: 600 .84rem var(--head); color: #fff; }
.fi b { color: var(--lime); }
.fi input, .fi textarea { width: 100%; font: inherit; color: #fff; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); transition: border-color .2s, box-shadow .2s; }
.fi input:focus, .fi textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(198, 241, 53, .12); }
.fi input[type="date"] { color-scheme: dark; }
.fi.bad input, .fi.bad textarea { border-color: #ff6b6b; }
.fi-err { color: #ff8a8a; font-size: .78rem; min-height: 1em; }
.form-note { margin: .9rem 0 0; color: var(--lime); font-weight: 600; }
.form-note:empty { display: none; }
.cinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cinfo > div { padding: 1.4rem; display: grid; gap: .3rem; align-content: start; word-break: break-word; }
.cinfo > div:first-child { grid-column: 1 / -1; }
.cinfo .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(198, 241, 53, .12); color: var(--lime); margin-bottom: .3rem; }
.cinfo b { font: 600 .95rem var(--head); color: #fff; }
.cinfo span, .cinfo a { font-size: .92rem; color: var(--text); }

/* footer */
.foot { border-top: 1px solid var(--line); background: #050c17; margin-top: 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr; gap: 2.5rem; padding: 4rem 0 3rem; }
.foot-brand p { color: var(--muted); font-size: .92rem; margin-top: 1rem; }
.foot h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.foot a { color: var(--text); text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--lime); }
.foot-contact li { display: flex; gap: .6rem; }
.foot-contact .ico { color: var(--lime); margin-top: 4px; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1.2rem 0; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 56px; height: 56px; border-radius: 16px; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6); transition: transform .25s; }
.wa:hover { transform: translateY(-3px); }
.wa .ico { width: 28px; height: 28px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(30px); filter: blur(4px); transition: opacity .8s ease, transform .8s ease, filter .8s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* responsive */
@media (max-width: 1100px) {
  .nav, .top-in > .cta { display: none; }
  .burger { display: grid; }
  .who, .duo, .pl { grid-template-columns: 1fr; }
  .pside { position: static; }
  .pside .glass { max-height: none; }
  .pside ul { columns: 2; }
  .why { grid-template-columns: 1fr 1fr; }
  .dir { grid-template-columns: 1fr 1fr; }
  .dir-col:nth-child(n+3) { grid-column: auto; }
  .track { grid-auto-columns: minmax(260px, 45%); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .head { flex-direction: column; align-items: flex-start; }
  .head-c { align-items: center; }
  .track { grid-auto-columns: 82%; }
  .card { height: 360px; }
  .why, .dir, .sgrid, .ticks, .form-grid, .cinfo, .prose ul, .foot-grid { grid-template-columns: 1fr; }
  .dir-col:first-child ul, .pside ul { columns: 1; }
  .duo figure img { height: 280px; }
  .lime { flex-direction: column; align-items: flex-start; }
  .hero::after { background: linear-gradient(180deg, rgba(7, 17, 31, .55), rgba(7, 17, 31, .92)); }
}

/* rfq extras + map */
.form-hint { font-size: .88rem; opacity: .8; margin: 0 0 1rem; }
.fi select { width: 100%; font: inherit; padding: .75rem .9rem; border-radius: 10px; border: 1.5px solid rgba(128,128,128,.35); background: transparent; color: inherit; }
.fi select option { color: #111; }
.fi input[type="file"] { padding: .6rem; border-style: dashed !important; cursor: pointer; }
.map-embed { margin-top: 1.6rem; border-radius: 14px; overflow: hidden; border: 1px solid rgba(128,128,128,.3); line-height: 0; }
.map-embed iframe { width: 100%; height: 340px; border: 0; }
.wa-pill { display: inline-flex; align-items: center; gap: .65rem; border: 1px solid rgba(198,241,53,.55); border-radius: 999px; padding: .58rem .9rem .58rem .62rem; background: rgba(7,17,31,.86); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.wa-pill:hover, .wa-pill:focus-visible { background: var(--bg-3); border-color: var(--lime); color: #fff; transform: translateY(-2px); }
.wa-dot { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #25d366; color: #fff; }
.wa-dot .ico { width: 1.2rem; height: 1.2rem; }
.wa-label { color: #25d366; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.wa-pill > span:last-child { color: var(--lime); }
.foot-wa { padding: 0 0 1.2rem; }
.hero-btns .wa-pill { margin: .2rem 0; }
@media (max-width: 700px) { .wa-pill { font-size: .7rem; } .hero-btns .wa-pill { max-width: 100%; } }

/* Keep the footer WhatsApp action directly below its contact details. */
.foot-contact + .foot-wa{padding:1rem 0 0}.foot-wa .wa-pill{max-width:100%;gap:.4rem;padding:.58rem .7rem;font-size:.72rem;white-space:nowrap}

/* Gabon country port coverage */
.gabon-coverage{position:relative;overflow:hidden;padding-bottom:1rem;background:radial-gradient(circle at 82% 18%,rgba(198,241,53,.09),transparent 33%)}
.gabon-coverage::before{content:"GABON";position:absolute;top:1rem;right:-.04em;color:rgba(255,255,255,.025);font:800 clamp(6rem,18vw,14rem)/1 var(--head);letter-spacing:-.08em;pointer-events:none}
.gabon-coverage__head{position:relative;z-index:1;max-width:820px;margin-bottom:2rem}
.gabon-coverage__head h2{font-size:clamp(2rem,4.5vw,3.7rem);max-width:700px}
.gabon-coverage__head p{max-width:790px;color:var(--muted);font-size:1.03rem}
.gabon-port-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.gabon-port-card{position:relative;display:flex;min-height:280px;flex-direction:column;padding:2rem;overflow:hidden;color:#fff;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.gabon-port-card::after{content:"";position:absolute;left:2rem;right:2rem;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--lime);transform:scaleX(.18);transform-origin:left;transition:transform .35s}
.gabon-port-card:hover,.gabon-port-card:focus-visible{transform:translateY(-7px);border-color:rgba(198,241,53,.45);box-shadow:0 24px 50px -24px rgba(0,0,0,.75)}
.gabon-port-card:hover::after,.gabon-port-card:focus-visible::after{transform:scaleX(1)}
.gabon-port-card__number{position:absolute;top:1.3rem;right:1.6rem;color:rgba(255,255,255,.11);font:800 2.4rem var(--head)}
.gabon-port-card__country{max-width:75%;color:var(--lime);font:700 .7rem var(--head);letter-spacing:.14em;text-transform:uppercase}
.gabon-port-card h3{margin:2.3rem 0 .8rem;font-size:clamp(1.7rem,3vw,2.35rem)}
.gabon-port-card h3 small{color:var(--muted);font-size:.58em}
.gabon-port-card p{max-width:520px;margin:0 0 1.6rem;color:var(--muted)}
.gabon-port-card__action{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;color:var(--lime);font:700 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase}
.gabon-port-card__action b{transition:transform .25s}.gabon-port-card:hover .gabon-port-card__action b{transform:translateX(5px)}
.gabon-coverage__note{position:relative;z-index:1;margin:1.25rem 0 0;padding-left:1rem;border-left:2px solid var(--lime);color:var(--muted);font-size:.82rem}
.gabon-service-ports{margin:.8rem 0 1.15rem;padding:1rem;border:1px solid rgba(198,241,53,.25);border-left:3px solid var(--lime);border-radius:0 14px 14px 0;background:linear-gradient(120deg,rgba(198,241,53,.1),rgba(255,255,255,.025))}
.gabon-service-ports__label{display:block;margin-bottom:.65rem;color:var(--lime);font:700 .68rem var(--head);letter-spacing:.12em;text-transform:uppercase}
.gabon-service-ports__list{display:flex;flex-wrap:wrap;gap:.5rem}
.gabon-service-ports__list a{display:inline-flex;align-items:center;min-height:31px;padding:.35rem .72rem;border:1px solid rgba(198,241,53,.28);border-radius:999px;background:rgba(7,17,31,.48);color:#fff;text-decoration:none;font:600 .78rem var(--head);transition:border-color .2s,color .2s,transform .2s}
.gabon-service-ports__list a:hover,.gabon-service-ports__list a:focus-visible{color:var(--lime);border-color:var(--lime);transform:translateY(-2px)}
.gabon-service-ports__list small{margin-left:.25rem;color:var(--muted);font-size:.84em}
@media(max-width:720px){.gabon-port-grid{grid-template-columns:1fr}.gabon-port-card{min-height:250px;padding:1.55rem}.gabon-service-ports__list{display:grid}.gabon-service-ports__list a{justify-content:center}}
@media(prefers-reduced-motion:reduce){.gabon-port-card,.gabon-port-card::after,.gabon-port-card__action b,.gabon-service-ports__list a{transition:none}}