/* ═══════════════════════════════════════
   SPRUCE UP — services.css  v2.0
   Prefix: sv-
═══════════════════════════════════════ */
:root {
    --sv-yellow:   #F5C800;
    --sv-yellow-h: #e0b500;
    --sv-charcoal: #1C1C1C;
    --sv-dark:     #141414;
    --sv-white:    #ffffff;
    --sv-gray:     #f4f4f4;
    --sv-gray-2:   #f9f9f9;
    --sv-border:   rgba(28,28,28,0.09);
    --sv-text-dim: #666666;
    --sv-font:     'Poppins', sans-serif;
    --sv-radius:   8px;
    --sv-ease:     cubic-bezier(0.4,0,0.2,1);
    --sv-t:        0.22s var(--sv-ease);
    --sv-inner:    1200px;
}

.sv-inner { max-width: var(--sv-inner); margin: 0 auto; padding: 0 48px; }

/* Breadcrumb */
.sv-breadcrumb { display:flex; align-items:center; gap:8px; font-family:var(--sv-font); font-size:11px; color:rgba(28,28,28,0.45); margin-bottom:32px; }
.sv-breadcrumb a { color:rgba(28,28,28,0.55); text-decoration:none; }
.sv-breadcrumb a:hover { color:var(--sv-charcoal); }

/* Eyebrow */
.sv-eyebrow { display:block; font-family:var(--sv-font); font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--sv-yellow); margin-bottom:14px; }

/* Section titles */
.sv-section-title { font-family:var(--sv-font); font-size:40px; font-weight:800; line-height:1.1; color:var(--sv-white); margin:0 0 12px; letter-spacing:-0.02em; }
.sv-section-title--dark { color:var(--sv-charcoal); }
.sv-section-accent { width:48px; height:4px; background:var(--sv-yellow); border-radius:2px; margin:18px 0 0; }
.sv-section-sub { font-family:var(--sv-font); font-size:15px; line-height:1.75; color:rgba(255,255,255,0.55); margin:0; }
.sv-section-sub--dark { color:var(--sv-text-dim); }

