/* Seller Seva — design system, hero slider, page components */

:root {
  --ss-blue: #0b8ee8;
  --ss-blue-dark: #0670c4;
  --ss-navy: #08172b;
  --ss-ink: #0a1a2f;
  --ss-muted: #5b6b82;
  --ss-line: #e6eff9;
  --ss-bg: #f4f9ff;
  --ss-orange: #ffb020;
  --ss-green: #12b76a;
  --ss-shadow-sm: 0 18px 40px -32px rgba(8, 23, 43, .45);
  --ss-shadow-md: 0 28px 60px -38px rgba(8, 23, 43, .55);
  --ss-shadow-lg: 0 44px 90px -50px rgba(8, 23, 43, .6);
  --ss-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- HERO SLIDER */
.ss-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:
    radial-gradient(1100px 460px at 82% -10%, rgba(11, 142, 232, .16), transparent 60%),
    radial-gradient(820px 420px at 8% 108%, rgba(255, 176, 32, .14), transparent 62%),
    linear-gradient(180deg, #f7fbff 0%, #eff7ff 100%);
  overflow: hidden;
  isolation: isolate;
}

.ss-hero__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.ss-slides { display: grid; }

.ss-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: 48px;
  padding: 44px 0 78px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}

.ss-slide.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }

.ss-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(11, 142, 232, .1);
  color: var(--ss-blue-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ss-hero h1,
.ss-hero .ss-title {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ss-navy);
  font-weight: 800;
}

.ss-hero__text { margin: 0 0 26px; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--ss-muted); }
.ss-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.ss-btn:hover { transform: translateY(-2px); }

.ss-btn--primary {
  background: var(--ss-blue-dark);
  color: #fff !important;
  box-shadow: 0 14px 28px -12px rgba(6, 112, 196, .7);
}

.ss-btn--primary:hover { background: #055a9e; }

.ss-btn--ghost {
  background: #fff;
  border-color: var(--ss-line);
  color: var(--ss-navy) !important;
  box-shadow: 0 10px 24px -18px rgba(11, 27, 52, .5);
}

.ss-btn--ghost:hover { border-color: var(--ss-blue); color: var(--ss-blue) !important; }
.ss-btn--light { background: #fff; color: var(--ss-navy) !important; }
.ss-btn--light:hover { background: #eaf5ff; }

.ss-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 32px 0 0; padding: 0; list-style: none; }
.ss-stats li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ss-muted); }
.ss-stats strong { font-size: 22px; font-weight: 800; color: var(--ss-navy); }

.ss-visual { position: relative; justify-self: end; width: 100%; max-width: 560px; border-radius: 24px; }

.ss-visual--img { padding: 14px; background: #fff; border: 1px solid var(--ss-line); box-shadow: var(--ss-shadow-lg); }
.ss-visual--img img { display: block; width: 100%; height: auto; border-radius: 14px; }

.ss-visual--card {
  padding: 22px 22px 18px;
  color: #fff;
  background: linear-gradient(150deg, #0c1f3d 0%, #103a63 55%, #0b6ea8 100%);
  box-shadow: var(--ss-shadow-lg);
  overflow: hidden;
}

.ss-v-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}

.ss-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: rgba(18, 183, 106, .16); color: #6ff0b0;
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
}

.ss-v-metric { margin: 14px 0 4px; font-size: 14px; color: rgba(255, 255, 255, .74); }
.ss-v-metric strong { display: block; margin-top: 2px; font-size: 38px; line-height: 1.05; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.ss-v-chart { display: block; width: 100%; height: auto; margin: 10px 0 4px; }
.ss-v-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.ss-v-legend span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .9); }

