/*
Theme Name: Strategix Marketing Solutions
Theme URI: https://strategixmarketingsolutions.com
Author: Strategix Marketing Solutions
Description: Custom dark branded theme for Strategix Marketing Solutions. Edmonton brand strategy and marketing agency.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: strategix
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Mono:wght@400;500&display=swap');


:root{
  --red:#D0222A;--auburn:#A22C29;
  --night:#0A100D;--dark:#0f130f;--card:#141914;--card2:#181d18;
  --border:#1e241e;--border2:#252b25;
  --white:#F4F4F0;--ash:#B9BAA3;--muted:#5a5f5a;--dim:#8a8f8a;
  --fd:'Montserrat',sans-serif;--fb:'Bricolage Grotesque',sans-serif;--fm:'DM Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--night);color:var(--white);font-family:var(--fb);font-size:17px;line-height:1.6;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ANNOUNCE */
.ann{background:var(--red);color:var(--white);text-align:center;padding:11px 24px;font-family:var(--fm);font-size:12px;letter-spacing:1.5px;}
.ann a{color:var(--white);text-decoration:underline;margin-left:12px;opacity:.85;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(10,16,13,.97);border-bottom:1px solid var(--border);padding:0 48px;height:80px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(16px);}
.nav-logo img{height:72px;width:auto;object-fit:contain;}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{font-family:var(--fm);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);transition:color .15s;}
.nav-links a:hover{color:var(--white);}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-cta{background:var(--red);color:var(--white)!important;padding:12px 28px;font-family:var(--fm);font-size:11px;letter-spacing:2px;text-transform:uppercase;transition:background .15s;display:inline-block;border:1px solid var(--red);}
.nav-cta:hover{background:var(--auburn);border-color:var(--auburn);}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.ham span{width:24px;height:2px;background:var(--white);display:block;}

