/* ============================================================
   SEO SERVICES PAGE  —  services/seo-chiniot/
   Sirf is page ke naye sections (sp-*):
     hero scanner · what-is-SEO (ads on/off) · who-needs (search box)
     process (7 panels) · timelines (curve)
   How We Work / services cards / FAQ / Final CTA shared hain (hero.css).
   Breadcrumb aur section wrapper (pg-*) inner.css se.
   ============================================================ */
 
/* --- reveal (hidden only when JS is running) --- */
.sp-js .sp-rv { opacity: 0; }
 
.sp-js .sp-rv.is-in {
  opacity: 1;
  animation: spUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) backwards;
}
 
@keyframes spUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
 
@keyframes spBlink { 50% { opacity: 0; } }
 
@keyframes spFlow {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}
 
/* ============================================================
   ████  1) HERO — website audit scanner  ████
   ============================================================ */
.sp-hero {
  position: relative;
  padding: 36px 0 74px 0;
  background: #FFFFFF;
  overflow: hidden;
}
 
.sp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 40%, rgba(0, 168, 150, 0.12), transparent 46%),
    radial-gradient(circle at 4% 96%, rgba(94, 234, 212, 0.16), transparent 40%);
  pointer-events: none;
}
 
.sp-crumb { justify-content: center; margin-bottom: 24px; }
 
.sp-h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  max-width: 600px;
  line-height: 1.13;
}
 
.sp-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
 
.sp-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}
 
.sp-pt-ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
 
.sp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
}
 
.sp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: none;
}
 
.sp-link svg { transition: transform 0.25s ease; }
.sp-link:hover { color: var(--teal-darker); }
.sp-link:hover svg { transform: translateY(3px); }
 
@media (min-width: 992px) {
  .sp-crumb   { justify-content: flex-start; }
  .sp-points  { align-items: flex-start; }
  .sp-actions { justify-content: flex-start; }
}
 
/* browser window being scanned */
.sp-scan {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 0;
}
 
.sp-scan-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 440px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 150, 0.22), rgba(94, 234, 212, 0.08) 50%, transparent 72%);
  animation: spGlow 5s ease-in-out infinite;
  pointer-events: none;
}
 
@keyframes spGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}
 
.sp-win {
  --bh: 330px;
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 60px -28px rgba(0, 90, 88, 0.5);
  transform: rotate(-1.5deg);
}
 
.sp-win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  background: var(--mint-50);
  border-bottom: 1px solid var(--mint-100);
}
 
.sp-win-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint-200);
}
 
.sp-win-bar i:nth-child(2) { background: var(--mint-400); }
.sp-win-bar i:nth-child(3) { background: var(--teal-main); }
 
.sp-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  margin-left: 12px;
  padding: 0 12px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--mint-100);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-body);
}
 
.sp-url svg { color: var(--teal-main); }
 
.sp-win-body {
  position: relative;
  height: var(--bh);
  padding: 20px;
  overflow: hidden;
  background: #FFFFFF;
}
 
