/* ============================================================
   Web Ultimax — Inner Pages Stylesheet (UAE)
   Extends the homepage design system (wu-core.css)
   ============================================================ */

/* ---------- PAGE HERO ---------- */
.page-hero{position:relative;padding:150px 0 80px;background:linear-gradient(160deg,#0B1B33 0%,#102A43 55%,#0F2C4C 100%);overflow:hidden}
.page-hero::before{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.30),transparent 65%)}
.page-hero::after{content:"";position:absolute;width:460px;height:460px;left:-160px;bottom:-240px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.35),transparent 65%)}
.page-hero .container{position:relative;z-index:2}
.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.crumbs{font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:16px}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.crumbs a:hover{color:var(--orange)}
.page-hero h1{font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;margin-bottom:18px}
.page-hero h1 span{color:var(--orange)}
.page-hero .lead{color:rgba(255,255,255,.78);font-size:1.06rem;max-width:620px;margin-bottom:26px}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.hero-pills span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.82rem;font-weight:500;padding:8px 14px;border-radius:99px}
.hero-pills i{color:var(--orange)}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- HERO LEAD CARD (funnel step 1) ---------- */
.lead-card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 30px 70px rgba(4,16,32,.38)}
.lead-card h3{font-family:var(--font-display);font-size:1.2rem;color:var(--navy);margin-bottom:6px}
.lead-card p.sub{font-size:.88rem;color:var(--gray);margin-bottom:18px}
.lead-card .fg{margin-bottom:12px}
.lead-card label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.lead-card input,.lead-card select,.lead-card textarea{width:100%;padding:12px 14px;border:1px solid var(--light-gray);border-radius:10px;font-family:var(--font-body);font-size:.92rem;background:#F8FAFF;color:var(--black);transition:var(--transition)}
.lead-card input:focus,.lead-card select:focus,.lead-card textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.lead-card .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead-submit{width:100%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:14px;border-radius:12px;transition:var(--transition)}
.lead-submit:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.lead-or{text-align:center;font-size:.78rem;color:var(--gray);margin:12px 0 10px}
.lead-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#25D366;color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;padding:13px;border-radius:12px;transition:var(--transition)}
.lead-wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.35)}
.lead-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;color:var(--gray);margin-top:12px}

/* ---------- SECTION SHELL ---------- */
.sec{padding:84px 0}
.sec-soft{background:var(--cream)}
.sec-white{background:#fff}
.sec-navy{background:linear-gradient(150deg,#0C1E38,#102A43);color:#fff}
.sec-navy .section-title,.sec-navy h2{color:#fff}
.sec-navy .section-sub{color:rgba(255,255,255,.7)}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- CARD GRIDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.icard{background:#fff;border:1px solid var(--light-gray);border-radius:var(--radius);padding:28px;transition:var(--transition);position:relative;overflow:hidden}
.icard::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--orange));transition:var(--transition)}
.icard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.icard:hover::after{width:100%}
.icard .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;color:#fff;background:linear-gradient(135deg,var(--red),var(--orange));margin-bottom:16px}
.icard h3{font-family:var(--font-display);font-size:1.08rem;color:var(--navy);margin-bottom:8px}
.icard p{font-size:.93rem;color:var(--gray);line-height:1.65}
.icard ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.icard ul li{font-size:.88rem;color:var(--navy);display:flex;gap:9px;align-items:flex-start}
.icard ul li i{color:var(--orange);font-size:.78rem;margin-top:5px}
.icard .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.86rem;font-weight:700;color:var(--red);text-decoration:none}
.icard .more:hover{gap:12px}

/* dark variant */
.sec-navy .icard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.sec-navy .icard h3{color:#fff}
.sec-navy .icard p{color:rgba(255,255,255,.68)}
.sec-navy .icard ul li{color:rgba(255,255,255,.8)}

/* ---------- SPLIT BLOCK ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split-rev .split-media{order:2}
.split h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--navy);line-height:1.18;margin-bottom:16px}
.split p{color:var(--gray);font-size:1rem;line-height:1.75;margin-bottom:14px}
.split-list{list-style:none;display:grid;gap:12px;margin:20px 0 26px}
.split-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--navy)}
.split-list li i{color:#22C55E;margin-top:4px}
.split-media{background:linear-gradient(150deg,#0C1E38,#173A5E);border-radius:22px;padding:34px;color:#fff;box-shadow:var(--shadow)}
.split-media h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:18px;color:#fff}
.mini-stat{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-stat div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:16px}
.mini-stat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--orange)}
.mini-stat span{font-size:.78rem;color:rgba(255,255,255,.68)}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{background:#fff;border:1px solid var(--light-gray);border-radius:var(--radius);padding:26px 22px;position:relative;transition:var(--transition)}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .n{counter-increment:s;font-family:var(--font-display);font-weight:800;font-size:2.1rem;background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.step h4{font-family:var(--font-display);font-size:1rem;color:var(--navy);margin:10px 0 8px}
.step p{font-size:.88rem;color:var(--gray);line-height:1.6}

/* ---------- PRICE CARDS ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.price{background:#fff;border:1px solid var(--light-gray);border-radius:18px;padding:30px;display:flex;flex-direction:column;transition:var(--transition)}
.price:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.price.pop{border:2px solid var(--red);box-shadow:var(--glow);position:relative}
.price.pop::before{content:"MOST POPULAR";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-size:.66rem;font-weight:800;letter-spacing:1.2px;padding:6px 16px;border-radius:99px;white-space:nowrap}
.price h3{font-family:var(--font-display);font-size:1.1rem;color:var(--navy);margin-bottom:6px}
.price .amt{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--navy);margin:10px 0 4px}
.price .amt small{font-size:.85rem;font-weight:500;color:var(--gray)}
.price .desc{font-size:.86rem;color:var(--gray);margin-bottom:18px}
.price ul{list-style:none;display:grid;gap:10px;margin-bottom:24px}
.price ul li{font-size:.88rem;color:var(--navy);display:flex;gap:9px;align-items:flex-start}
.price ul li i{color:#22C55E;font-size:.8rem;margin-top:4px}
.price .btn{margin-top:auto;width:100%;justify-content:center;text-align:center}

/* ---------- FAQ / AEO ---------- */
.faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--light-gray);border-radius:14px;padding:0;overflow:hidden;transition:var(--transition)}
.faq details[open]{box-shadow:var(--shadow);border-color:transparent}
.faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--orange);font-size:.85rem;transition:var(--transition)}
.faq details[open] summary::after{content:"\f068"}
.faq .ans{padding:0 22px 22px;color:var(--gray);font-size:.95rem;line-height:1.75}