/* BUTTONS */
.btn-r{background:var(--red);color:var(--white);padding:16px 36px;font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;display:inline-block;transition:all .15s;border:1px solid var(--red);}
.btn-r:hover{background:var(--auburn);border-color:var(--auburn);}
.btn-o{background:transparent;color:var(--white);padding:16px 36px;font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;display:inline-block;border:1px solid var(--border2);transition:all .15s;}
.btn-o:hover{border-color:var(--red);color:var(--red);}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 48px 80px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-200px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(208,34,42,.08) 0%,transparent 70%);pointer-events:none;}
.hi{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.h-tag{font-family:var(--fm);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:32px;display:flex;align-items:center;gap:16px;opacity:0;animation:fu .7s .2s forwards;}
.h-tag::before{content:"";width:32px;height:1px;background:var(--red);}
.h-head{font-family:var(--fd);font-weight:900;font-size:clamp(64px,11vw,152px);line-height:.88;letter-spacing:-4px;color:var(--white);margin-bottom:40px;opacity:0;animation:fu .7s .35s forwards;}
.h-head em{color:var(--red);font-style:normal;}
.h-head .str{-webkit-text-stroke:1.5px rgba(244,244,240,.2);color:transparent;}
.h-bot{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;padding-top:48px;border-top:1px solid var(--border);margin-top:48px;opacity:0;animation:fu .7s .5s forwards;}
.h-sub{font-size:19px;color:var(--ash);font-weight:400;line-height:1.7;max-width:480px;}
.h-sub strong{color:var(--white);font-weight:600;}
.h-act{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.h-stats{display:flex;gap:0;margin-top:64px;border-top:1px solid var(--border);opacity:0;animation:fu .7s .65s forwards;}
.stat{flex:1;padding:32px 0;border-right:1px solid var(--border);}
.stat:last-child{border-right:none;}
.sn{font-family:var(--fd);font-weight:900;font-size:52px;color:var(--white);line-height:1;letter-spacing:-2px;}
.sl{font-family:var(--fm);font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;}

/* MARQUEE */
.mq{background:var(--red);padding:15px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
.mq-t{display:flex;animation:mq 28s linear infinite;white-space:nowrap;}
.mq-t span{font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:3px;color:var(--white);text-transform:uppercase;padding:0 32px;opacity:.9;}
.mq-t span.dot{color:rgba(255,255,255,.4);padding:0;opacity:1;}

/* SECTION COMMONS */
section{padding:96px 48px;border-bottom:1px solid var(--border);}
.sw{max-width:1200px;margin:0 auto;}
.slb{font-family:var(--fm);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.slb .n{font-family:var(--fd);font-size:13px;font-weight:800;color:var(--red);letter-spacing:0;}
.st{font-family:var(--fd);font-weight:900;font-size:clamp(40px,6vw,80px);line-height:.92;letter-spacing:-2px;color:var(--white);margin-bottom:28px;}
.st em{color:var(--red);font-style:normal;}
.sb{font-size:17px;color:var(--ash);max-width:560px;line-height:1.75;}

/* ABOUT */
#about{background:var(--dark);}
.ag{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.apw{aspect-ratio:4/5;background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden;}
.app{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
.app .pi{font-size:40px;opacity:.15;}
.app p{font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:2px;text-align:center;text-transform:uppercase;}
.aloc{display:flex;align-items:center;gap:12px;margin-top:20px;font-family:var(--fm);font-size:11px;color:var(--muted);letter-spacing:1.5px;}
.aloc::before{content:"";width:20px;height:1px;background:var(--red);}
.av{display:flex;flex-direction:column;gap:0;margin-top:40px;border-top:1px solid var(--border);}
.vr{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
.vn{font-family:var(--fd);font-weight:900;font-size:13px;color:var(--red);letter-spacing:1px;flex-shrink:0;margin-top:3px;width:28px;}
.vt h4{font-family:var(--fd);font-weight:800;font-size:18px;letter-spacing:-.3px;color:var(--white);margin-bottom:6px;}
.vt p{font-size:14px;color:var(--dim);line-height:1.65;}

/* SERVICES */
#services{background:var(--night);}
.sh{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:64px;align-items:end;}
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--border);}
.sc{background:var(--card);padding:48px 44px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;transition:background .2s;}
.sc:nth-child(2n){border-right:none;}
.sc:nth-child(3),.sc:nth-child(4){border-bottom:none;}
.sc:hover{background:var(--card2);}
.sc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.sc:hover::before{transform:scaleX(1);}
.scn{font-family:var(--fd);font-weight:900;font-size:13px;color:var(--red);letter-spacing:2px;margin-bottom:24px;display:block;}
.sc h3{font-family:var(--fd);font-weight:800;font-size:28px;letter-spacing:-.5px;color:var(--white);margin-bottom:16px;line-height:1.1;}
.sc p{font-size:15px;color:var(--dim);line-height:1.7;margin-bottom:28px;}
.sf{list-style:none;display:flex;flex-direction:column;gap:0;}
.sf li{font-size:14px;color:var(--ash);display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.sf li:last-child{border-bottom:none;padding-bottom:0;}
.sf li::before{content:"→";color:var(--red);flex-shrink:0;font-size:12px;margin-top:2px;}
.scta{text-align:center;margin-top:56px;padding-top:56px;border-top:1px solid var(--border);}
.scta p{font-size:22px;font-weight:600;color:var(--white);margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.4;}

/* PROCESS */
#process{background:var(--dark);}
.pl{display:grid;grid-template-columns:1fr 2fr;gap:96px;align-items:start;}
.pib{font-size:16px;color:var(--dim);line-height:1.75;margin-top:24px;}
.ps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border);}
.pst{display:flex;gap:32px;padding:36px 0;border-bottom:1px solid var(--border);transition:padding-left .2s;}
.pst:hover{padding-left:8px;}
.psn{font-family:var(--fd);font-weight:900;font-size:13px;color:var(--red);letter-spacing:2px;flex-shrink:0;margin-top:4px;width:36px;}
.psc h4{font-family:var(--fd);font-weight:800;font-size:22px;color:var(--white);margin-bottom:8px;letter-spacing:-.3px;}
.psc p{font-size:14px;color:var(--dim);line-height:1.7;}

/* WORK */
#work{background:var(--night);}
.wh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;flex-wrap:wrap;gap:24px;}
.cg{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--border);}
.cc{background:var(--card);padding:48px 44px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;transition:background .2s;overflow:hidden;}
.cc:nth-child(2n){border-right:none;}
.cc:nth-child(3),.cc:nth-child(4){border-bottom:none;}
.cc:hover{background:var(--card2);}
.cn{font-family:var(--fd);font-weight:900;font-size:13px;color:var(--red);letter-spacing:2px;margin-bottom:8px;display:block;}
.ci{font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;}
.cc-name{font-family:var(--fd);font-weight:900;font-size:42px;letter-spacing:-1.5px;color:var(--white);line-height:1;margin-bottom:20px;}
.cd{font-size:14px;color:var(--dim);line-height:1.7;margin-bottom:24px;max-width:400px;}
.ct{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.ct span{font-family:var(--fm);font-size:10px;letter-spacing:1px;padding:5px 10px;border:1px solid var(--border);color:var(--muted);text-transform:uppercase;}
.cr{display:flex;gap:28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);}
.cr-n{font-family:var(--fd);font-weight:900;font-size:32px;color:var(--red);letter-spacing:-1px;line-height:1;}
.cr-l{font-family:var(--fm);font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;}
.cal{position:absolute;bottom:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.cc:hover .cal{transform:scaleX(1);}

/* BLOG */
#blog{background:var(--dark);}
.bh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;flex-wrap:wrap;gap:24px;}
.bg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);}
.bc{background:var(--card);padding:40px 36px;border-right:1px solid var(--border);position:relative;transition:background .2s;overflow:hidden;}
.bc:last-child{border-right:none;}
.bc:hover{background:var(--card2);}
.bcat{font-family:var(--fm);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:16px;display:block;}
.btit{font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--white);line-height:1.2;margin-bottom:16px;}
.bex{font-size:14px;color:var(--dim);line-height:1.7;margin-bottom:28px;}
.bm{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--border);}
.bd{font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:1px;}
.br{font-family:var(--fm);font-size:10px;color:var(--red);letter-spacing:1.5px;text-transform:uppercase;transition:letter-spacing .2s;}
.bc:hover .br{letter-spacing:2.5px;}
.bmore{grid-column:1/-1;background:var(--card);padding:64px;border-top:1px solid var(--border);text-align:center;}
.bmore h3{font-family:var(--fd);font-weight:900;font-size:36px;color:var(--white);margin-bottom:12px;letter-spacing:-1px;}
.bmore p{font-size:15px;color:var(--dim);margin-bottom:28px;}