/* wireframe page */
.sp-w-hero {
  height: 104px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #EAF6F3, #DDEFEA);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
 
.sp-w-line { display: block; height: 9px; border-radius: 6px; background: #D6E6E2; }
.sp-w-l1   { width: 64%; height: 12px; background: #C5DDD7; }
.sp-w-l2   { width: 42%; }
.sp-w-short { width: 55%; }
.sp-w-btn  { width: 74px; height: 22px; margin-top: 4px; border-radius: 999px; background: var(--mint-200); }
 
.sp-w-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
 
.sp-w-card { height: 74px; border-radius: 12px; background: #EDF5F3; border: 1px solid #E1EEEA; }
 
.sp-w-text { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
 
/* the scanning beam */
.sp-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 168, 150, 0), rgba(0, 168, 150, 0.18) 65%, rgba(0, 168, 150, 0.5));
  border-bottom: 2px solid var(--teal-main);
  opacity: 0;
  animation: spBeam 9s linear infinite;
  pointer-events: none;
}
 
@keyframes spBeam {
  0%, 4%  { opacity: 0; transform: translateY(-64px); }
  5%      { opacity: 1; transform: translateY(-64px); }
  60%     { opacity: 1; transform: translateY(var(--bh)); }
  64%, 100% { opacity: 0; transform: translateY(var(--bh)); }
}
 
/* issue markers: amber "!" -> teal check when the beam passes */
.sp-mk {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  box-shadow: 0 12px 22px -10px rgba(0, 90, 88, 0.4);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-dark);
  white-space: nowrap;
  opacity: 0;
}
 
.sp-mk1 { top: 40px;  right: 14px; }
.sp-mk2 { top: 124px; left: 14px; }
.sp-mk3 { top: 206px; right: 14px; }
.sp-mk4 { top: 276px; left: 14px; }
 
.sp-mk-ic { position: relative; display: grid; width: 24px; height: 24px; }
 
.sp-bad,
.sp-ok {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.sp-bad { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.sp-ok  { background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #FFFFFF; opacity: 0; }
 
.sp-mk1 { animation: spMk1 9s ease infinite; }
.sp-mk1 .sp-bad { animation: spBad1 9s linear infinite; }
.sp-mk1 .sp-ok  { animation: spOk1 9s ease infinite; }
.sp-mk2 { animation: spMk2 9s ease infinite; }
.sp-mk2 .sp-bad { animation: spBad2 9s linear infinite; }
.sp-mk2 .sp-ok  { animation: spOk2 9s ease infinite; }
.sp-mk3 { animation: spMk3 9s ease infinite; }
.sp-mk3 .sp-bad { animation: spBad3 9s linear infinite; }
.sp-mk3 .sp-ok  { animation: spOk3 9s ease infinite; }
.sp-mk4 { animation: spMk4 9s ease infinite; }
.sp-mk4 .sp-bad { animation: spBad4 9s linear infinite; }
.sp-mk4 .sp-ok  { animation: spOk4 9s ease infinite; }
 
@keyframes spMk1 {
  0%, 6.5%  { opacity: 0; transform: translateY(10px) scale(0.9); }
  9.5%, 90% { opacity: 1; transform: none; }
  96%, 100%     { opacity: 0; transform: translateY(-4px) scale(0.96); }
}
@keyframes spBad1 {
  0%, 12.1% { opacity: 1; }
  12.5%, 100%   { opacity: 0; }
}
@keyframes spOk1 {
  0%, 12.1% { opacity: 0; transform: scale(0.4); }
  14.3%      { opacity: 1; transform: scale(1.18); }
  16.0%, 100% { opacity: 1; transform: scale(1); }
}
 
@keyframes spMk2 {
  0%, 18.3%  { opacity: 0; transform: translateY(10px) scale(0.9); }
  21.3%, 90% { opacity: 1; transform: none; }
  96%, 100%     { opacity: 0; transform: translateY(-4px) scale(0.96); }
}
@keyframes spBad2 {
  0%, 23.9% { opacity: 1; }
  24.3%, 100%   { opacity: 0; }
}
@keyframes spOk2 {
  0%, 23.9% { opacity: 0; transform: scale(0.4); }
  26.1%      { opacity: 1; transform: scale(1.18); }
  27.8%, 100% { opacity: 1; transform: scale(1); }
}
 
@keyframes spMk3 {
  0%, 29.7%  { opacity: 0; transform: translateY(10px) scale(0.9); }
  32.7%, 90% { opacity: 1; transform: none; }
  96%, 100%     { opacity: 0; transform: translateY(-4px) scale(0.96); }
}
@keyframes spBad3 {
  0%, 35.3% { opacity: 1; }
  35.7%, 100%   { opacity: 0; }
}
@keyframes spOk3 {
  0%, 35.3% { opacity: 0; transform: scale(0.4); }
  37.5%      { opacity: 1; transform: scale(1.18); }
  39.2%, 100% { opacity: 1; transform: scale(1); }
}
 
@keyframes spMk4 {
  0%, 39.5%  { opacity: 0; transform: translateY(10px) scale(0.9); }
  42.5%, 90% { opacity: 1; transform: none; }
  96%, 100%     { opacity: 0; transform: translateY(-4px) scale(0.96); }
}
@keyframes spBad4 {
  0%, 45.1% { opacity: 1; }
  45.5%, 100%   { opacity: 0; }
}
@keyframes spOk4 {
  0%, 45.1% { opacity: 0; transform: scale(0.4); }
  47.3%      { opacity: 1; transform: scale(1.18); }
  49.0%, 100% { opacity: 1; transform: scale(1); }
}
 
/* ============================================================
   ████  2) WHAT IS SEO — ad budget switch  ████
   ============================================================ */
.sp-rent {
  background: #FFFFFF;
  border: 1.5px solid var(--mint-200);
  border-radius: 26px;
  padding: 26px 26px 22px 26px;
  box-shadow: 0 26px 48px -26px rgba(0, 122, 120, 0.4);
}
 
.sp-rent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-bottom: 24px;
}
 
.sp-rent-title {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
 
.sp-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 14px;
  border: 1.5px solid var(--mint-200);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
 
.sp-switch:hover { border-color: var(--teal-main); }
 
.sp-switch-lbl { font-size: 0.74rem; font-weight: 700; color: var(--text-body); }
 
.sp-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--mint-200);
  transition: background 0.3s ease;
}
 
.sp-switch-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 60, 58, 0.3);
  transition: transform 0.35s cubic-bezier(0.22, 1.4, 0.36, 1);
}
 
