/*
Theme Name: Beyond Website Design
Theme URI: https://beyondwebsitedesign.com.ng/
Author: Beyond Limits
Description: A responsive digital-agency WordPress theme for Beyond Website Design.
Version: 1.0.0
Text Domain: beyond-website-design
*/
:root{--navy:#071a2f;--blue:#073d79;--sky:#e9f3ff;--orange:#ff7a33;--cream:#fffaf3;--ink:#101e2d;--muted:#66717f;--line:#dbe3ea}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.wrap{max-width:1400px;margin:auto}.site-header{height:84px;padding:0 clamp(24px,5vw,76px);display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:10;width:100%;color:#fff}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:43px;height:43px;border-radius:12px;background:var(--orange);display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 9px 25px #ff7a3344;font-size:19px;font-weight:900;letter-spacing:-5px}.brand-mark i{font-style:normal}.brand-mark i:last-child{transform:translateY(4px);opacity:.72}.brand>span:last-child{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:20px}.brand small{text-transform:uppercase;letter-spacing:2.3px;font-size:8px;margin-top:5px;opacity:.7}.site-header nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:13px;font-weight:600}.site-header nav a{opacity:.78}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 21px;border-radius:8px;font-weight:700;font-size:13px;transition:.25s}.button:hover{transform:translateY(-2px)}.button-dark{background:#ffffff15;border:1px solid #ffffff30}.button-accent{background:var(--orange);color:#fff;box-shadow:0 12px 32px #ff7a3340}.arrow{font-size:18px}.hero{min-height:720px;color:#fff;background:linear-gradient(125deg,#06182c,#082a4e 54%,#0a4479);display:grid;grid-template-columns:1.04fr .96fr;align-items:center;padding:130px clamp(24px,7vw,110px) 80px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:#1989dd28;right:-160px;top:-100px}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to right,#000,transparent 75%)}.hero-content{position:relative;z-index:2;max-width:720px}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:11px;color:#9fc8ec}.eyebrow:before{content:"";width:28px;height:2px;background:var(--orange)}h1{font-size:clamp(49px,5.2vw,80px);line-height:.98;letter-spacing:-4.8px;margin:24px 0 28px}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;color:var(--orange)}.hero-copy{font-size:17px;line-height:1.75;color:#c5d7e8;max-width:610px}.hero-actions{display:flex;gap:28px;align-items:center;margin-top:34px}.text-link{font-size:13px;font-weight:700}.trust-row{display:flex;flex-wrap:wrap;gap:24px;margin-top:46px;color:#a9bdd0;font-size:11px}.trust-row b{color:#60d1aa}.hero-visual{position:relative;height:550px;z-index:2}.browser-card{width:min(530px,44vw);position:absolute;right:0;top:78px;background:#fff;border:7px solid #ffffff24;border-radius:18px;box-shadow:0 40px 80px #0007;overflow:hidden;transform:perspective(1100px) rotateY(-7deg) rotateX(2deg)}.browser-top{height:35px;background:#e9eef3;display:flex;align-items:center;gap:5px;padding:0 12px}.browser-top i{width:7px;height:7px;border-radius:50%;background:#bdc6ce}.browser-top i:first-child{background:var(--orange)}.browser-top b{font-size:7px;color:#72808c;margin-left:35px;background:#fff;padding:5px 30px;border-radius:5px}.browser-body{height:318px;padding:29px 36px;color:var(--navy);background:linear-gradient(125deg,#fff 55%,#e7f3ff)}.mini-nav{display:flex;align-items:center;gap:14px;margin-bottom:46px}.mini-nav i{width:34px;height:4px;border-radius:3px;background:#d2dce5}.mini-nav i:first-child{margin-left:auto}.browser-body p{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#53718c}.browser-body h3{font-size:35px;letter-spacing:-2px;margin:8px 0 20px}.mini-button{width:82px;height:25px;border-radius:5px;background:var(--orange)}.mini-panels{display:flex;gap:9px;margin-top:34px}.mini-panels i{height:58px;flex:1;border-radius:6px;background:#dbe9f4}.mini-panels i:nth-child(2){background:#ffd7bf}.float-card{position:absolute;background:#fff;color:var(--navy);padding:14px 17px;border-radius:11px;box-shadow:0 18px 40px #0010254d}.float-card b{display:block;font-size:11px}.float-card small{font-size:8px;color:#7e8b96}.speed{top:40px;right:13%}.growth{bottom:58px;left:5%}.proof-strip{background:var(--orange);color:#fff;padding:24px clamp(24px,7vw,110px);display:flex;justify-content:space-between;align-items:center}.proof-strip p{font-size:12px;font-weight:700}.proof-strip div{display:flex;gap:15px;font-size:10px;text-transform:uppercase;letter-spacing:1.3px}.section{padding:110px clamp(24px,7vw,110px)}.section-label{text-transform:uppercase;color:#82909c;letter-spacing:2px;font-size:10px;font-weight:800;margin-bottom:34px}.about{background:var(--cream)}.about-main{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.section h2{font-size:clamp(40px,4.3vw,65px);line-height:1.04;letter-spacing:-3.5px;margin:0}.section h2 span{color:#9aa4ad;font-family:Georgia,serif;font-style:italic;font-weight:400}.about-copy p{color:var(--muted);font-size:15px;line-height:1.85}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:75px;padding-top:42px;border-top:1px solid #e7ddd0}.value-grid .icon,.service-icon{font-size:26px;color:var(--orange)}.value-grid h3{font-size:17px;margin:18px 0 9px}.value-grid p{font-size:13px;color:var(--muted);line-height:1.7}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px}.section-head>p{max-width:405px;color:var(--muted);line-height:1.8;font-size:14px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-card{padding:36px 31px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:.3s;min-height:330px}.service-card:hover{background:var(--navy);color:#fff;transform:translateY(-5px)}.service-card:hover p{color:#a9bdd0}.service-number{position:absolute;right:25px;top:25px;font-size:10px;color:#9ca8b2}.service-icon{width:52px;height:52px;border-radius:13px;background:var(--sky);display:grid;place-items:center}.service-tag{display:block;color:var(--orange);text-transform:uppercase;font-size:9px;letter-spacing:1.5px;font-weight:800;margin-top:24px}.service-card h3{font-size:19px;margin:11px 0}.service-card p{font-size:12px;line-height:1.75;color:var(--muted);min-height:82px}.service-card a{font-size:11px;font-weight:700}.process{background:var(--navy);color:#fff}.process-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw}.process-layout>div>p{color:#9db1c5;line-height:1.8}.process ol{list-style:none;margin:0;padding:0}.process li{display:grid;grid-template-columns:70px 1fr;padding:25px 0;border-top:1px solid #ffffff19}.process li:last-child{border-bottom:1px solid #ffffff19}.process li>b{font-size:11px;color:var(--orange)}.process li span{display:flex;justify-content:space-between}.process li small{color:#9db1c5;width:55%;line-height:1.6}.work{background:#f6f8fa}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.project-card{background:#fff;padding:12px;transition:.3s}.project-card:hover{transform:translateY(-7px);box-shadow:0 24px 45px #14253614}.project-preview{height:255px;padding:34px 28px;overflow:hidden}.project-screen{height:230px;background:#fff;border-radius:8px;padding:20px;box-shadow:0 13px 30px #15324f21;transform:rotate(-2deg)}.project-screen>span{display:block;width:24px;height:24px;background:var(--orange);border-radius:7px}.project-screen h4{font-size:16px;margin:28px 0 14px}.project-screen i{display:block;height:6px;background:#e1e8ed;border-radius:3px;margin:6px 0}.project-screen i:nth-of-type(1){width:85%}.project-screen i:nth-of-type(2){width:62%}.project-screen i:nth-of-type(3){width:38%;height:25px;background:var(--navy);margin-top:20px}.project-meta{display:flex;justify-content:space-between;align-items:center;padding:19px 8px 10px}.project-meta small{display:block;text-transform:uppercase;color:#8b98a3;font-size:8px}.project-meta strong{font-size:14px}.cta-section{min-height:485px;background:linear-gradient(120deg,#09213a,#073e70);color:#fff;display:grid;place-items:center;text-align:center;padding:80px 24px;position:relative;overflow:hidden}.cta-content{position:relative;max-width:850px}.cta-content h2{font-size:clamp(44px,5.2vw,74px);line-height:1;letter-spacing:-4px;margin:23px 0}.cta-content>p{color:#b7c9da;max-width:620px;margin:0 auto;line-height:1.7}.cta-actions{display:flex;justify-content:center;gap:26px;margin-top:32px}.site-footer{background:#041220;color:#fff;padding:70px clamp(24px,7vw,110px) 28px}.footer-top{display:grid;grid-template-columns:1.2fr .5fr 1fr;gap:8vw;padding-bottom:55px}.site-footer h4{text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:#7891a8}.site-footer a,.site-footer p{font-size:12px;color:#b1c1d0;line-height:1.7}.footer-links{display:flex;flex-direction:column;gap:12px}.footer-bottom{border-top:1px solid #ffffff12;padding-top:25px;display:flex;justify-content:space-between;color:#678097;font-size:10px}.blog-main{padding:130px 7vw 80px;min-height:70vh}.blog-main article{max-width:800px;margin:0 auto}.blog-main img{max-width:100%;height:auto}
@media(max-width:1000px){.site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:145px}.hero-visual{height:430px}.browser-card{width:78vw;right:5vw}.service-grid,.project-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.header-cta{padding:12px}.hero{padding-left:24px;padding-right:24px}.hero h1{letter-spacing:-3px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-visual{height:350px}.browser-card{width:95vw;right:-20vw;top:48px}.proof-strip{flex-direction:column;align-items:flex-start}.section{padding:78px 24px}.about-main,.process-layout{grid-template-columns:1fr}.value-grid,.service-grid,.project-grid{grid-template-columns:1fr}.section-head{display:block}.process li span{display:block}.process li small{display:block;width:100%;margin-top:8px}.cta-actions{flex-direction:column}.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:12px}}
