@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root{
  --blue:#0b68a8;
  --text:#2f2f2f;
  --muted:#909090;
  --line:#dedede;
  --white:#fff;
  --content:1500px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:'Lato','Segoe UI',Arial,sans-serif;font-weight:300}
a{color:inherit}
img{display:block;max-width:100%}

.page-shell{padding:14px 10px 0}
.hero{position:relative;color:#fff;background-position:center;background-size:cover;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:rgba(5,13,22,.42)}
.home-hero{height:580px;background-image:url('assets/Portfolio-Nerd.jpg');background-position:center 48%}
.inner-hero{height:415px}
.services-hero{background-image:url('assets/services-hero.jpg');background-position:center 50%}
.about-hero{background-image:url('assets/about-hero.png');background-position:center 50%}
.contact-hero{background-image:url('assets/company_contact.jpg');background-position:center 43%}

.site-header{position:absolute;z-index:3;left:0;right:0;top:0;height:105px;display:flex;align-items:center}
.header-inner{width:min(calc(100% - 105px),1720px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;font-weight:700;font-size:29px;letter-spacing:.01em}
.glasses{position:relative;width:72px;height:26px;display:inline-block}
.glasses::before,.glasses::after{content:"";position:absolute;top:4px;width:29px;height:17px;border:3px solid currentColor;border-top-width:2px;border-radius:4px 4px 14px 14px}
.glasses::before{left:2px;transform:rotate(3deg)}
.glasses::after{right:2px;transform:rotate(-3deg)}
.glasses i{position:absolute;left:31px;right:31px;top:11px;border-top:3px solid currentColor}
.glasses span{position:absolute;left:-2px;top:3px;width:8px;border-top:2px solid currentColor;transform:rotate(-9deg)}
.glasses b{position:absolute;right:-2px;top:3px;width:8px;border-top:2px solid currentColor;transform:rotate(9deg)}
.main-nav{display:flex;gap:42px;align-items:center;font-size:20px;font-weight:400}
.main-nav a{text-decoration:none;color:rgba(255,255,255,.78)}
.main-nav a.active,.main-nav a:hover{color:#fff;font-weight:700}
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer}

.hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.home-copy{width:min(calc(100% - 150px),1180px);margin:0 auto;padding-top:58px}
.home-copy h1{margin:0 0 47px;font-size:61px;line-height:1.05;font-weight:700;letter-spacing:.01em}
.home-copy p{margin:0;font-size:31px;font-weight:300}
.inner-title{width:100%;text-align:center;padding-top:44px}
.inner-title h1{margin:0;font-size:60px;font-weight:300;letter-spacing:.01em}

.content{width:min(calc(100% - 200px),1375px);margin:0 auto}
.home-services{padding:112px 0 120px;background:#fff}
.home-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px}
.home-service{display:grid;grid-template-columns:58px 1fr;column-gap:22px;align-items:start}
.home-service .service-icon-img{width:58px;height:58px;object-fit:contain;margin-top:0;opacity:.85}
.line-icon{width:58px;height:58px;display:flex;align-items:flex-start;justify-content:center;color:#1976bd}
.line-icon svg{width:50px;height:50px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.home-service h2{margin:-4px 0 20px;font-size:31px;line-height:1.32;font-weight:300}
.home-service p{grid-column:1 / -1;margin:0;color:#999;font-size:21px;line-height:1.48}

.tailor-band,.cta-band{position:relative;color:#fff;background-size:cover;background-position:center;overflow:hidden;margin:0 10px 18px}
.tailor-band{min-height:385px;background-image:url('assets/home_image.jpg')}
.tailor-band::before,.cta-band::before{content:"";position:absolute;inset:0;background:rgba(16,21,27,.58)}
.tailor-inner{position:relative;z-index:1;width:min(calc(100% - 200px),1375px);margin:0 auto;min-height:385px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:120px}
.tailor-inner h2{margin:0 0 20px;font-size:35px;font-weight:300;letter-spacing:.02em}
.tailor-inner h3{margin:0 0 15px;font-size:38px;line-height:1.25;font-weight:300}
.tailor-inner .company{margin:0;font-size:21px;color:#ddd}
.tailor-inner .audit{font-size:22px;line-height:1.45;color:#ececec;margin:0}

.cta-band{min-height:305px;background-image:url('assets/Aviti_Sliders7-1170x600.jpg');background-position:center 43%}
.cta-inner{position:relative;z-index:1;min-height:305px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}
.cta-inner h2{margin:0 0 50px;font-size:60px;line-height:1.55;font-weight:300;max-width:900px}
.cta-button{display:inline-flex;align-items:center;justify-content:center;min-width:240px;height:64px;border:1px solid #1577ac;background:rgba(55,87,104,.66);text-decoration:none;font-size:20px}

.page-section{padding:115px 0 95px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:74px 56px}
.service-item{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:start}
.service-item img{width:64px;height:64px;object-fit:cover;border-radius:50%}
.service-item h2{margin:6px 0 23px;font-size:29px;line-height:1.25;font-weight:300}
.service-item p{grid-column:1 / -1;margin:0;color:#8e8e8e;font-size:20px;line-height:1.56}
.service-item.web-dev{grid-column:2 / 3;margin-top:-10px}
.service-item.web-dev img{object-fit:contain;background:#314c66}

.about-section{padding:92px 0 110px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.about-image-wrap{border:1px dashed #777;padding:16px 32px 18px}
.about-image-wrap img{width:100%;height:auto}
.about-copy{padding-top:18px}
.about-copy h2{margin:0 0 24px;color:#0b74bb;font-size:36px;font-weight:300;letter-spacing:.01em}
.about-copy p{margin:0;color:#8a8a8a;font-size:20px;line-height:1.5;max-width:680px}

.contact-section{padding:92px 0 110px}
.contact-box{border:1px dashed #777;min-height:440px;display:flex;justify-content:flex-end;align-items:center;padding:40px 120px}
.contact-copy{text-align:center;min-width:520px}
.contact-copy h2{margin:0 0 24px;font-size:31px;font-weight:300}
.contact-copy .phone{display:block;color:#005b97;text-decoration:none;font-size:64px;line-height:1.1;font-weight:700;letter-spacing:.02em}
.contact-copy p{margin:45px 0 0;font-size:21px;color:#8d8d8d}

.footer{width:min(calc(100% - 200px),1500px);margin:0 auto;border-top:1px solid var(--line);padding:33px 0 54px;display:flex;justify-content:space-between;align-items:flex-start;color:#747474;font-size:18px;line-height:1.45}
.footer p{margin:0}
.footer-right{text-align:right}
.footer a{color:inherit}

.asset-preserve{display:none}

@media(max-width:1100px){
  .header-inner{width:calc(100% - 50px)}
  .content,.tailor-inner,.footer{width:calc(100% - 70px)}
  .home-copy{width:calc(100% - 70px)}
  .home-service-grid{gap:35px}
  .home-service h2{font-size:27px}
  .home-service p{font-size:18px}
  .tailor-inner{gap:60px}
  .cta-inner h2{font-size:48px}
}

@media(max-width:820px){
  .page-shell{padding:0}
  .site-header{height:78px}
  .header-inner{width:calc(100% - 30px)}
  .brand{font-size:23px}
  .glasses{transform:scale(.82);transform-origin:left center;margin-right:-8px}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:15px;right:15px;top:72px;flex-direction:column;gap:0;background:rgba(15,20,27,.96);padding:12px 0}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 20px;width:100%;text-align:center}
  .home-hero{height:500px}
  .inner-hero{height:340px}
  .home-copy{width:calc(100% - 40px);padding-top:35px}
  .home-copy h1{font-size:43px;margin-bottom:30px}
  .home-copy p{font-size:24px}
  .inner-title h1{font-size:42px}
  .content,.tailor-inner,.footer{width:calc(100% - 40px)}
  .home-services{padding:70px 0}
  .home-service-grid,.services-grid,.about-grid{grid-template-columns:1fr}
  .home-service-grid{gap:48px}
  .home-service{grid-template-columns:54px 1fr}
  .tailor-band,.cta-band{margin-left:0;margin-right:0}
  .tailor-inner{grid-template-columns:1fr;gap:24px;padding:55px 0}
  .tailor-inner h2{font-size:30px}
  .tailor-inner h3{font-size:32px}
  .tailor-inner .audit{font-size:19px}
  .cta-inner h2{font-size:38px;line-height:1.35}
  .service-item.web-dev{grid-column:auto;margin-top:0}
  .page-section{padding:70px 0}
  .contact-box{padding:55px 20px;justify-content:center;min-height:330px}
  .contact-copy{min-width:0;width:100%}
  .contact-copy .phone{font-size:44px}
  .footer{font-size:16px;padding-bottom:35px}
}

@media(max-width:520px){
  .brand{font-size:20px;gap:8px}
  .home-copy h1{font-size:36px}
  .home-copy p{font-size:21px}
  .inner-title h1{font-size:35px}
  .home-service h2{font-size:25px}
  .tailor-inner h3{font-size:29px}
  .cta-inner h2{font-size:31px}
  .footer{flex-direction:column;gap:24px}
  .footer-right{text-align:left}
}