/* ---------- ANSWER / GEO BOX ---------- */
.answer-box{background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(56,189,248,.10));border:1px solid rgba(37,99,235,.18);border-left:4px solid var(--red);border-radius:14px;padding:24px 26px;margin:0 0 32px}
.answer-box b{color:var(--navy);font-family:var(--font-display)}
.answer-box p{color:#334155;font-size:.98rem;line-height:1.75;margin-top:6px}

/* ---------- KEYWORD TABLE ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--light-gray);border-radius:16px;background:#fff}
table.kw{width:100%;border-collapse:collapse;min-width:720px;font-size:.9rem}
table.kw th{background:var(--navy);color:#fff;text-align:left;padding:14px 16px;font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.4px;text-transform:uppercase;position:sticky;top:0}
table.kw td{padding:13px 16px;border-top:1px solid var(--light-gray);color:var(--navy)}
table.kw tr:nth-child(even) td{background:#F8FAFF}
.kd{display:inline-block;padding:4px 10px;border-radius:99px;font-size:.74rem;font-weight:700}
.kd-e{background:#E8F1EC;color:#1B7A46}
.kd-m{background:#FBEBDE;color:#A85B18}
.kd-h{background:#FCE9E7;color:#B3372B}

/* ---------- CTA BAND (funnel step 2) ---------- */
.cta-band{background:linear-gradient(120deg,#0B1B33,#123A63 55%,#0E5C86);border-radius:24px;padding:46px;display:grid;grid-template-columns:1.3fr .7fr;gap:34px;align-items:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.28),transparent 65%)}
.cta-band>*{position:relative;z-index:2}
.cta-band h3{font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.75);font-size:.98rem;max-width:560px}
.cta-band .acts{display:flex;flex-direction:column;gap:12px}
.cta-band .acts .btn{justify-content:center;text-align:center}

/* ---------- REVIEWS ---------- */
.rev{background:#fff;border:1px solid var(--light-gray);border-radius:18px;padding:26px;transition:var(--transition);display:flex;flex-direction:column;gap:14px}
.rev:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.stars{color:#F5A623;font-size:.9rem;letter-spacing:2px}
.rev p{font-size:.94rem;color:#334155;line-height:1.75;flex:1}
.rev-who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--light-gray);padding-top:14px}
.rev-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;background:linear-gradient(135deg,var(--red),var(--orange));font-size:.95rem}
.rev-who b{display:block;font-size:.9rem;color:var(--navy)}
.rev-who span{font-size:.78rem;color:var(--gray)}

/* ---------- LOGO / INFO STRIP ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.strip div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px;text-align:center}
.strip b{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--orange)}
.strip span{font-size:.84rem;color:rgba(255,255,255,.7)}

/* ---------- INTERNAL LINK HUB ---------- */
.linkhub{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.linkhub a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--light-gray);border-radius:12px;padding:14px 16px;font-size:.89rem;font-weight:600;color:var(--navy);text-decoration:none;transition:var(--transition)}
.linkhub a:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow)}
.linkhub a i{color:var(--orange)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
.cinfo{display:grid;gap:14px}
.cinfo a,.cinfo div.ci{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--light-gray);border-radius:14px;padding:18px;text-decoration:none;transition:var(--transition)}
.cinfo a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.cinfo i{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--red),var(--orange))}
.cinfo b{display:block;font-size:.92rem;color:var(--navy);margin-bottom:2px}
.cinfo span{font-size:.86rem;color:var(--gray);line-height:1.5}
.mapwrap{border-radius:18px;overflow:hidden;border:1px solid var(--light-gray);margin-top:6px;line-height:0}
.mapwrap iframe{width:100%;height:280px;border:0}

