:root{
  --ink:#0c1c1a; --ink-soft:#3c5450; --muted:#647c78;
  --paper:#ffffff; --bg:#f4faf8; --bg-soft:#eef7f4; --line:#dbeae6;
  --teal:#0d9488; --teal-deep:#0b3b38; --teal-mid:#14b8a6; --mist:#ccfbf1;
  --gold:#f59e0b; --gold-deep:#b45309; --navy:#1e3a8a; --green:#059669;
  --font-head:'Sora',system-ui,sans-serif; --font-body:'DM Sans',system-ui,sans-serif;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 1px 2px rgba(11,59,56,.06), 0 14px 36px rgba(11,59,56,.07);
  --shadow-lg:0 30px 70px rgba(11,59,56,.18);
  --ease-pro:cubic-bezier(.16,.84,.44,1);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.14; letter-spacing:-.02em; margin:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-weight:700; font-family:var(--font-head); font-size:15px;
  padding:12px 20px; border-radius:999px; border:1.6px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease-pro), box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap}
.btn-lg{padding:15px 28px; font-size:16px}
.btn-primary{background:var(--teal); color:#fff; box-shadow:0 10px 24px rgba(13,148,136,.32)}
.btn-primary:hover{background:#0f766e; transform:translateY(-2px); box-shadow:0 16px 32px rgba(13,148,136,.4)}
.btn-dark{background:var(--teal-deep); color:#fff}
.btn-dark:hover{transform:translateY(-2px); background:#0c302d}
.btn-outline{background:transparent; color:var(--teal-deep); border-color:var(--line)}
.btn-outline:hover{border-color:var(--teal); background:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink-soft)}
.btn-ghost:hover{color:var(--teal-deep)}
/* Loading state: spinner + no hover motion while a request is in flight.
   Toggle with classList + aria-busy; the .btn base already uses inline-flex
   with a gap, so the spinner slots in before the label. */
.btn.is-loading{pointer-events:none; opacity:.85}
.btn.is-loading::before{content:""; width:14px; height:14px; flex:0 0 auto;
  border-radius:50%; border:2px solid currentColor; border-top-color:transparent;
  animation:btn-spin .7s linear infinite}
.btn.is-loading:hover{transform:none}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(244,250,248,.82);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line)}
/* The nav row needs more room than the body's reading-width container:
   French labels (longer than English) push its natural content width to
   ~1430px, so it gets its own wider cap instead of inheriting --maxw. */
.site-header .container{max-width:1560px}
.nav{display:flex; align-items:center; gap:16px; min-height:72px}
.brand{display:inline-flex; align-items:center; gap:11px}
.brand-mark{display:inline-flex; filter:drop-shadow(0 6px 14px rgba(13,148,136,.3))}
.brand-text{font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--teal-deep)}
.brand-text span{color:var(--teal)}
.brand-text.light{color:#fff}
.brand-text.light span{color:var(--teal-mid)}
.nav-links{display:flex; gap:22px; margin-left:10px}
.nav-links a{font-weight:600; font-size:15px; color:var(--ink-soft); position:relative; padding:6px 0; white-space:nowrap}
.nav-links a:hover{color:var(--teal-deep)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--teal); transition:width .2s ease}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--teal-deep); font-weight:700}
.nav-links a.active::after{width:100%}
.mobile-menu a.active{color:var(--teal-deep)}
/* compact page header (non-home pages) */
.page-head{padding:64px 0 8px; position:relative; overflow:hidden}
.page-head .hero-bg{position:absolute; inset:0; z-index:0}
.page-head .container{position:relative; z-index:1}
.page-head .kicker{margin-bottom:14px}
.page-head h1{font-size:clamp(34px,5vw,54px); font-weight:800; color:var(--ink); max-width:760px}
.page-head p{font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:620px; margin:18px 0 0}
.nav-cta{display:flex; gap:10px; margin-left:auto; align-items:center}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer}
.nav-toggle span{width:24px; height:2.4px; background:var(--teal-deep); border-radius:2px; transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
.mobile-menu{display:none; flex-direction:column; gap:4px; padding:10px 24px 20px; background:var(--bg); border-bottom:1px solid var(--line)}
.mobile-menu a{padding:13px 6px; font-weight:600; border-bottom:1px solid var(--line); color:var(--ink)}
.mobile-menu a.btn{border:0; margin-top:10px; color:#fff}
.mobile-menu.open{display:flex}
/* Above real phone widths this panel is a dropdown under the toggle, not a
   full-bleed mobile sheet, so its buttons shouldn't stretch edge to edge. */
@media (min-width:641px){
  .mobile-menu.open{
    position:absolute; top:100%; right:24px; z-index:60;
    width:340px; max-width:calc(100vw - 48px);
    border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shadow-lg);
  }
}
/* Collapse the desktop nav to the hamburger before it gets cramped.
   Raised from 1100px: French labels need ~1430px of unwrapped content,
   so anything narrower must collapse rather than overflow the viewport. */
@media (max-width:1500px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
}
.nav-cta .btn{white-space:nowrap}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:72px 0 0}
.hero-bg{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1100px 540px at 78% -8%, rgba(20,184,166,.34), transparent 60%),
    radial-gradient(760px 460px at 6% 8%, rgba(245,158,11,.22), transparent 58%),
    radial-gradient(900px 500px at 50% 110%, rgba(13,148,136,.14), transparent 60%),
    linear-gradient(180deg,#effcf8, var(--bg) 72%)}
/* Fine cartographer's grid over the hero sky */
.hero-bg::before{content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(13,148,136,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 85%)}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center; padding-bottom:64px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal-deep);
  background:var(--mist); border:1px solid rgba(13,148,136,.28); padding:7px 14px; border-radius:999px}
.eyebrow .arrow{color:var(--gold); font-weight:800}
.hero h1{font-size:clamp(40px,6vw,68px); font-weight:800; margin:22px 0 0; color:var(--ink)}
.hero .grad{background:linear-gradient(120deg,var(--teal) 10%, var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:560px; margin:22px 0 0}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px 30px; list-style:none; padding:0; margin:34px 0 0; color:var(--muted); font-size:15px}
.hero-trust strong{color:var(--teal-deep); font-weight:800}
.hero-trust li{position:relative; padding-left:18px}
.hero-trust li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--teal-mid)}