.sp-switch.is-on .sp-switch-track { background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); }
.sp-switch.is-on .sp-switch-track i { transform: translateX(18px); }
 
.sp-switch-state { min-width: 28px; font-size: 0.72rem; font-weight: 800; color: var(--teal-deep); text-align: left; }
 
.sp-lane { margin-bottom: 22px; }
 
.sp-lane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
 
.sp-lane-ic {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.sp-lane-head b { font-size: 0.95rem; font-weight: 800; color: var(--text-dark); }
 
.sp-lane-head em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-muted);
  text-align: right;
}
 
.sp-bar {
  height: 22px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--mint-100);
  overflow: hidden;
}
 
.sp-bar i { display: block; height: 100%; border-radius: 999px; background-size: 200% 100%; }
 
.sp-bar-ads {
  width: 100%;
  background-image: linear-gradient(90deg, var(--mint-400), var(--teal-main), var(--mint-400));
  animation: spFlow 3s linear infinite;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.sp-rent.is-off .sp-bar-ads { width: 0; }
 
.sp-bar-seo {
  width: 18%;
  background-image: linear-gradient(90deg, var(--teal-deep), var(--teal-main), var(--teal-deep));
  animation: spFlow 3s linear infinite;
}
 
.sp-rent.is-in .sp-bar-seo { animation: spFlow 3s linear infinite, spGrow 7s ease-out forwards; }
 
html:not(.sp-js) .sp-bar-seo { width: 80%; }
 
@keyframes spGrow {
  from { width: 18%; }
  to   { width: 94%; }
}
 
.sp-rent-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}
 
.sp-rent-foot svg { color: var(--teal-main); flex-shrink: 0; }
 
/* ============================================================
   ████  3) WHO NEEDS SEO — search box with suggestions  ████
   ============================================================ */
.sp-sbox {
  max-width: 520px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1.5px solid var(--mint-200);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 26px 48px -26px rgba(0, 122, 120, 0.4);
}
 
.sp-sbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid var(--teal-main);
  color: var(--teal-deep);
  box-shadow: 0 0 0 6px rgba(0, 168, 150, 0.12);
}
 
.sp-sbar svg { flex-shrink: 0; }
 
.sp-query {
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.sp-caret {
  flex-shrink: 0;
  width: 2px;
  height: 20px;
  background: var(--teal-main);
  animation: spBlink 0.8s step-end infinite;
}
 
.sp-sug {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.sp-sug-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
 
.sp-sug-ic {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--mint-50);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
 
.sp-sug-q { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--text-body); }
 
.sp-sug-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--mint-100);
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--teal-deep);
  white-space: nowrap;
  transition: all 0.3s ease;
}
 
