/* Service page template (Figma "Main Pages" frames, 1600px design).
   Shared by the seven /services/* pages. Prefix: svp-. */

.svp {
    --svp-teal: #0888a7;
    --svp-teal-deep: #0f6276;
    --svp-ink: #4a4a4a;
    --svp-body: #575757;
    --svp-grey: #f6f6f6;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--svp-body);
    /* Clip sideways only: the hero card slides up behind the floating header. */
    overflow-x: clip;
}

.svp *,
.svp *::before,
.svp *::after {
    box-sizing: border-box;
}

.svp h1,
.svp h2,
.svp h3,
.svp p,
.svp figure,
.svp ul {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', Arial, sans-serif;
}

.svp a {
    text-decoration: none;
}

.svp img {
    max-width: 100%;
}

.svp-accent {
    color: var(--svp-teal);
}

.svp-wrap {
    width: min(1312px, calc(100% - 48px));
    margin: 0 auto;
}

.svp-center {
    text-align: center;
}

.svp-grey {
    background: var(--svp-grey);
}

/* Shared type */
.svp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 34px;
    border-radius: 13px;
    background: rgba(8, 136, 167, .27);
    box-shadow: inset 0 0 0 2px var(--svp-teal);
    color: var(--svp-teal);
    font-size: 17px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-h2 {
    color: var(--svp-ink);
    font-size: 52px;
    font-weight: 600;
    line-height: 54px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-center .svp-h2 {
    margin: 29px auto 0;
}

.svp-lead {
    color: var(--svp-body);
    font-size: 17px;
    line-height: 29px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-center .svp-lead {
    margin: 10px auto 0;
}

.svp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 42px;
    border: 0;
    border-radius: 6px;
    background: var(--svp-teal);
    box-shadow: inset 0 0 0 1px #4ba1b5;
    color: #fff;
    cursor: pointer;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
    transition: background-color .2s ease;
}

.svp-btn:hover {
    background: #076f88;
    color: #fff;
}

/* Hero (rounded card under the floating header) */
.svp-hero {
    position: relative;
    margin: -116px 23px 0;
    padding: 210px 0 126px;
    border-radius: 31px;
    overflow: hidden;
}

.svp-hero::before,
.svp-hero::after,
.svp-cta-form::before,
.svp-cta-form::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.svp-hero::before,
.svp-cta-form::before {
    background: linear-gradient(90deg, #b5daec 0%, #fff 50%, #b5daec 100%);
    opacity: .63;
}

.svp-hero::after,
.svp-cta-form::after {
    background: url('/assets/services-home/img/us-map.webp') center / 100% 100% no-repeat;
    opacity: .07;
}

.svp-hero__inner,
.svp-cta-form__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 656px) 458px;
    justify-content: space-between;
    align-items: start;
    width: min(1312px, calc(100% - 96px));
    margin: 0 auto;
}

.svp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--svp-teal);
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-avatars {
    display: inline-flex;
}

.svp-avatars img {
    width: 29px;
    height: 29px;
    border: 2px solid #eef2f5;
    border-radius: 50%;
    object-fit: cover;
}

.svp-avatars img+img {
    margin-left: -14px;
}

.svp-hero h1 {
    margin-top: 22px;
    color: var(--svp-ink);
    font-size: 42px;
    font-weight: 600;
    line-height: 54px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-hero .svp-lead {
    margin-top: 19px;
}

.svp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 31px;
    padding: 19px 30px;
    border-radius: 18px;
    background: rgba(8, 136, 167, .8);
    color: #fff;
}

.svp-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 93px;
    padding: 0 18px 0 36px;
    border-left: 1px solid rgba(255, 255, 255, .7);
}

.svp-stat:first-child {
    border-left: 0;
}

.svp-stat strong {
    font-size: 25px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.06em;
}

.svp-stat span {
    margin-top: 5px;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

/* Lead form card (wired by rich-lead-form.js through .mlm-rich-lead-form) */
.svp .svp-form.mlm-rich-lead-form {
    width: 458px;
    max-width: 100%;
    margin: 0;
    padding: 30px 28px 34px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .10), 0 32px 32px rgba(0, 0, 0, .09), 0 72px 43px rgba(0, 0, 0, .05);
    font-family: 'Poppins', Arial, sans-serif;
}

.svp .svp-form .mlm-rich-lead-form__heading {
    margin: 0 0 20px;
    text-align: center;
}

.svp .svp-form h3 {
    margin: 0;
    color: #095a60;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.04em;
}

.svp .svp-form .mlm-rich-lead-form__heading p {
    max-width: 302px;
    margin: 8px auto 0;
    color: #3d3c3c;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
}

.svp .svp-form .mlm-rich-lead-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 13px;
}

.svp .svp-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    color: #3d3c3c;
    font-size: 12px;
    font-weight: 500;
    line-height: 11px;
}

.svp .svp-form input,
.svp .svp-form select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9e9ec;
    border-radius: 4px;
    background: #f7fbfc;
    color: #3d3c3c;
    font: 500 12px 'Poppins', Arial, sans-serif;
}