/* hero card */
.hero-card{position:relative; z-index:1}
.route-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:24px; transform:rotate(.4deg)}
.route-head{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink-soft); font-size:14px}
.route-head .dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(5,150,105,.16)}
.route-head .tag{margin-left:auto; background:rgba(245,158,11,.14); color:var(--gold-deep); font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px}
.route-line{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin:22px 0}
.route-line .node b{display:block; font-family:var(--font-head); font-size:17px}
.route-line .node small{color:var(--muted); font-size:13px}
.route-line .node:last-child{text-align:right}
.track{height:3px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px); position:relative; border-radius:3px}
.track span{position:absolute; left:0; top:50%; width:64%; height:3px; background:linear-gradient(90deg,var(--teal),var(--teal-mid)); transform:translateY(-50%); border-radius:3px}
.track span::after{content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 4px 10px rgba(13,148,136,.4)}
.route-meta{display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid var(--line); padding-top:16px}
.route-meta span{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700}
.route-meta b{font-family:var(--font-head); font-size:16px}

/* marquee */
.marquee{position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper)}
.marquee-track{display:flex; gap:26px; align-items:center; white-space:nowrap; padding:14px 0; animation:scroll 26s linear infinite; font-family:var(--font-head); font-weight:700; color:var(--teal-deep); font-size:18px}
.marquee-track span:nth-child(even){color:var(--gold)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:86px 0}
.section-alt{background:var(--bg-soft)}
.section-head{max-width:680px; margin:0 auto 48px; text-align:center}
.kicker{display:inline-block; font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:14px}
.kicker.light{color:var(--teal-mid)}
.section-head h2{font-size:clamp(28px,4vw,42px); color:var(--ink)}
.section-head p{color:var(--ink-soft); font-size:18px; margin:16px 0 0}

/* services */
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.service-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow); transition:transform .22s var(--ease-pro), box-shadow .22s ease, border-color .22s ease}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(13,148,136,.52)}
.service-card:focus-visible{outline:3px solid rgba(13,148,136,.28); outline-offset:4px; border-color:var(--teal)}
.service-icon{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px}
.service-icon svg{width:28px; height:28px}
.service-icon[data-tone="teal"]{background:var(--mist); color:var(--teal-deep)}
.service-icon[data-tone="gold"]{background:rgba(245,158,11,.16); color:var(--gold-deep)}
.service-icon[data-tone="navy"]{background:rgba(30,58,138,.12); color:var(--navy)}
.service-icon[data-tone="green"]{background:rgba(5,150,105,.14); color:var(--green)}
.service-card h3{font-size:21px; margin-bottom:8px}
.service-card p{color:var(--ink-soft); font-size:15.5px; margin:0 0 16px}
.link-arrow{font-weight:700; color:var(--teal-deep); font-size:15px; display:inline-flex; gap:6px}
.link-arrow span{transition:transform .15s ease}
.link-arrow:hover span{transform:translateX(4px)}

.trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.trust-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow)}
.trust-card span{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--mist); color:var(--teal-deep); font-family:var(--font-head); font-size:14px; font-weight:800; margin-bottom:16px}
.trust-card h3{font-size:20px; margin-bottom:8px}
.trust-card p{color:var(--ink-soft); font-size:15.5px; margin:0}

/* featured partners */
.featured-partners-section[hidden]{display:none}
.partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.partner-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); display:grid; grid-template-columns:76px minmax(0,1fr); gap:16px; padding:20px; align-items:start}
.partner-card img{width:76px; height:76px; border:1px solid var(--line); border-radius:14px; object-fit:contain; background:var(--bg-soft); padding:8px}
.partner-card h3{font-size:19px; margin:0 0 6px; overflow-wrap:anywhere}
.partner-card p{color:var(--ink-soft); font-size:15px; margin:0}
.partner-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.partner-chips span{background:var(--mist); border:1px solid rgba(13,148,136,.22); border-radius:999px; color:var(--teal-deep); font-size:12px; font-weight:800; padding:5px 9px; text-transform:capitalize}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s}
.step{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; position:relative}
.step-num{display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg,var(--teal-deep),var(--teal-mid)); color:#fff; font-family:var(--font-head); font-weight:800; font-size:19px; margin-bottom:16px; box-shadow:0 10px 22px rgba(13,148,136,.3)}
.step h3{font-size:18px; margin-bottom:7px}
.step p{color:var(--ink-soft); font-size:15px; margin:0}

/* destinations */
.dest-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.dest-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; text-align:center; transition:transform .18s ease, box-shadow .18s ease}
.dest-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.dest-card .flag{font-size:42px; line-height:1; margin-bottom:12px}
.dest-card h3{font-size:20px}
.dest-card p{color:var(--muted); font-size:14px; margin:4px 0 14px}
.dest-card .est{display:inline-block; background:var(--bg-soft); border:1px solid var(--line); color:var(--teal-deep); font-weight:700; font-size:13px; padding:6px 13px; border-radius:999px}
.dest-note{text-align:center; margin-top:30px; color:var(--ink-soft)}
.dest-note a{color:var(--teal-deep); font-weight:700}