.sp-sug-item:hover { background: var(--bg-subtle); }
 
.sp-sug-item.is-on {
  background: var(--mint-50);
  border-color: var(--mint-200);
  transform: translateX(6px);
}
 
.sp-sug-item.is-on .sp-sug-ic  { background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #FFFFFF; }
.sp-sug-item.is-on .sp-sug-q   { color: var(--text-dark); }
.sp-sug-item.is-on .sp-sug-tag { background: var(--teal-deep); border-color: var(--teal-deep); color: #FFFFFF; }
 
.sp-sbox-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
}
 
/* ============================================================
   ████  4) PROCESS — 7 expanding panels  ████
   Pehle (JS ke baghair) saare steps seedhe list mein nazar aate hain.
   ============================================================ */
.sp-acc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
 
.sp-panel {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--mint-100);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
}
 
.sp-p-num { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--teal-main); transition: color 0.4s ease; }
 
.sp-p-ic {
  width: 46px;
  height: 46px;
  margin: 10px 0 12px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, transform 0.4s ease;
}
 
.sp-p-vt { display: none; }
 
.sp-p-body h3 { margin: 0 0 8px 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-dark); }
.sp-p-body p  { margin: 0; font-size: 0.86rem; line-height: 1.7; color: var(--text-body); }
.sp-p-body a  { color: var(--teal-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
 
/* --- JS on: tablet/desktop = horizontal accordion --- */
@media (min-width: 768px) {
  .sp-js .sp-acc { flex-direction: row; height: 410px; }
 
  .sp-js .sp-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 0;
    overflow: hidden;
    cursor: pointer;
    transition: flex-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }
 
  .sp-js .sp-panel:hover { border-color: var(--mint-200); background: var(--bg-subtle); }
 
  .sp-js .sp-panel.is-on {
    flex-grow: 6;
    align-items: flex-start;
    padding: 24px 30px;
    background: linear-gradient(150deg, var(--teal-main), var(--teal-deep));
    border-color: var(--teal-deep);
    box-shadow: 0 28px 48px -24px rgba(0, 122, 120, 0.7);
  }
 
  .sp-js .sp-p-vt {
    display: block;
    margin-top: auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--text-dark);
  }
 
  .sp-js .sp-panel.is-on .sp-p-vt { display: none; }
 
  .sp-js .sp-panel.is-on .sp-p-num { color: var(--mint-100); }
  .sp-js .sp-panel.is-on .sp-p-ic  { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); }
 
  .sp-js .sp-p-body {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: clamp(230px, 34vw, 420px);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
 
  .sp-js .sp-panel.is-on .sp-p-body {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
  }
 
  .sp-js .sp-panel.is-on .sp-p-body h3 { color: #FFFFFF; font-size: 1.45rem; }
  .sp-js .sp-panel.is-on .sp-p-body p  { color: rgba(255, 255, 255, 0.93); font-size: 0.9rem; }
  .sp-js .sp-panel.is-on .sp-p-body a  { color: #FFFFFF; }
}
 
/* --- JS on: mobile = tap-to-open list --- */
@media (max-width: 767px) {
  .sp-js .sp-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background 0.35s ease, border-color 0.35s ease;
  }
 
  .sp-js .sp-p-ic  { order: 1; margin: 0; width: 42px; height: 42px; }
  .sp-js .sp-p-num { order: 2; }
  .sp-js .sp-p-vt  { display: block; order: 3; flex: 1; font-size: 0.95rem; font-weight: 800; color: var(--text-dark); }
  .sp-js .sp-p-body { order: 4; display: none; flex-basis: 100%; padding-top: 8px; }
 
  .sp-js .sp-panel.is-on { background: linear-gradient(150deg, var(--teal-main), var(--teal-deep)); border-color: var(--teal-deep); }
  .sp-js .sp-panel.is-on .sp-p-vt { display: none; }
  .sp-js .sp-panel.is-on .sp-p-body { display: block; animation: spUp 0.45s ease; }
  .sp-js .sp-panel.is-on .sp-p-num { color: var(--mint-100); }
  .sp-js .sp-panel.is-on .sp-p-ic  { background: rgba(255, 255, 255, 0.2); }
  .sp-js .sp-panel.is-on .sp-p-body h3 { color: #FFFFFF; }
  .sp-js .sp-panel.is-on .sp-p-body p  { color: rgba(255, 255, 255, 0.93); }
  .sp-js .sp-panel.is-on .sp-p-body a  { color: #FFFFFF; }
}
 
/* ============================================================
   ████  5) REALISTIC TIMELINES — rising curve  ████
   ============================================================ */
.sp-honest {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--teal-darker);
}
 
.sp-honest-ic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.sp-chart {
  background: #FFFFFF;
  border: 1.5px solid var(--mint-200);
  border-radius: 26px;
  padding: 18px 18px 6px 18px;
  box-shadow: 0 26px 48px -26px rgba(0, 122, 120, 0.4);
}
 
.sp-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
 
.sp-grid line { stroke: var(--mint-100); stroke-width: 1; stroke-dasharray: 4 6; }
.sp-axis      { stroke: var(--mint-200); stroke-width: 2; stroke-linecap: round; }
 
.sp-ax-l {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-faint);
}
 
.sp-band   { fill: rgba(0, 168, 150, 0.09); stroke: var(--mint-200); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sp-band-t { font-size: 13px; font-weight: 800; fill: var(--teal-deep); }
.sp-band-s { font-size: 10.5px; font-weight: 600; fill: var(--text-muted); }
 
.sp-area { fill: url(#spAreaG); opacity: 0; transition: opacity 1.2s ease 1.4s; }
 
.sp-curve {
  fill: none;
  stroke: url(#spCurveG);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
 
.sp-chart.is-in .sp-curve { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.3s; }
.sp-chart.is-in .sp-area  { opacity: 1; }
 
.sp-pt { opacity: 0; transition: opacity 0.5s ease; }
.sp-pt circle { fill: #FFFFFF; stroke: var(--teal-deep); stroke-width: 3; }
 
.sp-chart.is-in .sp-pt-a { opacity: 1; transition-delay: 0.3s; }
.sp-chart.is-in .sp-pt-b { opacity: 1; transition-delay: 1.5s; }
.sp-chart.is-in .sp-pt-c { opacity: 1; transition-delay: 2.9s; }
 
.sp-pt .sp-pt-ring {
  fill: none;
  stroke: var(--teal-main);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: spRing 2.2s ease-out infinite;
}
 
@keyframes spRing {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
 
.sp-end-t { font-size: 12px; font-weight: 800; fill: var(--teal-deep); opacity: 0; transition: opacity 0.6s ease 3.1s; }
.sp-chart.is-in .sp-end-t { opacity: 1; }
 
/* no JS: draw everything */
html:not(.sp-js) .sp-curve { stroke-dashoffset: 0; }
html:not(.sp-js) .sp-area,
html:not(.sp-js) .sp-pt,
html:not(.sp-js) .sp-end-t { opacity: 1; }
 
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
  .sp-hero { padding: 28px 0 56px 0; }
  .sp-chart { max-width: 640px; margin: 0 auto; }
  .sp-honest { display: flex; }
}
 
@media (max-width: 575px) {
  .sp-mk { font-size: 0.62rem; padding: 5px 11px 5px 5px; gap: 6px; }
  .sp-mk1 { right: 8px; }  .sp-mk2 { left: 8px; }
  .sp-mk3 { right: 8px; }  .sp-mk4 { left: 8px; }
  .sp-rent { padding: 20px 18px 18px 18px; }
  .sp-lane-head em { font-size: 0.66rem; }
  .sp-sbox { padding: 16px; }
  .sp-sbar { height: 50px; padding: 0 16px; }
  .sp-query { font-size: 0.9rem; }
  .sp-sug-tag { display: none; }
  .sp-chart { padding: 12px 8px 4px 8px; }
  .sp-ax-l { font-size: 9px; }
}
 
/* ============================================================
   Reduced motion: final, readable state without animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sp-js .sp-rv { opacity: 1; }
  .sp-js .sp-rv.is-in, .sp-scan-glow, .sp-beam, .sp-caret,
  .sp-bar-ads, .sp-bar-seo, .sp-rent.is-in .sp-bar-seo, .sp-pt .sp-pt-ring,
  .sp-mk, .sp-mk .sp-bad, .sp-mk .sp-ok { animation: none !important; }
  .sp-beam { display: none; }
  .sp-mk { opacity: 1; }
  .sp-mk .sp-bad { opacity: 0; }
  .sp-mk .sp-ok  { opacity: 1; }
  .sp-bar-seo { width: 94%; }
  .sp-curve { stroke-dashoffset: 0; transition: none; }
  .sp-area, .sp-pt, .sp-end-t { opacity: 1; transition: none; }
}
 
 
/* ============================================================
   REDESIGN (sp-ow-*) — only #sp-owner "Who Does the Work"
   ============================================================ */
@keyframes spOwFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spOwDriftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,34px) scale(1.14); } }
@keyframes spOwDriftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-44px,-30px) scale(1.12); } }
@keyframes spOwRing { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes spOwSpin { to { transform: rotate(360deg); } }
@keyframes spOwDot { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes spOwStrike { 0%,12% { transform: scaleX(0); } 30%,80% { transform: scaleX(1); } 96%,100% { transform: scaleX(0); } }
@keyframes spOwDash { to { background-position: 16px 0; } }
 
.sp-ow-sec { position: relative; overflow: hidden; isolation: isolate; }
.sp-ow-sec > .container { position: relative; z-index: 1; }
.sp-ow-sec::before, .sp-ow-sec::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.sp-ow-sec::before { width: 320px; height: 320px; top: -110px; left: -90px; background: radial-gradient(circle, rgba(0,122,120,.16), transparent 70%); animation: spOwDriftA 14s ease-in-out infinite; }
.sp-ow-sec::after  { width: 280px; height: 280px; bottom: -100px; right: -80px; background: radial-gradient(circle, rgba(0,168,150,.14), transparent 70%); animation: spOwDriftB 17s ease-in-out infinite; }
 
/* text side: links in theme colour (they were default blue) */
.sp-ow-sec .tech-description { max-width: 100%; }
.sp-ow-sec .tech-description a {
  color: var(--teal-deep); font-weight: 700; text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size .35s ease, color .25s ease;
}
.sp-ow-sec .tech-description a:hover { color: var(--teal-darker); background-size: 0 2px; background-position: 100% 100%; }
 
.sp-ow-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sp-ow-tags span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 999px; background: #fff; border: 1.5px solid var(--mint-200);
  font-size: .82rem; font-weight: 800; color: var(--teal-deep); box-shadow: 0 8px 18px -12px rgba(0,122,120,.5);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.sp-ow-tags span i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-main); transition: background .3s ease; }
.sp-ow-tags span:hover { transform: translateY(-5px) scale(1.06); color: #fff; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); box-shadow: 0 16px 26px -10px rgba(0,122,120,.65); }
.sp-ow-tags span:hover i { background: #fff; }
 
/* profile card */
.sp-ow-card {
  position: relative; max-width: 520px; margin: 0 auto; overflow: hidden; text-align: center; background: #fff; border: 1.5px solid var(--mint-200); border-radius: 30px;
  box-shadow: 0 28px 54px -26px rgba(0,122,120,.45); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
}
.sp-ow-card:hover { transform: translateY(-10px); border-color: var(--teal-main); box-shadow: 0 42px 66px -26px rgba(0,122,120,.6); }
.sp-ow-banner { position: relative; height: 112px; overflow: hidden; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); }
.sp-ow-banner::before, .sp-ow-banner::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); transition: transform .8s ease; }
.sp-ow-banner::before { width: 170px; height: 170px; right: -40px; top: -70px; }
.sp-ow-banner::after { width: 110px; height: 110px; left: -26px; bottom: -56px; }
.sp-ow-card:hover .sp-ow-banner::before { transform: scale(1.5) translate(-14px, 12px); }
.sp-ow-card:hover .sp-ow-banner::after { transform: scale(1.6) translate(16px, -10px); }
 