/* ---------- NEWSLETTER / FREE SEO AUDIT POPUP ---------- */
.wu-modal{position:fixed;inset:0;background:rgba(8,18,34,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:11000;padding:20px}
.wu-modal.on{display:flex;animation:wuFade .25s ease}
@keyframes wuFade{from{opacity:0}to{opacity:1}}
.wu-modal-box{background:#fff;width:100%;max-width:880px;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:.85fr 1.15fr;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:wuUp .35s cubic-bezier(.34,1.3,.64,1);max-height:92vh}
@keyframes wuUp{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}
.wu-modal-side{background:linear-gradient(160deg,#0B1B33,#12467A);color:#fff;padding:34px 28px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.wu-modal-side .tag{display:inline-block;background:rgba(56,189,248,.18);color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:1.4px;padding:6px 12px;border-radius:99px;width:max-content}
.wu-modal-side h3{font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1.2}
.wu-modal-side p{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.65}
.wu-modal-side ul{list-style:none;display:grid;gap:9px;margin-top:4px}
.wu-modal-side li{font-size:.85rem;color:rgba(255,255,255,.86);display:flex;gap:9px;align-items:flex-start}
.wu-modal-side li i{color:var(--orange);margin-top:4px;font-size:.75rem}
.wu-modal-form{padding:34px 30px;overflow-y:auto}
.wu-modal-form h4{font-family:var(--font-display);font-size:1.15rem;color:var(--navy);margin-bottom:4px}
.wu-modal-form .s{font-size:.86rem;color:var(--gray);margin-bottom:18px}
.wu-close{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:1rem;z-index:5;transition:var(--transition)}
.wu-close:hover{background:var(--red);transform:rotate(90deg)}
.wu-modal-inner{position:relative;width:100%;max-width:880px}
.audit-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.12);color:#15803D;font-size:.78rem;font-weight:700;padding:8px 14px;border-radius:99px;margin-bottom:14px}

/* Inline newsletter strip */
.nl-strip{background:linear-gradient(120deg,#0B1B33,#12467A);border-radius:22px;padding:38px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.nl-strip h3{font-family:var(--font-display);font-weight:800;color:#fff;font-size:1.6rem;margin-bottom:8px}
.nl-strip p{color:rgba(255,255,255,.72);font-size:.95rem}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;font-family:var(--font-body);font-size:.92rem}
.nl-form input::placeholder{color:rgba(255,255,255,.55)}
.nl-form input:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.16)}
.nl-form button{border:none;cursor:pointer;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-family:var(--font-display);font-weight:700;padding:14px 22px;border-radius:12px;transition:var(--transition)}
.nl-form button:hover{transform:translateY(-2px);box-shadow:var(--glow)}

/* ---------- PORTFOLIO ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pf{border-radius:18px;overflow:hidden;border:1px solid var(--light-gray);background:#fff;transition:var(--transition);display:flex;flex-direction:column}
.pf:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.pf-top{height:150px;display:grid;place-items:center;color:#fff;font-size:2.4rem;background:linear-gradient(150deg,#0C1E38,#1E6FBF)}
.pf-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pf-body span.cat{font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--red)}
.pf-body h3{font-family:var(--font-display);font-size:1.02rem;color:var(--navy)}
.pf-body p{font-size:.88rem;color:var(--gray);line-height:1.6;flex:1}
.pf-body a{font-size:.85rem;font-weight:700;color:var(--red);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.pf-body a:hover{gap:12px}

/* ---------- TOAST ---------- */
.wu-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--navy);color:#fff;padding:15px 26px;border-radius:99px;font-size:.9rem;font-weight:600;z-index:12000;transition:transform .4s cubic-bezier(.34,1.3,.64,1);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.wu-toast.on{transform:translateX(-50%) translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .page-hero-grid{grid-template-columns:1fr;gap:36px}
  .grid-4,.steps,.strip,.linkhub{grid-template-columns:repeat(2,1fr)}
  .grid-3,.price-grid,.pf-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:32px}
  .split-rev .split-media{order:0}
  .cta-band{grid-template-columns:1fr;padding:34px}
  .contact-grid{grid-template-columns:1fr}
  .nl-strip{grid-template-columns:1fr}
  .wu-modal-box{grid-template-columns:1fr}
  .wu-modal-side{display:none}
}
@media(max-width:720px){
  .page-hero{padding:126px 0 62px}
  .sec{padding:60px 0}
  .grid-3,.grid-2,.grid-4,.steps,.price-grid,.pf-grid,.strip,.linkhub{grid-template-columns:1fr}
  .lead-card{padding:22px}
  .lead-card .fg-row{grid-template-columns:1fr}
  .cta-band{padding:28px;border-radius:18px}
  .nl-strip{padding:26px}
  .page-hero-ctas .btn{width:100%;justify-content:center}
  .sec-head{margin-bottom:32px}
  .answer-box{padding:20px}
  .wu-modal-form{padding:26px 20px}
}