.svp .svp-form select {
    color: #8aa3a8;
}

.svp .svp-form .mlm-rich-lead-form__submit {
    width: 100%;
    height: 44px;
    margin-top: 16px;
    border: 1px solid #08595f;
    border-radius: 7px;
    background: #158aa6;
    color: #fff;
    cursor: pointer;
    font: 700 12px 'Poppins', Arial, sans-serif;
}

.svp .svp-form .mlm-rich-lead-form__submit:hover {
    background: #0f6276;
}

.svp .svp-form .mlm-rich-lead-form__status {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
}

/* Overview + role cards */
.svp-overview {
    padding: 142px 0 142px;
}

.svp-overview .svp-h2 {
    max-width: 884px;
}

.svp-overview .svp-lead {
    max-width: 815px;
}

.svp .svp-banner {
    width: min(947px, 100%);
    margin: 30px auto 0;
    padding: 5px 24px;
    border-radius: 18px;
    background: var(--svp-teal);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 54px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-overview .svp-banner+.svp-lead {
    margin-top: 7px;
}

.svp-roles {
    display: grid;
    grid-template-columns: repeat(3, 255px);
    justify-content: center;
    gap: 15px;
    margin-top: 28px;
}

.svp-role {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 261px;
    padding: 12px 18px 22px;
    /* The 8px frame is a real transparent border: the photo is clipped to the padding box (but
       sized to the border box), so nothing dark sits under the frame's anti-aliased outer edge. */
    border: 8px solid transparent;
    border-radius: 49px;
    background: #222 center / cover no-repeat;
    background-origin: border-box;
    background-clip: padding-box;
    color: #fff;
    text-align: center;
}

.svp-role::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 41px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

.svp-role>* {
    position: relative;
}

.svp-role h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-role p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 17px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

/* End-to-end steps */
.svp-steps {
    position: relative;
    padding: 76px 0 75px;
}

.svp-steps::after {
    content: "";
    position: absolute;
    top: 137px;
    right: -60px;
    width: 494px;
    height: 642px;
    background: url('/assets/services-home/img/logo-watermark.webp') center / contain no-repeat;
    opacity: .5;
    pointer-events: none;
}

.svp-steps .svp-wrap {
    position: relative;
    z-index: 1;
}

.svp-steps .svp-h2 {
    max-width: 743px;
}

.svp-steps .svp-lead {
    max-width: 769px;
}

.svp-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 304px));
    justify-content: center;
    gap: 34px 31px;
    margin-top: 43px;
}

.svp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 19px 19px 26px;
    border-radius: 21px;
    background: #efeded;
    box-shadow: inset 0 0 0 1px var(--svp-teal);
    text-align: center;
}

.svp-step img {
    width: 100%;
    height: 195px;
    border-radius: 9px;
    object-fit: cover;
}

.svp-step h3 {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-top: 18px;
    color: #606060;
    font-size: 19px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-step p {
    max-width: 236px;
    margin-top: 10px;
    color: #818080;
    font-size: 13px;
    line-height: 17px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-steps .svp-btn {
    margin-top: 100px;
}

/* Smarter way (stack graphic) */
.svp-smarter {
    padding: 137px 0 117px;
}

.svp-smarter .svp-h2 {
    max-width: 872px;
}

.svp-smarter .svp-lead {
    max-width: 800px;
}

.svp-stack {
    position: relative;
    width: 1300px;
    max-width: 100%;
    height: 540px;
    margin: 61px auto 0;
}

.svp-stack img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 580px;
    transform: translateX(-50%);
}

.svp-stack__label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--svp-teal);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
    white-space: nowrap;
}

.svp-stack__label::before {
    content: "";
    width: 126px;
    height: 1px;
    background: #000;
}

.svp-stack__label::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #000;
}

.svp-stack__label--right {
    flex-direction: row;
}

.svp-stack__label--right::before {
    margin-right: 18px;
}

.svp-stack__label--right::after {
    left: 123px;
}

.svp-stack__label--left {
    flex-direction: row-reverse;
}

.svp-stack__label--left::before {
    margin-left: 18px;
}

.svp-stack__label--left::after {
    right: 123px;
}

/* Process timeline */
.svp-process {
    position: relative;
    padding: 121px 0 120px;
    background-color: var(--svp-grey);
    background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
    background-size: 100% 80px;
}

.svp-process .svp-h2 {
    max-width: 796px;
}

.svp-process .svp-lead {
    max-width: 740px;
}

.svp-timeline {
    position: relative;
    width: 1150px;
    max-width: 100%;
    height: 692px;
    margin: 86px auto 0;
}

.svp-timeline__art {
    position: absolute;
    top: 0;
    left: 50%;
    width: 465px;
    height: 692px;
    transform: translateX(-50%);
}

.svp-timeline__art img {
    width: 100%;
    height: 100%;
}