.sp-ow-photo {
  position: relative; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin: -56px auto 0; border-radius: 50%;
  border: 5px solid #fff; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; font-size: 1.7rem; font-weight: 800;
  box-shadow: 0 16px 30px -10px rgba(0,122,120,.65); transition: transform .5s cubic-bezier(.3,1.6,.5,1);
}
.sp-ow-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 50%; display: block; }
.sp-ow-photo::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px dashed var(--teal-main); opacity: 0; transition: opacity .3s ease; }
.sp-ow-photo::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal-main); opacity: 0; animation: spOwRing 3s ease-out infinite; }
.sp-ow-card:hover .sp-ow-photo { transform: scale(1.08) rotate(-4deg); }
.sp-ow-card:hover .sp-ow-photo::before { opacity: .7; animation: spOwSpin 9s linear infinite; }
 
.sp-ow-body { padding: 18px 30px 30px; }
.sp-ow-name { margin: 8px 0 4px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-dark); transition: color .3s ease; }
.sp-ow-card:hover .sp-ow-name { color: var(--teal-deep); }
.sp-ow-role { margin: 0 0 22px; font-size: .88rem; font-weight: 700; color: var(--teal-deep); }
 
/* "no account manager in between" line */
.sp-ow-line { display: flex; align-items: center; gap: 12px; padding: 20px 16px 16px; background: var(--mint-50); border: 1px solid var(--mint-200); border-radius: 20px; }
.sp-ow-node {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--mint-200); font-size: .78rem; font-weight: 800; color: var(--text-dark);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.sp-ow-node.is-ahmad { background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); border-color: var(--teal-deep); color: #fff; }
.sp-ow-card:hover .sp-ow-node { transform: scale(1.08); }
.sp-ow-track { position: relative; flex: 1; height: 24px; min-width: 40px; }
.sp-ow-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--teal-main) 0 8px, transparent 8px 16px); background-size: 16px 2px; animation: spOwDash .8s linear infinite; }
.sp-ow-track i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--teal-deep); box-shadow: 0 0 0 4px rgba(0,168,150,.2); animation: spOwDot 2.4s ease-in-out infinite; }
.sp-ow-am {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px dashed #d4a08a;
  font-size: .62rem; font-weight: 800; white-space: nowrap; color: #9a5b3e;
}
.sp-ow-am::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: #B45309; transform: scaleX(0); transform-origin: left; animation: spOwStrike 5s ease infinite; }
.sp-ow-cap { margin: 12px 0 0; font-size: .78rem; font-weight: 700; color: var(--text-body); }
 
@media (max-width: 575px) {
  .sp-ow-body { padding: 16px 18px 24px; }
  .sp-ow-line { gap: 8px; padding: 22px 10px 14px; }
  .sp-ow-node { padding: 7px 11px; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-ow-sec::before, .sp-ow-sec::after, .sp-ow-photo::after, .sp-ow-track::before, .sp-ow-track i, .sp-ow-am::after { animation: none !important; }
  .sp-ow-am::after { transform: scaleX(1); }
}
 
/* ============================================================
   RESPONSIVE PATCH (CSS-only, mobile text-first) — appended, no
   desktop rule above was changed. Desktop layout untouched.
   ============================================================ */
@media (max-width: 991px) {
  /* Mobile text-first: the hero's Bootstrap order classes render the
     graphic column first below lg (text order-2, graphic order-1).
     Flip them so text renders above the graphic. The order-lg-*
     desktop rules are outside this breakpoint and still apply. */
  .sp-hero > .container > .row > .order-2 { order: 1 !important; }
  .sp-hero > .container > .row > .order-1 { order: 2 !important; }
}