.ss-v-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ss-v-list li { position: relative; padding-left: 28px; font-size: 14px; color: rgba(255, 255, 255, .9); }
.ss-v-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(18, 183, 106, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ff0b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.ss-audit { display: flex; gap: 10px; margin: 18px 0 0; }
.ss-audit input {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 14px;
}
.ss-audit input::placeholder { color: rgba(255, 255, 255, .6); }
.ss-audit input:focus { outline: 2px solid rgba(11, 142, 232, .65); outline-offset: 2px; }
.ss-audit button {
  flex: 0 0 auto; height: 50px; padding: 0 20px; border: 0; border-radius: 12px;
  background: var(--ss-blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}

.ss-hero__controls {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; align-items: center; justify-content: center; gap: 16px; z-index: 3;
}

.ss-dots { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ss-dot {
  width: 34px; height: 6px; padding: 0; border: 0; border-radius: 999px;
  background: #c9def2; cursor: pointer; transition: background .2s ease, width .2s ease;
}

.ss-dot.is-active { width: 52px; background: var(--ss-blue); }

.ss-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(11, 142, 232, .3); background: #fff; color: var(--ss-navy);
  box-shadow: 0 12px 28px -14px rgba(6, 30, 55, .45);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ss-arrow svg { width: 18px; height: 18px; }

.ss-arrow:hover,
.ss-arrow:focus-visible {
  background: var(--ss-blue); border-color: var(--ss-blue); color: #fff;
  box-shadow: 0 16px 34px -14px rgba(11, 142, 232, .75);
}

.ss-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ PAGE SYSTEM */
.ssp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.ssp-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 54px 0 64px;
  overflow: hidden;
  background:
    radial-gradient(1000px 460px at 86% -12%, rgba(11, 142, 232, .18), transparent 62%),
    radial-gradient(760px 420px at 0% 110%, rgba(255, 176, 32, .13), transparent 62%),
    linear-gradient(180deg, #f8fcff 0%, #edf7ff 100%);
}

.ssp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 142, 232, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 142, 232, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(900px 420px at 70% 20%, #000 10%, transparent 72%);
  mask-image: radial-gradient(900px 420px at 70% 20%, #000 10%, transparent 72%);
  pointer-events: none;
}

.ssp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 46px;
  align-items: center;
}

.ssp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(11, 142, 232, .1);
  color: var(--ss-blue-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ssp-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ss-navy);
  font-weight: 800;
}

.ssp-lead { margin: 0 0 24px; max-width: 580px; font-size: 17px; line-height: 1.65; color: var(--ss-muted); }
.ssp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ssp-trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 24px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--ss-muted);
}

.ssp-trust li { display: inline-flex; align-items: center; gap: 8px; }
.ssp-trust svg { width: 16px; height: 16px; color: var(--ss-green); flex: 0 0 16px; }

/* Media frame with floating cards */
.ssp-media { position: relative; }

.ssp-media__frame {
  position: relative;
  padding: 12px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-lg);
}

.ssp-media__frame img { display: block; width: 100%; height: auto; border-radius: 18px; }

.ssp-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(230, 239, 249, .9);
  box-shadow: 0 20px 44px -26px rgba(8, 23, 43, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-ink);
  white-space: nowrap;
}

.ssp-float span { display: block; font-size: 11px; font-weight: 600; color: var(--ss-muted); letter-spacing: .02em; }

.ssp-float__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(11, 142, 232, .12); color: var(--ss-blue-dark); flex: 0 0 34px;
}

.ssp-float__icon svg { width: 18px; height: 18px; }
.ssp-float--a { left: -26px; bottom: -22px; }
.ssp-float--b { right: -20px; top: -18px; }

/* Sections */
.ssp-section { padding: 78px 0; }
.ssp-section--tight { padding: 56px 0; }
.ssp-section--tint { background: linear-gradient(180deg, #f6fbff, #f1f8ff); }

.ssp-head { max-width: 720px; margin: 0 0 42px; }
.ssp-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.ssp-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  color: var(--ss-blue-dark);
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

.ssp-kicker::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ss-blue), rgba(11, 142, 232, .2));
}

.ssp-head--center .ssp-kicker::before { display: none; }

.ssp-title {
  margin: 0 0 14px;
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ss-navy);
  font-weight: 800;
}

.ssp-sub { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ss-muted); }

/* Stat band */
.ssp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
}

.ssp-stat { padding: 28px 24px; background: #fff; text-align: center; }

.ssp-stat strong {
  display: block;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, #0b8ee8, #0a4f8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ssp-stat span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ss-muted); }

/* Icon tiles */
.ssp-grid { display: grid; gap: 22px; }
.ssp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ssp-tile {
  position: relative;
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
  transition: transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease), border-color .25s var(--ss-ease);
  overflow: hidden;
}

.ssp-tile::after {
  content: "";
  position: absolute; right: -40px; bottom: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 142, 232, .14), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}

.ssp-tile:hover { transform: translateY(-5px); box-shadow: var(--ss-shadow-md); border-color: rgba(11, 142, 232, .35); }
.ssp-tile:hover::after { opacity: 1; }

.ssp-tile__icon {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(11, 142, 232, .16), rgba(11, 142, 232, .04));
  color: var(--ss-blue-dark);
}

.ssp-tile__icon svg { width: 22px; height: 22px; }
.ssp-tile h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; color: var(--ss-ink); font-weight: 700; }
.ssp-tile p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ss-muted); }

/* Split feature */
.ssp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