.svp-timeline__num {
    position: absolute;
    color: #fff;
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.svp-timeline__step {
    position: absolute;
    width: 340px;
}

.svp-timeline__step h3 {
    color: var(--svp-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-timeline__step p {
    margin-top: 6px;
    color: var(--svp-body);
    font-size: 13px;
    line-height: 17px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-timeline__step--left {
    text-align: right;
}

/* CTA band */
.svp-cta {
    padding: 86px 0 109px;
}

.svp-cta__frame {
    width: min(1312px, calc(100% - 48px));
    margin: 0 auto;
    padding: 20px;
    border-radius: 40px;
    box-shadow: inset 0 0 0 1px #b4b4b4;
}

.svp-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 347px;
    padding: 43px 69px;
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(180deg, var(--svp-teal) 0%, var(--svp-teal-deep) 100%);
    color: #fff;
}

.svp-cta__glow {
    position: absolute;
    top: 34px;
    left: 759px;
    width: 513px;
    height: 279px;
    fill: #30aecd;
    filter: blur(141px);
}

.svp-cta__logo {
    position: absolute;
    top: 27px;
    left: 796px;
    width: 476px;
    height: auto;
    opacity: .9;
}

.svp-cta__copy {
    position: relative;
    max-width: 605px;
}

.svp-cta h2 {
    max-width: 581px;
    color: #fff;
    font-size: 52px;
    font-weight: 600;
    line-height: 54px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-cta p {
    margin-top: 10px;
    color: #fff;
    font-size: 17px;
    line-height: 29px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 19px;
}

.svp-cta__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 37px;
    padding: 0 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.06em;
    text-transform: capitalize;
    transition: background-color .2s ease, color .2s ease;
}

.svp-cta__actions .is-solid {
    background: #fff;
    color: var(--svp-teal);
}

.svp-cta__actions .is-solid:hover {
    background: #e4f2f5;
}

.svp-cta__actions .is-outline {
    padding: 0 22px;
    box-shadow: inset 0 0 0 2px #fff;
    color: #fff;
}

.svp-cta__actions .is-outline:hover {
    background: #fff;
    color: var(--svp-teal);
}

/* Who we help carousel */
.svp-who {
    padding: 81px 0 81px;
}

.svp-who .svp-h2 {
    max-width: 696px;
}

.svp-who .svp-lead {
    max-width: 860px;
}

.svp-carousel {
    position: relative;
    margin-top: 61px;
}

.svp-carousel::before,
.svp-carousel::after {
    content: "";
    position: absolute;
    top: -61px;
    bottom: -43px;
    z-index: 2;
    width: 381px;
    max-width: 22%;
    pointer-events: none;
}

.svp-carousel::before {
    left: 0;
    background: linear-gradient(90deg, var(--svp-grey) 0%, rgba(246, 246, 246, 0) 100%);
}

.svp-carousel::after {
    right: 0;
    background: linear-gradient(-90deg, var(--svp-grey) 0%, rgba(246, 246, 246, 0) 100%);
}

.svp-carousel__track {
    display: flex;
    gap: 27px;
    overflow-x: auto;
    padding: 0 calc(50% - 127px);
    scrollbar-width: none;
}

.svp-carousel__track::-webkit-scrollbar {
    display: none;
}

.svp-who-card {
    position: relative;
    flex: 0 0 255px;
    height: 261px;
    /* Real transparent 8px border for the frame: the photo is clipped to the padding box (sized to
       the border box), so nothing sits under the frame's anti-aliased outer edge. */
    border: 8px solid transparent;
    border-radius: 49px;
    background: #ccc center / cover no-repeat;
    background-origin: border-box;
    background-clip: padding-box;
    scroll-snap-align: center;
}

.svp-who-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 41px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
    opacity: .44;
}

.svp-who-card span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding: 8px 18px;
    border-radius: 15px;
    background: var(--svp-teal);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: -0.06em;
    text-align: center;
    text-transform: capitalize;
}

.svp-arrows {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 63px;
}

.svp-arrow {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border: 0;
    border-radius: 15px;
    background: var(--svp-teal);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}

.svp-arrow:hover {
    background: var(--svp-teal-deep);
}

.svp-arrow svg {
    width: 12px;
    height: 21px;
    fill: currentColor;
}

.svp-arrow--next svg {
    transform: scaleX(-1);
}

.svp-arrows--light .svp-arrow {
    background: #d4d5d5;
    box-shadow: inset 0 0 0 1px #9e9e9e;
    color: var(--svp-teal);
}

.svp-arrows--light .svp-arrow:hover {
    background: var(--svp-teal);
    color: #fff;
}

/* Testimonials */
.svp-voices {
    padding: 103px 0 81px;
}

.svp-slider {
    width: min(984px, calc(100% - 48px));
    margin: 39px auto 0;
}

.svp-slides {
    overflow: hidden;
    border-radius: 21px;
}

.svp-track {
    display: flex;
    transition: transform .45s ease;
}

.svp-quote {
    position: relative;
    display: grid;
    grid-template-columns: 625px minmax(0, 1fr);
    flex: 0 0 100%;
    min-height: 330px;
    margin: 0;
    overflow: hidden;
    border-radius: 21px;
    background: #fff;
    text-align: center;
}

.svp-quote::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #e6e3e3;
    border-radius: 21px;
    pointer-events: none;
}