/* Buttons */
.sv-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; font-family:var(--sv-font); font-size:13px; font-weight:700; letter-spacing:0.02em; text-decoration:none; border-radius:var(--sv-radius); border:2px solid transparent; cursor:pointer; transition:background var(--sv-t), transform var(--sv-t), border-color var(--sv-t), color var(--sv-t); }
.sv-btn svg { width:13px; height:13px; flex-shrink:0; transition:transform var(--sv-t); }
.sv-btn:hover svg { transform:translateX(3px); }
.sv-btn--yellow { background:var(--sv-yellow); color:var(--sv-charcoal); border-color:var(--sv-yellow); }
.sv-btn--yellow:hover { background:var(--sv-yellow-h); transform:translateY(-1px); }
.sv-btn--outline-dark { background:transparent; color:var(--sv-charcoal); border-color:rgba(28,28,28,0.25); }
.sv-btn--outline-dark:hover { border-color:var(--sv-charcoal); }
.sv-btn--dark { background:var(--sv-charcoal); color:var(--sv-white); border-color:var(--sv-charcoal); }
.sv-btn--dark:hover { background:#2e2e2e; }

/* ══ HERO — light ══ */
.sv-hero { background:#fafafa; padding:56px 0 64px; border-bottom:1px solid var(--sv-border); }
.sv-hero__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sv-hero__title { font-family:var(--sv-font); font-size:56px; font-weight:800; line-height:1.05; color:var(--sv-charcoal); margin:0 0 18px; letter-spacing:-0.02em; }
.sv-hero__desc { font-family:var(--sv-font); font-size:16px; line-height:1.75; color:var(--sv-text-dim); margin:0 0 32px; }
.sv-hero__desc strong { color:var(--sv-charcoal); }
.sv-hero__actions { display:flex; gap:14px; flex-wrap:wrap; }
.sv-hero__img-wrap { position:relative; border-radius:10px; overflow:hidden; height:360px; }
.sv-hero__img-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.sv-hero__img-badge { position:absolute; bottom:20px; left:20px; background:var(--sv-yellow); border-radius:6px; padding:10px 16px; }
.sv-hero__img-badge-num { display:block; font-family:var(--sv-font); font-size:26px; font-weight:800; color:var(--sv-charcoal); line-height:1; }
.sv-hero__img-badge-num em { font-style:normal; font-size:16px; }
.sv-hero__img-badge-label { display:block; font-family:var(--sv-font); font-size:10px; font-weight:600; color:rgba(28,28,28,0.65); margin-top:2px; }
.sv-hero__stats { display:flex; gap:0; margin-top:16px; background:var(--sv-white); border:1px solid var(--sv-border); border-radius:var(--sv-radius); overflow:hidden; }
.sv-hero__stat { flex:1; padding:18px 20px; border-right:1px solid var(--sv-border); text-align:center; }
.sv-hero__stat:last-child { border-right:none; }
.sv-hero__stat-num { display:block; font-family:var(--sv-font); font-size:26px; font-weight:800; color:var(--sv-charcoal); }
.sv-hero__stat-label { display:block; font-family:var(--sv-font); font-size:11px; color:var(--sv-text-dim); margin-top:2px; }

/* ══ 4 SERVICE PILLARS ══ */
.sv-services { background:var(--sv-gray); padding:80px 0; }
.sv-services__head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:56px; }
.sv-services__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.sv-svc-card { background:var(--sv-white); border:1px solid var(--sv-border); border-radius:12px; padding:36px 32px; display:flex; flex-direction:column; }
.sv-svc-card--dark { background:var(--sv-charcoal); border-color:var(--sv-charcoal); }

.sv-svc-card__icon-wrap { width:52px; height:52px; background:var(--sv-yellow); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; color:var(--sv-charcoal); }
.sv-svc-card__icon-wrap svg { width:24px; height:24px; }
.sv-svc-card__icon-wrap--light { background:rgba(245,200,0,0.12); }
.sv-svc-card__meta { font-family:var(--sv-font); font-size:9px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--sv-yellow); margin-bottom:8px; }
.sv-svc-card__meta--dark { color:var(--sv-yellow); }
.sv-svc-card__name { font-family:var(--sv-font); font-size:26px; font-weight:800; color:var(--sv-white); margin:0 0 14px; }
.sv-svc-card__name--dark { color:var(--sv-charcoal); }
.sv-svc-card__tag-bar { display:inline-block; background:var(--sv-yellow); color:var(--sv-charcoal); font-family:var(--sv-font); font-size:12px; font-weight:600; padding:8px 14px; border-radius:4px; margin-bottom:18px; }
.sv-svc-card__tag-bar--light { background:var(--sv-yellow); }
.sv-svc-card__desc { font-family:var(--sv-font); font-size:14px; line-height:1.75; color:rgba(255,255,255,0.55); margin:0 0 20px; }
.sv-svc-card__desc--dark { color:var(--sv-text-dim); }
.sv-svc-card__list { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.sv-svc-card__list li { display:flex; align-items:flex-start; gap:10px; font-family:var(--sv-font); font-size:13px; color:rgba(255,255,255,0.75); line-height:1.5; }
.sv-svc-card__list li::before { content:'\2713'; color:var(--sv-yellow); font-weight:700; flex-shrink:0; margin-top:1px; }
.sv-svc-card__list--dark li { color:var(--sv-charcoal); }
.sv-svc-card__list--dark li::before { color:#a07800; }
.sv-svc-card__footer { display:flex; gap:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); margin-bottom:20px; }
.sv-svc-card__footer--light { border-top-color:var(--sv-border); }
.sv-svc-card__kv { display:flex; flex-direction:column; gap:4px; }
.sv-svc-card__kv span { font-family:var(--sv-font); font-size:9px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.35); }
.sv-svc-card__kv strong { font-family:var(--sv-font); font-size:14px; font-weight:700; color:var(--sv-yellow); }
.sv-svc-card__kv--dark span { color:rgba(28,28,28,0.4); }
.sv-svc-card__kv--dark strong { color:var(--sv-charcoal); }
.sv-svc-card__link { font-family:var(--sv-font); font-size:11px; font-weight:700; letter-spacing:0.12em; color:var(--sv-yellow); text-decoration:none; align-self:flex-start; transition:opacity var(--sv-t); }
.sv-svc-card__link:hover { opacity:0.75; }
.sv-svc-card__link--dark { color:var(--sv-yellow); }