.ssp-split--reverse .ssp-split__media { order: 2; }
.ssp-split__media { position: relative; }
.ssp-split__media img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: var(--ss-shadow-md); }
.ssp-split__media--plain img { border-radius: 26px; background: #fff; padding: 12px; border: 1px solid var(--ss-line); }

.ssp-bullets { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.ssp-bullets li { position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.6; color: var(--ss-ink); }

.ssp-bullets li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(18, 183, 106, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312b76a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Logo strip */
.ssp-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.ssp-logo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 16px;
  background: #fff; border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
  font-size: 14px; font-weight: 700; color: var(--ss-ink);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ssp-logo:hover { transform: translateY(-3px); box-shadow: var(--ss-shadow-md); }
.ssp-logo img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }

/* Timeline */
.ssp-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 8px; }

.ssp-timeline::before {
  content: ""; position: absolute; top: 36px; left: 9%; right: 9%; height: 2px;
  background: linear-gradient(90deg, rgba(11, 142, 232, .18), rgba(11, 142, 232, .6), rgba(11, 142, 232, .18));
}

.ssp-step { position: relative; text-align: center; }

.ssp-step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  background: #fff; border: 2px solid #d6ebfd; color: var(--ss-blue-dark);
  font-size: 18px; font-weight: 800;
  box-shadow: 0 16px 30px -20px rgba(8, 23, 43, .5);
}

.ssp-step h3 { margin: 0 0 8px; font-size: 17px; color: var(--ss-ink); font-weight: 700; }
.ssp-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ss-muted); }

/* Pricing */
.ssp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

.ssp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
  transition: transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease);
}

.ssp-plan:hover { transform: translateY(-4px); box-shadow: var(--ss-shadow-md); }

.ssp-plan--featured {
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(79, 195, 255, .28), transparent 62%),
    linear-gradient(160deg, #071426 0%, #0d3050 58%, #0b5f96 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 36px 80px -42px rgba(6, 49, 88, .8);
}

.ssp-plan--featured .ssp-plan__name,
.ssp-plan--featured .ssp-plan__note,
.ssp-plan--featured .ssp-plan__price span { color: rgba(255, 255, 255, .72); }

.ssp-plan--featured .ssp-plan__price { color: #fff; }

.ssp-plan__tag {
  position: absolute; top: -14px; left: 28px;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(120deg, #ffd166, #ffb020);
  color: #3a2400;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 20px -12px rgba(255, 176, 32, .9);
}

.ssp-plan__name {
  margin: 0 0 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ss-blue-dark);
}

.ssp-plan__price {
  margin: 0 0 4px;
  font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em;
  color: var(--ss-navy);
}

.ssp-plan__price span { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ss-muted); }
.ssp-plan__note { margin: 0 0 22px; font-size: 13.5px; color: var(--ss-muted); }

.ssp-plan ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 14.5px; line-height: 1.5; flex: 1 1 auto; align-content: start; }
.ssp-plan li { position: relative; padding-left: 30px; color: var(--ss-ink); }
.ssp-plan--featured li { color: rgba(255, 255, 255, .92); }

.ssp-plan li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(11, 142, 232, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230670c4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.ssp-plan--featured li::before {
  background-color: rgba(111, 240, 176, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ff0b0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ssp-plan .ss-btn { margin-top: auto; width: 100%; }

/* Comparison table */
.ssp-table-wrap {
  margin-top: 46px;
  border-radius: 22px;
  border: 1px solid var(--ss-line);
  background: #fff;
  box-shadow: var(--ss-shadow-sm);
  overflow-x: auto;
}

.ssp-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }

.ssp-table th,
.ssp-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--ss-line); }

.ssp-table thead th {
  background: #f7fbff !important;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-blue-dark) !important;
  font-weight: 800;
  border-bottom: 1px solid var(--ss-line);
}