/* ---------- BACKGROUND OVERRIDE GUARD ----------
   wu-core.css (home page theme) contains `section{background:transparent!important}`
   which strips backgrounds from every <section>. These inner-page sections must
   win, so they are re-declared here with !important. Home page is untouched.
------------------------------------------------- */
section.page-hero{
 background:linear-gradient(160deg,#0B1B33 0%,#102A43 55%,#0F2C4C 100%)!important;
}
section.sec-navy{
 background:linear-gradient(160deg,#0B1B33 0%,#102A43 60%,#0F2C4C 100%)!important;
}
section.sec-soft{
 background:linear-gradient(180deg,#F6FAFF 0%,#EFF6FF 100%)!important;
}
section.sec-white{
 background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%)!important;
}
section.nl-strip{
 background:linear-gradient(120deg,#0B1B33,#12467A)!important;
}


/* =====================================================================
   UI FIX PACK  (light hero, animated heading, navy text, modal fixes)
   ===================================================================== */

/* ---- 2a. Inner-page hero now uses the SAME light gradient as the home hero ---- */
section.page-hero{
 background:
  radial-gradient(circle at 83% 14%, rgba(186,230,253,0.72), transparent 25%),
  radial-gradient(circle at 14% 80%, rgba(37,99,235,0.13), transparent 27%),
  linear-gradient(135deg,#ffffff 0%,#EFF6FF 54%,#ffffff 100%)!important;
}
.page-hero::before{background:radial-gradient(circle,rgba(56,189,248,.20),transparent 65%)!important}
.page-hero::after{background:radial-gradient(circle,rgba(108,99,255,.14),transparent 65%)!important}

/* text has to flip from white to navy now that the hero is light */
.page-hero h1{color:var(--navy)!important}
.page-hero .lead{color:#4A5C72!important}
.page-hero .crumbs,.page-hero .crumbs a,.page-hero .crumbs span{color:#64748B!important}
.page-hero .crumbs a:hover{color:var(--red)!important}
.page-hero .hero-pills span,.page-hero .hero-pills li{
 background:#fff!important;
 color:var(--navy)!important;
 border:1px solid rgba(16,42,67,.12)!important;
 box-shadow:0 6px 18px rgba(16,42,67,.06)!important;
}
.page-hero .hero-pills span i,.page-hero .hero-pills li i{color:var(--red)!important}

/* ---- 2b. Animated running-colour hero headings (every page + home) ---- */
@keyframes wuFlow{
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}
.page-hero h1 span,
.hero-title .accent,
.page-hero h1 .accent{
 background:linear-gradient(90deg,#2563EB,#38BDF8,#6C63FF,#22D3EE,#2563EB)!important;
 background-size:300% 100%!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 color:transparent!important;
 animation:wuFlow 6s linear infinite!important;
}
@media (prefers-reduced-motion:reduce){
 .page-hero h1 span,.hero-title .accent{animation:none!important}
}

/* ---- 2c. Dark sections: headings were rendering navy-on-navy (invisible) ---- */
section.sec-navy .section-title,
section.sec-navy h2,
section.sec-navy h3,
section.sec-navy .sec-head h2,
section.nl-strip h2,
section.nl-strip h3,
section.cta-band h2{
 color:#fff!important;
}
section.sec-navy .section-sub,
section.sec-navy .sec-head p,
section.nl-strip p{
 color:rgba(255,255,255,.74)!important;
}
section.sec-navy .step h3,section.sec-navy .step h4{color:#fff!important}
section.sec-navy .step p{color:rgba(255,255,255,.72)!important}
section.sec-navy .section-tag{color:var(--red)!important}

/* ---- 2d. Popup: close button was white-on-white (invisible on mobile AND desktop) ---- */
.wu-close{
 background:var(--navy)!important;
 color:#ffffff!important;
 border:2px solid #ffffff!important;
 box-shadow:0 8px 22px rgba(16,42,67,.22)!important;
 opacity:1!important;
 display:flex!important;
 align-items:center;
 justify-content:center;
}
.wu-close:hover{background:var(--red)!important;color:#fff!important;border-color:#fff!important}

/* ---- 2e. Popup form: labels were sitting inline on top of the inputs ---- */
.wu-modal-form .fg{display:block!important}
.wu-modal-form .fg label{
 display:block!important;
 width:100%!important;
 margin:0 0 6px!important;
 font-size:.8rem!important;
 font-weight:600!important;
 color:var(--navy)!important;
 line-height:1.3!important;
}
.wu-modal-form .fg input,
.wu-modal-form .fg select,
.wu-modal-form .fg textarea{
 display:block!important;
 width:100%!important;
 box-sizing:border-box!important;
}

@media (max-width:760px){
 .wu-close{top:10px!important;right:10px!important;width:40px!important;height:40px!important;font-size:1.05rem!important}
 .wu-modal-box{max-height:88vh!important}
 .wu-modal-form{padding-top:52px!important}
}


/* =====================================================================
   CREATIVE BLOCK PACK  -- feature answer card, intro copy, shine headings
   ===================================================================== */

/* ---- 1. The "quick answer" card, rebuilt as a premium feature block ---- */
.answer-box{
 position:relative!important;
 overflow:hidden!important;
 background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFF 45%,#ECF4FF 100%)!important;
 border:1px solid rgba(37,99,235,.16)!important;
 border-left:none!important;
 border-radius:22px!important;
 padding:38px 34px 32px 40px!important;
 margin:0 0 40px!important;
 box-shadow:0 24px 64px rgba(16,42,67,.10), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
/* gradient rail down the left edge */
.answer-box::before{
 content:""!important;
 position:absolute; left:0; top:0; bottom:0; width:6px;
 background:linear-gradient(180deg,#2563EB 0%,#38BDF8 45%,#6C63FF 100%);
 border-radius:22px 0 0 22px;
}
/* slow shine that sweeps across the card */
.answer-box::after{
 content:"";
 position:absolute; top:-20%; left:-65%;
 width:42%; height:140%;
 background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
 transform:skewX(-18deg);
 pointer-events:none;
 animation:wuSheen 7s ease-in-out infinite;
}
@keyframes wuSheen{
 0%{left:-65%}
 55%{left:125%}
 100%{left:125%}
}
/* badge above the question */
.answer-box b{
 display:block!important;
 position:relative; z-index:2;
 font-family:var(--font-display)!important;
 font-size:1.16rem!important;
 font-weight:800!important;
 color:var(--navy)!important;
 line-height:1.35!important;
}
.answer-box b::before{
 content:"\f0eb  QUICK ANSWER";
 font-family:"Font Awesome 6 Free",var(--font-display);
 font-weight:900;
 display:block;
 width:max-content;
 margin:0 0 16px;
 padding:7px 14px;
 border-radius:99px;
 font-size:.66rem;
 letter-spacing:1.6px;
 color:#fff;
 background:linear-gradient(120deg,#2563EB,#38BDF8);
 box-shadow:0 8px 20px rgba(37,99,235,.32);
}
.answer-box p{
 position:relative; z-index:2;
 color:#3A4A5F!important;
 font-size:1.01rem!important;
 line-height:1.8!important;
 margin-top:12px!important;
}

/* ---- 2. Intro copy: editorial two-column feel with an accent drop cap ---- */
.intro-copy{
 position:relative;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px 44px;
 max-width:1040px;
 padding-left:26px;
}
.intro-copy::before{
 content:"";
 position:absolute; left:0; top:6px; bottom:6px; width:3px;
 border-radius:3px;
 background:linear-gradient(180deg,rgba(37,99,235,.55),rgba(56,189,248,.25),transparent);
}
.intro-copy .ic-p{
 color:#54657B;
 font-size:1.01rem;
 line-height:1.82;
 margin:0 0 16px;
}
.intro-copy .ic-p:first-child{
 grid-column:1 / -1;
 font-size:1.12rem;
 color:#33465C;
 font-weight:500;
}
.intro-copy .ic-p:first-child::first-letter{
 float:left;
 font-family:var(--font-display);
 font-size:3.3rem;
 line-height:.86;
 font-weight:900;
 margin:6px 12px 0 0;
 background:linear-gradient(135deg,#2563EB,#38BDF8);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
}
@media (max-width:900px){
 .intro-copy{grid-template-columns:1fr;gap:0;padding-left:20px}
 .answer-box{padding:30px 22px 26px 26px!important;border-radius:18px!important}
 .answer-box b{font-size:1.05rem!important}
}


/* decorative gradient orb in the corner of the answer card */
.answer-box b::after{
 content:"";
 position:absolute;
 right:-70px; top:-90px;
 width:230px; height:230px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(56,189,248,.20),rgba(37,99,235,.06) 55%,transparent 72%);
 pointer-events:none;
 z-index:1;
}
/* dotted texture along the bottom-right for depth */
.answer-box p::after{
 content:"";
 position:absolute;
 right:18px; bottom:-14px;
 width:120px; height:60px;
 background-image:radial-gradient(rgba(37,99,235,.22) 1.4px, transparent 1.4px);
 background-size:11px 11px;
 opacity:.7;
 pointer-events:none;
}
.answer-box:hover{
 box-shadow:0 30px 76px rgba(16,42,67,.15), inset 0 1px 0 rgba(255,255,255,.9)!important;
 transform:translateY(-2px);
}
.answer-box{transition:transform .35s ease, box-shadow .35s ease}



/* =====================================================================
   RUNNING SHINE HEADINGS v5  -- no white band, saturated brand blues only
   background-position is owned by the keyframes (never declared with
   !important) or the sweep freezes.
   ===================================================================== */
.page-hero h1,
.hero-title{
 background-image:linear-gradient(90deg,#0F2C4C 0%,#0F2C4C 36%,#1D4ED8 44%,#2563EB 47%,#38BDF8 50%,#2563EB 53%,#1D4ED8 56%,#0F2C4C 64%,#0F2C4C 100%)!important;
 background-size:200% auto!important;
 background-repeat:repeat!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 color:transparent!important;
 text-shadow:none!important;
 filter:none!important;
 will-change:background-position;
 animation:wuGlare 3s linear infinite!important;
}
.page-hero h1 span,
.page-hero h1 .accent,
.hero-title span,
.hero-title .accent{
 background-image:linear-gradient(90deg,#1D4ED8 0%,#2563EB 34%,#3B82F6 44%,#4F9BFF 47%,#60A5FA 50%,#4F9BFF 53%,#3B82F6 56%,#2563EB 66%,#1D4ED8 100%)!important;
 background-size:200% auto!important;
 background-repeat:repeat!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 color:transparent!important;
 font-weight:900!important;
 text-shadow:none!important;
 filter:none!important;
 will-change:background-position;
 animation:wuGlare 3s linear infinite!important;
}
@keyframes wuGlare{from{background-position:200% center}to{background-position:-200% center}}

@media (prefers-reduced-motion:reduce){
 .page-hero h1,.page-hero h1 span,.page-hero h1 .accent,
 .hero-title,.hero-title span,.hero-title .accent{animation-duration:12s!important}
}


/* =====================================================================
   MOBILE PASS  -- responsive popup, hero clearance, services accordion
   ===================================================================== */

/* ---- 3a. Every control inside the popup respects its container ---- */
.wu-modal-box,.wu-modal-inner,.wu-modal-form,.wu-modal-form *{
 box-sizing:border-box!important;
}
.wu-modal-form form{width:100%!important;max-width:100%!important}
.wu-modal-form .fg{width:100%!important;max-width:100%!important;margin-bottom:14px!important}
.wu-modal-form .fg input,
.wu-modal-form .fg select,
.wu-modal-form .fg textarea{
 width:100%!important;
 max-width:100%!important;
 min-width:0!important;
 display:block!important;
 font-size:16px!important;      /* stops iOS zooming the page on focus */
}
.wu-modal-form .fg-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.wu-modal-form button[type=submit],
.wu-modal-form .lead-submit{width:100%!important;max-width:100%!important}

/* ---- 3b. Popup on phones: near full-screen, scrollable, never clipped ---- */
@media (max-width:760px){
 .wu-modal{padding:12px!important;align-items:flex-start!important}
 .wu-modal-inner{max-width:100%!important;margin-top:14px!important}
 .wu-modal-box{
  max-width:100%!important;
  border-radius:18px!important;
  max-height:90vh!important;
  overflow-y:auto!important;
  grid-template-columns:1fr!important;
 }
 .wu-modal-form{padding:54px 18px 24px!important;overflow:visible!important}
 .wu-modal-form .fg-row{grid-template-columns:1fr!important}
 .wu-modal-form h4{font-size:1.12rem!important;line-height:1.3!important;padding-right:44px!important}
 .audit-badge{font-size:.72rem!important}
}
@media (max-width:400px){
 .wu-modal-form{padding:52px 14px 20px!important}
}

/* ---- 3c. Inner page hero: clear the fixed header, larger heading ---- */
@media (max-width:720px){
 .page-hero .crumbs{margin-bottom:14px!important;font-size:.8rem!important}
 .page-hero h1{
  font-size:clamp(2.05rem,7.4vw,2.7rem)!important;
  line-height:1.16!important;
  margin-bottom:16px!important;
 }
 .page-hero .lead{font-size:1rem!important;line-height:1.75!important;margin-bottom:22px!important}
 .hero-pills{gap:8px!important;margin-bottom:24px!important}
 .page-hero-grid{gap:30px!important}
}
@media (max-width:520px){
 .page-hero h1{font-size:clamp(1.95rem,8.2vw,2.4rem)!important}
}

/* ---- 3d. Mobile menu: Services accordion ---- */
.m-acc{width:100%}
.m-acc-btn{
 display:flex!important;
 align-items:center;
 justify-content:space-between;
 width:100%;
 background:none;
 border:none;
 padding:0;
 margin:0;
 font:inherit;
 font-weight:600;
 color:inherit;
 cursor:pointer;
}
.m-acc-btn i{
 font-size:.8rem;
 color:var(--red);
 transition:transform .28s ease;
}
.m-acc.open .m-acc-btn i{transform:rotate(180deg)}
.m-acc-panel{
 display:grid;
 grid-template-rows:0fr;
 overflow:hidden;
 transition:grid-template-rows .3s ease;
}
.m-acc.open .m-acc-panel{grid-template-rows:1fr}
.m-acc-panel > *{min-height:0}
.m-acc-panel a{
 display:block;
 padding:11px 0 11px 16px;
 font-size:.95rem;
 opacity:.9;
 border-left:2px solid rgba(37,99,235,.28);
 margin-left:2px;
}
.m-acc-panel a:first-child{padding-top:14px}
.m-acc-panel a:last-child{padding-bottom:4px}


/* =====================================================================
   MOBILE MENU v2 + HERO CLEARANCE  (overrides wu-core.css)
   ===================================================================== */

/* ---- Panel shell: solid, full height, scrollable, above everything ---- */
.mobile-nav{
 position:fixed!important;
 inset:0!important;
 z-index:12000!important;
 background:#fff!important;
 padding:86px 22px 40px!important;
 gap:0!important;
 overflow-y:auto!important;
 -webkit-overflow-scrolling:touch!important;
 box-shadow:none!important;
}
.mobile-nav.open{display:flex!important;flex-direction:column!important}

/* ---- Top level rows ---- */
.mobile-nav > a{
 display:flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
 gap:9px!important;
 width:100%!important;
 color:var(--navy)!important;
 font-family:var(--font-display)!important;
 font-weight:700!important;
 font-size:1.05rem!important;
 padding:15px 2px!important;
 margin:0!important;
 border:none!important;
 border-bottom:1px solid rgba(16,42,67,.09)!important;
 border-radius:0!important;
 background:none!important;
 text-decoration:none!important;
}

/* ---- Close button ---- */
.mobile-close{
 position:absolute!important;
 top:18px!important;right:18px!important;
 width:44px!important;height:44px!important;
 border-radius:50%!important;
 background:var(--navy)!important;
 color:#fff!important;
 border:none!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 font-size:1.15rem!important;
 z-index:5!important;
}

/* ---- Services accordion ---- */
.mobile-nav .m-acc{
 width:100%!important;
 border-bottom:1px solid rgba(16,42,67,.09)!important;
}
.mobile-nav .m-acc-btn{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 width:100%!important;
 padding:15px 2px!important;
 margin:0!important;
 background:none!important;
 border:none!important;
 border-radius:0!important;
 box-shadow:none!important;
 outline:none!important;
 appearance:none!important;
 -webkit-appearance:none!important;
 font-family:var(--font-display)!important;
 font-weight:700!important;
 font-size:1.05rem!important;
 color:var(--navy)!important;
 text-align:left!important;
 cursor:pointer!important;
}
.mobile-nav .m-acc-btn i{
 font-size:.78rem!important;
 color:var(--red)!important;
 transition:transform .28s ease!important;
}
.mobile-nav .m-acc.open .m-acc-btn i{transform:rotate(180deg)!important}

/* collapsed by default, expands on tap */
.mobile-nav .m-acc-panel{
 display:grid!important;
 grid-template-rows:0fr!important;
 overflow:hidden!important;
 transition:grid-template-rows .3s ease!important;
}
.mobile-nav .m-acc.open .m-acc-panel{grid-template-rows:1fr!important}
.mobile-nav .m-acc-panel > *{min-height:0!important;overflow:hidden!important}
/* implicit rows must collapse too, not just the first */
.mobile-nav .m-acc:not(.open) .m-acc-panel{grid-auto-rows:0fr!important}
.mobile-nav .m-acc.open .m-acc-panel{grid-auto-rows:1fr!important}
.mobile-nav .m-acc:not(.open) .m-acc-panel{grid-template-rows:0fr!important}
.mobile-nav .m-acc:not(.open) .m-acc-panel a{visibility:hidden!important;pointer-events:none!important}
.mobile-nav .m-acc.open .m-acc-panel a{visibility:visible!important;pointer-events:auto!important}
.mobile-nav .m-acc-panel a{
 display:block!important;
 padding:12px 0 12px 16px!important;
 margin:0 0 0 4px!important;
 font-family:var(--font-body)!important;
 font-size:.95rem!important;
 font-weight:500!important;
 color:#41556E!important;
 background:none!important;
 border:none!important;
 border-left:2px solid rgba(37,99,235,.30)!important;
 border-radius:0!important;
 text-decoration:none!important;
}
.mobile-nav .m-acc-panel a:first-child{font-weight:700!important;color:var(--red)!important}
.mobile-nav .m-acc-panel a:last-child{margin-bottom:8px!important}

/* ---- HERO CLEARANCE: more room on phones, not less ---- */
@media (max-width:720px){
 .page-hero{padding:170px 0 62px!important}
}
@media (max-width:520px){
 .page-hero{padding:176px 0 56px!important}
}


/* =====================================================================
   HEADING SHINE EVERYWHERE  -- h1..h4 on the same travelling sweep.
   background-position lives ONLY in the keyframes (never !important)
   or the animation freezes.
   ===================================================================== */
h1,h2,h3,h4,
.section-title,.sec-head h2,.icard h3,.step h3,.price h3,.rev h3,.pf h3{
 background-image:linear-gradient(90deg,#0F2C4C 0%,#0F2C4C 36%,#1D4ED8 44%,#2563EB 47%,#38BDF8 50%,#2563EB 53%,#1D4ED8 56%,#0F2C4C 64%,#0F2C4C 100%)!important;
 background-size:200% auto!important;
 background-repeat:repeat!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 color:transparent!important;
 text-shadow:none!important;
 animation:wuGlare 3s linear infinite!important;
}

/* accent words stay in the brighter blue family */
h1 span,h2 span,h3 span,h4 span,
.section-title span,.page-hero h1 .accent,.hero-title .accent{
 background-image:linear-gradient(90deg,#1D4ED8 0%,#2563EB 34%,#3B82F6 44%,#4F9BFF 47%,#60A5FA 50%,#4F9BFF 53%,#3B82F6 56%,#2563EB 66%,#1D4ED8 100%)!important;
 background-size:200% auto!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 color:transparent!important;
 animation:wuGlare 3s linear infinite!important;
}

/* on dark panels the sweep runs through WHITE so text stays readable */
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy h4,
.cta-band h1,.cta-band h2,.cta-band h3,.cta-band h4,
.nl-strip h2,.nl-strip h3,.nl-strip h4,
.wu-modal-side h3,.wu-modal-side h4,
footer h1,footer h2,footer h3,footer h4,
.footer h3,.footer h4,
.sec-navy .section-title,.cta-band .section-title,
.sec-navy h2 span,.cta-band h2 span,.nl-strip h2 span,footer h3 span{
 background-image:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 36%,#BAE6FD 44%,#7DD3FC 47%,#38BDF8 50%,#7DD3FC 53%,#BAE6FD 56%,#FFFFFF 64%,#FFFFFF 100%)!important;
 background-size:200% auto!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 color:transparent!important;
 animation:wuGlare 3s linear infinite!important;
}

/* keep tiny UI headings legible and un-animated */
.wu-modal-form h4,.lead-card h4,.m-acc-btn,.crumbs,
.answer-box b,.faq summary{
 background:none!important;
 -webkit-text-fill-color:currentColor!important;
 color:var(--navy)!important;
 animation:none!important;
}
@media (prefers-reduced-motion:reduce){
 h1,h2,h3,h4,h1 span,h2 span,h3 span,h4 span{animation-duration:12s!important}
}




/* =====================================================================
   AUDIT POPUP FORM POLISH
   Inputs previously fell back to browser defaults (square, no padding).
   Matches the .lead-card field styling used everywhere else on the site.
   ===================================================================== */
.wu-modal-form .fg input,
.wu-modal-form .fg select,
.wu-modal-form .fg textarea{
 padding:13px 15px!important;
 border:1.5px solid #DCE5F0!important;
 border-radius:12px!important;
 background:#F8FAFF!important;
 color:var(--black)!important;
 font-family:var(--font-body)!important;
 line-height:1.4!important;
 appearance:none!important;
 -webkit-appearance:none!important;
 box-shadow:none!important;
 transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.wu-modal-form .fg input::placeholder,
.wu-modal-form .fg textarea::placeholder{color:#9AA9BC!important;opacity:1!important}
.wu-modal-form .fg input:focus,
.wu-modal-form .fg select:focus,
.wu-modal-form .fg textarea:focus{
 outline:none!important;
 border-color:var(--red)!important;
 background:#fff!important;
 box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
.wu-modal-form .fg input:invalid:not(:placeholder-shown){
 border-color:#E5A3A3!important;
}

/* close button: solid navy so it is obvious on the white mobile card */
.wu-close{
 background:var(--navy)!important;
 color:#ffffff!important;
 border:2px solid #ffffff!important;
 box-shadow:0 8px 22px rgba(16,42,67,.28)!important;
 opacity:1!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 z-index:6!important;
}
.wu-close:hover{background:var(--red)!important;color:#fff!important;border-color:#fff!important}

/* labels: a touch more air so they never crowd the field */
.wu-modal-form .fg label{
 margin:0 0 7px!important;
 font-size:.82rem!important;
 letter-spacing:.2px!important;
}
.wu-modal-form .fg{margin-bottom:15px!important}

/* submit button + trust line */
.wu-modal-form .lead-submit{
 margin-top:4px!important;
 padding:15px!important;
 border-radius:12px!important;
 font-size:1rem!important;
 letter-spacing:.2px!important;
}
.wu-modal-form .lead-trust{margin-top:14px!important}

/* heading needs clearance from the close button so it is never clipped */
.wu-modal-form h4{
 padding-right:46px!important;
 margin-bottom:6px!important;
 line-height:1.3!important;
}
@media (max-width:760px){
 .wu-modal-form{padding:56px 18px 26px!important}
 .wu-modal-form .fg input,
 .wu-modal-form .fg select,
 .wu-modal-form .fg textarea{padding:12px 14px!important}
}
@media (max-width:400px){
 .wu-modal-form{padding:54px 14px 22px!important}
}