/* Sharp Instincts site-wide design rules and fixes (UX review, 13 Nov 2026). Loaded on every page after the theme CSS
   (inc/si-site.php), outside LiteSpeed's CSS combine.
   Rules: body text #1d2939, line-height 1.7, left-aligned; headings navy #0f2740; H2 32px (26px mobile);
   blue #008cd7 for links and buttons; one primary and one secondary button (14px 22px, 10px radius, 16px bold, full width
   on mobile); Century Gothic everywhere; tabular figures for numbers. */

:root{--si-blue:#008cd7;--si-blue-dk:#00699f;--si-navy:#0f2740;--si-ink:#1d2939;--si-muted:#5b6474;--si-line:#e3e8ef;--si-soft:#f2f8fd;--si-font:"Century Gothic",CenturyGothicStd,"URW Gothic","Avant Garde",Futura,sans-serif}

/* ---------- Font: Century Gothic everywhere (these used "Nunito Sans" with no fallback and showed a serif font until it loaded) */
.contact-link p a,.cloudBanner .middle .btn,.expert__actn,.high-roi__actn,.apps__tab .tab-pane .btn,.wrdprsbnr__btns .btn,.plancomp__actn .btn,
.smrtrway__nav-tabs .nav-link,.smrtrway__tab-content-actn,.seehow__sldr-actn,.hstngprce__actn,.spdbnr__btns .btn,.digitbnr__actn,
.automatbnr__btns .btn,.bokcmplmt__actn .btn,.revwbnr__btns .btn,.main-content button,.main-content input,.main-content select,.main-content textarea{font-family:var(--si-font)}

/* ---------- Body text in reading blocks: left-aligned, #1d2939, line-height 1.7 */
.main-content .detail-inner p,.main-content .para-text p,.main-content #extra-text p,.main-content .seosub-desc p,
.main-content article.wrapper.post p,.main-content .abt-us-contnt .para-text p,.single-blog-col .blog-content p,.single-blog-col p{text-align:left;line-height:1.7}
.main-content .content-block:not(.theme-primary-bg) .detail-inner:not(.bg-img-text-cus) p,.main-content .para-text p,.main-content #extra-text p,
.main-content .seosub-desc p,.main-content article.wrapper.post p,.single-blog-col p{color:var(--si-ink)}
@media (min-width:768px){
  .main-content .content-block:not(.theme-primary-bg) .detail-inner:not(.bg-img-text-cus) p,.main-content .para-text p,.main-content #extra-text p,
  .main-content .seosub-desc p,.main-content article.wrapper.post p,.single-blog-col p{font-size:17px}
}
/* No justified or right-aligned paragraphs ("Our Approach" alternate rows sat right-aligned) */
.main-content .same-simple-for-p p,.main-content .seosub-desc-right,.main-content .seosub-desc-right p,.main-content p[style*="text-align: justify"],.main-content p[style*="text-align:justify"],.main-content p[style*="text-align: right"],.main-content p[style*="text-align:right"]{text-align:left!important}
/* "Our Approach"-style alternating rows: the mirrored rows had their title and icon pushed right; line them up on the left
   like the other rows, with the step number watermark on the right */
.main-content .seosub-d-flex.seosub-d-flex-right{flex-direction:row-reverse;justify-content:flex-end}
.main-content .seosub-d-flex-right .seosub-icon-right{margin-left:0;margin-right:6px}
.main-content .seosub-bg-text.seosub-bg-text-right{right:0;left:auto}
/* Long intro paragraphs under centred section titles: left-aligned text in a centred 880px block */
.main-content p.same-simple-para,.main-content .detail-inner.bg-img-text-cus p,.main-content .seo-process-breifing .detail-inner > p,.main-content .sundfam__des p,.main-content .waywork__des p,
.main-content .smrtrway__des p,.main-content .bokcmplmt__des,.main-content .bokcmplmt__des p{max-width:880px;margin-left:auto;margin-right:auto;text-align:left}

/* ---------- Headings: navy, H2-level section titles 32px (26px mobile) instead of thin 36-42px grey */
.main-content .same-title-homepage-h2,.main-content .same-title-homepage h2,.main-content .cat-title h2,.main-content .faq-main-title h2,
.main-content .content-block:not(.theme-primary-bg) h3.same-heading-black,.main-content .content-block:not(.theme-primary-bg) h3.same-all-title,
.main-content .seo-process-breifing h3.same-all-title{color:var(--si-navy);font-size:32px;line-height:1.25}
.main-content .accordion_head,.main-content .sundfam__itm-ttl,.main-content .waywork__itm-ttl,.main-content article.wrapper.post h3{color:var(--si-navy)}
/* Light-grey (#616161) headings were hard to read (e.g. GEO page H3/H4 set in Additional CSS) */
.main-content .about-para .para-text h3,.main-content .about-para #extra-text h3,.main-content .content-block:not(.theme-primary-bg) .same-simple-for-p h4,
.main-content .benefit-seo-new h4,.main-content .content-block:not(.theme-primary-bg) .detail-inner h4{color:var(--si-navy)!important}
.main-content .faq-main-title h2{margin-bottom:12px}
@media (max-width:767px){
  .main-content .same-title-homepage-h2,.main-content .same-title-homepage h2,.main-content .cat-title h2,.main-content .faq-main-title h2,
  .main-content .content-block:not(.theme-primary-bg) h3.same-heading-black,.main-content .content-block:not(.theme-primary-bg) h3.same-all-title,
  .main-content .seo-process-breifing h3.same-all-title{font-size:26px}
}

/* ---------- Blog posts: spacing and readable width */
.single-blog-col .blog-content h2,.single-blog-col article h2{color:var(--si-navy);margin:56px 0 18px}
.single-blog-col p{margin:0 0 18px}

/* ---------- Buttons: one primary (blue fill) and one secondary (outline) */
.main-content .btn-primary,.main-content .btn-outline-primary,.main-content .viewmore_home,.wpcf7-form .wpcf7-submit{
  display:inline-block;padding:14px 22px;border:1.5px solid var(--si-blue);border-radius:10px;font-family:var(--si-font);font-size:16px;font-weight:700;line-height:1.2;
  text-align:center;white-space:normal;max-width:100%;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s}
.main-content .btn-primary,.main-content .viewmore_home,.wpcf7-form .wpcf7-submit{background:var(--si-blue);color:#fff}
.main-content .btn-primary:hover,.main-content .btn-primary:focus,.main-content .viewmore_home:hover,.wpcf7-form .wpcf7-submit:hover,.wpcf7-form .wpcf7-submit:focus{background:var(--si-blue-dk);border-color:var(--si-blue-dk);color:#fff}
.main-content .btn-outline-primary{background:transparent;color:var(--si-blue-dk)}
.main-content .btn-outline-primary:hover,.main-content .btn-outline-primary:focus{background:var(--si-soft);color:var(--si-blue-dk)}
@media (max-width:575px){
  .main-content .btn-primary,.main-content .btn-outline-primary,.main-content .viewmore_home,.wpcf7-form .wpcf7-submit{display:block;width:100%}
}

/* ---------- Numbers line up */
.main-content table,.si-table-scroll,.main-content [class*="price"],.main-content [class*="prce"]{font-variant-numeric:tabular-nums}

/* ---------- Mobile hero banner: show the photo under a dark overlay so the white title is readable
   (the theme hid the photo up to 768px and left a white H1 on a near-white background). Applies to every banner. */
@media (max-width:768px){
  .all-page-banner-new.inner-banner{height:auto!important;min-height:230px;position:relative;overflow:hidden;background:var(--si-navy)!important;display:flex;flex-wrap:wrap;align-items:flex-end}
  .all-page-banner-new.inner-banner .header_bg_img.mobile{display:none!important}
  .all-page-banner-new.inner-banner .header_bg_img.desktop:not([src=""]){display:block!important;position:absolute;top:0;left:0;width:100%;height:100%!important;object-fit:cover;opacity:.6;filter:none}
  .all-page-banner-new.inner-banner .outer-container{position:relative;z-index:2;width:100%;padding-top:70px;padding-bottom:20px}
  .all-page-banner-new.inner-banner .all-page-banner-content{position:static!important;transform:none!important}
  .all-page-banner-new.inner-banner h1{font-size:28px;line-height:1.2;padding-bottom:12px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  .all-page-banner-new.inner-banner .breadcrumbs a,.all-page-banner-new.inner-banner .breadcrumbs li,.all-page-banner-new.inner-banner .header-breadcrumb *{color:#fff}
  .all-page-banner-new.inner-banner .free_call_form{position:relative;z-index:2;width:100%}
}

/* ---------- "Short answer" overview box under the hero on older pages (header.php). Self-contained copy of the
   .si-lp .si-answer style so it doesn't depend on Additional CSS. */
.si-overview{padding-top:28px}
.si-overview .si-lp{max-width:880px;margin:0 auto;padding:0}
.si-overview .si-answer{background:var(--si-soft);border-left:5px solid var(--si-blue);border-radius:12px;padding:22px 26px;margin:0}
.si-overview .si-answer p{margin:0;font-size:18px;line-height:1.7;color:var(--si-ink);text-align:left}
.si-overview .si-answer strong{font-weight:700;color:var(--si-navy)}
@media (max-width:767px){.si-overview{padding-top:20px}.si-overview .si-answer{padding:18px}.si-overview .si-answer p{font-size:16px}}

/* ---------- Portfolio grids (Home "Our Work", Our Work, "SEO Projects" and other service pages): the first three projects
   were display:none until a script delayed by LiteSpeed showed them, so the grid loaded blank and Google saw it empty.
   Show the first three without JavaScript; "View More" still reveals the rest. */
.my-posts-four > [class*="_img"]:nth-child(-n+3){display:block}
/* Image blocks (.img-container): the theme hides the <img> and a delayed script (main.js img_fun) copies it into a CSS
   background. Until that has run, show the <img> itself as a cover image; once the background is set this stops matching. */
@media (min-width:768px){
  .img-container:not([style*="background-image"]){position:relative;overflow:hidden}
  .img-container:not([style*="background-image"]) > img{display:block!important;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
}
@media (max-width:767px){
  .img-container:not([style*="background-image"]) > img{display:block!important;width:100%;height:100%;object-fit:cover;object-position:50% 0}
}

/* ---------- Home "Some of our happy clients": until the slider starts (after the first interaction) all logos were squeezed
   into one row 14px tall. Lay them out the way the slider will (5 / 4 / 3 / 2 across). */
.clients-icons-main:not(.slick-initialized){display:flex;flex-wrap:nowrap;align-items:center;overflow:hidden}
.clients-icons-main:not(.slick-initialized) .client-icon-each{flex:0 0 20%;max-width:20%;padding:0 12px;text-align:center}
.clients-icons-main:not(.slick-initialized) .client-icon-each img{display:inline-block;max-width:100%;height:auto}
@media (max-width:997px){.clients-icons-main:not(.slick-initialized) .client-icon-each{flex-basis:25%;max-width:25%}}
@media (max-width:767px){.clients-icons-main:not(.slick-initialized) .client-icon-each{flex-basis:33.333%;max-width:33.333%}}
@media (max-width:574px){.clients-icons-main:not(.slick-initialized) .client-icon-each{flex-basis:50%;max-width:50%}}

/* ---------- Our Work client logos: a grid (6 / 4 / 3 / 2 across) instead of a slider that showed one tiny logo per row */
.clients-icons-slider-work{--si-cols:6;--si-gap:32px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px var(--si-gap);margin:24px 0 8px}
.clients-icons-slider-work .clients-logo{flex:0 0 calc((100% - (var(--si-cols) - 1) * var(--si-gap)) / var(--si-cols));display:flex;align-items:center;justify-content:center;min-height:80px;padding:0;margin:0}
.clients-icons-slider-work .clients-logo img{display:block;width:auto;max-width:100%;max-height:72px;height:auto;object-fit:contain}
@media (max-width:997px){.clients-icons-slider-work{--si-cols:4}}
@media (max-width:767px){.clients-icons-slider-work{--si-cols:3;--si-gap:20px}}
@media (max-width:574px){.clients-icons-slider-work{--si-cols:2}}

/* ---------- Mobile overflow */
/* Tables in content scroll inside their own box (inc/si-site.php wraps them) */
.si-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px}
.si-table-scroll table{margin-bottom:0}
@media (max-width:767px){.si-table-scroll table{min-width:560px}}
/* Process Automation "way we work" row: -30px side margins were wider than the container's 15px padding */
@media (max-width:1289px){
  .waywork__row{margin-left:-15px;margin-right:-15px}
  .waywork__row [class*=col-]{padding-left:15px;padding-right:15px}
}
/* Long button labels wrap instead of pushing past the screen edge */
.main-content .btn{white-space:normal;max-width:100%}

/* ---------- "Are you looking for a Marketing Partner?" form: booking link and phone under it */
.si-form-alt{margin:18px 0 0;text-align:center;font-size:16px;line-height:1.6;color:var(--si-ink)}
.homepage-form-section-new .si-form-alt,.form-section-new .si-form-alt{color:#fff}
.si-form-alt a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.si-form-alt a:hover,.si-form-alt a:focus{color:inherit;opacity:.85}

/* ---------- Contact: booking link under the contact details */
.si-contact-book{margin:8px 0 32px}
.si-contact-book p{margin:0;font-size:17px;color:var(--si-ink)}
.si-contact-book .btn{margin-left:12px;vertical-align:middle}
@media (max-width:575px){.si-contact-book .btn{margin:12px 0 0}}
/* Fallback: if a template prints the content without the_content filters, hide the original box that was moved up */
body:has(.si-overview[data-from="content"]) .main-content .si-answer:not(.si-overview .si-answer){display:none}

/* Process Automation section titles: navy like the other section titles, normal line spacing */
.main-content .sundfam__ttl,.main-content .waywork__ttl,.main-content .smrtrway__ttl{color:var(--si-navy);line-height:1.3!important}
/* Portfolio grid title ("Google Ads Management Projects"): room under it when it wraps on phones */
@media (max-width:767px){.main-content .cat-title h2{margin-bottom:16px;line-height:1.25}}

/* Buttons whose theme rules out-rank the shared button style: "View More" and the partner form's "Get Started" */
.main-content .portfolio-section-new .view-more-outer .viewmore_home,.main-content .homepage-form-section-new .form-col .form-group input#submit-form{border-radius:10px;padding:14px 22px;font-size:16px;font-weight:700;line-height:1.2}
@media (max-width:575px){
  .main-content .portfolio-section-new .view-more-outer .viewmore_home,.main-content .homepage-form-section-new .form-col .form-group input#submit-form{display:block;width:100%;max-width:none}
}
/* Section titles the navy rule didn't reach: SEO ROI page and default-template page content (e.g. AEO) */
.main-content .calcexmpl__ttl,.main-content .calcexmpl__howto-ttl,.main-content .seocalc__ttl,
.page-template-default .main-content h2:not(.si-lp h2):not(.text-white){color:var(--si-navy)}
.page-template-default .main-content h2:not(.si-lp h2),.main-content .calcexmpl__ttl,.main-content .calcexmpl__howto-ttl{font-size:32px;line-height:1.25}
@media (max-width:767px){.page-template-default .main-content h2:not(.si-lp h2),.main-content .calcexmpl__ttl,.main-content .calcexmpl__howto-ttl{font-size:26px}}
.main-content .calcexmpl__howto-des h2,.main-content .calcexmpl__des h2{color:var(--si-navy)}
@media (max-width:575px){.main-content .portfolio-section-new .view-more-outer{display:block;width:100%}}