/* why (dark) */
.section-dark{background:linear-gradient(160deg,var(--teal-deep),#08302d); color:#dffaf4}
.why-inner{display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:center}
.why-copy h2{color:#fff; font-size:clamp(28px,4vw,40px)}
.why-copy p{color:rgba(223,250,244,.82); font-size:18px; margin:16px 0 28px}
.why-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:20px 26px}
.why-list li{display:flex; gap:13px; align-items:flex-start}
.ck{flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(20,184,166,.22); color:var(--teal-mid); display:grid; place-items:center; font-weight:800; font-size:14px; margin-top:2px}
.why-list b{font-family:var(--font-head); color:#fff; font-size:16px}
.why-list p{margin:3px 0 0; color:rgba(223,250,244,.72); font-size:14.5px}

/* app cta */
.app-cta{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.app-copy h2{font-size:clamp(28px,4vw,40px)}
.app-copy p{color:var(--ink-soft); font-size:18px; margin:16px 0 26px}
.app-visual{display:grid; place-items:center}

/* contact */
.contact-inner{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.contact-copy h2{font-size:clamp(26px,3.6vw,38px)}
.contact-copy p{color:var(--ink-soft); font-size:18px; margin:16px 0 24px}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.contact-list li{display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink)}
.contact-list a{color:var(--teal-deep)}
.contact-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact-form label{display:block; font-weight:700; font-size:14px; color:var(--ink-soft); margin-bottom:16px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%; margin-top:7px; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; font:inherit; font-size:15px; background:var(--bg); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(13,148,136,.14); background:#fff}
.contact-form textarea{resize:vertical}
.contact-form .btn{width:100%; margin-top:4px}
.form-note{display:block; color:var(--muted); font-size:12.5px; margin-top:12px; text-align:center}

/* legal and privacy */
.legal-head .legal-updated{display:inline-flex; margin-top:18px; padding:7px 12px; border:1px solid rgba(13,148,136,.28); border-radius:999px; color:var(--teal-deep); background:rgba(255,255,255,.55); font-size:13px; font-weight:700}
.legal-section{background:var(--bg-soft)}
.legal-layout{display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.8fr); gap:42px; align-items:start}
.legal-summary{position:sticky; top:112px; background:var(--teal-deep); color:#dffaf4; border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow)}
.legal-summary h2{color:#fff; margin-bottom:12px}
.legal-summary p,.legal-summary li{color:rgba(223,250,244,.82); font-size:14.5px}
.legal-summary ul{display:grid; gap:10px; padding-left:20px; margin:18px 0 24px}
.legal-summary .btn{width:100%; justify-content:center}
.legal-copy{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,48px); box-shadow:0 18px 44px rgba(11,59,56,.08)}
.legal-copy section+section{border-top:1px solid var(--line); margin-top:30px; padding-top:30px}
.legal-copy h2{font-size:clamp(21px,2.5vw,27px); margin-bottom:12px}
.legal-copy h3{font-size:17px; margin:20px 0 6px}
.legal-copy p,.legal-copy li{color:var(--ink-soft); line-height:1.78}
.legal-copy ul{display:grid; gap:8px; padding-left:22px}
.legal-copy a{color:var(--teal-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* footer */
.site-footer{background:#06211f; color:#bfe7e0; padding:60px 0 26px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.footer-brand p{color:rgba(191,231,224,.7); font-size:15px; max-width:300px; margin:16px 0 0}
.footer-col h4{font-family:var(--font-head); color:#fff; font-size:15px; margin-bottom:16px}
.footer-col a{display:block; color:rgba(191,231,224,.78); font-size:14.5px; padding:5px 0}
.footer-col a:hover{color:var(--teal-mid)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:22px; border-top:1px solid rgba(191,231,224,.16); color:rgba(191,231,224,.6); font-size:13.5px}
.footer-legal{display:inline-flex; align-items:center; gap:6px}
.footer-legal a{color:rgba(191,231,224,.78)}
.footer-legal a:hover{color:var(--teal-mid)}
.footer-tag{color:var(--teal-mid); font-family:var(--font-head); font-weight:700}

.btn-customer-login{
  min-height:42px;
  padding:9px 8px;
  border-radius:8px;
  color:var(--teal-deep);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  font-size:14px;
}
.btn-customer-login:hover{
  color:var(--teal);
  background:transparent;
  border-color:transparent;
  transform:none;
  box-shadow:inset 0 -2px 0 var(--teal);
}
.btn-customer-login:focus-visible{outline:3px solid rgba(13,148,136,.28); outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .hero-inner{grid-template-columns:1fr; gap:36px; padding-bottom:48px}
  .hero-card{max-width:460px}
  .service-grid,.steps,.trust-grid,.partner-grid{grid-template-columns:repeat(2,1fr)}
  .why-inner,.app-cta,.contact-inner{grid-template-columns:1fr; gap:36px}
  .dest-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .legal-layout{grid-template-columns:1fr}
  .legal-summary{position:static}
}
@media (max-width:560px){
  body{font-size:16px}
  .section{padding:64px 0}
  .container{padding:0 18px}
  .service-grid,.steps,.trust-grid,.partner-grid,.dest-grid,.why-list,.field-row{grid-template-columns:1fr}
  .service-card{padding:22px 20px}
  .service-card:active{transform:none; border-color:var(--teal); background:var(--bg-soft)}
  .partner-card{grid-template-columns:62px minmax(0,1fr); padding:16px}
  .partner-card img{width:62px; height:62px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
  .route-line{gap:8px}
  .hero-actions{display:grid; grid-template-columns:1fr}
  .hero-actions .btn{width:100%; justify-content:center}
}

/* ============================================================
   PLATFORM v2 — super-app positioning, app showcase, mockups
   ============================================================ */

/* eyebrow star */
.eyebrow .arrow{color:var(--gold)}

/* store badges */
.store-badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.store-badge{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:13px;
  background:var(--teal-deep); color:#fff; border:1px solid var(--teal-deep); transition:transform .15s ease, box-shadow .15s ease}
.store-badge:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(11,59,56,.25)}
.store-badge svg{flex:0 0 auto}
.store-badge span{display:flex; flex-direction:column; line-height:1.15}
.store-badge small{font-size:10.5px; opacity:.8; letter-spacing:.02em}
.store-badge b{font-family:var(--font-head); font-size:16px; font-weight:800}
.store-badge.dark{background:#08211f; border-color:rgba(255,255,255,.16)}

.hero-card{display:flex; justify-content:center}
.hero-system{
  min-height:520px;
  align-items:center;
  isolation:isolate;
}
.signal-network{
  position:absolute;
  inset:-32px -44px -42px -64px;
  z-index:1;
  pointer-events:none;
}
.signal-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.signal-lines path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.signal-beam{
  stroke:url("#signalGradient");
  stroke-width:3;
  stroke-dasharray:7 14;
  opacity:.72;
  filter:drop-shadow(0 10px 18px rgba(13,148,136,.18));
}
.provider-card,
.trust-orb{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid rgba(13,148,136,.22);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 36px rgba(11,59,56,.12);
  backdrop-filter:blur(12px);
  color:var(--teal-deep);
  font-family:var(--font-head);
  white-space:nowrap;
}
.provider-card i{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--mist);
  font-style:normal;
  font-size:17px;
}
.provider-card b,
.trust-orb b{
  display:block;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
}
.provider-card small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:800;
}
.provider-source{left:-4%; bottom:18%}
.provider-ship{left:-6%; top:30%}
.provider-cars{right:-5%; top:33%}
.provider-food{right:-3%; bottom:22%}
.trust-orb{
  left:50%;
  top:-1%;
  z-index:4;
  transform:translateX(-50%);
  border-radius:999px;
  color:var(--gold-deep);
  border-color:rgba(245,158,11,.28);
  background:rgba(255,251,235,.92);
}
.trust-orb i{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  font-style:normal;
  font-size:13px;
  font-weight:900;
  box-shadow:0 0 0 5px rgba(245,158,11,.16);
}
/* featured service: Source from Africa */
.service-featured{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  background:linear-gradient(135deg,#0b3b38,#0d9488); color:#eafff9; border-radius:var(--r-lg);
  padding:44px; margin-bottom:30px; overflow:hidden; box-shadow:var(--shadow-lg)}
.sf-tag{display:inline-block; background:rgba(245,158,11,.22); color:#ffe2ad; border:1px solid rgba(245,158,11,.4);
  font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:16px}
.sf-copy h3{font-family:var(--font-head); font-size:clamp(26px,3.4vw,36px); color:#fff; margin-bottom:14px}
.sf-copy p{color:rgba(234,255,249,.85); font-size:17px; margin:0 0 18px; max-width:520px}
.sf-list{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:9px}
.sf-list li{color:#d6fbf1; font-weight:600; font-size:15px}
.sf-visual{display:grid; place-items:center}
.real-app-capture{
  width:min(100%,286px); aspect-ratio:201/437; overflow:hidden; line-height:0;
  background:#f7f9fc; border:7px solid rgba(5,35,32,.92); border-radius:38px;
  box-shadow:0 30px 65px rgba(3,32,29,.34),0 0 0 1px rgba(255,255,255,.18)
}
.real-app-capture img{width:100%; height:100%; object-fit:cover}
.real-app-capture-showcase{width:min(100%,330px)}

/* service icon plum + 'more' card */
.service-icon[data-tone="plum"]{background:rgba(124,58,237,.13); color:#6d28d9}
.service-card-more{background:linear-gradient(180deg,var(--bg-soft),#fff); border-style:dashed}

/* ---- App showcase ---- */
.app-showcase{background:linear-gradient(160deg,#06302c,#0b3b38 60%,#0e433f); color:#e9fff9; position:relative; overflow:hidden}
.app-showcase::before{content:""; position:absolute; right:-120px; top:-80px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(20,184,166,.28),transparent 70%)}
.app-show-inner{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:center}
.app-show-copy h1,.app-show-copy h2{color:#fff; font-size:clamp(28px,4vw,42px)}
.app-show-copy>p{color:rgba(233,255,249,.82); font-size:18px; margin:16px 0 26px}
.app-feature-list{list-style:none; padding:0; margin:0 0 28px; display:grid; gap:16px}
.app-feature-list li{display:flex; gap:13px; align-items:flex-start}
.app-feature-list b{font-family:var(--font-head); color:#fff; font-size:16px}
.app-feature-list p{margin:3px 0 0; color:rgba(233,255,249,.72); font-size:14.5px}
.app-show-visual{display:flex; justify-content:center; align-items:center}

@media (max-width:980px){
  .service-featured{grid-template-columns:1fr; gap:30px; padding:34px}
  .app-show-inner{grid-template-columns:1fr; gap:30px}
  .hero-system{min-height:500px}
  .signal-network{inset:-20px -24px -34px -34px}
  .provider-food{display:none}
}
@media (max-width:560px){
  .service-featured{padding:26px}
  .real-app-capture-showcase{width:min(100%,300px)}
  .store-badges{gap:10px}
  .hero-system{min-height:500px; margin-top:4px; flex-direction:column; gap:10px}
  .signal-network{inset:-8px -10px -18px -18px; z-index:0}
  .provider-card,
  .trust-orb,
  .signal-lines{display:none}
}
@media (max-width:360px){
  .store-badges{display:grid; grid-template-columns:1fr}
  .store-badge{justify-content:center}
  .footer-grid{grid-template-columns:1fr}
}

/* ============ Multi-page components ============ */
.cta-band{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  background:linear-gradient(135deg,#0b3b38,#0d9488); color:#eafff9; border-radius:var(--r-lg); padding:40px 44px; box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff; font-size:clamp(24px,3vw,34px)}
.cta-band p{color:rgba(234,255,249,.85); font-size:17px; margin:10px 0 0; max-width:520px}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

.source-split{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.steps-vert{grid-template-columns:1fr; gap:14px}
.steps-vert .step{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:start; padding:20px 22px}
.steps-vert .step-num{grid-row:span 2; margin:0}
.steps-vert .step h3{margin-top:2px}

.chip-grid{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.ex-chip{background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:12px 20px; font-weight:600; font-size:15px; color:var(--ink); box-shadow:var(--shadow)}

a.service-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
a.service-card p{flex:1}
a.service-card .link-arrow{
  width:100%;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding:15px 0 0;
  border-top:1px solid var(--line);
  background:transparent;
  transition:border-color .18s ease, color .18s ease;
}
a.service-card:hover .link-arrow,
a.service-card:focus-visible .link-arrow{
  color:var(--teal);
  border-color:rgba(13,148,136,.42);
}
/* Filled by default (not only on hover): on touch devices there is no hover
   state, so the "this is a button" signal has to be visible at rest. */
a.service-card .link-arrow span{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:10px;
  color:#fff;
  background:var(--teal-deep);
  box-shadow:0 4px 10px rgba(11,59,56,.22);
  transition:transform .18s var(--ease-pro), background .18s ease, box-shadow .18s ease;
}
a.service-card:hover .link-arrow span,
a.service-card:focus-visible .link-arrow span{
  background:var(--teal);
  transform:translateX(4px) scale(1.08);
  box-shadow:0 6px 16px rgba(13,148,136,.34);
}

.mobile-menu .customer-login-link{min-height:44px}

@media (max-width:980px){
  .source-split{grid-template-columns:1fr; gap:32px}
  .cta-band{padding:32px}
}

/* ============================================================
   MOTION — polished, professional animation layer
   (all gated behind prefers-reduced-motion)
   ============================================================ */

/* Header reacts to scroll */
.site-header { transition: box-shadow .3s ease, background .3s ease; }
.site-header.scrolled {
  background: rgba(244, 250, 248, .94);
  box-shadow: 0 8px 30px rgba(11, 59, 56, .10);
}
.scroll-progress{
  position:fixed; left:0; top:0; z-index:80; width:100%; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold));
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left center;
  transition:transform .08s linear;
  pointer-events:none;
}

/* Scroll-reveal (only active when JS adds .js-anim, so no-JS stays visible) */
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .64s var(--ease-pro),
              transform .64s var(--ease-pro);
  will-change: opacity, transform;
}
html.js-anim .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero + page-head entrance */
  .hero-copy > *,
  .hero-card,
  .page-head .kicker,
  .page-head h1,
  .page-head p,
  .page-head .hero-actions {
    animation: rise .8s cubic-bezier(.16, .84, .44, 1) backwards;
  }
  .hero-copy > *:nth-child(1) { animation-delay: .04s; }
  .hero-copy > *:nth-child(2) { animation-delay: .10s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .22s; }
  .hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .hero-copy > *:nth-child(6) { animation-delay: .34s; }
  .hero-card { animation-delay: .30s; }
  .page-head h1 { animation-delay: .08s; }
  .page-head p { animation-delay: .16s; }
  .page-head .hero-actions { animation-delay: .24s; }

  .hero-system .signal-beam {
    stroke-dasharray:260;
    stroke-dashoffset:260;
    animation:signalDraw 1s var(--ease-pro) .25s forwards,
              signalFlow 3.2s linear 1.25s infinite;
  }
  .hero-system .beam-ship{animation-delay:.38s, 1.38s}
  .hero-system .beam-cars{animation-delay:.52s, 1.52s}
  .hero-system .beam-food{animation-delay:.66s, 1.66s}
  .hero-system .provider-card,
  .hero-system .trust-orb {
    opacity:0;
    transform:translateY(12px) scale(.96);
    animation:providerIn .58s var(--ease-pro) forwards;
  }
  .hero-system .provider-source{animation-delay:.42s}
  .hero-system .provider-ship{animation-delay:.58s}
  .hero-system .provider-cars{animation-delay:.74s}
  .hero-system .provider-food{animation-delay:.90s}
  .hero-system .trust-orb{animation-delay:1.12s}

  /* One-time gradient headline polish */
  .hero .grad {
    background-size: 220% auto;
    animation: shimmer 1.4s ease-out .55s both;
  }

  /* Pulsing live dot on the route card */
  .route-head .dot { animation: pulse 2.4s ease-in-out infinite; }

  .track span {
    transform-origin:left center;
    animation: fillTrack 1.1s var(--ease-pro) .35s backwards;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes riseSoft {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes signalDraw {
  to { stroke-dashoffset:0; }
}
@keyframes signalFlow {
  to { stroke-dashoffset:-36; }
}
@keyframes providerIn {
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes floaty {
  0%, 100% { transform: rotate(.5deg) translateY(0); }
  50% { transform: rotate(.5deg) translateY(-12px); }
}
@keyframes shimmer { to { background-position: 220% center; } }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-1.5%, 1%, 0) scale(1.05); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, .45); }
  60% { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
}
@keyframes fillTrack {
  from { transform:scaleX(.18); opacity:.75; }
  to { transform:scaleX(1); opacity:1; }
}

/* Richer hover micro-interactions */
.btn,
.store-badge {
  position:relative;
  overflow:hidden;
}
.btn::before,
.store-badge::before {
  content:"";
  position:absolute;
  inset:-1px auto -1px -65%;
  width:48%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  transition:transform .6s var(--ease-pro);
  pointer-events:none;
}
.btn:hover::before,
.store-badge:hover::before {
  transform:translateX(330%) skewX(-18deg);
}
.service-card,
.trust-card,
.partner-card,
.dest-card,
.step,
.cta-band,
.service-featured,
.ex-chip {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.service-card::after,
.trust-card::after,
.partner-card::after,
.dest-card::after,
.step::after,
.cta-band::after,
.service-featured::after,
.ex-chip::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:
    radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
      rgba(20,184,166,.16),
      transparent 58%);
  transition:opacity .25s ease;
  pointer-events:none;
}
.cta-band::after,
.service-featured::after {
  background:
    radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
      rgba(255,255,255,.18),
      transparent 60%);
}
.service-card:hover::after,
.trust-card:hover::after,
.partner-card:hover::after,
.dest-card:hover::after,
.step:hover::after,
.cta-band:hover::after,
.service-featured:hover::after,
.ex-chip:hover::after { opacity:1; }
.service-card .service-icon { transition: transform .25s var(--ease-pro); }
.service-card:hover .service-icon { transform: scale(1.08) rotate(-3deg); }
.btn:active { transform: translateY(0) scale(.98); }
.dest-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dest-card:hover { border-color: rgba(13,148,136,.4); }
.store-badge { transition: transform .18s var(--ease-pro), box-shadow .18s ease; }
.trust-card,
.partner-card,
.step,
.ex-chip {
  transition:transform .22s var(--ease-pro), box-shadow .22s ease, border-color .22s ease;
}
.trust-card:hover,
.partner-card:hover,
.step:hover,
.ex-chip:hover {
  transform:translateY(-5px);
  border-color:rgba(13,148,136,.34);
  box-shadow:var(--shadow-lg);
}
.brand-mark,
.eyebrow .arrow,
.trust-card span,
.step-num,
.partner-card img {
  transition:transform .22s var(--ease-pro);
}
.brand:hover .brand-mark,
.trust-card:hover span,
.step:hover .step-num,
.partner-card:hover img {
  transform:translateY(-2px) scale(1.04);
}
.eyebrow:hover .arrow { transform:rotate(18deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  .scroll-progress{display:none}
}

/* ============================================================
   Hero corridor — animated diaspora ⇄ West Africa route
   ============================================================ */
.corridor{position:relative; width:100%; max-width:560px; margin:0 auto}
.corridor-map{width:100%; height:auto; display:block; overflow:visible}
.land{transition:opacity .6s ease}
.js-anim .land{opacity:0; animation:landIn 1.2s var(--ease-pro, ease) forwards}
.js-anim .land:nth-of-type(2){animation-delay:.18s}
@keyframes landIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.arc-flow{stroke-dasharray:9 15; animation:arcFlow 1.05s linear infinite}
@keyframes arcFlow{to{stroke-dashoffset:-24}}

.payload circle{fill:#fff; stroke:rgba(13,148,136,.22); stroke-width:1.5;
  filter:drop-shadow(0 6px 12px rgba(11,59,56,.22))}
.payload .emoji{font-size:18px; text-anchor:middle; dominant-baseline:middle}

.port .dot{filter:drop-shadow(0 3px 8px rgba(11,59,56,.35))}
.port .ping{fill:rgba(13,148,136,.45); transform-box:fill-box; transform-origin:center;
  animation:portPing 2.4s ease-out infinite}
.port .ping-gold{fill:rgba(245,158,11,.5)}
.port:last-of-type .ping{animation-delay:1.2s}
@keyframes portPing{0%{r:7; opacity:.6} 70%,100%{r:22; opacity:0}}

.corridor-label{position:absolute; display:flex; flex-direction:column; line-height:1.1;
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:12px; padding:7px 12px; box-shadow:var(--shadow)}
.corridor-label b{font-family:var(--font-head); font-size:14px; color:var(--ink)}
.corridor-label small{font-size:11px; color:var(--muted); font-weight:600}
.lbl-from{left:0; top:44%}
.lbl-to{right:1%; top:24%}
.lbl-to b{color:var(--gold-deep)}

.corridor-card{position:absolute; left:8%; right:8%; bottom:-6px;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:14px 16px}
.cc-head{display:flex; align-items:center; gap:11px}
.cc-emoji{font-size:24px; width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--bg-soft); border-radius:12px}
.cc-route{flex:1; min-width:0}
.cc-route b{display:block; font-family:var(--font-head); font-size:15px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cc-route small{color:var(--muted); font-size:12px}
.cc-example{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); padding:4px 9px; border-radius:999px}
.cc-example i{width:7px; height:7px; border-radius:50%; background:var(--muted)}
.cc-bar{height:7px; border-radius:6px; background:var(--bg-soft); overflow:hidden; margin:13px 0 7px}
.cc-bar span{display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--teal),var(--teal-mid)); transition:width .7s var(--ease-pro, ease)}
.cc-eta{color:var(--ink-soft); font-size:12.5px; font-weight:600}
.cc-swap{animation:ccSwap .5s var(--ease-pro, ease)}
@keyframes ccSwap{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.corridor-card{margin-bottom:14px}
@media (max-width:980px){ .corridor{max-width:480px} .corridor-card{position:static; margin-top:14px; left:0; right:0} .lbl-from{top:58%} }

@media (prefers-reduced-motion: reduce){
  .arc-flow, .port .ping, .js-anim .land{animation:none}
  .corridor svg animateMotion{display:none}
  .payload:nth-of-type(2){transform:translate(150px,-120px)}
}

/* ============================================================
   Hero globe — global, two-way, multi-service network
   ============================================================ */
.globe-wrap{position:relative; width:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; align-items:center}
.globe-stage{position:relative; width:100%}
.globe-svg{width:100%; height:auto; display:block; overflow:visible}
/* card sits BELOW the globe, not over it */
.globe-wrap .corridor-card{position:static; left:auto; right:auto; bottom:auto; width:100%; max-width:392px; margin:-30px auto 0; position:relative; z-index:3}

.net-arc{fill:none; stroke:url(#netArc); stroke-width:2; stroke-opacity:.5; stroke-dasharray:5 9; animation:netDash 1.25s linear infinite}
@keyframes netDash{to{stroke-dashoffset:-14}}
.net-pulse{fill:#14b8a6; filter:drop-shadow(0 0 6px rgba(20,184,166,.85))}
.net-pulse.gold{fill:#f59e0b; filter:drop-shadow(0 0 6px rgba(245,158,11,.85))}

.hub circle{fill:#06302c}
.hub .hub-ping{fill:rgba(20,184,166,.55); animation:hubPing 2.6s ease-out infinite}
.hub .hub-ping.gold{fill:rgba(245,158,11,.6)}
@keyframes hubPing{0%{r:5; opacity:.6} 70%,100%{r:17; opacity:0}}

.svc{position:absolute; display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px 6px 9px;
  font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow); animation:floaty 5.5s ease-in-out infinite; white-space:nowrap}
.svc i{font-size:15px; font-style:normal}
.svc-a{top:3%;  left:6%}
.svc-b{top:0;   right:12%}
.svc-c{top:38%; right:-3%}
.svc-d{bottom:20%; right:4%}
.svc-e{bottom:9%; left:8%}
.svc-f{top:36%; left:-4%}
.svc-b{animation-delay:.5s} .svc-c{animation-delay:1s} .svc-d{animation-delay:1.6s}
.svc-e{animation-delay:2.1s} .svc-f{animation-delay:2.7s}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}

.globe-trust{position:absolute; top:5%; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  color:var(--teal-deep); background:var(--mist); border:1px solid rgba(13,148,136,.28);
  padding:5px 12px; border-radius:999px; box-shadow:var(--shadow)}
.globe-trust i{width:15px; height:15px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; font-size:9px; font-style:normal}

@media (max-width:980px){ .globe-wrap{max-width:440px} .svc{font-size:12px} .corridor-card{position:static; margin-top:18px; left:0; right:0} }
@media (prefers-reduced-motion: reduce){
  .net-arc, .net-pulse, .hub .hub-ping, .svc{animation:none}
  .globe-wrap svg animateMotion, .globe-wrap svg animateTransform{display:none}
}

/* Interactive canvas globe (progressive enhancement over the SVG fallback) */
.globe-canvas{display:none; width:100%; aspect-ratio:1/1; touch-action:none; cursor:grab}
.globe-stage:has(.globe-canvas[style*="block"]) .globe-fallback{display:none}

/* ================= Motion & atmosphere layer (motion.js) =================
   Everything below is injected/tagged by assets/motion.js. Decorative only:
   if motion.js never runs, no page depends on any of this. All movement is
   transform/opacity, and every animation is disabled under
   prefers-reduced-motion. */

/* --- Sea waves: the shipping undertone at the hero's base --- */
.sea{position:absolute; left:0; right:0; bottom:-2px; z-index:0;
  pointer-events:none; line-height:0}
.sea svg{width:200%; height:64px; display:block}
.sea-1 svg{animation:seaDrift 24s linear infinite}
.sea-2{opacity:.5}
.sea-2 svg{animation:seaDrift 38s linear reverse infinite}
@keyframes seaDrift{to{transform:translateX(-50%)}}

/* --- Button sheen on hover --- */
.btn{position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; top:0; bottom:0; left:-80%;
  width:55%; transform:skewX(-22deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transition:left .05s; pointer-events:none; opacity:0}
.btn:hover::after{left:130%; opacity:1; transition:left .6s var(--ease-pro)}

/* --- Floating glyphs on subpage heads --- */
.glyphs{position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden}
.glyphs b{position:absolute; font-size:30px; opacity:.14; filter:saturate(.7);
  animation:glyphFloat 12s ease-in-out infinite alternate}
.glyphs b:nth-child(2){animation-duration:15s; animation-delay:-4s}
.glyphs b:nth-child(3){animation-duration:18s; animation-delay:-9s}
@keyframes glyphFloat{from{transform:translateY(-8px) rotate(-4deg)}
  to{transform:translateY(14px) rotate(5deg)}}

/* --- Kill switch --- */
@media (prefers-reduced-motion: reduce){
  .sea svg, .glyphs b, .sky-plane, .sea-ship, .sea-ship svg,
  .marquee-track{animation:none !important}
  .mesh{display:none}
  .sky-plane{left:64%; top:14%}
  .sea-ship{left:58%}
  .btn::after{display:none}
}

/* --- Wax-print texture: concentric rings + seed dots, tiled site-wide.
   Drawn inline (data URI), colored from the brand palette, kept light so
   text always wins. The body carries the faint version; alternating and
   dark surfaces get stronger variants. --- */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%230d9488' stroke-opacity='.055'%3E%3Ccircle cx='35' cy='35' r='22'/%3E%3Ccircle cx='35' cy='35' r='13'/%3E%3Ccircle cx='105' cy='105' r='22'/%3E%3Ccircle cx='105' cy='105' r='13'/%3E%3C/g%3E%3Cg fill='%23f59e0b' fill-opacity='.06'%3E%3Ccircle cx='35' cy='35' r='3.4'/%3E%3Ccircle cx='105' cy='105' r='3.4'/%3E%3C/g%3E%3Cg fill='%230d9488' fill-opacity='.05'%3E%3Cpath d='M105 21l6 14-6 14-6-14z'/%3E%3Cpath d='M35 91l6 14-6 14-6-14z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment:fixed}
.section-alt{background-color:var(--bg-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%230d9488' stroke-opacity='.09'%3E%3Ccircle cx='35' cy='35' r='22'/%3E%3Ccircle cx='35' cy='35' r='13'/%3E%3Ccircle cx='105' cy='105' r='22'/%3E%3Ccircle cx='105' cy='105' r='13'/%3E%3C/g%3E%3Cg fill='%23f59e0b' fill-opacity='.1'%3E%3Ccircle cx='35' cy='35' r='3.4'/%3E%3Ccircle cx='105' cy='105' r='3.4'/%3E%3C/g%3E%3C/svg%3E")}
.site-footer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%2314b8a6' stroke-opacity='.10'%3E%3Ccircle cx='35' cy='35' r='22'/%3E%3Ccircle cx='35' cy='35' r='13'/%3E%3Ccircle cx='105' cy='105' r='22'/%3E%3Ccircle cx='105' cy='105' r='13'/%3E%3C/g%3E%3Cg fill='%23f59e0b' fill-opacity='.12'%3E%3Ccircle cx='35' cy='35' r='3.4'/%3E%3Ccircle cx='105' cy='105' r='3.4'/%3E%3C/g%3E%3C/svg%3E")}
.cta-band{position:relative; overflow:hidden}

/* --- Pictorial layer: plane, ship, harbor - drawn, not photographed --- */
.sky-plane{position:absolute; top:14px; left:-14%; z-index:0; pointer-events:none;
  animation:planeCross 64s linear infinite; opacity:.7}
.sky-plane svg{width:120px; height:auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(11,59,56,.18))}
.sky-plane .trail{stroke:var(--teal-mid); stroke-width:2.4;
  stroke-dasharray:2 9; stroke-linecap:round; opacity:.7}
@keyframes planeCross{
  0%{transform:translateX(0) translateY(14px)}
  100%{transform:translateX(128vw) translateY(-10px)}}

.sea-ship{position:absolute; bottom:8px; left:-24%; z-index:1;
  pointer-events:none; animation:shipSail 90s linear infinite}
.sea-ship svg{width:190px; height:auto; display:block;
  animation:shipBob 5.2s ease-in-out infinite;
  filter:drop-shadow(0 10px 18px rgba(11,59,56,.16))}
@keyframes shipSail{0%{transform:translateX(0)}100%{transform:translateX(148vw)}}
@keyframes shipBob{0%,100%{transform:rotate(-1.3deg) translateY(0)}
  50%{transform:rotate(1.1deg) translateY(-5px)}}

/* Harbor silhouette riding the top edge of the footer: crane, containers,
   ship, barrels - the working corridor, drawn in the footer's own dark. */
.site-footer{position:relative}
.site-footer::before{content:""; position:absolute; left:0; right:0; top:-46px;
  height:46px; pointer-events:none; background-repeat:repeat-x;
  background-position:bottom center; background-size:auto 46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='46' viewBox='0 0 560 46'%3E%3Cg fill='%230b3b38'%3E%3Crect x='18' y='30' width='34' height='16'/%3E%3Crect x='22' y='6' width='4' height='26'/%3E%3Crect x='22' y='6' width='38' height='4'/%3E%3Crect x='54' y='10' width='3' height='8'/%3E%3Crect x='47' y='18' width='14' height='9'/%3E%3Crect x='80' y='34' width='24' height='12' rx='1'/%3E%3Crect x='106' y='34' width='24' height='12' rx='1'/%3E%3Crect x='93' y='23' width='24' height='10' rx='1'/%3E%3Cpath d='M170 46l10-18h52l12 18z'/%3E%3Crect x='196' y='16' width='7' height='13'/%3E%3Crect x='185' y='22' width='30' height='7' rx='2'/%3E%3Ccircle cx='300' cy='41' r='5'/%3E%3Ccircle cx='312' cy='41' r='5'/%3E%3Ccircle cx='306' cy='33' r='5'/%3E%3Crect x='296' y='44' width='20' height='2'/%3E%3Crect x='360' y='26' width='5' height='20'/%3E%3Cpath d='M362 26c-10-2-16-9-17-16 8 1 15 7 17 16zm1 0c10-2 16-9 17-16-8 1-15 7-17 16z'/%3E%3Crect x='420' y='32' width='30' height='14' rx='1'/%3E%3Crect x='426' y='20' width='30' height='11' rx='1'/%3E%3Crect x='500' y='36' width='26' height='10' rx='5'/%3E%3Crect x='500' y='24' width='26' height='10' rx='5'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.9}

@media (max-width:720px){
  .sky-plane svg{width:84px}
  .sea-ship svg{width:130px}
}

/* --- Gradient-mesh canvas (motion.js): the living sky --- */
.mesh{position:absolute; inset:0; z-index:0; pointer-events:none}
.mesh canvas{width:100%; height:100%; display:block}
/* Blend the mesh into the page: soft white behind the copy column for
   legibility, and a fade to the page background at the bottom edge. */
.mesh::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(56% 72% at 24% 46%, rgba(255,255,255,.55), transparent 75%),
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px}
.mesh::after{content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, transparent, var(--bg))}
.page-head .mesh::after{height:55%}

/* --- Hero footage (motion.js, desktop only) --- */
.hero-video{position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.2s ease}
.hero-video.on{opacity:1}
/* Crossfade: the incoming beat fades over the outgoing one */
.hero-video{transition:opacity 1.1s ease}
/* Over footage the mesh becomes a color grade and the veil strengthens so
   the dark-on-light design keeps owning the page. */
.hero.has-video .mesh{mix-blend-mode:soft-light; opacity:.42}
/* The mesh's white pocket is off over footage - the copy carries its own
   scrim below, and stacking both is what washed the video out. */
.hero.has-video .mesh::before{background:none}
.hero.has-video .hero-bg{opacity:0}
.hero.has-video .sky-plane, .hero.has-video .sea-ship{display:none}
.hero.has-video .sea{opacity:.6}
/* A whisper of lift for overall legibility - NOT a veil. The previous
   full-width 94% gradient buried the footage, and on wide monitors it
   covered far more than the text it was meant to protect. */
.hero.has-video::after{content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(244,250,248,.30) 0%,
    rgba(244,250,248,.12) 45%, rgba(244,250,248,.42) 100%)}
.hero.has-video .hero-inner{position:relative; z-index:2}
/* Legibility now travels WITH the copy, so it works at any viewport width
   instead of assuming the text sits in the left 46% of the screen. */
.hero.has-video .hero-copy{position:relative}
.hero.has-video .hero-copy::before{content:""; position:absolute;
  inset:-46px -70px -34px -64px; z-index:-1; pointer-events:none;
  background:radial-gradient(72% 62% at 42% 48%,
    rgba(246,252,250,.94) 0%, rgba(246,252,250,.80) 46%,
    rgba(246,252,250,.30) 74%, rgba(246,252,250,0) 100%)}
@media (prefers-reduced-motion: reduce){ .hero-video{display:none} }

/* --- Laawol assistant (chat.js) --- */
.lc-root{position:fixed; right:22px; bottom:22px; z-index:90;
  font-family:var(--font-body)}
.lc-fab{width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--teal); color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:0 14px 34px rgba(13,148,136,.45);
  transition:transform .25s var(--ease-pro), background .2s ease}
.lc-fab:hover{transform:translateY(-3px) scale(1.05); background:#0f766e}
.lc-fab.open{background:var(--teal-deep)}
.lc-panel{position:absolute; right:0; bottom:74px; width:min(360px, calc(100vw - 44px));
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden; display:flex;
  flex-direction:column; opacity:0; transform:translateY(14px) scale(.98);
  pointer-events:none; transition:opacity .28s var(--ease-pro),
  transform .28s var(--ease-pro)}
.lc-panel.open{opacity:1; transform:none; pointer-events:auto}
.lc-head{display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--teal-deep); color:#fff}
.lc-head b{font-family:var(--font-head); font-size:15.5px; display:block}
.lc-head small{opacity:.75; font-size:12px}
.lc-x{background:none; border:0; color:#fff; font-size:24px; line-height:1;
  cursor:pointer; opacity:.8; padding:2px 6px}
.lc-x:hover{opacity:1}
.lc-log{padding:14px; height:320px; overflow-y:auto; display:flex;
  flex-direction:column; gap:10px; background:var(--bg)}
.lc-msg{max-width:86%; padding:10px 13px; border-radius:14px; font-size:14px;
  line-height:1.5}
.lc-msg.bot{background:#fff; border:1px solid var(--line);
  border-bottom-left-radius:4px; align-self:flex-start}
.lc-msg.me{background:var(--teal); color:#fff;
  border-bottom-right-radius:4px; align-self:flex-end}
.lc-actions{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.lc-action{display:inline-block; background:var(--mist); color:var(--teal-deep);
  font-weight:700; font-size:12.5px; padding:7px 12px; border-radius:999px;
  border:1px solid rgba(13,148,136,.3)}
.lc-action:hover{background:var(--teal); color:#fff}
.lc-chips{display:flex; flex-wrap:wrap; gap:7px}
.lc-chip{background:#fff; border:1.4px solid var(--line); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px;
  cursor:pointer; transition:border-color .15s ease, color .15s ease}
.lc-chip:hover{border-color:var(--teal); color:var(--teal-deep)}
.lc-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);
  background:var(--paper)}
.lc-in{flex:1; border:1.5px solid var(--line); border-radius:999px;
  padding:9px 14px; font:inherit; font-size:14px; background:var(--bg)}
.lc-in:focus{outline:none; border-color:var(--teal)}
.lc-send{border:0; background:var(--teal); color:#fff; font-weight:700;
  font-size:13.5px; padding:9px 16px; border-radius:999px; cursor:pointer}
.lc-send:hover{background:#0f766e}
@media (max-width:640px){ .lc-root{right:14px; bottom:14px}
  .lc-panel{bottom:70px} .lc-log{height:46vh} }
@media (prefers-reduced-motion: reduce){
  .lc-panel{transition:none} .lc-fab{transition:none} }

/* assistant typing indicator */
.lc-typing{display:flex; gap:5px; align-items:center; min-height:20px}
.lc-typing i{width:7px; height:7px; border-radius:50%; background:var(--muted);
  animation:lcDot 1.1s ease-in-out infinite}
.lc-typing i:nth-child(2){animation-delay:.18s}
.lc-typing i:nth-child(3){animation-delay:.36s}
@keyframes lcDot{0%,60%,100%{transform:translateY(0); opacity:.5}
  30%{transform:translateY(-5px); opacity:1}}
@media (prefers-reduced-motion: reduce){ .lc-typing i{animation:none} }

/* --- Mail handoff feedback (mailto.js) --- */
.mailto-note{margin:10px 0 0; font-size:13.5px; color:var(--ink-soft)}
.mailto-note.warn{background:var(--warn-bg,#fdf4e3); border:1px solid #f5d9a8;
  border-radius:10px; padding:10px 12px; color:#92400e}
.mailto-note a{color:inherit; font-weight:700; text-decoration:underline}
.mailto-copy{margin-left:10px; font:inherit; font-size:12.5px; font-weight:700;
  border:1px solid currentColor; background:transparent; color:inherit;
  border-radius:999px; padding:3px 10px; cursor:pointer}
.mailto-copy:hover{background:rgba(0,0,0,.05)}