/* ══ AMC TABLE ══ */
.sv-plans { background:var(--sv-white); padding:80px 0; }
.sv-plans__head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:48px; }
.sv-table-wrap { overflow-x:auto; border-radius:var(--sv-radius); border:1px solid var(--sv-border); }
.sv-table { width:100%; border-collapse:collapse; font-family:var(--sv-font); }
.sv-table thead tr { background:var(--sv-charcoal); }
.sv-table th { padding:24px 20px; text-align:left; vertical-align:bottom; }
.sv-table__label-col { width:30%; }
.sv-table__compare-label { display:block; font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:8px; }
.sv-table__feature-heading { font-size:18px; font-weight:700; color:var(--sv-white); }
.sv-table__feature-sub { font-size:11px; color:rgba(255,255,255,0.35); margin-top:4px; }
.sv-table__tier-col { width:calc(70% / 3); text-align:center; border-left:1px solid rgba(255,255,255,0.08); }
.sv-table__tier-col--featured { background:rgba(245,200,0,0.06); border-left:1px solid rgba(245,200,0,0.2); border-right:1px solid rgba(245,200,0,0.2); position:relative; }
.sv-table__popular { display:inline-block; background:var(--sv-yellow); color:var(--sv-charcoal); font-size:8px; font-weight:800; letter-spacing:0.18em; padding:3px 10px; border-radius:20px; margin-bottom:8px; }
.sv-table__tier-label { font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:6px; }
.sv-table__tier-name { font-size:22px; font-weight:800; color:var(--sv-white); }
.sv-table__tier-name--yellow { color:var(--sv-yellow); }
.sv-table__tier-sub { font-size:11px; color:rgba(255,255,255,0.45); margin-top:4px; }
.sv-table tbody tr { border-bottom:1px solid var(--sv-border); }
.sv-table tbody tr:hover { background:#fafafa; }
.sv-table tbody td { padding:14px 20px; font-size:13px; color:var(--sv-charcoal); }
.sv-table tbody td:not(:first-child) { text-align:center; border-left:1px solid var(--sv-border); color:var(--sv-text-dim); }
.sv-table__featured-col { background:rgba(245,200,0,0.04); border-left:1px solid rgba(245,200,0,0.15) !important; border-right:1px solid rgba(245,200,0,0.15) !important; color:var(--sv-charcoal) !important; }
.sv-table__featured-col strong { color:var(--sv-charcoal); }
.sv-chk { color:#a07800; font-weight:700; font-size:14px; }
.sv-dash { color:rgba(28,28,28,0.2); font-size:16px; }
.sv-table tfoot td { padding:20px; background:#fafafa; border-top:1px solid var(--sv-border); }
.sv-table__foot-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sv-table__foot-inner span { font-size:12px; color:var(--sv-text-dim); max-width:480px; }
.sv-table__foot-actions { display:flex; gap:12px; flex-shrink:0; }

/* ══ 5 PILLARS — numbered timeline ══ */
.sv-pillars { background:var(--sv-gray); padding:80px 0; }
.sv-pillars__head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:56px; }
.sv-pillars__track { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.sv-pillars__track::before { content:''; position:absolute; top:26px; left:10%; right:10%; height:2px; background:rgba(28,28,28,0.1); z-index:0; border-style:dashed; border-top:2px dashed rgba(28,28,28,0.15); border-left:none; border-right:none; border-bottom:none; }
.sv-pillar-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px; position:relative; z-index:1; }
.sv-pillar-step__num { width:52px; height:52px; border-radius:50%; background:rgba(28,28,28,0.1); display:flex; align-items:center; justify-content:center; font-family:var(--sv-font); font-size:14px; font-weight:800; color:rgba(28,28,28,0.4); margin-bottom:20px; flex-shrink:0; }
.sv-pillar-step__num--active { background:var(--sv-yellow); color:var(--sv-charcoal); }
.sv-pillar-step__name { font-family:var(--sv-font); font-size:13px; font-weight:700; color:var(--sv-charcoal); margin:0 0 10px; line-height:1.4; }
.sv-pillar-step__desc { font-family:var(--sv-font); font-size:12px; line-height:1.65; color:var(--sv-text-dim); margin:0; }
.sv-pillar-step__roadmap { display:block; font-family:var(--sv-font); font-size:8px; font-weight:700; letter-spacing:0.15em; color:var(--sv-yellow); text-transform:uppercase; margin-top:10px; text-align:center; }

/* ══ CLIENT PROOF ══ */
.sv-proof { background:var(--sv-white); padding:80px 0; }
.sv-proof__head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:48px; }
.sv-client-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--sv-border); border:1px solid var(--sv-border); border-radius:var(--sv-radius); overflow:hidden; margin-bottom:32px; }
.sv-client-badge { background:var(--sv-white); padding:20px 16px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--sv-font); font-size:9px; font-weight:700; letter-spacing:0.12em; color:rgba(28,28,28,0.5); text-transform:uppercase; line-height:1.5; transition:background var(--sv-t); }
.sv-client-badge:hover { background:var(--sv-gray); color:var(--sv-charcoal); }
.sv-client-badge--more { background:var(--sv-gray); color:var(--sv-charcoal); }
.sv-testimonials { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sv-tcard { background:var(--sv-gray); border:1px solid var(--sv-border); border-radius:var(--sv-radius); padding:32px; position:relative; }
.sv-tcard::before { content:'\201C'; position:absolute; top:16px; right:24px; font-family:Georgia,serif; font-size:64px; color:var(--sv-yellow); line-height:1; }
.sv-tcard__quote { font-family:var(--sv-font); font-size:14px; line-height:1.8; color:var(--sv-charcoal); margin:0 0 24px; }
.sv-tcard__author { display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--sv-border); }
.sv-tcard__avatar { width:38px; height:38px; border-radius:50%; background:var(--sv-charcoal); color:var(--sv-white); display:flex; align-items:center; justify-content:center; font-family:var(--sv-font); font-size:12px; font-weight:700; flex-shrink:0; }
.sv-tcard__name { display:block; font-family:var(--sv-font); font-size:13px; font-weight:700; color:var(--sv-charcoal); }
.sv-tcard__role { display:block; font-family:var(--sv-font); font-size:11px; color:var(--sv-text-dim); margin-top:2px; }

