/* ==========================================================
   SEO Image shared service-page sales components

   Reusable visual systems for service and sales templates.
   Universal site elements remain in style2026.css. Page-specific
   stylesheets should contain only genuinely unique illustrations
   or small visual exceptions that cannot be expressed here.
   ========================================================== */

:root {
  --si-sales-navy: #0d2a4d;
  --si-sales-navy-deep: #081f3b;
  --si-sales-blue: #153e6d;
  --si-sales-light-blue: #c1e1ff;
  --si-sales-orange: #f15a24;
  --si-sales-ink: #12263f;
  --si-sales-muted: #4a5868;
  --si-sales-pale: #f3f6f9;
  --si-sales-line: rgba(18,38,63,.14);
}
/* ==========================================================
   Shared desktop shell widths for service and sales pages

   service-sales.css loads after style2026.css, so these rules
   widen only pages using the shared service component library.
   Mobile containment remains controlled by the existing rules.
   ========================================================== */

@media (min-width: 980px) {
  #showcase.si-2026-hero > .si-2026-hero-inner,
  .si-sales-editorial-intro > .container,
  .si-sales-spotlight > .container,
  .si-sales-local-intro > .container,
  .si-sales-rank-stage > .container,
  .si-sales-search-bridge > .container,
  .si-sales-authority-band > .container,
  .si-2026-white-section > .container,
  .si-2026-gray-section > .container,
  .si-2026-dark-feature > .container,
  .si-2026-connected-process > .container {
    width: var(--si-shell-wide, min(86vw, 1300px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--si-shell-gutter, clamp(18px, 2vw, 30px));
    padding-right: var(--si-shell-gutter, clamp(18px, 2vw, 30px));
    box-sizing: border-box;
  }
}

/* Shared alignment helpers for service-page sales sections. */
.si-sales-center-label {
  text-align: center;
}

.si-sales-actions-center {
  justify-content: center;
}

/* ==========================================================
   Shared decorated editorial introduction

   Usage:
   <section class="si-sales-editorial-intro"
            data-background-word="YOUR NAME">
     <div class="container">
       <article class="si-sales-editorial-intro-copy">...</article>
     </div>
   </section>
   ========================================================== */

.si-sales-editorial-intro {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(102deg, #fff 0%, #fff 64%, #f3f8fc 64%, #edf4fa 100%);
  border-bottom: 1px solid #dfe8f0;
}

.si-sales-editorial-intro::before {
  content: attr(data-background-word);
  position: absolute;
  right: clamp(18px, 5vw, 80px);
  top: 50%;
  transform: translateY(-50%);
  max-width: 48%;
  color: transparent;
  font-size: clamp(68px, 8.7vw, 140px);
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.075em;
  text-align: right;
  white-space: nowrap;
  -webkit-text-stroke: 2px rgba(11,63,115,.10);
  pointer-events: none;
}

.si-sales-editorial-intro::after {
  content: "";
  position: absolute;
  right: 9%;
  top: -86px;
  width: 170px;
  height: 170px;
  border: 24px solid rgba(241,90,36,.10);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.si-sales-editorial-intro-copy {
  position: relative;
  z-index: 1;
  max-width: 820px;
  padding: 76px 0 72px;
}

.si-sales-editorial-intro-copy h2 {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--si-sales-ink);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.si-sales-editorial-intro-copy h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: var(--si-sales-orange);
}

.si-sales-editorial-intro-copy p,
.si-sales-editorial-intro-copy li {
  max-width: 780px;
  margin: 0 0 18px;
  color: #33455b;
  font-size: 19px;
  line-height: 1.72;
}

.si-sales-editorial-intro-copy > *:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   Shared service proof strip

   A restrained alternative to result cards. Use beneath an
   editorial introduction or between narrative sales sections.
   Each item may be a link or a static block.
   ========================================================== */

.si-sales-proof-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -34px 0 72px;
  border-top: 1px solid rgba(18,38,63,.16);
  border-bottom: 1px solid rgba(18,38,63,.16);
}

.si-sales-proof-item {
  display: block;
  min-width: 0;
  padding: 27px 30px 29px;
  color: inherit;
  text-decoration: none !important;
  box-sizing: border-box;
}

.si-sales-proof-item + .si-sales-proof-item {
  border-left: 1px solid rgba(18,38,63,.16);
}

.si-sales-proof-item strong,
.si-sales-proof-item span {
  display: block;
}

.si-sales-proof-item strong {
  margin: 0 0 8px;
  color: var(--si-sales-navy);
  font-size: clamp(25px, 2.25vw, 34px);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -.035em;
}

.si-sales-proof-item span {
  color: #4b5c72;
  font-size: 16px;
  line-height: 1.52;
}

a.si-sales-proof-item {
  transition: background-color .2s ease, transform .2s ease;
}

a.si-sales-proof-item:hover,
a.si-sales-proof-item:focus {
  background: rgba(193,225,255,.23);
  color: inherit;
  text-decoration: none !important;
}

a.si-sales-proof-item:focus-visible {
  outline: 3px solid var(--si-sales-orange);
  outline-offset: -3px;
}

@media (max-width: 900px) {
  .si-sales-proof-strip {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-left: 0;
    margin-right: 0;
  }

  .si-sales-proof-item + .si-sales-proof-item {
    border-left: 0;
    border-top: 1px solid rgba(18,38,63,.16);
  }
}

@media (max-width: 767px) {
  .si-sales-proof-strip {
    margin-top: -20px;
    margin-bottom: 52px;
  }

  .si-sales-proof-item {
    padding: 23px 0 24px;
  }

  a.si-sales-proof-item:hover,
  a.si-sales-proof-item:focus {
    background: transparent;
  }

  .si-sales-proof-item strong {
    font-size: 27px;
  }

  .si-sales-proof-item span {
    font-size: 16px;
  }
}

/* ==========================================================
   Shared dark spotlight with an interchangeable blue card

   The section, grid, copy, stage, and card are universal. The
   card may use the generic card text classes below or one of the
   reusable editor/search preview modules.
   ========================================================== */

.si-sales-spotlight {
  position: relative;
  overflow: hidden;
  padding: 94px 0;
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(40,126,198,.30), transparent 27%),
    radial-gradient(circle at 12% 88%, rgba(241,90,36,.12), transparent 29%),
    linear-gradient(135deg, #06172d 0%, #092945 58%, #0a3b67 100%);
}

.si-sales-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 36%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36%, #000);
  pointer-events: none;
}