.ssp-table tbody tr:last-child td { border-bottom: 0; }
.ssp-table td:not(:first-child), .ssp-table th:not(:first-child) { text-align: center; }
.ssp-table td:first-child { color: var(--ss-ink); font-weight: 600; }
.ssp-table .yes { color: var(--ss-green); font-weight: 800; }
.ssp-table .no { color: #b9c7d8; }

/* FAQ */
.ssp-faq { display: grid; gap: 14px; max-width: 880px; margin: 0 auto; }

.ssp-faq details {
  border: 1px solid var(--ss-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ss-shadow-sm);
  overflow: hidden;
}

.ssp-faq summary {
  position: relative;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-size: 15.5px; font-weight: 700; color: var(--ss-ink);
  list-style: none;
}

.ssp-faq summary::-webkit-details-marker { display: none; }

.ssp-faq summary::after {
  content: "";
  position: absolute; right: 22px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: rgba(11, 142, 232, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230670c4' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .25s var(--ss-ease);
}

.ssp-faq details[open] summary::after { transform: rotate(45deg); }

.ssp-faq details p {
  margin: 0; padding: 0 24px 22px;
  font-size: 14.8px; line-height: 1.7; color: var(--ss-muted);
}

/* Testimonials */
.ssp-quote-grid { columns: 3; column-gap: 22px; }

.ssp-quote {
  position: relative;
  display: block;
  margin: 0 0 22px;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
  break-inside: avoid;
  transition: transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease);
}

.ssp-quote:hover { transform: translateY(-4px); box-shadow: var(--ss-shadow-md); }

.ssp-quote--featured {
  grid-column: span 2;
  background:
    radial-gradient(520px 240px at 90% 0%, rgba(79, 195, 255, .25), transparent 60%),
    linear-gradient(150deg, #071426, #0d3050 60%, #0a5687);
  border: 0;
  color: #fff;
}

.ssp-quote__mark { font-size: 46px; line-height: .8; color: rgba(11, 142, 232, .22); margin-bottom: 10px; font-family: Georgia, serif; }
.ssp-quote--featured .ssp-quote__mark { color: rgba(111, 240, 176, .5); }
.ssp-quote .ssp-rating__stars { display: block; margin-bottom: 12px; }

/* Neutralise theme blockquote styling inside review cards */
.ssp-quote blockquote,
.ssp-quote blockquote p {
  background: none !important;
  border: 0 !important;
  font-style: normal !important;
  color: var(--ss-ink);
  text-align: left !important;
}

.ssp-quote,
.ssp-quote__mark,
.ssp-quote__who { text-align: left; }

.ssp-quote blockquote::before,
.ssp-quote blockquote::after,
.ssp-quote blockquote p::before,
.ssp-quote blockquote p::after {
  content: none !important;
  background: none !important;
}

.ssp-quote blockquote { margin: 0 0 20px; padding: 0; border: 0; flex: 1 1 auto; }
.ssp-quote blockquote p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ss-ink); }
.ssp-quote--featured blockquote p { color: rgba(255, 255, 255, .94); font-size: 17px; }

.ssp-quote__who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--ss-line); }
.ssp-quote--featured .ssp-quote__who { border-top-color: rgba(255, 255, 255, .16); }

.ssp-avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(140deg, #0b8ee8, #6fc6ff);
  color: #fff; font-weight: 800; font-size: 15px; flex: 0 0 46px;
  box-shadow: 0 10px 22px -14px rgba(11, 142, 232, .9);
}

.ssp-quote__name { display: block; font-size: 15px; font-weight: 700; color: var(--ss-navy); }
.ssp-quote__role { display: block; font-size: 12.5px; color: var(--ss-muted); }
.ssp-quote--featured .ssp-quote__name { color: #fff; }
.ssp-quote--featured .ssp-quote__role { color: rgba(255, 255, 255, .7); }

/* Rating summary */
.ssp-rating {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-radius: 18px;
  background: #fff; border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
}

.ssp-rating strong { font-size: 30px; font-weight: 800; color: var(--ss-navy); line-height: 1; }
.ssp-rating__stars { color: var(--ss-orange); letter-spacing: 2px; font-size: 15px; }
.ssp-rating__meta { font-size: 12.5px; color: var(--ss-muted); }

/* Case metrics */
.ssp-case {
  position: relative;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-sm);
  overflow: hidden;
}

.ssp-case::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, #0b8ee8, #6fc6ff);
}

.ssp-case strong {
  display: block; margin-bottom: 6px;
  font-size: 36px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, #0b8ee8, #0a4f8a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ssp-case span { display: block; font-size: 13.5px; color: var(--ss-muted); line-height: 1.5; }

/* Chips */
.ssp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }

.ssp-chips li {
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ss-line);
  font-size: 13px; font-weight: 600; color: var(--ss-ink);
  box-shadow: var(--ss-shadow-sm);
}

/* CTA band */
.ssp-cta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; text-align: center;
  padding: 44px 46px; border-radius: 28px;
  background:
    radial-gradient(700px 300px at 90% -20%, rgba(79, 195, 255, .35), transparent 60%),
    linear-gradient(120deg, #061426, #0c3355 55%, #0a6199);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 40px 80px -48px rgba(6, 30, 55, .9);
}

.ssp-cta::after {
  content: ""; position: absolute; right: -60px; bottom: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 142, 232, .35), transparent 65%);
}