/* FREEBIE */
#freebie{background:var(--red);border-top:1px solid rgba(255,255,255,.05);}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.fl{font-family:var(--fm);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px;}
.ftit{font-family:var(--fd);font-weight:900;font-size:clamp(40px,6vw,80px);color:var(--white);line-height:.9;letter-spacing:-2px;margin-bottom:24px;}
.fd-t{font-size:17px;color:rgba(255,255,255,.8);line-height:1.7;}
.ff{display:flex;flex-direction:column;gap:12px;}
.ff input{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.2);color:var(--white);padding:14px 20px;font-family:var(--fb);font-size:15px;outline:none;transition:border-color .15s;}
.ff input::placeholder{color:rgba(255,255,255,.4);}
.ff input:focus{border-color:rgba(255,255,255,.7);}
.ff button{background:var(--night);color:var(--white);border:none;padding:16px;font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .15s;}
.ff button:hover{background:#0d150d;}

/* TESTIMONIALS */
#testimonials{background:var(--night);}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);margin-top:56px;}
.tc{background:var(--card);padding:44px 40px;border-right:1px solid var(--border);position:relative;}
.tc:last-child{border-right:none;}
.qm{font-family:var(--fd);font-size:80px;color:var(--red);line-height:.8;margin-bottom:20px;font-weight:900;display:block;opacity:.35;}
.tt{font-size:15px;color:var(--ash);line-height:1.8;font-style:italic;margin-bottom:28px;}
.ta{display:flex;gap:14px;align-items:center;padding-top:20px;border-top:1px solid var(--border);}
.av2{width:42px;height:42px;background:var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:18px;color:var(--red);flex-shrink:0;}
.an{font-family:var(--fd);font-weight:800;font-size:15px;color:var(--white);letter-spacing:-.2px;}
.ac{font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:1px;margin-top:2px;}

/* CONTACT */
#contact{background:var(--dark);}
.co-l{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.co-d{display:flex;flex-direction:column;gap:0;margin-top:40px;border-top:1px solid var(--border);}
.co-r{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
.co-i{width:36px;height:36px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.co-lb{font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.co-v{font-size:15px;color:var(--white);font-weight:500;}
.af{background:var(--card);border:1px solid var(--border);padding:48px 44px;position:relative;}
.af::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);}
.af h3{font-family:var(--fd);font-weight:900;font-size:32px;letter-spacing:-1px;color:var(--white);margin-bottom:8px;}
.af p{font-size:14px;color:var(--dim);margin-bottom:32px;line-height:1.6;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg2{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.fg2 label{font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.fg2 input,.fg2 select,.fg2 textarea{background:var(--dark);border:1px solid var(--border);color:var(--white);padding:12px 16px;font-family:var(--fb);font-size:14px;outline:none;transition:border-color .15s;width:100%;border-radius:0;appearance:none;}
.fg2 input:focus,.fg2 select:focus,.fg2 textarea:focus{border-color:var(--red);}
.fg2 textarea{resize:vertical;min-height:96px;}
.fg2 input::placeholder,.fg2 textarea::placeholder{color:var(--muted);}
.fg2 select option{background:var(--dark);}
.fsub{width:100%;background:var(--red);color:var(--white);border:none;padding:16px;font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .15s;margin-top:8px;}
.fsub:hover{background:var(--auburn);}

/* FOOTER */
footer{background:var(--card);border-top:1px solid var(--border);padding:72px 48px 40px;}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid var(--border);margin-bottom:40px;}
.fl2 img{height:64px;width:auto;object-fit:contain;margin-bottom:20px;}
.fb-t p{font-size:14px;color:var(--muted);line-height:1.7;max-width:300px;}
.fc-d{margin-top:20px;display:flex;flex-direction:column;gap:6px;}
.fc-d span{font-family:var(--fm);font-size:11px;color:var(--dim);letter-spacing:.5px;}
.fcol h4{font-family:var(--fm);font-size:10px;letter-spacing:3px;color:var(--red);text-transform:uppercase;margin-bottom:20px;}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.fcol ul li a{font-size:14px;color:var(--muted);transition:color .15s;}
.fcol ul li a:hover{color:var(--white);}
.fb2{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.fb2 p{font-family:var(--fm);font-size:11px;color:var(--muted);letter-spacing:1px;}
.fb2 strong{color:var(--red);}
.soc{display:flex;gap:12px;}
.soc a{width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:10px;color:var(--muted);transition:all .15s;}
.soc a:hover{border-color:var(--red);color:var(--red);}

/* REVEAL */
.rv{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease;}
.rv.on{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}.d4{transition-delay:.4s;}

/* ANIMATIONS */
@keyframes fu{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* RESPONSIVE */
@media(max-width:960px){
  nav{padding:0 24px;height:72px;}
  .nav-links{display:none;}
  .ham{display:flex;}
  section{padding:72px 24px;}
  .hero{padding:80px 24px 60px;}
  .h-bot{grid-template-columns:1fr;gap:32px;}
  .h-act{justify-content:flex-start;}
  .h-stats{flex-direction:column;}
  .stat{border-right:none;border-bottom:1px solid var(--border);}
  .ag,.sh,.pl,.co-l{grid-template-columns:1fr;gap:48px;}
  .sg,.cg{grid-template-columns:1fr;}
  .sc{border-right:none;}
  .sc:nth-child(3){border-bottom:1px solid var(--border);}
  .cc{border-right:none;}
  .cc:nth-child(3){border-bottom:1px solid var(--border);}
  .bg{grid-template-columns:1fr;}
  .bc{border-right:none;border-bottom:1px solid var(--border);}
  .fg,.tg{grid-template-columns:1fr;}
  .tc{border-right:none;border-bottom:1px solid var(--border);}
  .ft{grid-template-columns:1fr 1fr;gap:40px;}
  .fr{grid-template-columns:1fr;}
  .wh,.bh{flex-direction:column;align-items:flex-start;}
}
@media(max-width:600px){
  .h-head{font-size:56px;letter-spacing:-2px;}
  .ft{grid-template-columns:1fr;}
  .fb2{flex-direction:column;align-items:flex-start;}
  .nav-logo img{height:52px;}
}