/* ==========================================================================
   SPJ Maid Services — client-facing site stylesheet
   Brand palette lifted from the previous home.html hero (teal + orange)
   and reused consistently across every public page.
   ========================================================================== */

:root {
    --spj-teal: #0099ad;
    --spj-teal-dark: #004d5a;
    --spj-navy: #001f2b;
    --spj-orange: #ff6b35;
    --spj-orange-dark: #e6551f;
    --spj-bg: #f8fafc;
    --spj-ink: #1e293b;
    --spj-muted: #64748b;
    --spj-border: #e2e8f0;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--spj-ink);
    background: #fff;
}

a { color: var(--spj-teal); }
a:hover { color: var(--spj-teal-dark); }

/* ── Buttons ── */
.btn-spj-primary {
    background: var(--spj-teal); border: none; color: #fff;
    font-weight: 600; padding: 11px 28px; border-radius: 10px;
    transition: background .15s, transform .15s;
}
.btn-spj-primary:hover { background: var(--spj-teal-dark); color: #fff; transform: translateY(-1px); }

.btn-spj-accent {
    background: var(--spj-orange); border: none; color: #fff;
    font-weight: 700; padding: 12px 32px; border-radius: 10px;
    transition: background .15s, transform .15s;
}
.btn-spj-accent:hover { background: var(--spj-orange-dark); color: #fff; transform: translateY(-1px); }

.btn-spj-outline {
    background: transparent; border: 1.5px solid #fff; color: #fff;
    font-weight: 600; padding: 10px 26px; border-radius: 10px;
    transition: background .15s;
}
.btn-spj-outline:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── Navbar ── */
.spj-navbar { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: 14px 0; }
.spj-navbar .navbar-brand { font-weight: 800; font-size: 22px; color: var(--spj-teal-dark); display: flex; align-items: center; gap: 10px; }
.spj-navbar .navbar-brand .brand-badge {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--spj-teal), var(--spj-teal-dark));
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.spj-navbar .nav-link { font-weight: 600; color: var(--spj-ink); padding: 8px 16px !important; }
.spj-navbar .nav-link:hover, .spj-navbar .nav-link.active { color: var(--spj-teal); }

/* ── Footer ── */
.spj-footer { background: var(--spj-navy); color: rgba(255,255,255,.7); padding: 50px 0 20px; }
.spj-footer h5 { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.spj-footer a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 14px; }
.spj-footer a:hover { color: #fff; }
.spj-footer .footer-social a {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: inline-flex; align-items: center; justify-content: center; margin-right: 8px;
}
.spj-footer .footer-social a:hover { background: var(--spj-teal); }
.spj-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 20px; font-size: 13px; }

/* ── Hero (homepage) ── */
.spj-hero {
    background: linear-gradient(135deg, var(--spj-teal) 0%, var(--spj-teal-dark) 55%, var(--spj-navy) 100%);
    color: #fff; padding: 90px 0 100px; position: relative; overflow: hidden;
}
.spj-hero h1 { font-weight: 800; font-size: 42px; line-height: 1.2; }
.spj-hero p.lead { color: rgba(255,255,255,.85); font-size: 18px; }
.spj-hero-image {
    width: 100%; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.spj-hero-placeholder {
    width: 100%; min-height: 320px; border-radius: 18px;
    background: rgba(255,255,255,.08); border: 2px dashed rgba(255,255,255,.3);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
}
.spj-hero-placeholder i { font-size: 48px; margin-bottom: 12px; }

/* ── Section headers ── */
.spj-section { padding: 70px 0; }
.spj-section-label {
    color: var(--spj-teal); font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px; display: block;
}
.spj-section-title { font-weight: 800; font-size: 32px; color: var(--spj-ink); margin-bottom: 14px; }
.spj-section-sub { color: var(--spj-muted); font-size: 16px; max-width: 560px; }

/* ── Feature cards ── */
.spj-feature-card { text-align: center; padding: 30px 22px; border-radius: 16px; background: var(--spj-bg); height: 100%; transition: transform .15s, box-shadow .15s; }
.spj-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.spj-feature-icon {
    width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 18px;
    background: linear-gradient(135deg, var(--spj-teal), var(--spj-teal-dark));
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.spj-feature-card h5 { font-weight: 700; margin-bottom: 8px; }
.spj-feature-card p { color: var(--spj-muted); font-size: 14px; margin: 0; }

/* ── Package cards ── */
.spj-pkg-card {
    border: 1.5px solid var(--spj-border); border-radius: 16px; overflow: hidden; height: 100%;
    transition: transform .15s, box-shadow .15s, border-color .15s; background: #fff;
}
.spj-pkg-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.08); border-color: var(--spj-teal); }
.spj-pkg-card-icon {
    height: 130px; background: linear-gradient(135deg, var(--spj-teal), var(--spj-teal-dark));
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: 42px;
}
.spj-pkg-card-body { padding: 22px; }
.spj-pkg-card-body h5 { font-weight: 700; margin-bottom: 8px; }
.spj-pkg-meta { color: var(--spj-muted); font-size: 13.5px; margin-bottom: 14px; }
.spj-pkg-price { font-size: 24px; font-weight: 800; color: var(--spj-teal-dark); }
.spj-pkg-price small { font-size: 13px; font-weight: 500; color: var(--spj-muted); }

/* ── Auth cards (login/register) ── */
.spj-auth-page { background: var(--spj-bg); min-height: calc(100vh - 140px); display: flex; align-items: center; padding: 60px 0; }
.spj-auth-card { background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.08); overflow: hidden; }
.spj-auth-card-header { background: linear-gradient(135deg, var(--spj-teal), var(--spj-teal-dark)); color: #fff; padding: 34px 32px 28px; text-align: center; }
.spj-auth-card-header .icon-badge {
    width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 14px;
}
.spj-auth-card-body { padding: 34px 32px; }
.spj-form-label { font-weight: 600; font-size: 13.5px; color: var(--spj-ink); margin-bottom: 6px; }
.spj-form-control {
    border: 1.5px solid var(--spj-border); border-radius: 10px; padding: 11px 15px; font-size: 14px;
}
.spj-form-control:focus { border-color: var(--spj-teal); box-shadow: 0 0 0 3px rgba(0,153,173,.1); outline: none; }

/* ── Profile ── */
.spj-profile-card { background: #fff; border-radius: 18px; box-shadow: 0 4px 20px rgba(0,0,0,.06); overflow: hidden; }
.spj-profile-cover { height: 90px; background: linear-gradient(135deg, var(--spj-teal), var(--spj-teal-dark)); }
.spj-profile-avatar {
    width: 108px; height: 108px; border-radius: 50%; border: 5px solid #fff; object-fit: cover;
    margin-top: -54px; background: #f1f5f9;
}
.spj-status-badge { padding: 4px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.spj-status-badge.active { background: #d1fae5; color: #065f46; }
.spj-status-badge.inactive { background: #fee2e2; color: #991b1b; }

/* ── Misc ── */
.spj-empty-state { text-align: center; padding: 70px 20px; color: var(--spj-muted); }
.spj-empty-state i { font-size: 46px; margin-bottom: 16px; display: block; color: var(--spj-border); }

@media (max-width: 767px) {
    .spj-hero { padding: 60px 0 70px; text-align: center; }
    .spj-hero h1 { font-size: 30px; }
    .spj-section { padding: 50px 0; }
}


/* ── Editable footer (Admin > Website > Footer) — layout of the old Wix footer ── */
.ws-footer { background:#2f2f2f; color:rgba(255,255,255,.85); padding:34px 0 28px; }
.ws-footer .ws-footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; margin-bottom:26px; }
.ws-footer .ws-footer-links a { color:#fff; font-size:15px; font-weight:500; }
.ws-footer .ws-footer-links a:hover { text-decoration:underline; }
.ws-footer .ws-footer-co1 { font-family:Georgia,'Times New Roman',serif; color:#fff; font-size:20px; margin-bottom:8px; }
.ws-footer .ws-footer-co { font-family:Georgia,'Times New Roman',serif; color:#fff; font-size:15.5px; margin-bottom:10px; }
.ws-footer .ws-footer-line { font-size:14px; margin-bottom:8px; }
.ws-footer .ws-footer-line a { color:rgba(255,255,255,.85); font-size:14px; }
.ws-footer .ws-footer-copy { font-size:13.5px; margin-top:22px; color:rgba(255,255,255,.85); }
@media (max-width: 576px) { .ws-footer .ws-footer-co1 { font-size:16px; } .ws-footer .ws-footer-co { font-size:14px; } }

/* ── Plan cards: Our Packages, Ad-hoc Services and the home page. Colours follow
   Website Settings > Theme & branding (--spj-primary / --spj-primary-dark). ── */
.pl-page { position:relative; padding:56px 0 40px; overflow:hidden;
           background:radial-gradient(circle at 0 0, color-mix(in srgb, var(--spj-primary) 12%, transparent), transparent 32%),
                      radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--spj-primary) 12%, transparent), transparent 30%),
                      color-mix(in srgb, var(--spj-light, #fff7ed) 55%, #fff); }
.pl-head { text-align:center; margin-bottom:38px; }
.pl-eyebrow { display:flex; align-items:center; justify-content:center; gap:16px; font-size:13px; letter-spacing:.28em;
              text-transform:uppercase; color:#4a3b31; font-weight:500; }
.pl-eyebrow::before, .pl-eyebrow::after { content:""; width:min(110px, 14vw); height:1px; background:color-mix(in srgb, var(--spj-primary) 55%, #fff); }
.pl-title, .pl-name, .pl-amt { font-variant-numeric:lining-nums; }
.pl-title { font-family:'Playfair Display', Georgia, serif; font-weight:500; font-size:clamp(30px, 4.4vw, 52px); color:#1f1712; margin:10px 0 8px; line-height:1.15; }
.pl-title em { font-style:italic; color:var(--spj-primary); }
.pl-sub { color:#4a3b31; font-size:16.5px; max-width:720px; margin:0 auto; }
.pl-sub p { margin:0; }
.pl-alt { color:#4a3b31; } .pl-alt a { color:var(--spj-primary-dark); font-weight:600; }

.pl-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 300px)); justify-content:center; gap:24px; padding-top:18px; }
.pl-card { position:relative; display:flex; flex-direction:column; background:#fff; border-radius:14px; padding:8px;
           box-shadow:0 10px 30px rgba(74,52,30,.08); border:1px solid rgba(74,52,30,.06); text-align:center; transition:transform .2s, box-shadow .2s; }
.pl-card:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(74,52,30,.13); }
.pl-card.is-popular { background:linear-gradient(180deg, color-mix(in srgb, var(--spj-primary) 7%, #fff), color-mix(in srgb, var(--spj-primary) 14%, #fff));
                      border:1.5px solid color-mix(in srgb, var(--spj-primary) 40%, #fff); }
.pl-ribbon { position:absolute; top:-14px; left:30px; z-index:3; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
             background:linear-gradient(135deg, var(--spj-primary-dark), var(--spj-primary)); color:#fff; font-size:14px; font-weight:500;
             padding:6px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.pl-ribbon i { color:#ffd76a; }
.pl-img { display:block; aspect-ratio:16/8; border-radius:10px; background:color-mix(in srgb, var(--spj-primary) 12%, #f4ede6) center/cover no-repeat; }
.pl-icon { width:56px; height:56px; border-radius:50%; margin:-30px auto 0; position:relative; z-index:2; display:flex; align-items:center;
           justify-content:center; font-size:22px; border:4px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.pl-sand { background:#f6ecdd; color:#b07a32; } .pl-rose { background:#f3d5cb; color:#9a4b3a; } .pl-sage { background:#e2ece2; color:#2f6b45; }
.pl-body { padding:10px 14px 16px; display:flex; flex-direction:column; flex:1; }
.pl-name { font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:500; font-size:26px; color:#1f1712; margin:6px 0 0; line-height:1.2; }
.pl-no { display:flex; align-items:center; justify-content:center; gap:12px; color:#4a3b31; font-size:16px; margin-top:4px; }
.pl-no::before, .pl-no::after { content:""; width:24px; height:1px; background:#8d7a6b; }
.pl-price { display:flex; justify-content:center; align-items:baseline; gap:8px; color:#1f1712; margin:6px 0 14px; }
.pl-cur { font-size:16px; }
.pl-amt { font-family:'Playfair Display', Georgia, serif; font-size:42px; line-height:1.05; font-weight:500; }
.pl-box { list-style:none; margin:0; padding:16px 18px; border-radius:10px; text-align:left; background:color-mix(in srgb, var(--spj-primary) 5%, #faf7f3); }
.pl-card.is-popular .pl-box { background:rgba(255,255,255,.45); }
.pl-box li { display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:#3b2f27; line-height:1.55; }
.pl-box li + li { margin-top:12px; }
.pl-box li i { width:20px; flex-shrink:0; text-align:center; margin-top:3px; font-size:17px; color:var(--spj-primary); }
.pl-box li i.fa-clock, .pl-box li i.fa-calendar { color:#6b5a4c; }
.pl-desc { font-size:14.5px; color:#3b2f27; } .pl-desc p { margin:0 0 6px; } .pl-desc p:last-child { margin:0; }
.pl-pill { align-self:center; margin-top:-12px; position:relative; display:inline-flex; align-items:center; gap:10px; background:#fff;
           border-radius:999px; padding:7px 20px; font-size:14px; color:#3b2f27; box-shadow:0 3px 10px rgba(74,52,30,.08); }
.pl-pill i { color:var(--spj-primary); }
.pl-actions { margin-top:auto; padding-top:22px; }
.pl-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; max-width:290px; margin:0 auto; padding:12px 20px;
          border-radius:999px; font-size:17px; font-weight:600; color:#fff !important; text-decoration:none;
          background:linear-gradient(100deg, var(--spj-primary-dark), var(--spj-primary)); box-shadow:0 6px 16px color-mix(in srgb, var(--spj-primary) 35%, transparent);
          transition:filter .15s, transform .15s; }
.pl-btn:hover { filter:brightness(1.07); transform:translateY(-1px); }
.pl-more { display:inline-block; margin-top:12px; font-size:14px; color:#6b5a4c; text-decoration:none; border-bottom:1px solid #8d7a6b; padding:0 8px 1px; }
.pl-more:hover { color:var(--spj-primary-dark); }
.pl-trust { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:40px; }
.pl-trust > div { display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 12px; color:#3b2f27; font-size:15px; }
.pl-trust > div + div { border-left:1px solid color-mix(in srgb, var(--spj-primary) 30%, #ddd); }
.pl-trust i { font-size:22px; color:var(--spj-primary); }
@media (max-width:991px) { .pl-trust { grid-template-columns:repeat(2, 1fr); row-gap:10px; } .pl-trust > div:nth-child(3) { border-left:0; } }
@media (max-width:575px) { .pl-grid { grid-template-columns:1fr; } .pl-page { padding:38px 0 28px; } .pl-trust { grid-template-columns:1fr; } .pl-trust > div { border-left:0 !important; justify-content:flex-start; } .pl-amt { font-size:38px; } }

/* single package page (details) */
.pk-desc p { margin:0 0 6px; }
.pk-features { list-style:none; margin:0; }
.pk-features li { display:flex; gap:14px; align-items:flex-start; font-size:16px; color:#3b2a22; margin-bottom:14px; line-height:1.45; }
.pk-features i { width:22px; height:22px; border-radius:50%; background:var(--spj-primary); color:#fff; font-size:11px;
                 display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }

/* ── Floating WhatsApp button (number: default company's phone) ── */
.spj-wa-float { position:fixed; right:18px; bottom:18px; z-index:1050; display:inline-flex; align-items:center; gap:8px;
                background:#25d366; color:#fff !important; text-decoration:none; border-radius:999px; padding:12px 18px 12px 14px;
                box-shadow:0 8px 22px rgba(0,0,0,.18); font-weight:600; font-size:15px; transition:transform .15s, background .15s; }
.spj-wa-float i { font-size:24px; }
.spj-wa-float:hover { background:#1ebe5a; transform:translateY(-2px); }
@media (max-width:575px) { .spj-wa-float span { display:none; } .spj-wa-float { padding:13px; } }


/* ══════════════ New layout (2026): header / footer / home — colours come from
   Website Settings > Theme & branding via the --spj-* variables ══════════════ */
.spj-navbar { background:#fff !important; box-shadow:0 2px 14px rgba(0,0,0,.06); padding:10px 0; }
.spj-navbar .navbar-brand { display:flex; align-items:center; gap:8px; font-weight:800; color:var(--spj-primary) !important; }
.spj-logo { height:58px; width:auto; }
.spj-navbar .nav-link { color:#1f2937 !important; font-weight:600; font-size:15px; padding:8px 14px !important; position:relative; }
.spj-navbar .nav-link:hover, .spj-navbar .nav-link.active { color:var(--spj-primary) !important; }
.spj-navbar .nav-link.active::after { content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--spj-primary); }
.spj-btn-outline { border:1.5px solid var(--spj-primary); color:var(--spj-primary) !important; font-weight:600; padding:8px 26px; border-radius:6px; background:#fff; }
.spj-btn-outline:hover { background:var(--spj-light); }
.spj-btn-solid { background:var(--spj-primary); border:1.5px solid var(--spj-primary); color:#fff !important; font-weight:600; padding:8px 26px; border-radius:6px; }
.spj-btn-solid:hover { background:var(--spj-primary-dark); border-color:var(--spj-primary-dark); }

.spj-foot { background:var(--spj-dark); color:#d1d5db; padding:56px 0 24px; margin-top:0; }
.spj-foot-logo { height:70px; width:auto; }
.spj-foot-brand { color:#fff; font-weight:800; font-size:20px; }
.spj-foot-text { font-size:14px; line-height:1.7; color:#cbd5e1; }
.spj-foot-h { color:#fff; font-weight:700; font-size:17px; margin-bottom:16px; }
.spj-foot-social { display:flex; gap:10px; margin-top:12px; }
.spj-foot-social a { width:34px; height:34px; border-radius:50%; background:var(--spj-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .15s; }
.spj-foot-social a:hover { transform:translateY(-2px); background:var(--spj-primary-dark); }
.spj-foot-links { list-style:none; padding:0; margin:0; }
.spj-foot-links li { margin-bottom:8px; }
.spj-foot-links a, .spj-foot-contact a { color:#d1d5db; text-decoration:none; font-size:14px; }
.spj-foot-links a:hover, .spj-foot-contact a:hover { color:#fff; }
.spj-foot-contact { list-style:none; padding:0; margin:0; }
.spj-foot-contact li { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; font-size:14px; }
.spj-foot-contact i { width:26px; height:26px; border-radius:50%; background:var(--spj-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.spj-news-box { display:flex; background:#fff; border-radius:999px; overflow:hidden; }
.spj-news-box input { flex:1; border:0; padding:11px 18px; font-size:14px; outline:none; min-width:0; }
.spj-news-box button { border:0; background:var(--spj-primary); color:#fff; width:54px; }
.spj-news-box button:hover { background:var(--spj-primary-dark); }
.spj-news-agree { font-size:12px; color:#cbd5e1; margin-top:10px; display:flex; gap:8px; align-items:center; cursor:pointer; }
.spj-foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:18px; text-align:center; font-size:12.5px; color:#9ca3af; }

/* hero slider */
.hm-hero { position:relative; min-height:520px; overflow:hidden; background:var(--spj-primary); }
.hm-slide { position:absolute; inset:0; background:center/cover no-repeat; opacity:0; transition:opacity .8s ease; display:flex; align-items:center; }
.hm-slide.on { opacity:1; position:relative; min-height:520px; }
.hm-slide::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--spj-primary) 88%, transparent) 0%, color-mix(in srgb, var(--spj-primary) 45%, transparent) 45%, transparent 75%); }
.hm-slide .container { position:relative; z-index:1; }
.hm-slide-text { max-width:560px; color:#fff; }
.hm-slide-text p { font-size:16px; line-height:1.6; margin-bottom:10px; }
.hm-slide-text h1, .hm-slide-text h2 { font-size:clamp(2.2rem, 5vw, 3.8rem); font-weight:800; line-height:1.05; margin:6px 0 18px; text-transform:uppercase; }
.hm-slide-text h3 { font-weight:700; }
.hm-slide-btn { display:inline-flex; align-items:center; gap:10px; background:var(--spj-primary); color:#fff !important; border:2px solid #fff; padding:12px 28px; border-radius:999px; font-weight:600; text-decoration:none; margin-top:8px; }
.hm-slide-btn:hover { background:#fff; color:var(--spj-primary) !important; }
.hm-dots { position:absolute; left:0; right:0; bottom:26px; z-index:2; }
.hm-dots button { width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.6); margin-right:8px; padding:0; }
.hm-dots button.on { background:#fff; width:12px; height:12px; }
.hm-hero-plain { color:#fff; padding:110px 0; }

/* section headings */
.hm-sec { padding:70px 0; }
.hm-label { color:var(--spj-primary); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; display:inline-flex; align-items:center; gap:10px; }
.hm-label::before, .hm-label::after { content:''; width:28px; height:2px; background:var(--spj-primary); }
.hm-title { font-weight:800; font-size:clamp(1.6rem, 3vw, 2.3rem); color:#111827; margin:8px 0 8px; }
.hm-sub { color:#6b7280; }

/* service cards */
.hm-svc { background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.07); overflow:hidden; height:100%; display:flex; flex-direction:column; text-align:center; }
.hm-svc-img { aspect-ratio:16/11; background:#f3f4f6 center/cover no-repeat; position:relative; }
.hm-svc-icon { position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); width:48px; height:48px; border-radius:50%; background:var(--spj-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 0 0 4px #fff; }
.hm-svc-body { padding:34px 18px 22px; display:flex; flex-direction:column; flex:1; }
.hm-svc-body h5 { font-weight:700; font-size:17px; }
.hm-svc-body p { color:#6b7280; font-size:14px; flex:1; }
.hm-svc-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--spj-primary); color:#fff !important; border-radius:6px; padding:9px 18px; font-weight:600; font-size:14px; text-decoration:none; }
.hm-svc-btn:hover { background:var(--spj-primary-dark); }

/* about */
.hm-about { background:var(--spj-primary); color:#fff; padding:64px 0; }
.hm-about .hm-label { color:#fff; }
.hm-about .hm-label::before { background:#fff; }
.hm-about .hm-label::after { display:none; }
.hm-about h2 { font-weight:800; font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.15; }
.hm-about-text { color:rgba(255,255,255,.92); line-height:1.7; }
.hm-ab-feats { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin:24px 0 8px; }
.hm-ab-feat { display:flex; align-items:center; gap:12px; }
.hm-ab-feat strong { display:block; font-size:14px; font-weight:700; line-height:1.25; }
.hm-ab-feat small { display:block; font-size:12px; color:rgba(255,255,255,.82); line-height:1.3; margin-top:2px; }
.hm-ab-ico { flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.hm-ab-ico.big { width:56px; height:56px; font-size:22px; }
.hm-ab-btn { display:inline-flex; align-items:center; gap:10px; margin-top:22px; background:#fff; color:var(--spj-primary) !important; padding:12px 26px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .2s; }
.hm-ab-btn:hover { transform:translateY(-2px); }
.hm-ab-photo { position:relative; aspect-ratio:4/5; border-radius:16px; background:rgba(255,255,255,.15) center/cover no-repeat; box-shadow:0 18px 44px rgba(0,0,0,.28); }
.hm-ab-photo2 { position:absolute; left:-18px; bottom:-18px; width:38%; aspect-ratio:1; border-radius:14px; border:4px solid #fff; background:center/cover no-repeat; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.hm-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:#fff; color:var(--spj-primary); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 30px rgba(0,0,0,.25); text-decoration:none; }
.hm-ab-sub { margin:6px 0 16px; color:rgba(255,255,255,.88); font-weight:500; }
.hm-ab-stats { display:flex; flex-direction:column; gap:14px; }
.hm-ab-stat { display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px); transition:transform .2s, background .2s; }
.hm-ab-stat:hover { transform:translateX(-4px); background:rgba(255,255,255,.22); }
.hm-ab-num { display:block; font-size:clamp(1.6rem, 2.6vw, 2.1rem); font-weight:800; line-height:1.1; }
.hm-ab-lbl { display:block; font-size:13px; letter-spacing:.04em; opacity:.92; }
@media (max-width:991px) { .hm-ab-photo { aspect-ratio:16/11; } .hm-ab-photo2 { left:12px; bottom:-14px; } }
@media (max-width:575px) { .hm-ab-feats { grid-template-columns:1fr; } }
.hm-feat { border-left:1px solid rgba(255,255,255,.35); padding-left:16px; }
.hm-feat:first-child { border-left:0; padding-left:0; }
.hm-feat i { width:44px; height:44px; border-radius:50%; background:#fff; color:var(--spj-primary); display:inline-flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:10px; }
.hm-feat h6 { font-weight:700; margin-bottom:4px; }
.hm-feat p { font-size:13px; color:rgba(255,255,255,.85); margin:0; }

/* testimonials */
.hm-testi { background:var(--spj-light); }
.hm-quote { background:#fff; border-radius:10px; padding:24px; height:100%; box-shadow:0 4px 18px rgba(0,0,0,.05); display:flex; gap:14px; }
.hm-quote > i { color:var(--spj-primary); font-size:30px; }
.hm-quote p { color:#374151; font-size:14.5px; }
.hm-quote .who { color:#6b7280; font-family:Georgia, serif; }

/* ── Header: company name next to the logo ── */
.spj-brand-name { font-weight:800; font-size:clamp(1rem, 1.6vw, 1.35rem); color:var(--spj-primary-dark); line-height:1.1; white-space:normal; max-width:220px; }
@media (max-width:575px) { .spj-brand-name { max-width:140px; font-size:.95rem; } .spj-logo { height:46px; } }

/* ── Promotions: scrolling strip at the top of the home page ── */
.hm-promo { display:flex; align-items:stretch; background:linear-gradient(90deg, var(--spj-primary-dark), var(--spj-primary)); color:#fff; overflow:hidden; font-weight:600; }
.hm-promo-tag { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 16px; background:rgba(0,0,0,.22); font-size:13px; letter-spacing:.08em; animation:hmPromoFlash 1.4s ease-in-out infinite; }
.hm-promo-track { flex:1; overflow:hidden; display:flex; align-items:center; }
.hm-promo-move { display:flex; width:max-content; animation:hmPromoScroll 28s linear infinite; }
.hm-promo:hover .hm-promo-move { animation-play-state:paused; }
.hm-promo-set { display:flex; align-items:center; white-space:nowrap; }
.hm-promo-item { color:#fff !important; text-decoration:none; padding:10px 18px; font-size:15px; }
a.hm-promo-item:hover { text-decoration:underline; }
.hm-promo-item small { opacity:.85; font-weight:500; }
.hm-promo-sep { font-size:10px; opacity:.8; }
@keyframes hmPromoScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes hmPromoFlash { 0%,100% { background:rgba(0,0,0,.22); } 50% { background:rgba(255,255,255,.28); } }
@media (prefers-reduced-motion:reduce) { .hm-promo-move, .hm-promo-tag { animation:none; } .hm-promo-track { overflow-x:auto; } }

/* ── What we offer: 6 cards in view, the rest scroll (arrows / swipe / dots) ── */
.hm-offer { background:var(--spj-light, #fff7ed); }
.hm-carousel { position:relative; --gap:16px; --per:6; }
.hm-offer-track { display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
                  padding:12px 4px 18px; scrollbar-width:none; -ms-overflow-style:none; outline:none; }
.hm-offer-track::-webkit-scrollbar { display:none; }
.hm-offer-card { flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align:start;
                 display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border-radius:14px;
                 padding:24px 14px 18px; box-shadow:0 6px 22px rgba(15,23,42,.07); color:inherit; text-decoration:none;
                 transition:transform .2s, box-shadow .2s; }
a.hm-offer-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(15,23,42,.13); }
.hm-offer-ico, .hm-offer-img { width:84px; height:84px; border-radius:50%; margin-bottom:16px; flex:0 0 auto; }
.hm-offer-ico { display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--spj-primary);
                background:color-mix(in srgb, var(--spj-primary) 13%, #fff); }
.hm-offer-img { background:#f3f4f6 center/cover no-repeat; }
.hm-offer-card h6 { font-weight:800; font-size:16px; margin:0 0 8px; color:#0f1f46; min-height:2.5em; display:flex; align-items:center; justify-content:center; line-height:1.25; }
.hm-offer-card p { margin:0 0 14px; font-size:13px; line-height:1.55; color:#5b6b86; flex:1; }
.hm-offer-more { margin-top:auto; font-size:13px; font-weight:700; color:var(--spj-primary); display:inline-flex; gap:6px; align-items:center; }
.hm-car-btn { position:absolute; top:44%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; border:0;
              background:#fff; color:var(--spj-primary); box-shadow:0 4px 16px rgba(15,23,42,.18); display:flex; align-items:center; justify-content:center;
              cursor:pointer; transition:opacity .2s, transform .2s; }
.hm-car-btn:hover { transform:translateY(-50%) scale(1.08); }
.hm-car-btn.prev { left:-18px; } .hm-car-btn.next { right:-18px; }
.hm-car-btn[hidden] { display:none; }
.hm-car-dots { display:flex; justify-content:center; gap:8px; margin-top:6px; }
.hm-car-dots button { width:9px; height:9px; border-radius:50%; border:0; padding:0; background:color-mix(in srgb, var(--spj-primary) 25%, #fff); cursor:pointer; transition:all .2s; }
.hm-car-dots button.on { width:22px; border-radius:6px; background:var(--spj-primary); }
.hm-svc-btn-outline { background:#fff; color:var(--spj-primary) !important; border:2px solid var(--spj-primary); }
.hm-svc-btn-outline:hover { background:var(--spj-primary); color:#fff !important; }
@media (max-width:1199px) { .hm-carousel { --per:4; } }
@media (max-width:991px)  { .hm-carousel { --per:3; } }
@media (max-width:767px)  { .hm-carousel { --per:2; } .hm-car-btn.prev { left:-6px; } .hm-car-btn.next { right:-6px; } }
@media (max-width:479px)  { .hm-carousel { --per:1.4; } }

/* ── Hero slide: "show the whole picture" option ── */
.hm-slide.fit-contain { background-size:contain; background-color:var(--spj-primary); }
.hm-slide.fit-contain::before { background:linear-gradient(90deg, color-mix(in srgb, var(--spj-primary) 55%, transparent) 0%, transparent 55%); }