.si-sales-spotlight-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
  gap: 76px;
  align-items: center;
}

.si-sales-spotlight-copy {
  max-width: 670px;
}

.si-sales-spotlight-copy .si-2026-section-label {
  color: #ffae8a;
}

.si-sales-spotlight-copy h2 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.03;
  letter-spacing: -.04em;
}

.si-sales-spotlight-copy p {
  margin: 0 0 18px;
  color: rgba(255,255,255,.82);
  font-size: 19px;
  line-height: 1.7;
}

.si-sales-spotlight-copy > *:last-child {
  margin-bottom: 0;
}

.si-sales-spotlight-stage {
  position: relative;
  min-height: 420px;
}

.si-sales-spotlight-stage::before,
.si-sales-spotlight-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.si-sales-spotlight-stage::before {
  right: -24px;
  top: 20px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(193,225,255,.23);
  box-shadow:
    0 0 0 36px rgba(193,225,255,.035),
    0 0 0 72px rgba(193,225,255,.024);
}

.si-sales-spotlight-stage::after {
  right: 58px;
  top: 72px;
  width: 16px;
  height: 16px;
  background: var(--si-sales-orange);
  box-shadow: 0 0 0 11px rgba(241,90,36,.17);
}

.si-sales-spotlight-card {
  position: absolute;
  left: 0;
  top: 48px;
  width: min(100%, 475px);
  padding: 30px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(7,42,73,.82);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.si-sales-spotlight-card-kicker {
  display: block;
  margin-bottom: 18px;
  color: #7cc3f7;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.si-sales-spotlight-card-title {
  display: block;
  margin: 0 0 16px;
  color: #fff;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.03em;
}

.si-sales-spotlight-card-copy {
  display: block;
  margin: 0 0 14px;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.55;
}

.si-sales-spotlight-card-emphasis {
  display: block;
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 4px solid var(--si-sales-orange);
  background: rgba(241,90,36,.09);
  color: #fff;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 750;
}

/* Reusable editor-preview module for the spotlight card. */
.si-sales-editor-preview {
  padding: 32px 30px 34px;
}

.si-sales-editor-preview-headline {
  display: block;
  max-width: 370px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
}

.si-sales-editor-preview-line {
  display: block;
  height: 9px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
}

.si-sales-editor-preview-line:nth-of-type(2) { width: 90%; }
.si-sales-editor-preview-line:nth-of-type(3) { width: 76%; }
.si-sales-editor-preview-line:nth-of-type(4) { width: 84%; }
.si-sales-editor-preview-line:nth-of-type(5) { width: 58%; }

.si-sales-editor-preview-mark {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 5px;
  border-bottom: 4px solid var(--si-sales-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* Reusable search-results module for the spotlight card. */
.si-sales-search-preview {
  padding: 27px 28px 30px;
}

.si-sales-search-preview-bar {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin-bottom: 23px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #1b2b3f;
  font-size: 15px;
  font-weight: 760;
}

.si-sales-search-preview-bar::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 12px;
  border: 2px solid var(--si-sales-orange);
  border-radius: 50%;
  box-shadow: 7px 7px 0 -5px var(--si-sales-orange);
}

.si-sales-search-preview-result {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.si-sales-search-preview-result:last-child {
  border-bottom: 0;
}

.si-sales-search-preview-result span {
  display: block;
  margin-bottom: 5px;
  color: #7bc0f5;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.si-sales-search-preview-result strong {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.si-sales-search-preview-result small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.60);
  font-size: 14px;
  line-height: 1.45;
}

.si-sales-search-preview-result.is-alert {
  margin: 4px -12px;
  padding: 16px 12px;
  border-left: 4px solid var(--si-sales-orange);
  background: rgba(241,90,36,.09);
}


/* ----------------------------------------------------------
   1. Editorial LOCAL stage
   Reusable idea: a bold service word is confined to its own
   visual field instead of sitting behind body copy.
   ---------------------------------------------------------- */

.si-sales-local-intro {
  overflow: hidden;
  background: var(--si-sales-pale);
}

.si-sales-local-intro-grid {
  display: grid;
  grid-template-columns: minmax(380px, .88fr) minmax(0, 1.12fr);
  min-height: 510px;
}

.si-sales-local-intro-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 72px 86px 72px 54px;
  color: var(--si-sales-navy);
  background:
    linear-gradient(rgba(13,42,77,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,42,77,.055) 1px, transparent 1px),
    linear-gradient(145deg, #c1e1ff, #e3f2ff);
  background-size: 46px 46px, 46px 46px, auto;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.si-sales-local-intro-art::before {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -104px;
  width: 310px;
  height: 310px;
  border: 48px solid rgba(241,90,36,.92);
  border-radius: 50%;
  box-sizing: border-box;
}

.si-sales-local-intro-art::after {
  content: "";
  position: absolute;
  right: 94px;
  bottom: -38px;
  width: 178px;
  height: 178px;
  border: 1px solid rgba(13,42,77,.22);
  border-radius: 50%;
}

.si-sales-local-intro-word {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: -8px;
  color: transparent;
  font-size: clamp(88px, 10vw, 150px);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -.085em;
  -webkit-text-stroke: 2px rgba(13,42,77,.72);
}

.si-sales-local-intro-kicker {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 320px;
  margin-top: 34px;
  color: var(--si-sales-navy);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
}

.si-sales-local-intro-copy {
  align-self: center;
  max-width: 720px;
  padding: 72px 54px 72px 58px;
}

.si-sales-local-intro-copy h2 {
  max-width: 650px;
  margin: 0 0 24px;
  color: var(--si-sales-ink);
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.si-sales-local-intro-copy h2::after {
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin-top: 22px;
  background: var(--si-sales-orange);
}

.si-sales-local-intro-copy p {
  max-width: 680px;
  margin: 0 0 18px;
  color: var(--si-sales-muted);
  font-size: 18px;
  line-height: 1.64;
}

.si-sales-local-intro-copy > *:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   2. Ranking proof runway
   Screenshot, orange search spotlight, and a large #1 signal.
   ---------------------------------------------------------- */

.si-sales-rank-stage {
  position: relative;
  overflow: hidden;
  padding: 62px 0;
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(135deg, var(--si-sales-navy-deep), #12365f 62%, #0b294b);
  background-size: 48px 48px, 48px 48px, auto;
}

.si-sales-rank-stage::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 520px;
  height: 520px;
  border: 76px solid rgba(241,90,36,.12);
  border-radius: 50%;
}

.si-sales-rank-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: 72px;
  align-items: center;
}

.si-sales-rank-copy {
  max-width: 570px;
}

.si-sales-rank-copy .si-2026-section-label {
  color: #ffb79e;
}

.si-sales-rank-copy h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(33px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.si-sales-rank-copy p {
  margin: 0 0 17px;
  color: #dce8f5;
  font-size: 17px;
  line-height: 1.62;
}

.si-sales-rank-copy .si-2026-btn {
  margin-top: 8px;
}

.si-sales-rank-visual {
  position: relative;
  min-height: 420px;
}

.si-sales-rank-number {
  position: absolute;
  top: -22px;
  right: -4px;
  color: transparent;
  font-size: clamp(132px, 15vw, 220px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.08em;
  -webkit-text-stroke: 2px rgba(255,255,255,.18);
}

.si-sales-rank-orbit {
  position: absolute;
  right: 10%;
  bottom: 2%;
  width: 270px;
  height: 270px;
  border: 42px solid var(--si-sales-orange);
  border-radius: 50%;
  opacity: .92;
}

.si-sales-rank-frame {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: min(520px, 88%);
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 72px rgba(0,0,0,.34);
  transform: rotate(-1.6deg);
}

.si-sales-rank-frame::before {
  content: "";
  display: block;
  height: 30px;
  background:
    radial-gradient(circle at 18px 15px, #f15a24 0 4px, transparent 5px),
    radial-gradient(circle at 34px 15px, #d2dbe6 0 4px, transparent 5px),
    radial-gradient(circle at 50px 15px, #d2dbe6 0 4px, transparent 5px),
    #edf2f7;
  border-bottom: 1px solid #dce3eb;
}

.si-sales-rank-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   3. Google Maps / local-pack illustration
   This is an illustrative sales visual, not another content card.
   ---------------------------------------------------------- */

.si-local-gbp-showcase {
  overflow: hidden;
  background: #fff;
}

.si-local-gbp-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: 72px;
  align-items: center;
}

.si-local-gbp-copy {
  max-width: 600px;
}

.si-local-gbp-copy h2 {
  margin: 0 0 20px;
  color: var(--si-sales-ink);
  font-size: clamp(33px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.si-local-gbp-copy p {
  margin: 0 0 17px;
  color: var(--si-sales-muted);
  font-size: 18px;
  line-height: 1.64;
}

.si-local-pack-visual {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  background:
    linear-gradient(28deg, transparent 43%, rgba(16,40,76,.08) 44% 45%, transparent 46%),
    linear-gradient(-31deg, transparent 48%, rgba(16,40,76,.08) 49% 50%, transparent 51%),
    linear-gradient(90deg, rgba(16,40,76,.045) 1px, transparent 1px),
    linear-gradient(rgba(16,40,76,.045) 1px, transparent 1px),
    #eef3f7;
  background-size: 210px 210px, 250px 250px, 46px 46px, 46px 46px, auto;
}

.si-local-pack-visual::before {
  content: "GOOGLE MAPS";
  position: absolute;
  left: 34px;
  top: 28px;
  color: rgba(16,40,76,.16);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
}

.si-local-pack-visual::after {
  content: "";
  position: absolute;
  right: -82px;
  top: -60px;
  width: 250px;
  height: 250px;
  border: 54px solid rgba(241,90,36,.13);
  border-radius: 50%;
}

.si-local-pack-pin {
  position: absolute;
  left: 21%;
  top: 26%;
  width: 82px;
  height: 82px;
  border-radius: 50% 50% 50% 0;
  background: var(--si-sales-orange);
  box-shadow: 0 24px 40px rgba(241,90,36,.25);
  transform: rotate(-45deg);
}

.si-local-pack-pin::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
}

.si-local-pack-pin::after {
  content: "";
  position: absolute;
  left: -48px;
  top: 126px;
  width: 178px;
  height: 26px;
  border-radius: 50%;
  background: rgba(13,42,77,.12);
  filter: blur(4px);
  transform: rotate(45deg);
}

.si-local-pack-results {
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: min(360px, 68%);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 66px rgba(16,40,76,.19);
}

.si-local-pack-results-header {
  padding: 19px 22px;
  color: #fff;
  background: var(--si-sales-navy);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.si-local-pack-result {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: center;
  padding: 17px 22px;
  border-bottom: 1px solid #e2e8ef;
}

.si-local-pack-result:last-child {
  border-bottom: 0;
}

.si-local-pack-result strong {
  color: #a8b4c1;
  font-size: 24px;
  line-height: 1;
}

.si-local-pack-result span {
  display: block;
  color: var(--si-sales-ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}

.si-local-pack-result small {
  display: block;
  margin-top: 3px;
  color: #738091;
  font-size: 12px;
  line-height: 1.3;
}

.si-local-pack-result.is-active {
  position: relative;
  background: #fff7f3;
}

.si-local-pack-result.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--si-sales-orange);
}

.si-local-pack-result.is-active strong {
  color: var(--si-sales-orange);
}

/* ----------------------------------------------------------
   4. Result band
   ---------------------------------------------------------- */

.si-sales-metric-band {
  overflow: hidden;
  color: #fff;
  background: var(--si-sales-navy);
}

.si-sales-metric-grid {
  display: grid;
  grid-template-columns: minmax(320px, .68fr) minmax(0, 1.32fr);
  min-height: 286px;
}

.si-sales-metric-stat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 46px 78px 46px 28px;
  background: var(--si-sales-orange);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}

.si-sales-metric-stat strong {
  color: #fff;
  font-size: clamp(64px, 6.6vw, 94px);
  line-height: .86;
  font-weight: 900;
  letter-spacing: -.065em;
}

.si-sales-metric-stat span {
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.si-sales-metric-copy {
  align-self: center;
  max-width: 720px;
  padding: 44px 54px 44px 34px;
}

.si-sales-metric-copy .si-2026-section-label {
  color: #ffb79e;
}

.si-sales-metric-copy h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(31px, 3vw, 39px);
  line-height: 1.12;
  letter-spacing: -.028em;
}

.si-sales-metric-copy p {
  margin: 0 0 20px;
  color: #dce8f5;
  font-size: 17px;
  line-height: 1.6;
}

/* Small Local SEO-only additions to universal components. */

.si-local-location-aside {
  align-self: center;
  padding: 10px 0 10px 32px;
  border-left: 3px solid var(--si-sales-orange);
}

.si-local-location-aside strong {
  display: block;
  margin-bottom: 12px;
  color: var(--si-sales-ink);
  font-size: 24px;
  line-height: 1.2;
}

.si-local-location-aside p {
  margin: 0;
  color: #52606d;
  font-size: 17px;
  line-height: 1.62;
}

.si-local-seo-dark-feature .si-2026-dark-feature-shell {
  position: relative;
  z-index: 1;
}

.si-local-seo-experience-year {
  display: block;
  margin-bottom: 18px;
  color: var(--si-sales-orange);
  font-size: clamp(60px, 6.5vw, 86px);
  line-height: .84;
  font-weight: 900;
  letter-spacing: -.06em;
}


/* ==========================================================
   Shared editorial-intro and spotlight containment
   ========================================================== */

@media (max-width: 979px) {
  .si-sales-spotlight-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .si-sales-spotlight-grid > * {
    min-width: 0;
  }

  .si-sales-spotlight-stage {
    width: 100%;
    max-width: 560px;
    min-height: 400px;
  }
}

@media (max-width: 767px) {
  .si-sales-editorial-intro > .container,
  .si-sales-spotlight > .container {
    width: auto !important;
    max-width: none !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .si-sales-editorial-intro-copy,
  .si-sales-spotlight-grid,
  .si-sales-spotlight-copy,
  .si-sales-spotlight-stage,
  .si-sales-spotlight-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .si-sales-editorial-intro {
    background: linear-gradient(180deg, #fff 0%, #fff 77%, #f2f7fb 100%);
  }

  .si-sales-editorial-intro::before {
    right: -18px;
    top: auto;
    bottom: 18px;
    max-width: none;
    transform: none;
    font-size: clamp(50px, 16vw, 66px);
  }

  .si-sales-editorial-intro::after {
    right: -44px;
    top: -50px;
    width: 130px;
    height: 130px;
    border-width: 17px;
  }

  .si-sales-editorial-intro-copy {
    padding: 58px 0 62px;
  }

  .si-sales-editorial-intro-copy h2,
  .si-sales-spotlight-copy h2 {
    font-size: 34px;
    line-height: 1.1;
    overflow-wrap: break-word;
  }

  .si-sales-editorial-intro-copy p,
  .si-sales-editorial-intro-copy li,
  .si-sales-spotlight-copy p {
    font-size: 17px;
    line-height: 1.66;
    overflow-wrap: break-word;
  }

  .si-sales-spotlight {
    padding: 64px 0;
  }

  .si-sales-spotlight-stage {
    min-height: 360px;
  }

  .si-sales-spotlight-stage::before {
    right: -70px;
    width: 290px;
    height: 290px;
  }

  .si-sales-spotlight-card {
    position: relative;
    left: auto;
    top: 18px;
    padding: 24px 22px 26px;
  }

  .si-sales-editor-preview,
  .si-sales-search-preview {
    padding: 24px 22px 26px;
  }

  .si-sales-editor-preview-headline,
  .si-sales-spotlight-card-title {
    font-size: 27px;
  }

  .si-sales-search-preview-bar {
    font-size: 13px;
  }
}

@media (max-width: 1100px) {
  .si-sales-local-intro-grid,
  .si-sales-rank-grid,
  .si-local-gbp-grid,
  .si-sales-metric-grid {
    grid-template-columns: 1fr;
  }

  .si-sales-local-intro-art {
    min-height: 280px;
    padding: 54px 72px;
    clip-path: none;
  }

  .si-sales-local-intro-word {
    font-size: 118px;
  }

  .si-sales-local-intro-copy {
    max-width: none;
    padding: 56px 54px 64px;
  }

  .si-sales-rank-grid,
  .si-local-gbp-grid {
    gap: 40px;
  }

  .si-sales-rank-visual {
    min-height: 390px;
  }

  .si-sales-rank-frame {
    left: 4%;
    width: min(620px, 78%);
  }

  .si-local-pack-visual {
    min-height: 430px;
  }

  .si-sales-metric-stat {
    min-height: 210px;
    padding: 40px 32px;
    clip-path: none;
  }

  .si-sales-metric-copy {
    max-width: none;
    padding: 42px 34px 50px;
  }
}

@media (max-width: 767px) {
  .si-sales-local-intro-art {
    min-height: 210px;
    padding: 40px 24px;
  }

  .si-sales-local-intro-art::before {
    right: -40px;
    bottom: -112px;
    width: 250px;
    height: 250px;
    border-width: 40px;
  }

  .si-sales-local-intro-art::after {
    display: none;
  }

  .si-sales-local-intro-word {
    font-size: 82px;
  }

  .si-sales-local-intro-kicker {
    max-width: 260px;
    margin-top: 22px;
    font-size: 18px;
  }

  .si-sales-local-intro-copy {
    padding: 44px 20px 50px;
  }

  .si-sales-local-intro-copy h2,
  .si-sales-rank-copy h2,
  .si-local-gbp-copy h2,
  .si-sales-metric-copy h2 {
    font-size: 32px;
  }

  .si-sales-local-intro-copy p,
  .si-local-gbp-copy p {
    font-size: 17px;
  }

  .si-sales-rank-stage {
    padding: 50px 18px;
  }

  .si-sales-rank-stage > .container {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .si-sales-rank-visual {
    min-height: 300px;
  }

  .si-sales-rank-number {
    top: -4px;
    right: 0;
    font-size: 112px;
  }

  .si-sales-rank-orbit {
    right: -22px;
    bottom: 4px;
    width: 190px;
    height: 190px;
    border-width: 30px;
  }

  .si-sales-rank-frame {
    left: 0;
    bottom: 14px;
    width: 86%;
    transform: rotate(-1deg);
  }

  .si-local-pack-visual {
    min-height: 390px;
  }

  .si-local-pack-pin {
    left: 15%;
    top: 22%;
    width: 66px;
    height: 66px;
  }

  .si-local-pack-pin::before {
    left: 19px;
    top: 19px;
    width: 28px;
    height: 28px;
  }

  .si-local-pack-results {
    right: 18px;
    bottom: 18px;
    width: 74%;
  }

  .si-local-pack-result {
    grid-template-columns: 42px 1fr;
    padding: 14px 16px;
  }

  .si-sales-metric-stat strong {
    font-size: 70px;
  }

  .si-sales-metric-copy {
    padding-left: 22px;
    padding-right: 22px;
  }

  .si-local-location-aside {
    padding-left: 22px;
  }

}
/* Local SEO: center final CTA buttons and narrow the Why SEO Image section */

.si-local-seo-service-page .si-2026-contact-band .si-2026-action-group {
  justify-content: center;
  align-items: center;
}

.si-local-seo-service-page .si-local-seo-dark-feature > .container {
  max-width: 1060px;
}

.si-local-seo-service-page .si-local-seo-dark-feature .si-2026-dark-feature-shell {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 44px;
}

.si-local-seo-service-page .si-local-seo-dark-feature .si-2026-dark-feature-copy {
  max-width: 620px;
}

@media (max-width: 991px) {
  .si-local-seo-service-page .si-local-seo-dark-feature > .container {
    width: auto !important;
    max-width: none !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .si-local-seo-service-page .si-local-seo-dark-feature .si-2026-dark-feature-shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .si-local-seo-service-page .si-local-seo-dark-feature .si-2026-dark-feature-copy {
    max-width: 680px;
  }
}

@media (max-width: 767px) {
  .si-local-seo-service-page .si-2026-contact-band .si-2026-action-group {
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}



/* ==========================================================
   Shared search-growth bridge

   A light editorial alternative to a boxed proof panel. Use
   for SEO, AI search, authority, or other service transitions
   where the section needs distinction without another card.
   ========================================================== */

.si-sales-search-bridge {
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  background:
    radial-gradient(circle at 92% 16%, rgba(241,90,36,.10), transparent 24%),
    linear-gradient(118deg, #dceeff 0%, #eef7ff 54%, #f8fbfe 100%);
  border-top: 1px solid rgba(18,38,63,.10);
  border-bottom: 1px solid rgba(18,38,63,.12);
}

.si-sales-search-bridge::before {
  content: "SEARCH";
  position: absolute;
  right: -18px;
  top: 32px;
  color: transparent;
  font-size: clamp(86px, 12vw, 178px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.075em;
  -webkit-text-stroke: 2px rgba(13,42,77,.08);
  pointer-events: none;
}

.si-sales-search-bridge > .container {
  position: relative;
  z-index: 1;
}

.si-sales-search-bridge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: 78px;
  align-items: center;
}

.si-sales-search-bridge-copy {
  max-width: 720px;
}

.si-sales-search-bridge-copy h2 {
  margin: 0 0 24px;
  color: var(--si-sales-ink);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.si-sales-search-bridge-copy p {
  margin: 0 0 18px;
  color: #34516d;
  font-size: 19px;
  line-height: 1.7;
}

.si-sales-search-bridge-copy .si-2026-feature-link-wrap {
  margin-top: 30px;
}

.si-sales-search-bridge-statement {
  position: relative;
  max-width: 470px;
  padding: 18px 0 18px 36px;
  border-left: 5px solid var(--si-sales-orange);
}

.si-sales-search-bridge-kicker {
  display: block;
  margin-bottom: 18px;
  color: #31577f;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.si-sales-search-bridge-statement strong {
  display: block;
  margin-bottom: 22px;
  color: var(--si-sales-navy);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  font-weight: 820;
  letter-spacing: -.035em;
}

.si-sales-search-bridge-statement p {
  margin: 0;
  color: #45617b;
  font-size: 18px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .si-sales-search-bridge-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .si-sales-search-bridge-statement {
    max-width: 680px;
  }
}

@media (max-width: 767px) {
  .si-sales-search-bridge {
    padding: 56px 18px;
    box-sizing: border-box;
  }

  .si-sales-search-bridge > .container {
    width: 100%;
    max-width: 520px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .si-sales-search-bridge::before {
    right: -10px;
    top: 22px;
    font-size: 82px;
  }

  .si-sales-search-bridge-grid {
    gap: 38px;
  }

  .si-sales-search-bridge-copy h2 {
    font-size: 34px;
  }

  .si-sales-search-bridge-copy p,
  .si-sales-search-bridge-statement p {
    font-size: 17px;
    line-height: 1.62;
  }

  .si-sales-search-bridge-statement {
    padding-left: 24px;
  }

  .si-sales-search-bridge-statement strong {
    font-size: 30px;
  }
}

/* ==========================================================
   Shared authority band

   Dark, unboxed credibility section used when a service page
   needs a strong contrast from adjacent editorial splits.
   ========================================================== */

.si-sales-authority-band {
  position: relative;
  overflow: hidden;
  padding: 94px 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(31,128,199,.34), transparent 30%),
    radial-gradient(circle at 8% 90%, rgba(241,90,36,.12), transparent 25%),
    linear-gradient(135deg, #081a2f 0%, #0c2745 54%, #12395f 100%);
  color: #fff;
}

.si-sales-authority-band::before {
  content: "EXPERIENCE";
  position: absolute;
  right: -26px;
  bottom: 8px;
  color: transparent;
  font-size: clamp(76px, 11vw, 166px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.07em;
  -webkit-text-stroke: 2px rgba(255,255,255,.07);
  pointer-events: none;
}

.si-sales-authority-band > .container {
  position: relative;
  z-index: 1;
}

.si-sales-authority-grid {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr);
  gap: 84px;
  align-items: center;
}

.si-sales-authority-copy {
  max-width: 690px;
}

.si-sales-authority-copy .si-2026-section-label {
  color: #8dcbff;
}

.si-sales-authority-copy h2 {
  margin: 0 0 26px;
  color: #fff;
  font-size: clamp(40px, 4.6vw, 61px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.si-sales-authority-copy > p {
  margin: 0 0 19px;
  color: rgba(255,255,255,.82);
  font-size: 18px;
  line-height: 1.72;
}

.si-sales-authority-copy .si-2026-action-group {
  margin-top: 32px;
}

.si-sales-authority-ledger {
  border-top: 1px solid rgba(255,255,255,.24);
}

.si-sales-authority-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 28px;
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(255,255,255,.19);
}

.si-sales-authority-row > span {
  padding-top: 4px;
  color: #ff9b68;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.si-sales-authority-row strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -.02em;
}

.si-sales-authority-row p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .si-sales-authority-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .si-sales-authority-copy {
    max-width: 760px;
  }
}

@media (max-width: 767px) {
  .si-sales-authority-band {
    padding: 60px 18px;
    box-sizing: border-box;
  }

  .si-sales-authority-band > .container {
    width: 100%;
    max-width: 520px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .si-sales-authority-band::before {
    right: -10px;
    bottom: 16px;
    font-size: 72px;
  }

  .si-sales-authority-grid {
    gap: 40px;
  }

  .si-sales-authority-copy h2 {
    font-size: 35px;
  }

  .si-sales-authority-copy > p {
    font-size: 17px;
    line-height: 1.64;
  }

  .si-sales-authority-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 23px 0 25px;
  }

  .si-sales-authority-row strong {
    font-size: 20px;
  }
}