/* ══ DUAL CTA ══ */
.sv-dual-cta { background:var(--sv-white); padding:80px 0; border-top:1px solid var(--sv-border); }
.sv-dual-cta__head { margin-bottom:48px; }
.sv-dual-cta__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

/* Dark left card */
.sv-dcta-dark { background:var(--sv-charcoal); border-radius:12px; padding:40px 36px; display:flex; flex-direction:column; }
.sv-dcta-dark__eyebrow { font-family:var(--sv-font); font-size:9px; font-weight:700; letter-spacing:0.2em; color:var(--sv-yellow); margin-bottom:12px; }
.sv-dcta-dark__title { font-family:var(--sv-font); font-size:26px; font-weight:800; color:var(--sv-white); margin:0 0 12px; }
.sv-dcta-dark__desc { font-family:var(--sv-font); font-size:14px; line-height:1.7; color:rgba(255,255,255,0.5); margin:0 0 24px; }
.sv-dcta-dark__wa-btn { display:flex; align-items:center; justify-content:center; gap:10px; background:#25D366; color:var(--sv-white); padding:14px 20px; border-radius:var(--sv-radius); font-family:var(--sv-font); font-size:14px; font-weight:700; text-decoration:none; margin-bottom:28px; transition:background var(--sv-t); }
.sv-dcta-dark__wa-btn:hover { background:#1fbb59; }
.sv-dcta-dark__info { display:flex; flex-direction:column; gap:14px; border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; }
.sv-dcta-dark__info > div { display:flex; align-items:baseline; gap:16px; font-family:var(--sv-font); }
.sv-dcta-dark__info span { font-size:9px; font-weight:700; letter-spacing:0.15em; color:rgba(255,255,255,0.3); min-width:80px; }
.sv-dcta-dark__info strong { font-size:13px; font-weight:500; color:var(--sv-white); }
.sv-dcta-dark__langs { align-items:flex-start !important; }
.sv-lang-pills { display:flex; flex-wrap:wrap; gap:6px; }
.sv-lang-pills span { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); font-family:var(--sv-font); font-size:11px; padding:3px 10px; border-radius:20px; }

/* Right form card */
.sv-dcta-form-card { background:var(--sv-white); border:1px solid var(--sv-border); border-radius:12px; padding:40px 36px; }
.sv-dcta-form-card__eyebrow { font-family:var(--sv-font); font-size:9px; font-weight:700; letter-spacing:0.2em; color:var(--sv-yellow); margin-bottom:12px; }
.sv-dcta-form-card__title { font-family:var(--sv-font); font-size:24px; font-weight:800; color:var(--sv-charcoal); margin:0 0 10px; line-height:1.2; }
.sv-dcta-form-card__desc { font-family:var(--sv-font); font-size:13px; line-height:1.7; color:var(--sv-text-dim); margin:0 0 24px; }
.sv-dcta-form { display:flex; flex-direction:column; gap:14px; }
.sv-dcta-form__row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sv-dcta-form__field { display:flex; flex-direction:column; gap:5px; }
.sv-dcta-form__field label { font-family:var(--sv-font); font-size:9px; font-weight:700; letter-spacing:0.15em; color:rgba(28,28,28,0.45); }
.sv-dcta-form__field input,
.sv-dcta-form__field select,
.sv-dcta-form__field textarea { font-family:var(--sv-font); font-size:13px; color:var(--sv-charcoal); background:var(--sv-gray); border:1px solid rgba(28,28,28,0.12); border-radius:6px; padding:11px 14px; outline:none; width:100%; box-sizing:border-box; transition:border-color var(--sv-t); }
.sv-dcta-form__field input:focus,
.sv-dcta-form__field select:focus,
.sv-dcta-form__field textarea:focus { border-color:var(--sv-yellow); background:var(--sv-white); }
.sv-dcta-form__field input::placeholder,
.sv-dcta-form__field textarea::placeholder { color:rgba(28,28,28,0.35); }
.sv-dcta-form__field textarea { resize:vertical; }
.sv-dcta-form__field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px; }

