/*
 * Services page (/services/). Loaded on that page only, and every rule is
 * scoped under .ec-svc, so no other page changes.
 *
 * Flat and typographic: solid surfaces, hairline borders, no gradients or
 * glow. Brand yellow is kept for the main button and one accent line; the
 * service colours appear only as small icons.
 */

.ec-svc {
    --svc-bg: #fbfaf9;
    --svc-band: #f3f2ef;
    --svc-card: #ffffff;
    --svc-ink: #111214;
    --svc-soft: #4b4d55;
    --svc-muted: #8a8c94;
    --svc-line: #e6e4df;
    --svc-line-strong: #d6d3cd;
    --svc-yellow: #ffb81c;
    --svc-yellow-press: #f2a900;
    --svc-display: "Wix Madefor Display", "DM Sans", sans-serif;
    --svc-text: "Wix Madefor Text", "DM Sans", sans-serif;
    position: relative;
    background: var(--svc-bg);
    color: var(--svc-ink);
    font-family: var(--svc-text);
    -webkit-font-smoothing: antialiased;
}

.ec-svc h1,
.ec-svc h2,
.ec-svc h3 {
    margin: 0;
    color: var(--svc-ink);
    font-family: var(--svc-display);
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* :where() keeps this reset weaker than the margins set on named paragraphs below. */
:where(.ec-svc) p {
    margin: 0;
}

.ec-svc a:focus-visible {
    outline: 2px solid var(--svc-ink);
    outline-offset: 3px;
}

/* The site's yellow button, flat here. */
.ec-svc .ec-btn--primary {
    background: var(--svc-yellow);
    box-shadow: none;
    color: var(--svc-ink);
    font-family: var(--svc-text);
    font-weight: 600;
}

.ec-svc .ec-btn--primary:hover,
.ec-svc .ec-btn--primary:focus-visible {
    background: var(--svc-yellow-press);
    box-shadow: none;
    transform: none;
}

.ec-svc-textlink {
    color: var(--svc-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--svc-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.15s ease;
}

.ec-svc-textlink:hover {
    text-decoration-color: var(--svc-ink);
}

.ec-svc-textlink > span[aria-hidden] {
    display: inline-block;
    margin-left: 4px;
    text-decoration: none;
}

.ec-svc-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.ec-svc-accent--yellow { --svc-accent: #d08a00; }
.ec-svc-accent--coral { --svc-accent: #e0533e; }
.ec-svc-accent--blue { --svc-accent: #1570ef; }
.ec-svc-accent--purple { --svc-accent: #7c3aed; }
.ec-svc-accent--green { --svc-accent: #16a34a; }
.ec-svc-accent--ink { --svc-accent: var(--svc-ink); }

/* ---------- sections ---------- */

.ec-svc-section {
    padding: clamp(56px, 8vw, 104px) 0;
    scroll-margin-top: calc(var(--ec-header-height, 92px) + 8px);
}

.ec-svc-section--band {
    background: var(--svc-band);
}

.ec-svc-heading {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.ec-svc-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
}

.ec-svc-lead {
    max-width: 40em;
    margin-top: 14px;
    color: var(--svc-soft);
    font-size: 1.08rem;
    line-height: 1.6;
}

/* ---------- hero ---------- */

.ec-svc-hero {
    padding: clamp(48px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
}

.ec-svc-hero__top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 28px 56px;
    align-items: end;
}

.ec-svc-hero__title {
    font-size: clamp(2.7rem, 6.6vw, 5.6rem);
    letter-spacing: -0.04em;
    line-height: 1;
}

.ec-svc-hero__title span {
    display: block;
    color: var(--svc-muted);
}

.ec-svc-hero__lead {
    color: var(--svc-soft);
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    line-height: 1.6;
}

.ec-svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 26px;
}

.ec-svc-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(48px, 7vw, 88px) 0 0;
    border-top: 1px solid var(--svc-line);
}

.ec-svc-stats__item {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 8px;
    padding: 26px 24px 0 0;
}

.ec-svc-stats__item + .ec-svc-stats__item {
    padding-left: 28px;
    border-left: 1px solid var(--svc-line);
}

/* The one yellow line on the page marks the proof figure. */
.ec-svc-stats__item--proof::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 56px;
    height: 2px;
    background: var(--svc-yellow);
}

.ec-svc-stats dt {
    color: var(--svc-soft);
    font-size: 0.95rem;
}

.ec-svc-stats dd {
    margin: 0;
    font-family: var(--svc-display);
    font-size: clamp(2.4rem, 4.6vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
}

.ec-svc-stats dd small {
    margin-left: 2px;
    color: var(--svc-muted);
    font-size: 0.4em;
    letter-spacing: -0.01em;
}

/* ---------- platforms ---------- */

.ec-svc-platforms__row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px 32px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--svc-line);
}

.ec-svc-platforms__row:last-child {
    border-bottom: 1px solid var(--svc-line);
}

.ec-svc-platforms__label {
    padding-top: 15px;
    color: var(--svc-soft);
    font-family: var(--svc-text);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

.ec-svc-platforms__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-svc-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--svc-line);
    border-radius: 12px;
    background: var(--svc-card);
    color: var(--svc-ink);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.ec-svc-logo img {
    display: block;
    width: auto;
    height: 24px;
    max-width: 120px;
    object-fit: contain;
}

.ec-svc-logo--wordmark img {
    height: 22px;
}

.ec-svc-logo--text span {
    font-family: var(--svc-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ec-svc-logo .ec-svc-icon {
    width: 22px;
    height: 22px;
}

/* ---------- services ---------- */

.ec-svc-bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.ec-svc-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 2.8vw, 32px);
    border-radius: 20px;
    background: var(--svc-card);
}

.ec-svc-card--marketplace {
    grid-column: span 4;
}

.ec-svc-card--trademark {
    grid-column: span 6;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head items" "summary items";
    align-content: start;
    gap: 12px 48px;
}

.ec-svc-card--trademark .ec-svc-card__head { grid-area: head; }
.ec-svc-card--trademark .ec-svc-card__summary { grid-area: summary; }

.ec-svc-card--trademark .ec-svc-card__items {
    grid-area: items;
    align-self: end;
    margin: 0;
}

.ec-svc-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.ec-svc-card__icon {
    color: var(--svc-accent);
}

.ec-svc-card__title {
    font-size: clamp(1.2rem, 1.6vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.ec-svc-card__summary {
    color: var(--svc-soft);
    line-height: 1.6;
}

.ec-svc-card__items {
    display: grid;
    column-gap: 32px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ec-svc-card--marketplace .ec-svc-card__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ec-svc-card__items li {
    padding: 10px 0;
    border-top: 1px solid var(--svc-line);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* ---------- clients ---------- */

.ec-svc-clients {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-svc-client {
    flex: 0 1 calc((100% - 4 * 12px) / 5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 24px 14px 22px;
    border: 1px solid var(--svc-line);
    border-radius: 16px;
    background: var(--svc-card);
    text-align: center;
}

.ec-svc-client__mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #fff1cc;
    color: var(--svc-ink);
    font-family: var(--svc-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ec-svc-client__name {
    max-width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ec-svc-client__place {
    color: var(--svc-soft);
    font-size: 0.86rem;
    line-height: 1.4;
}

/* Preview only: marks a location still to be confirmed. */
.ec-svc-client__gap {
    display: inline-block;
    padding: 1px 7px;
    border: 1px dashed #c98a00;
    border-radius: 6px;
    background: #fff4d6;
    color: #6b4800;
    font-size: 0.76rem;
    font-style: normal;
}

/* ---------- pricing ---------- */

.ec-svc-pricing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.ec-svc-price {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 3.6vw, 44px);
    border-radius: 20px;
    background: var(--svc-ink);
    color: #fff;
}

.ec-svc-price__value {
    color: var(--svc-yellow);
    font-family: var(--svc-display);
    font-size: clamp(3.4rem, 6.6vw, 4.8rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}

.ec-svc-price__from {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.64);
    font-family: var(--svc-text);
    font-size: 1rem;
    letter-spacing: 0;
}

.ec-svc-price__value small {
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.34em;
    letter-spacing: -0.01em;
}

.ec-svc-price__terms {
    margin: 0;
}

.ec-svc-price__terms div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ec-svc-price__terms div:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ec-svc-price__terms dt {
    color: rgba(255, 255, 255, 0.72);
}

.ec-svc-price__terms dd {
    margin: 0;
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.ec-svc-price__note {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.92rem;
    line-height: 1.6;
}

.ec-svc-fit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(28px, 3.6vw, 44px);
    border-radius: 20px;
    background: var(--svc-card);
}

.ec-svc-fit p {
    color: var(--svc-soft);
    line-height: 1.65;
}

.ec-svc-fit__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ec-svc-fit__alt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding-top: 26px;
    border-top: 1px solid var(--svc-line);
}

/* ---------- WhatsApp buttons ---------- */

.ec-svc-wa-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ec-svc-wa {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 16px 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ec-svc-wa__icon {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #25d366;
}

.ec-svc-wa__icon::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: #fff;
    -webkit-mask: url("../images/whatsapp.svg") center / contain no-repeat;
    mask: url("../images/whatsapp.svg") center / contain no-repeat;
}

.ec-svc-wa__text {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.ec-svc-wa__text strong {
    font-size: 1rem;
    font-weight: 600;
}

.ec-svc-wa__text span {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* On the black pricing card. */
.ec-svc-wa-group--dark .ec-svc-wa {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.ec-svc-wa-group--dark .ec-svc-wa:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ec-svc-wa-group--dark .ec-svc-wa__text span {
    color: rgba(255, 255, 255, 0.7);
}

.ec-svc .ec-svc-wa-group--dark .ec-svc-wa:focus-visible {
    outline-color: var(--svc-yellow);
}

/* On the white contact card. */
.ec-svc-wa-group--ink .ec-svc-wa {
    background: var(--svc-ink);
    color: #fff;
}

.ec-svc-wa-group--ink .ec-svc-wa:hover {
    background: #2a2b30;
}

.ec-svc-wa-group--ink .ec-svc-wa__text span {
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- training ---------- */

.ec-svc-trainings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-svc-training {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
    border: 1px solid var(--svc-line);
    border-radius: 20px;
    background: var(--svc-card);
    transition: border-color 0.15s ease;
}

.ec-svc-training:hover {
    border-color: var(--svc-line-strong);
}

.ec-svc-training:focus-within {
    outline: 2px solid var(--svc-ink);
    outline-offset: 3px;
}

.ec-svc-training .ec-svc-card__icon {
    margin-bottom: 10px;
}

.ec-svc-training__title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ec-svc-training p {
    color: var(--svc-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ec-svc-training__link {
    margin-top: auto;
    padding-top: 6px;
}

/* The whole card opens the course; the visible link names it. */
.ec-svc-training__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.ec-svc .ec-svc-training__link:focus-visible {
    outline: none;
}

/* ---------- inquire + disclaimer ---------- */

#inquire {
    padding-bottom: clamp(32px, 4vw, 48px);
}

.ec-svc-inquire {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 56px);
    border-radius: 24px;
    background: var(--svc-card);
    text-align: center;
}

.ec-svc-inquire .ec-svc-lead {
    max-width: 34em;
}

.ec-svc-inquire .ec-svc-wa-group {
    width: min(540px, 100%);
    margin-top: 28px;
}

.ec-svc-inquire__note {
    margin: 14px 0 20px;
    color: var(--svc-soft);
    font-size: 0.88rem;
}

.ec-svc-disclaimer {
    max-width: 860px;
    margin: clamp(28px, 4vw, 40px) auto 0;
    color: #6b6d75;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
    .ec-svc-hero__top,
    .ec-svc-pricing {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-svc-hero__side {
        max-width: 560px;
    }

    .ec-svc-platforms__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ec-svc-platforms__label {
        padding-top: 0;
    }

    .ec-svc-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ec-svc-card {
        grid-column: span 1;
    }

    .ec-svc-card--marketplace,
    .ec-svc-card--trademark {
        grid-column: span 2;
    }

    .ec-svc-client {
        flex-basis: calc((100% - 2 * 12px) / 3);
    }

    .ec-svc-trainings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ec-svc-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-svc-stats__item,
    .ec-svc-stats__item + .ec-svc-stats__item {
        padding: 20px 0;
        border-left: 0;
    }

    .ec-svc-stats__item + .ec-svc-stats__item {
        border-top: 1px solid var(--svc-line);
    }

    .ec-svc-bento,
    .ec-svc-trainings,
    .ec-svc-wa-group,
    .ec-svc-card--marketplace .ec-svc-card__items {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-svc-card,
    .ec-svc-card--marketplace,
    .ec-svc-card--trademark {
        grid-column: auto;
    }

    .ec-svc-card--trademark {
        display: flex;
    }

    .ec-svc-logo {
        height: 48px;
        padding: 0 13px;
    }

    .ec-svc-logo img {
        height: 21px;
    }

    .ec-svc-logo--wordmark img {
        height: 19px;
    }

    .ec-svc-client {
        flex-basis: calc((100% - 12px) / 2);
        padding: 20px 10px 18px;
    }

    .ec-svc-client__name {
        font-size: 0.88rem;
    }

    .ec-svc-price__terms div {
        flex-direction: column;
        gap: 2px;
    }

    .ec-svc-price__terms dd {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-svc-textlink,
    .ec-svc-wa,
    .ec-svc-training {
        transition: none;
    }
}