.svp-quote__text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 98px;
    border-radius: 21px 0 0 21px;
    background: #f7f7f7 url('/assets/services-home/img/logo-watermark.webp') left center / 284px 330px no-repeat;
}

.svp-quote__text p {
    max-width: 427px;
    color: #515151;
    font-size: 17px;
    line-height: 29px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-quote__who {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}

.svp-quote__who img {
    width: 189px;
    height: 189px;
    border-radius: 50%;
    object-fit: cover;
}

.svp-quote__who strong {
    margin-top: 14px;
    color: #515151;
    font-size: 17px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: -0.06em;
}

.svp-quote__who span {
    color: #515151;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

.svp-voices .svp-arrows {
    margin-top: 43px;
}

/* Why choose us */
.svp-why {
    padding: 141px 0 141px;
}

.svp-why .svp-h2 {
    max-width: 796px;
}

.svp-why .svp-lead {
    max-width: 740px;
}

.svp .svp-why-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 71px;
    list-style: none;
}

.svp-why-list li {
    min-height: 134px;
    padding: 32px 83px 30px 38px;
    border-radius: 22px;
    background: #e4e7e8;
    box-shadow: inset 0 0 0 1px #afacac;
    text-align: left;
}

.svp-why-list strong {
    display: block;
    color: var(--svp-teal);
    font-size: 19px;
    font-weight: 700;
    line-height: 20px;
}

.svp-why-list span {
    display: block;
    margin-top: 11px;
    color: #565656;
    font-size: 19px;
    line-height: 20px;
}

.svp-why-list+.svp-pill {
    margin-top: 67px;
}

.svp-why .svp-pill+.svp-lead {
    max-width: 1036px;
    margin-top: 21px;
}

/* California expertise */
.svp-california {
    padding: 172px 0 140px;
}

.svp-california__inner {
    display: grid;
    grid-template-columns: minmax(0, 646px) minmax(0, 599px);
    justify-content: space-between;
    align-items: center;
    gap: 48px;
}

.svp-california .svp-h2 {
    max-width: 594px;
    margin-top: 29px;
}

.svp-california .svp-lead {
    margin-top: 15px;
}

.svp-california .svp-btn {
    margin-top: 28px;
    padding: 0 41px;
}

.svp-california img {
    width: 599px;
    height: 347px;
    object-fit: cover;
}

/* Privacy */
.svp-privacy {
    padding: 80px 0 80px;
}

.svp-privacy .svp-h2,
.svp-privacy .svp-lead {
    max-width: 740px;
}

.svp-privacy-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 38px;
}

.svp-privacy-card {
    flex: 0 0 280px;
    min-height: 168px;
    padding: 37px 28px 20px;
    border-radius: 27px;
    background: #efefef;
    box-shadow: inset 0 0 0 1px #d0d0d0;
    text-align: left;
}

.svp-privacy-card i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--svp-teal);
}

.svp-privacy-card i img {
    width: 20px;
    height: 20px;
}

.svp-privacy-card p {
    max-width: 207px;
    margin-top: 8px;
    color: var(--svp-body);
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

/* Form CTA */
.svp-cta-form {
    position: relative;
    margin: 43px 80px 0;
    padding: 68px 0;
    overflow: hidden;
    border-radius: 31px;
}

.svp-cta-form__inner {
    align-items: center;
    width: min(1312px, calc(100% - 96px));
}

.svp-cta-form .svp-h2 {
    max-width: 657px;
}

.svp-cta-form .svp-lead {
    max-width: 646px;
    margin-top: 11px;
}

.svp-cta-form .svp-btn {
    margin-top: 19px;
}

/* FAQ */
.svp-faq {
    padding: 117px 0 160px;
}

.svp-faq h2 {
    color: #2f2f2f;
    font-size: 43px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -0.04em;
    text-align: center;
}

.svp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(1099px, 100%);
    margin: 69px auto 0;
}

.svp-faq-item {
    border-radius: 15px;
    background: #c8c8c8;
}

.svp-faq-item button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 73px;
    padding: 12px 34px;
    border: 0;
    background: none;
    color: #3d424f;
    cursor: pointer;
    font: 700 20px/22px 'Poppins', Arial, sans-serif;
    letter-spacing: -0.02em;
    text-align: left;
}

.svp-faq-item button svg {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #3d424f;
    stroke-width: 1.6;
}

.svp-faq-item button svg .v {
    transition: opacity .2s ease;
}

.svp-faq-item.is-open button svg .v {
    opacity: 0;
}

.svp-faq-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.svp-faq-item.is-open .svp-faq-item__body {
    grid-template-rows: 1fr;
}

.svp-faq-item__body p {
    overflow: hidden;
    padding: 0 34px;
    color: #3d424f;
    font-size: 17px;
    line-height: 27px;
}

.svp-faq-item.is-open .svp-faq-item__body p {
    padding-bottom: 22px;
}

