/* Best Shot Marketing: site styles (also loaded by the blog) */
:root{
  --blue:#4B7DB9;
  --blue-dark:#3A659A;
  --light-blue:#E1F1F6;
  --warm-gray:#EBE3E9;
  --pink:#FCE4E2;
  --yellow:#FFF7D3;
  --hot-pink:#ef4f93;
  --gold:#c5a968;
  --ink:#101010;
  --white:#fff;
  --max:1000px;
  --font:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:17px;background:#fff;line-height:1.3}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot-pink);outline-offset:3px}
.hl{color:var(--blue)}
.dark-blue .hl{color:#fff}
.yellow-card .hl,.offer .hl{color:var(--blue)}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--blue);padding:10px 16px;z-index:100;font-weight:700}
.skip-link:focus{left:12px;top:12px}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.narrow{width:min(1020px,calc(100% - 40px))}

/* Header */
.site-header{background:var(--blue);position:sticky;top:0;z-index:50;box-shadow:0 2px 8px #0002}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:block;flex:0 0 auto}
.brand img{width:225px;height:auto;background:#fff;padding:3px}
.nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav a{background:#fff;text-decoration:none;font-weight:800;color:var(--blue);border-radius:999px;padding:9px 22px;font-size:15px;letter-spacing:.03em;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{background:var(--light-blue)}
.nav a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Buttons */
.button{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;border:0;border-radius:7px;padding:14px 48px;font:800 17px/1.2 var(--font);cursor:pointer;text-align:center}
.button:hover{background:var(--blue-dark)}
.light-btn{background:var(--light-blue);color:var(--blue)}
.light-btn:hover{background:#fff}
.button[disabled]{opacity:.6;cursor:wait}

/* Hero */
.hero{padding:96px 0 66px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center}
.hero h1{font-size:56px;line-height:.98;margin:0 0 22px;letter-spacing:-.04em}
.lead{font-size:24px;font-weight:800;max-width:560px;margin:0 0 14px}
.hero-blue{font-size:23px;font-weight:900;margin:0;color:var(--blue)}
.people-card{background:var(--light-blue);border-radius:24px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:center}
.person img{width:112px;height:112px;object-fit:cover;border-radius:50%;filter:grayscale(1);margin:0 auto 8px;border:2px solid #fff}
.person h2{font-size:15px;margin:4px 0}
.person p{font-size:15px;margin:0;line-height:1.3}
.people-card .card-foot{grid-column:1/-1;font-size:18px;font-weight:800;margin:0}
.hero-cta{text-align:center;padding:28px 0 0}
.hero-cta h2{font-size:26px;margin:0 0 25px}
.button-row{display:flex;justify-content:center;gap:55px;flex-wrap:wrap}

/* Panels */
.panel{padding:84px 0}
.section-white{background:#fff}
.light-blue{background:var(--light-blue)}
.dark-blue{background:var(--blue);color:#fff}
.warm-gray{background:var(--warm-gray)}
.eyebrow{font-style:italic;font-weight:900;font-size:16px;margin:0 0 12px;letter-spacing:.01em;text-transform:uppercase}
.panel h2{font-size:32px;line-height:1.1;margin:0 0 28px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{font-weight:800;margin:10px 0;padding-left:28px;position:relative;font-size:17px}
.pink-checks li::before{content:"\2713";color:var(--hot-pink);font-size:24px;font-weight:900;position:absolute;left:0;top:-5px}
.pull-quote p{font-size:22px;font-weight:900;margin:0 0 12px}
.pull-quote .tag{font-size:20px;font-weight:900;font-style:italic;color:var(--blue);margin:0}

.mystery h2{font-size:34px}
.big-copy{font-size:19px;font-weight:800}
.dot-list{padding-left:25px;font-weight:800}
.dot-list li{margin:6px 0}
.yellow-dots li::marker{color:#ffea43}
.blue-dots li::marker{color:var(--blue)}
.mystery .light-btn{margin-top:18px}
.yellow-card{background:var(--yellow);color:#111;border-radius:18px;padding:25px 30px;font-size:17px}
.yellow-card p{margin-top:0}
.yellow-card .card-foot{font-size:18px;font-weight:800;margin:0}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin:34px 0}
.step{position:relative;padding:18px 24px 24px;border-radius:18px;min-height:360px}
.blue-step{background:var(--light-blue)}
.pink-step{background:var(--pink)}
.yellow-step{background:var(--yellow)}
.step-top{position:relative;height:82px}
.num,.offer-num{font-size:58px;font-weight:900;line-height:1;color:var(--blue)}
.step:nth-child(2) .num,.offer:nth-child(2) .offer-num{color:var(--hot-pink)}
.step:nth-child(3) .num,.offer:nth-child(3) .offer-num{color:var(--gold)}
.section-circle{position:absolute;top:-44px;right:-30px;width:98px;height:98px;border-radius:50%;overflow:hidden;border:4px solid #000;background:#fff;z-index:3}
.section-circle img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.step h3{color:var(--blue);font-size:20px;margin:8px 0}
.pink-step h3{color:var(--hot-pink)}
.yellow-step h3{color:#111}
.step ul{padding-left:18px;font-size:15px;margin:0}
.step li{margin:8px 0}
.signal{font-size:24px;font-weight:900;margin:22px 5% 0;line-height:1.3}

/* Mid CTA */
.mid-cta{padding:46px 0}
.cta-bar{display:grid;grid-template-columns:200px 1fr 1fr;gap:65px;align-items:center}
.cta-bar img{background:#fff;width:200px;padding:3px}

/* Goals */
.goals h3{font-size:25px;margin:0 0 16px;line-height:1.25}
.goal-list{list-style:none;background:var(--warm-gray);border-radius:18px;padding:25px 35px;margin:28px auto;width:min(720px,100%)}
.goal-list li{padding-left:30px;position:relative;margin:12px 0}
.goal-list li::before{content:"\2611";position:absolute;left:0;top:-3px;color:var(--blue);font-size:22px}
.goal-list strong{font-size:17px}
.goal-list p{margin:2px 0;font-size:15px}
.listen{font-size:20px;font-weight:900;line-height:1.4;margin:0 5%}

/* Offers */
.offers h2{font-size:34px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}
.offer{border-radius:18px;padding:18px 26px 26px;color:#111;min-height:355px;display:flex;flex-direction:column}
.warm-card{background:var(--warm-gray)}
.pink-card{background:var(--pink)}
.offer-yellow{background:var(--yellow)}
.offer h3{font-size:19px;margin:8px 0}
.offer p,.offer li{font-size:15px}
.price{color:var(--blue);font-size:24px;font-weight:800;margin:auto 0 0;align-self:flex-end}
.offer .note{font-size:13px;font-style:italic;text-align:center;margin:6px 0 0}

/* How it works */
.how-works-section{background:linear-gradient(to bottom,var(--blue) 0,var(--blue) 22%,var(--light-blue) 22%,var(--light-blue) 100%);padding:55px 0 90px}
.how-works-box{background:#000;color:#fff;border-radius:22px;padding:48px 58px;display:grid;min-height:360px;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.how-works-box .eyebrow{font-size:18px;margin-bottom:30px}
.how-works-left h2{font-size:42px;line-height:1.08;margin:0 0 30px;color:#fff}
.how-works-left .h2-like{font-size:42px;line-height:1.08;margin:0;font-weight:700}
.how-works-right{font-size:18px;line-height:1.45;padding-top:18px}
.how-works-right p{margin:0 0 14px}

/* Blog teaser */
.blog-panel h2{font-size:34px}
.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-cards article{border:2px solid var(--light-blue);border-radius:14px;padding:22px;display:flex;flex-direction:column}
.blog-cards .cat{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}
.blog-cards h3{font-size:20px;margin:8px 0}
.blog-cards h3 a{text-decoration:none}
.blog-cards h3 a:hover{color:var(--blue)}
.blog-cards p{font-size:15px;margin:0 0 14px}
.blog-cards .more{margin-top:auto;font-weight:800;color:var(--blue);font-size:15px}
.blog-all{text-align:center;margin:34px 0 0}

/* Contact form */
.contact-panel h2{font-size:36px}
.contact-form{background:#fff;border-radius:22px;padding:30px 40px;position:relative}
.contact-form fieldset{border:0;padding:0;margin:0 0 25px}
.contact-form legend{font-size:18px;font-weight:900;margin-bottom:12px;padding:0}
.contact-form legend small{display:block;font-style:normal;font-size:15px;margin-top:2px}
.contact-form fieldset label{display:flex;align-items:flex-start;gap:8px;margin:9px 0;font-size:16px;cursor:pointer}
.contact-form input[type="checkbox"]{width:20px;height:20px;margin:0;flex:0 0 20px;accent-color:var(--blue)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.form-grid label{display:block;font-size:15px;margin:10px 0 4px;font-weight:700}
.form-grid input,.form-grid textarea{width:100%;border:1.5px solid #333;border-radius:4px;padding:11px;font:16px/1.3 var(--font)}
.form-grid textarea{height:196px;resize:vertical}
.form-grid input:focus,.form-grid textarea:focus{outline:3px solid var(--light-blue);border-color:var(--blue)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;text-align:center;margin:22px 0 0}
.submit{display:block;margin:20px auto 0;min-width:250px}

/* Footer */
.footer{padding:52px 0 0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;font-size:16px;line-height:1.5}
.footer strong{display:inline-block;margin-bottom:4px}
.footer a{text-decoration:none;font-style:italic}
.footer a:hover{color:var(--blue);text-decoration:underline}
.footer-spacer{height:36px;display:block}
.footer-email{text-align:center;margin:28px auto 0;font-size:16px}
.footer-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:36px auto 0;font-size:15px}
.footer-links a{font-style:normal;font-weight:700;color:var(--blue)}
.footer-rule{min-height:96px;background:var(--blue);width:100%;margin:28px 0 0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;text-align:center;padding:20px}

/* Simple inner pages (privacy, thank you, 404) */
.page{padding:72px 0 84px}
.page .wrap{max-width:760px}
.page h1{font-size:44px;line-height:1.05;margin:0 0 18px;letter-spacing:-.03em}
.page h2{font-size:24px;margin:36px 0 10px}
.page p,.page li{line-height:1.6}
.page .updated{color:#555;font-size:15px}
.page .button-row{justify-content:flex-start;gap:16px;margin-top:28px}

@media(max-width:900px){
  .site-header{position:static}
  html{scroll-padding-top:0}
  .nav-wrap{flex-direction:column;padding:16px 0;gap:14px}
  .nav{gap:8px;justify-content:center}
  .nav a{padding:9px 14px;font-size:14px}
  .hero-grid,.two-col,.form-grid,.footer-grid,.how-works-box{grid-template-columns:1fr}
  .hero-grid{gap:30px}
  .hero h1{font-size:44px}
  .steps,.offer-grid,.blog-cards{grid-template-columns:1fr}
  .steps{gap:44px}
  .step{min-height:0}
  .section-circle{right:12px;top:-32px}
  .button-row{gap:12px}
  .cta-bar{grid-template-columns:1fr;gap:12px;text-align:center}
  .cta-bar img{margin:0 auto 8px}
  .offer{min-height:0}
  .footer-grid{gap:24px}
  .footer-spacer{display:none}
  .how-works-box{gap:20px;padding:36px 30px}
  .how-works-left h2,.how-works-left .h2-like{font-size:34px}
  .how-works-right{padding-top:0}
}
@media(max-width:560px){
  .wrap,.narrow{width:calc(100% - 32px)}
  .hero{padding:36px 0 50px}
  .hero h1{font-size:38px}
  .lead{font-size:20px}
  .people-card{grid-template-columns:1fr}
  .panel{padding:60px 0}
  .panel h2,.offers h2,.contact-panel h2,.mystery h2,.blog-panel h2{font-size:28px}
  .contact-form{padding:22px 18px}
  .button{width:100%;padding:14px 20px}
  .submit{min-width:0}
  .nav a{font-size:13px;padding:8px 12px}
  .section-circle{width:90px;height:90px;right:8px;top:-25px}
  .signal{font-size:20px;margin:22px 0 0}
  .listen{margin:0}
  .page h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Blog brand touches (blog.css loads after this file, so these use .hb to win) */
.hb .hb-card__img{background:var(--blue)}
.hb .hb-card__placeholder{background:var(--blue) url(/images/best-shot-marketing-logo.webp) center/62% auto no-repeat;color:transparent;font-size:0;text-decoration:none}
.hb .hb-card__img{text-decoration:none}
.hb .hb-cta{background:var(--blue)}
.hb .hb-cta .hb-btn,.hb .hb-cta a.hb-button{background:#fff;color:var(--blue)}
.service-area{text-align:center;font-size:14px;color:#444;margin:30px auto 0;line-height:1.5}
.blog-cards .card-img{display:block;margin:-22px -22px 16px;border-radius:12px 12px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--blue)}
.blog-cards .card-img img{width:100%;height:100%;object-fit:cover}