.ssp-cta h2 { position: relative; margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 32px); color: #fff; }
.ssp-cta p { position: relative; margin: 0 auto; max-width: 640px; color: rgba(255, 255, 255, .92) !important; }
.ssp-cta .ssp-actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Content is always visible — motion is limited to hover/CTA feedback */
.ssp-reveal { opacity: 1; transform: none; }

/* ------------------------------------------- HOMEPAGE LEGACY FIVE-UP ROWS */
/* The process row used five floated 1/5 columns that overflowed the container
   and broke headings mid-word. Normalise it to a grid. */
.card-process-wrap {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.card-process-wrap > .vc_column_container {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex;
}

/* Card fills the equal-height grid cell, and its content drives the height
   (percentage heights on the inner wrappers pushed the text outside the card). */
.card-process-wrap .vc_column-inner {
  width: 100%;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

.card-process-wrap .wpb_wrapper {
  height: auto !important;
  min-height: 0 !important;
}

.card-process-wrap .header {
  font-size: clamp(17px, 1.35vw, 22px) !important;
  line-height: 1.22 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

.card-process-wrap p {
  font-size: 13.5px;
  line-height: 1.6;
}

/* Icon + text rows (Why Brands Trust) — stop the 1/5 icon column squeezing text */
.image-with-icon-text-wrapper {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.image-with-icon-text-wrapper > .vc_column_container {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.image-with-icon-text-wrapper .header {
  font-size: clamp(18px, 1.55vw, 24px) !important;
  line-height: 1.25 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1100px) {
  .card-process-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .card-process-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-with-icon-text-wrapper { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 560px) {
  .card-process-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- FOOTER */
.ss-footer-contact { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ss-footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.ss-footer-contact a { color: inherit; }
.ss-footer-contact svg { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 16px; color: var(--ss-blue); }

.ltx-footer-wrapper .widget_nav_menu ul.menu li a,
.ltx-footer-wrapper .textwidget p { font-size: 14px; line-height: 1.6; }

.ltx-footer-wrapper .footer-widget-area { padding-bottom: 18px; }

.ltx-footer-wrapper .header-widget {
  margin-bottom: 14px;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ltx-footer-wrapper .ltx-social ul { display: flex; gap: 10px; margin: 16px 0 0; padding: 0; }
.ltx-footer-wrapper .ltx-social li { list-style: none; }
.ltx-footer-wrapper .ltx-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.ltx-footer-wrapper .ltx-social a:hover { background: var(--ss-blue); transform: translateY(-2px); }

/* --------------------------------------------------------------- RESPONSIVE */
@media (max-width: 1100px) {
  .ssp-plan__price { font-size: 34px; }
  .ssp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .ss-slide { gap: 32px; padding: 34px 0 70px; }
  .ssp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssp-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssp-timeline::before { display: none; }
  .ssp-plans { grid-template-columns: minmax(0, 1fr); }
  .ssp-quote-grid { columns: 2; }
}

@media (max-width: 860px) {
  .ss-slide { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 0 66px; }
  .ss-visual { justify-self: stretch; max-width: 100%; }
  .ss-visual--img { order: -1; }
  .ss-hero h1, .ss-hero .ss-title { font-size: clamp(26px, 7vw, 34px); }
  .ss-hero__text { font-size: 15.5px; }
  /* Side arrows are vertically centred here too, so keep the copy clear of them. */
  .ss-slide__copy { padding-inline: 34px; }

  .ssp-hero { padding: 36px 0 46px; }
  .ssp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ssp-hero h1 { font-size: clamp(27px, 7.4vw, 36px); }
  .ssp-lead { font-size: 15.5px; }
  .ssp-media { order: -1; }
  .ssp-float--a { left: 10px; bottom: -16px; }
  .ssp-float--b { right: 8px; top: -16px; }
  .ssp-section { padding: 54px 0; }
  .ssp-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ssp-split--reverse .ssp-split__media { order: 0; }
  .ssp-grid--2, .ssp-grid--3, .ssp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ssp-quote-grid { columns: 1; }
  .ssp-quote--featured { grid-column: span 1; }
  .ssp-cta { padding: 32px 26px; }
  .ssp-timeline { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ssp-step { text-align: left; display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; }
  .ssp-step__num { margin: 0; }
  .ssp-step h3 { margin-top: 6px; }
}

@media (max-width: 600px) {
  .ss-hero__inner { padding: 0 18px; }
  .ss-stats { gap: 18px; }
  .ss-stats strong { font-size: 19px; }
  .ss-hero__controls { bottom: 18px; }
  .ss-slide__copy { padding-inline: 26px; }
  .ss-dot { width: 26px; }
  .ss-dot.is-active { width: 40px; }
  .ss-audit { flex-direction: column; }
  .ss-audit button { width: 100%; }

  .ssp-wrap { padding: 0 18px; }
  .ssp-stat { padding: 20px 14px; }
  .ssp-stat strong { font-size: 26px; }
  .ssp-plan { padding: 26px 22px; }
  .ssp-float { padding: 10px 12px; font-size: 12px; }
  .ssp-chips li { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-slide, .ss-btn, .ss-dot, .ss-arrow,
  .ssp-tile, .ssp-plan, .ssp-quote, .ssp-logo { transition: none !important; }
  .ssp-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------- WPBakery bridge (client edits) */
/* Sections are authored as vc_row + vc_column + vc_column_text blocks; the
   original .ssp-* classes stay on the wrappers so the design is unchanged. */
.vc_row.ssp-section,
.vc_row.ssp-hero { position: relative; margin: 0; }

.vc_row.ssp-section > .wpb_column > .vc_column-inner,
.vc_row.ssp-hero > .wpb_column > .vc_column-inner { padding-left: 0; padding-right: 0; }

.vc_row.ssp-hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 54px 0 64px;
}

.vc_row.ssp-hero > .wpb_column > .vc_column-inner { max-width: none; }

.wpb_text_column.ssp-wrap,
.wpb_content_element.ssp-wrap {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  width: 100%;
}

.wpb_text_column.ssp-wrap > .wpb_wrapper > :last-child { margin-bottom: 0; }

/* City pages: the theme prints a post date + stray <br> above the hero. */
.single-ss_location .blog-info.blog-info-post-top { display: none; }
.single-ss_location .text.text-page > br { display: none; }

/* Safety net: if the slider script has not initialised yet (or failed), keep the
   testimonial block compact instead of stacking every slide into a huge column. */
.ltx-swiper-slider-wrapper { overflow: hidden; }
.ltx-swiper-slider:not(.swiper-container-initialized) .swiper-slide { display: none; }
.ltx-swiper-slider:not(.swiper-container-initialized) .swiper-slide:first-child { display: block; }

/* Testimonial slider: without an explicit height the slide height resolved
   against the wrapper, which stretched the whole section to ~7000px. The theme
   design height is 362px (same as production). */
.ltx-testimonials-list { height: 362px !important; }
.ltx-testimonials-list .swiper-slide { height: 362px !important; }

/* Testimonial arrows: the theme paints 70px cream circles 30px inside the
   container, right on top of the cards. Use the site's arrow language (white,
   blue border, soft shadow) and move them onto the container edge. */
[class*="like_sc_testimonials"] .ltx-arrow-left,
[class*="like_sc_testimonials"] .ltx-arrow-right {
  width: 52px;
  height: 52px;
  line-height: 49px;
  background: #fff;
  color: var(--ss-blue);
  border: 1.5px solid rgba(11, 142, 232, .45);
  box-shadow: 0 16px 34px -16px rgba(6, 30, 55, .5);
  transition: background .2s ease, color .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .2s ease;
}

[class*="like_sc_testimonials"] .ltx-arrow-left.ltx-arrow-left:before,
[class*="like_sc_testimonials"] .ltx-arrow-right.ltx-arrow-right:before {
  font-size: 19px;
}

[class*="like_sc_testimonials"] .ltx-arrow-left.ltx-arrow-left:before { margin-left: -2px; }
[class*="like_sc_testimonials"] .ltx-arrow-right.ltx-arrow-right:before { margin-right: -2px; }

[class*="like_sc_testimonials"] .ltx-arrow-left:not(.swiper-button-disabled):hover,
[class*="like_sc_testimonials"] .ltx-arrow-right:not(.swiper-button-disabled):hover {
  background: var(--ss-blue);
  border-color: var(--ss-blue);
  color: #fff;
  box-shadow: 0 18px 38px -14px rgba(11, 142, 232, .75);
}

[class*="like_sc_testimonials"] .ltx-arrow-left.swiper-button-disabled,
[class*="like_sc_testimonials"] .ltx-arrow-right.swiper-button-disabled { opacity: .28; }

/* ss.js moves the arrow row out of the clipping swiper wrapper; this keeps it
   anchored to the slider's own box. */
.ss-arrows-host { position: relative; }

/* Wide screens have room to park the arrows fully outside the slide area. */
@media (min-width: 1400px) {
  [class*="like_sc_testimonials"].ltx-arrows-sides .ltx-arrow-left.ltx-arrow-left { left: -74px; }
  [class*="like_sc_testimonials"].ltx-arrows-sides .ltx-arrow-right.ltx-arrow-right { right: -74px; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  [class*="like_sc_testimonials"].ltx-arrows-sides .ltx-arrow-left.ltx-arrow-left { left: -18px; }
  [class*="like_sc_testimonials"].ltx-arrows-sides .ltx-arrow-right.ltx-arrow-right { right: -18px; }
}

/* Below 1200px the theme stacks the arrows under the slider — tighten that gap. */
@media (max-width: 1199px) {
  [class*="like_sc_testimonials"].ltx-arrows-sides .ltx-arrow-left.ltx-arrow-left,
  [class*="like_sc_testimonials"].ltx-arrows-sides .ltx-arrow-right.ltx-arrow-right {
    width: 46px;
    height: 46px;
    line-height: 43px;
    margin: 22px 7px 0;
  }
}

/* Cards fill the fixed slider height, so short quotes don't leave dead space
   above the arrows. */
.ltx-testimonials-list .swiper-slide > :first-child {
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .ltx-testimonials-list,
  .ltx-testimonials-list .swiper-slide { height: 400px !important; }
}

/* Hero arrows sit on the left/right edges, vertically centred, at every width
   (phone included). The copy gets side padding on narrow screens so the
   buttons never sit on top of the text. */
.ss-hero__controls {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

.ss-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  pointer-events: auto;
  background: #fff;
  color: #0b6fd0;
  border: 1.5px solid rgba(11, 142, 232, .5);
  box-shadow: 0 16px 34px -14px rgba(6, 30, 55, .45);
}

.ss-arrow svg { width: 18px; height: 18px; stroke-width: 2.8; }

.ss-arrow--prev { left: max(8px, calc(50% - 660px)); }
.ss-arrow--next { right: max(8px, calc(50% - 660px)); }

.ss-arrow:hover,
.ss-arrow:focus-visible { transform: translateY(-50%) scale(1.06); }

.ss-dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  pointer-events: auto;
}

@media (min-width: 1400px) {
  .ss-arrow {
    width: 60px;
    height: 60px;
    box-shadow: 0 18px 40px -14px rgba(6, 30, 55, .45), 0 0 0 6px rgba(255, 255, 255, .55);
  }

  .ss-arrow svg { width: 22px; height: 22px; }

  .ss-arrow--prev { left: max(22px, calc(50% - 700px)); }
  .ss-arrow--next { right: max(22px, calc(50% - 700px)); }
}

/* Phones: smaller buttons so they clear the side padding of the copy. */
@media (max-width: 600px) {
  .ss-arrow { width: 38px; height: 38px; }
  .ss-arrow svg { width: 15px; height: 15px; }
  .ss-arrow--prev { left: 4px; }
  .ss-arrow--next { right: 4px; }
}

/* Footer: five widget columns in a single row (first column wider). */
#ltx-widgets-footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

#ltx-widgets-footer .row > [class*="col-"] {
  flex: 1 1 0;
  width: auto;
  max-width: none;
}

#ltx-widgets-footer .row > [class*="col-"]:first-child { flex-grow: 1.45; }

#ltx-widgets-footer .ss-locations-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

#ltx-widgets-footer .ss-locations-menu li { margin: 0 0 10px; }
#ltx-widgets-footer .ss-locations-menu a { color: #fff; text-decoration: none; }
#ltx-widgets-footer .ss-locations-menu a:hover { color: var(--ss-blue); }

@media (max-width: 1199px) {
  #ltx-widgets-footer .row > [class*="col-"] { flex: 1 1 45%; }
  #ltx-widgets-footer .row > [class*="col-"]:first-child { flex: 1 1 100%; }
}

@media (max-width: 575px) {
  #ltx-widgets-footer .row > [class*="col-"] { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------- TEAM PAGE
   lt-ext registers the `team` post type but the theme ships no styling for the
   archive, so members render as raw markup. These cards match the rest of the
   site, three per row on desktop. Cards are not links (no profile pages).

   Two theme rules had to be neutralised: `.team-item { margin: 70px 0 -60px }`
   (a leftover of its block layout, it collapsed the grid rows) and the white
   `.descr` panel with `z-index: 2` that painted over the bottom of the avatar,
   which is why the photos looked like half circles. The :not(.team-list) guard
   keeps the team slider shortcode untouched. */
.team-sc:not(.team-list) {
  /* the theme pulls the block up by 70px (margin-top) to hug the page banner;
     combined with our own padding that pushed the heading into the hero. */
  margin-top: 0;
  padding: 58px 0 76px;
}
.team-sc .row { row-gap: 26px; }

.team-intro { max-width: 830px; margin: 0 auto 46px; text-align: center; }
.team-intro h2 {
  margin: 0 0 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ss-navy);
}
.team-intro p { max-width: 700px; margin: 0 auto; font-size: 15.5px; line-height: 1.75; color: var(--ss-muted); }
.team-intro p + p { margin-top: 12px; }

.team-sc:not(.team-list) .team-item {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 34px 26px 30px;
  background: #fff;
  border: 1px solid var(--ss-line);
  border-radius: 20px;
  box-shadow: var(--ss-shadow-sm);
  transition: transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease), border-color .25s var(--ss-ease);
}

.team-sc:not(.team-list) .team-item:hover {
  transform: translateY(-4px);
  border-color: #cfe4f7;
  box-shadow: var(--ss-shadow-md);
}

.team-sc:not(.team-list) .team-item .image {
  flex: 0 0 auto;
  margin: 0;
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}

/* The circle lives on the image itself: clipping a 150px wrapper painted only
   half its height on this theme. */
.team-sc:not(.team-list) .team-item .image img {
  display: block;
  width: 150px;
  height: 150px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ss-bg);
  box-shadow: 0 0 0 7px rgba(11, 142, 232, .07);
}

.team-sc:not(.team-list) .team-item .descr {
  position: static;
  z-index: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  /* The theme nudges the caption up by 60px (translateY) so it overlaps the
     avatar; that is what cropped the photos into domes. */
  transform: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.team-sc:not(.team-list) .team-item .header {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ss-navy);
}

.team-sc:not(.team-list) .team-item .subheader {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ss-blue-dark);
}

@media (max-width: 1199px) {
  /* the card template only ships col-xl-4, so below 1200px the columns collapse
     to their content width; define the grid ourselves. */
  .team-sc:not(.team-list) .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 991px) {
  .team-sc:not(.team-list) { padding: 46px 0 56px; }
  .team-intro { margin-bottom: 36px; }
}

@media (max-width: 767px) {
  .team-sc:not(.team-list) { padding: 36px 0 44px; }
  .team-intro { margin-bottom: 28px; }
  .team-intro h2 { font-size: 22px; }
  .team-intro p { font-size: 14.5px; line-height: 1.7; }
  .team-sc:not(.team-list) .row { row-gap: 14px; }
  .team-sc:not(.team-list) .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  /* horizontal card reads better than a tall stacked one on phones */
  .team-sc:not(.team-list) .team-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 18px 20px;
    gap: 16px;
  }
  .team-sc:not(.team-list) .team-item .image img {
    width: 86px;
    height: 86px;
    box-shadow: 0 0 0 5px rgba(11, 142, 232, .07);
  }
  .team-sc:not(.team-list) .team-item .descr { width: auto; flex: 1 1 auto; gap: 4px; }
  .team-sc:not(.team-list) .team-item .header { font-size: 17px; }
}
/* ------------------------------------------------------------- LOCATIONS PAGE
   /locations/ overview, rendered by the [ss_locations_grid] shortcode so a new
   city added in the admin shows up here and in the header dropdown. */
.ss-loc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 8px 0 0;
}

.ss-loc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 26px 24px 24px;
  border: 1px solid var(--ss-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ss-shadow-sm);
  text-decoration: none;
  transition: transform .25s var(--ss-ease), box-shadow .25s var(--ss-ease), border-color .25s var(--ss-ease);
}

.ss-loc-card:hover,
.ss-loc-card:focus-visible {
  transform: translateY(-3px);
  border-color: #cfe4f7;
  box-shadow: var(--ss-shadow-md);
  text-decoration: none;
}

.ss-loc-card__city {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ss-navy);
}

.ss-loc-card__lead {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ss-muted);
}

.ss-loc-card__cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ss-blue-dark);
}

@media (max-width: 991px) {
  .ss-loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 575px) {
  .ss-loc-grid { grid-template-columns: 1fr; gap: 14px; }
  .ss-loc-card { padding: 20px 18px; }
}

/* --------------------------------------------------------- HEADER NAV WIDTH
   The theme pins the desktop nav to two thirds of the container (800px at
   1200px), which was already tight and pushed the new "Locations" item onto a
   second line. Let the list size itself; it stays centred. */
@media (min-width: 1200px) {
  /* the wrapper reserves 200px of padding each side, so the list only ever got
     800px - less than its own content once "Locations" was added. */
  nav.navbar #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
  .navbar-desktop .navbar-nav {
    width: auto;
    max-width: 100%;
  }
  .navbar-desktop .navbar-nav > li > a {
    padding-left: 15px;
    padding-right: 15px;
  }
}