/* Responsive */
@media (max-width: 1250px) {

    .svp-hero__inner,
    .svp-cta-form__inner {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 40px;
    }

    .svp-step-grid {
        grid-template-columns: repeat(2, minmax(0, 304px));
    }


    .svp-cta__glow,
    .svp-cta__logo {
        left: auto;
        right: -80px;
    }

    .svp-cta-form {
        margin: 43px 23px 0;
    }
}

@media (max-width: 980px) {
    .svp-hero {
        padding: 180px 0 72px;
    }

    .svp-hero__inner,
    .svp-cta-form__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        width: calc(100% - 48px);
    }

    .svp .svp-form.mlm-rich-lead-form {
        width: 100%;
    }

    .svp-h2,
    .svp-cta h2 {
        font-size: 38px;
        line-height: 42px;
    }

    .svp-roles {
        grid-template-columns: repeat(2, minmax(0, 255px));
    }

    .svp-stack {
        height: auto;
        transform: none;
    }

    .svp-stack img {
        position: static;
        display: block;
        width: min(580px, 100%);
        margin: 0 auto;
        transform: none;
    }

    .svp-stack__label {
        display: none;
    }

    .svp-stack__list {
        display: grid !important;
    }

    .svp-timeline {
        height: auto;
    }

    .svp-timeline__art,
    .svp-timeline__num {
        display: none;
    }

    .svp-timeline__step {
        position: static;
        width: auto;
        margin-bottom: 16px;
        padding: 20px 24px;
        border-left: 4px solid var(--svp-teal);
        border-radius: 12px;
        background: #fff;
        text-align: left;
    }

    .svp-quote {
        grid-template-columns: 1fr;
    }

    .svp-quote__text {
        padding: 40px 32px;
        border-radius: 21px 21px 0 0;
        background-size: auto 100%;
    }

    .svp-cta__glow,
    .svp-cta__logo {
        display: none;
    }

    .svp-california__inner {
        grid-template-columns: 1fr;
    }

    .svp-california img {
        width: 100%;
        height: auto;
    }

    .svp-why-list li {
        padding: 26px 28px;
    }

    .svp-why-list strong,
    .svp-why-list span {
        font-size: 17px;
        line-height: 22px;
    }
}

/* Mobile floating header: 16px offset + 64px bar, card starts 10px from the top. */
@media (max-width: 900px) {
    .svp-hero {
        margin: -70px 10px 0;
        padding-top: 112px;
    }
}

.svp-stack__list {
    display: none;
    gap: 8px;
    max-width: 420px;
    margin: 28px auto 0;
    padding: 0;
    color: var(--svp-teal);
    font-weight: 700;
    list-style: none;
    counter-reset: svp-stack;
}

.svp-stack__list li {
    counter-increment: svp-stack;
    padding: 10px 16px;
    border-radius: 10px;
    background: #e4f2f5;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    text-transform: capitalize;
}

.svp-stack__list li::before {
    content: counter(svp-stack) ". ";
}