/* ══ BOTTOM NAV STRIP ══ */
.sv-nav-strip { background:var(--sv-yellow); padding:0; border-top:1px solid rgba(28,28,28,0.08); }
.sv-nav-strip__inner { display:flex; align-items:stretch; }
.sv-nav-strip__item { display:flex; align-items:center; gap:8px; padding:20px 40px; flex:1; justify-content:center; font-family:var(--sv-font); font-size:14px; font-weight:700; color:var(--sv-charcoal); text-decoration:none; border-right:1px solid rgba(28,28,28,0.1); transition:background var(--sv-t); }
.sv-nav-strip__item:last-child { border-right:none; }
.sv-nav-strip__item:hover { background:rgba(28,28,28,0.06); }
.sv-nav-strip__item svg { width:13px; height:13px; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1024px) {
    .sv-inner { padding:0 32px; }
    .sv-hero__grid, .sv-services__head, .sv-plans__head, .sv-pillars__head, .sv-proof__head { grid-template-columns:1fr; gap:32px; }
    .sv-services__grid { grid-template-columns:1fr 1fr; }
    .sv-pillars__track { grid-template-columns:repeat(3,1fr); gap:32px; }
    .sv-pillars__track::before { display:none; }
    .sv-dual-cta__grid { grid-template-columns:1fr; }
    .sv-client-grid { grid-template-columns:repeat(3,1fr); }
    .sv-hero__title { font-size:44px; }
}
@media (max-width: 768px) {
    .sv-inner { padding:0 20px; }
    .sv-hero__title { font-size:36px; }
    .sv-section-title { font-size:30px; }
    .sv-services__grid { grid-template-columns:1fr; }
    .sv-pillars__track { grid-template-columns:repeat(2,1fr); }
    .sv-testimonials { grid-template-columns:1fr; }
    .sv-client-grid { grid-template-columns:repeat(2,1fr); }
    .sv-dcta-form__row { grid-template-columns:1fr; }
    .sv-nav-strip__inner { flex-direction:column; }
    .sv-nav-strip__item { border-right:none; border-bottom:1px solid rgba(28,28,28,0.1); padding:16px 20px; }
    .sv-table__foot-inner { flex-direction:column; align-items:flex-start; }
}
