/*
Theme Name: OutboundFX
Theme URI: https://mustard.agency
Author: Mustard Agency
Author URI: https://mustard.agency
Description: Custom WordPress theme for OutboundFX — South African outbound currency lead-generation site. Converted from the OutboundFX-MVP.html static design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: outboundfx
*/

*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#102a50;background:#fff}

/* Elementor compatibility: don't let theme resets bleed into
   Elementor's own section/container widths or editor preview */
.elementor-section,.elementor-container,.elementor-widget-wrap{box-sizing:border-box}
body.elementor-page .site-content,body.elementor-page main{max-width:none;padding:0;margin:0}
.top{background:#09253d;color:#fff;padding:9px 4%;font-size:12px;display:flex;justify-content:space-between}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:#fff}
.logo{font-size:26px;font-weight:800;color:#102a50;text-decoration:none}
.logo span{color:#1677dc}
.navlinks{display:flex;gap:34px;font-size:14px;font-weight:600;list-style:none;margin:0;padding:0}
.navlinks li a{color:#102a50;text-decoration:none}
.navlinks li a:hover{color:#1477df}
.phone{font-weight:800}
.phone a{color:inherit;text-decoration:none}
.hero{min-height:590px;background:linear-gradient(90deg,rgba(235,246,255,.49),rgba(235,246,255,.41)),url('https://images.unsplash.com/photo-1580060839134-75a5edca2e99?auto=format&fit=crop&w=1800&q=80') center/cover;display:grid;grid-template-columns:1.1fr .8fr;gap:40px;padding:60px 5%}
.hero h1{font-size:54px;line-height:1.02;margin:35px 0 20px;max-width:650px}
.hero p{font-size:19px;line-height:1.55;max-width:620px}
.trust{display:flex;gap:25px;margin-top:32px;font-size:12px}
.trust b{display:block;font-size:14px;margin-bottom:4px}
.form{background:#fff;border-radius:15px;padding:26px;box-shadow:0 15px 45px #0b315433;align-self:start}
.form h2{font-size:25px;margin:0 0 8px}
.muted{color:#667085;font-size:14px}
.steps{display:flex;gap:8px;margin:18px 0}
.step{font-size:11px;background:#edf2f7;padding:7px 9px;border-radius:20px}
.step.active{background:#dbeafe;color:#1769c2;font-weight:800}
.field{margin:14px 0}
.field label{font-size:12px;font-weight:700;display:block;margin-bottom:6px}
.field input,.field select{width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;font-family:inherit;font-size:14px}
.btn{width:100%;border:0;border-radius:7px;padding:13px;background:#1477df;color:white;font-weight:800;font-size:15px;cursor:pointer}
.btn:disabled{opacity:.6;cursor:default}
.form-msg{text-align:center;font-size:13px;margin-top:10px;padding:8px;border-radius:6px}
.form-msg.success{background:#e6f7ee;color:#0d7a45}
.form-msg.error{background:#fdecec;color:#b3261e}
.rate{background:#f2f8ff;margin:0 5%;transform:translateY(-50px);border-radius:12px;padding:24px;box-shadow:0 8px 25px #0b31541c}
.rate h2{text-align:center;margin:0 0 8px;font-size:23px}
.rate>p{text-align:center;margin-top:0;color:#667085}
.rategrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.ratecard{background:white;border:1px solid #e1ebf5;border-radius:10px;text-align:center;padding:20px}
.ratecard strong{display:block;font-size:25px}
.ratecard span{display:block;margin-top:7px;font-size:13px;color:#475467}
.how{padding:5px 6% 55px;text-align:center}
.how h2{font-size:28px}
.howgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:35px}
.howcard{padding:15px}
.num{width:40px;height:40px;border-radius:50%;background:#e7f2ff;color:#1477df;margin:auto auto 15px;display:grid;place-items:center;font-weight:800}
.why{background:#f5f9fd;padding:45px 6%;text-align:center}
.whygrid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:25px}
.whycard{font-size:13px}
.check{color:#1aaf72;font-size:23px}
.footer{margin:35px 5%;background:#09253d;color:#fff;padding:25px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}
.footer small{color:#cbd5e1}
.footer a{color:#fff}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding:35px 5%}.hero h1{font-size:40px}.navlinks{display:none}.rategrid,.howgrid,.whygrid{grid-template-columns:1fr}.top{display:none}.footer{display:block}.phone{display:none}}