@media (max-width: 640px) {

    .svp-hero {
        padding-top: 100px;
    }

    .svp-hero h1 {
        font-size: 32px;
        line-height: 40px;
    }

    .svp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 14px;
        padding: 18px 10px;
    }

    .svp-stat {
        padding-left: 16px;
    }

    .svp-stat:nth-child(3) {
        border-left: 0;
    }

    .svp .svp-form .mlm-rich-lead-form__grid {
        grid-template-columns: 1fr;
    }

    .svp-h2,
    .svp-cta h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .svp-lead {
        font-size: 15px;
        line-height: 25px;
    }

    .svp-banner {
        font-size: 18px;
        line-height: 26px;
        padding: 14px 18px;
    }

    .svp-roles,
    .svp-step-grid {
        grid-template-columns: minmax(0, 320px);
    }

    .svp-overview,
    .svp-steps,
    .svp-smarter,
    .svp-process,
    .svp-who,
    .svp-voices,
    .svp-why,
    .svp-california,
    .svp-privacy,
    .svp-faq {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .svp-cta__inner {
        padding: 36px 24px;
    }

    .svp-cta__frame {
        padding: 10px;
        border-radius: 28px;
    }

    .svp-cta-form {
        margin: 24px 10px 0;
        padding: 40px 0;
    }

    .svp-privacy-card {
        flex-basis: 100%;
    }

    .svp-faq h2 {
        font-size: 32px;
        line-height: 38px;
    }

    .svp-faq-item button {
        padding: 14px 20px;
        font-size: 16px;
        line-height: 21px;
    }

    .svp-faq-item__body p {
        padding: 0 20px;
        font-size: 15px;
        line-height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .svp-track,
    .svp-faq-item__body {
        transition: none;
    }
}

/* Fine-tuning against the Figma measurements */

/* Pills as block-level boxes: inline-flex added line-box space around them. */
.svp .svp-pill {
    display: flex;
    width: max-content;
    max-width: 100%;
}

.svp-center .svp-pill {
    margin-right: auto;
    margin-left: auto;
}

.svp .svp-form h3 {
    line-height: 16px;
}

.svp .svp-form .mlm-rich-lead-form__heading {
    margin-bottom: 13px;
}

.svp .svp-form .mlm-rich-lead-form__heading p {
    margin-top: 10px;
}

.svp .svp-form .mlm-rich-lead-form__grid {
    row-gap: 12px;
}

.svp .svp-form .mlm-rich-lead-form__submit {
    min-height: 0;
    height: 44px;
    padding: 0;
}

.svp .svp-form.mlm-rich-lead-form {
    padding-bottom: 45px;
}

.svp .svp-form .mlm-rich-lead-form__status:empty {
    display: none;
}

.svp-california {
    padding-top: 114px;
}

.svp-step h3 {
    margin-top: 15px;
}

.svp-step p {
    margin-top: 8px;
}

/* Snap only on touch-size screens; on desktop the carousel rests as designed (gap centred). */
@media (max-width: 980px) {
    .svp-carousel__track {
        scroll-snap-type: x mandatory;
    }
}

/* The legacy theme keeps button text on one line; FAQ questions must wrap on phones. */
.svp-faq-item button {
    white-space: normal;
    word-break: normal;
}

/* Laptops: the stack and timeline are drawn on fixed canvases (1300 / 1180px), so scale them as a whole. */
@media (min-width: 981px) and (max-width: 1250px) {
    .svp-stack,
    .svp-timeline {
        left: 50%;
        max-width: none;
        transform: translateX(-50%) scale(.72);
        transform-origin: top center;
        margin-left: 0;
        margin-right: 0;
    }

    .svp-stack {
        width: 1300px;
        margin-bottom: -151px;
    }

    .svp-timeline {
        width: 1180px;
        margin-bottom: -194px;
    }
}

/* California photo: Figma's notched shape (rounded corners + bottom-left cut-out), drawn as an SVG clip. */
.svp-california__media {
    display: block;
    width: 599px;
    max-width: 100%;
    height: auto;
    justify-self: end;
}

@media (max-width: 980px) {
    .svp-california__media {
        width: 100%;
        justify-self: stretch;
    }
}

/* Variants used by some service pages */
.svp-roles--4 {
    grid-template-columns: repeat(4, 255px);
}

.svp-process:not(.svp-grey) {
    background: #fff;
}

@media (max-width: 1250px) {
    .svp-roles--4 {
        grid-template-columns: repeat(2, 255px);
    }
}

@media (max-width: 640px) {
    .svp-roles--4 {
        grid-template-columns: minmax(0, 320px);
    }
}

/* Eyebrow as a block-level row (inline-flex added line-box space under it). */
.svp-eyebrow {
    display: flex;
    width: max-content;
    max-width: 100%;
}

/* Cards with Figma text boxes (generator "pos"): on desktop the title and copy sit exactly where
   the design places them; below 981px they fall back to the normal flow layout. */
@media (min-width: 981px) {
    .svp-role.is-pos,
    .svp-step.is-pos {
        display: block;
    }

    .svp-role.is-pos {
        height: 261px;
        padding: 0;
    }

    /* Offsets are measured from the card's outer edge; the border shifts the padding box by 8px. */
    .svp .svp-role.is-pos>h3 {
        top: calc(var(--t1) - 8px);
        left: calc(var(--l1) - 8px);
    }

    .svp .svp-role.is-pos>p {
        top: calc(var(--t2) - 8px);
        left: calc(var(--l2) - 8px);
    }

    .svp-step.is-pos {
        position: relative;
        height: var(--h, 379px);
        padding: 20px 20px 0 19px;
    }

    .svp .is-pos>h3,
    .svp .is-pos>p {
        position: absolute;
        top: var(--t1);
        left: var(--l1);
        width: var(--w1);
        max-width: none;
        min-height: 0;
        margin: 0;
    }

    .svp .is-pos>h3 {
        display: block;
        line-height: var(--lh1);
    }

    .svp .is-pos>p {
        top: var(--t2);
        left: var(--l2);
        width: var(--w2);
    }
}

/* Right-hand timeline steps read left-aligned, as in the design (not centred by .svp-center). */
.svp-timeline__step:not(.svp-timeline__step--left) {
    text-align: left;
}

/* Who-card labels wrap at the design's text width (--lw, set per card by the generator). */
@media (min-width: 981px) {
    .svp-who-card span[style*="--lw"] {
        padding-right: calc((223px - var(--lw)) / 2);
        padding-left: calc((223px - var(--lw)) / 2);
    }
}

/* Testimonial role lines are split explicitly; each stays on one line. */
.svp-quote__who span {
    white-space: nowrap;
}

/* Hero stats placed from the Figma frame (generator "stats_pos"), desktop only. */
.svp-stats__sep {
    display: none;
}

@media (min-width: 1251px) {
    .svp-stats.is-pos {
        position: relative;
        display: block;
        width: var(--sw);
        max-width: none;
        height: var(--sh);
        padding: 0;
    }

    .svp-stats.is-pos .svp-stat {
        display: contents;
    }

    .svp-stats.is-pos strong,
    .svp-stats.is-pos span {
        position: absolute;
        top: var(--t);
        left: var(--l);
        width: var(--w);
        margin: 0;
    }

    .svp-stats.is-pos .svp-stats__sep {
        position: absolute;
        display: block;
        width: 1px;
        background: rgba(255, 255, 255, .7);
    }
}

/* Letter-spacing as in the Figma text styles (small copy -5%, form text -4%). */
.svp-role p,
.svp-step p {
    letter-spacing: -0.05em;
}

.svp-why-list strong,
.svp-why-list span {
    letter-spacing: -0.05em;
}

.svp .svp-form .mlm-rich-lead-form__heading h3 {
    letter-spacing: -0.06em;
}

.svp .svp-form .mlm-rich-lead-form__heading p,
.svp .svp-form label,
.svp .svp-form .mlm-rich-lead-form__submit {
    letter-spacing: -0.04em;
}

.svp-cta__actions a {
    line-height: 25px;
}

/* Quotes start at a fixed top, as in the design (shorter quotes do not drop to the middle). */
@media (min-width: 981px) {
    .svp-quote__text {
        align-items: flex-start;
        padding-top: 108px;
    }
}

/* Laptops (1360-1599px): keep the hero and bottom form content at the design's 1312px; only the
   outer gutters shrink. Below 1360px service-page.js zooms the whole page to keep the proportions. */
@media (min-width: 1251px) {
    .svp-hero__inner,
    .svp-cta-form__inner {
        width: min(1312px, calc(100% - 28px));
    }

    .svp-hero {
        margin-right: max(10px, min(23px, calc((100% - 1360px) / 2)));
        margin-left: max(10px, min(23px, calc((100% - 1360px) / 2)));
    }

    .svp-cta-form {
        margin-right: max(10px, min(80px, calc((100% - 1340px) / 2)));
        margin-left: max(10px, min(80px, calc((100% - 1340px) / 2)));
    }
}

/* FAQ questions use the design's -4% tracking. */
.svp-faq-item button {
    letter-spacing: -0.04em;
}

/* FAQ as in the Figma component: grey closed rows with an outlined plus; the open row turns teal
   with white text and a white disc holding a teal cross. */
.svp-faq-item {
    background: #c8c8c8;
    transition: background-color .2s ease;
}

.svp-faq-item.is-open {
    background: linear-gradient(180deg, #0888a7 0%, #07667d 100%);
}

.svp-faq-item button {
    align-items: center;
    padding: 12px 23px 12px 35px;
    color: #3d424f;
    font: 700 20px/1.12 'Poppins', Arial, sans-serif;
    letter-spacing: -0.04em;
}

.svp-faq-item.is-open button {
    align-items: flex-start;
    min-height: 0;
    padding: 25px 23px 16px 35px;
    color: #fff;
}

.svp-faq-item button svg {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #4c4c4c;
    stroke-width: 2;
    stroke-linecap: round;
}

.svp-faq-item button svg g {
    transform-origin: 13.15px 13.15px;
    transition: transform .2s ease;
}

.svp-faq-item.is-open button svg {
    margin-top: -2px;
}

.svp-faq-item.is-open button svg circle {
    fill: #fff;
    stroke: #fff;
}

.svp-faq-item.is-open button svg g {
    stroke: #0888a7;
    transform: rotate(45deg);
}

.svp-faq-item__body p {
    padding: 0 58px 0 35px;
    color: #fff;
    font-size: 20px;
    line-height: 1.38;
    letter-spacing: -0.04em;
}

.svp-faq-item.is-open .svp-faq-item__body p {
    padding-bottom: 19px;
}

@media (max-width: 640px) {
    .svp-faq-item button,
    .svp-faq-item.is-open button {
        padding-right: 16px;
        padding-left: 18px;
        font-size: 16px;
    }

    .svp-faq-item__body p {
        padding-right: 18px;
        padding-left: 18px;
        font-size: 15px;
    }
}

/* Card frames from Figma: role and who cards carry an 8px inside stroke (#f2e7e6 -> #e2e2e2, top
   right to bottom left) over the photo. */
.svp-role::after,
.svp-who-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 8px;
    border-radius: inherit;
    background: linear-gradient(to bottom left, #f2e7e6, #e2e2e2);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* The role and who frames are a real border, so its ring sits 8px outside the padding box. */
.svp-role::after,
.svp-who-card::after {
    inset: -8px;
}

.svp-who-card span {
    z-index: 3;
}

/* Step cards: grey 1px frame (the teal stroke sits under it in the design); teal on hover. */
.svp-step {
    box-shadow: inset 0 0 0 1px #c4c4c4;
    transition: box-shadow .2s ease;
}

.svp-step:hover {
    box-shadow: inset 0 0 0 1px var(--svp-teal);
}

/* Hero stats dividers. */
.svp-stat {
    border-left-color: #e9e9e9;
}

.svp-stats.is-pos .svp-stats__sep {
    background: #e9e9e9;
}

/* Privacy cards: hover variant from the Figma component (light fill, teal frame, soft shadow). */
.svp-privacy-card {
    transition: background-color .2s ease, box-shadow .2s ease;
}

.svp-privacy-card:hover {
    background: #f8f8f8;
    box-shadow: inset 0 0 0 1px var(--svp-teal), 0 5px 10px rgba(0, 0, 0, .1), 0 19px 19px rgba(0, 0, 0, .09), 0 43px 26px rgba(0, 0, 0, .05);
}

/* Desktop offsets taken from the Figma frames. */
@media (min-width: 981px) {
    /* The testimonial name column centres 8px left of our grid column. */
    .svp-quote__who {
        position: relative;
        left: -8px;
    }

    /* Left-aligned California pill: 29px side padding (211px box for "California Expertise"). */
    .svp-california .svp-pill {
        padding: 0 29px;
    }

    /* The privacy heading group sits 5px right of centre in every frame. */
    .svp-privacy .svp-pill,
    .svp-privacy .svp-h2,
    .svp-privacy .svp-lead {
        position: relative;
        left: 5px;
    }
}

/* FAQ rows are buttons only for keyboard/screen-reader access: cancel the theme's button border,
   background and hover/focus colour so they look exactly like the design. */
.svp .svp-faq-item button,
.svp .svp-faq-item button:hover,
.svp .svp-faq-item button:focus,
.svp .svp-faq-item button:active {
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    background: none !important;
    box-shadow: none;
    color: #3d424f !important;
}

.svp .svp-faq-item.is-open button,
.svp .svp-faq-item.is-open button:hover,
.svp .svp-faq-item.is-open button:focus,
.svp .svp-faq-item.is-open button:active {
    color: #fff !important;
}

/* The WordPress custom CSS gives every button a 1px #00585f border (!important); carousel arrows have
   no border in the design (the light ones use their own inset frame). */
.svp .svp-arrow {
    border: 0 !important;
}

.svp .svp-faq-item button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Endless "who we help" strip: the cloned sets fill both sides, so no side padding is needed. */
.svp-carousel.is-loop .svp-carousel__track {
    padding-right: 0;
    padding-left: 0;
}

/* FAQ open/close without jumps: every property that differs between the closed and open row is
   animated with the same duration and easing, so the row grows smoothly instead of snapping. The
   teal gradient can't be transitioned directly, so it fades in as a layer under the content. */
.svp-faq-item {
    --faq-ease: cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .35s var(--faq-ease);
}

.svp-faq-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #0888a7 0%, #07667d 100%);
    opacity: 0;
    transition: opacity .35s var(--faq-ease);
}

.svp-faq-item.is-open {
    background: #c8c8c8;
}

.svp-faq-item.is-open::before {
    opacity: 1;
}

.svp-faq-item button {
    transition: padding .35s var(--faq-ease), min-height .35s var(--faq-ease), color .35s var(--faq-ease);
}

.svp-faq-item button svg {
    transition: margin .35s var(--faq-ease);
}

.svp-faq-item button svg circle {
    transition: fill .35s var(--faq-ease), stroke .35s var(--faq-ease);
}

.svp-faq-item button svg g {
    transition: transform .35s var(--faq-ease), stroke .35s var(--faq-ease);
}

.svp-faq-item__body {
    transition: grid-template-rows .35s var(--faq-ease);
}

.svp-faq-item__body p {
    opacity: 0;
    transition: padding .35s var(--faq-ease), opacity .3s var(--faq-ease);
}

.svp-faq-item.is-open .svp-faq-item__body p {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    .svp-faq-item,
    .svp-faq-item::before,
    .svp-faq-item button,
    .svp-faq-item button svg,
    .svp-faq-item button svg circle,
    .svp-faq-item button svg g,
    .svp-faq-item__body p {
        transition: none;
    }
}

/* Phones and tablets: nothing has a fixed height or an auto-sized track that can push past the screen.
   Pills and buttons grow with their label (two lines on narrow phones) instead of clipping it, and
   the single hero/form column may shrink below the width of its widest child. */
@media (max-width: 980px) {
    .svp-hero__inner,
    .svp-cta-form__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .svp-hero__copy,
    .svp-hero__inner>*,
    .svp-cta-form__inner>* {
        min-width: 0;
    }

    .svp .svp-pill {
        height: auto;
        min-height: 46px;
        padding: 8px 24px;
        text-align: center;
        line-height: 1.3;
    }

    .svp-btn,
    .svp-cta__actions a {
        height: auto;
        min-height: 46px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        line-height: 1.3;
    }

    /* The timeline is built with inline pixel sizes for the desktop canvas (height, per-step width and
       offsets). On phones the steps stack, so those must not apply: the fixed height let the last
       steps hang out of the section over the call-to-action below. */
    .svp-timeline {
        height: auto !important;
    }

    .svp-timeline__step,
    .svp-timeline__step--left {
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: 100%;
    }
}

/* Phones: tighter space above and below the call-to-action. */
@media (max-width: 767px) {
    .svp-cta {
        padding: 16px 0;
    }
}