/* ==========================================================
   SERVICES page styles (services.php)
   ========================================================== */

/* ---------- Quick-jump tabs ---------- */
.svc-tabs-wrap { position: relative; z-index: 2; margin-top: -40px; }
.svc-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.svc-tabs a {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 24px 18px; font-weight: 600; color: var(--navy);
    transition: background .25s, color .25s;
}
.svc-tabs a + a { border-left: 1px solid var(--line); }
.svc-tabs .icon { color: var(--gold); transition: color .25s; }
.svc-tabs a:hover { background: var(--navy); color: var(--amber); }
.svc-tabs a:hover .icon { color: var(--amber); }

/* ---------- Service blocks ---------- */
.svc { scroll-margin-top: 150px; }
.svc--alt { background: var(--sand); }
.svc__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.svc--alt .svc__media { order: 2; }

.svc__media { position: relative; }
.svc__frame {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 4 / 3.3; box-shadow: var(--shadow);
}
.svc__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc__media:hover .svc__frame img { transform: scale(1.05); }
.svc__media::before { /* stripes offset behind the image */
    content: ""; position: absolute; left: -22px; top: -22px; width: 45%; height: 45%;
    border-radius: var(--radius-lg);
    background: repeating-linear-gradient(135deg, transparent 0 14px, var(--amber) 14px 16px);
}
.svc--alt .svc__media::before { left: auto; right: -22px; }
.svc__num {
    position: absolute; right: -18px; bottom: -22px;
    width: 104px; height: 90px; display: grid; place-items: center;
    background: var(--navy); color: var(--amber);
    font-family: var(--font-head); font-weight: 700; font-size: 2rem;
    clip-path: var(--hex);
}
.svc--alt .svc__num { right: auto; left: -18px; }

.svc__text .eyebrow .icon { order: -1; }
.svc__text .eyebrow::before { display: none; }
.svc__intro { color: var(--muted); font-size: 1.04rem; }
.svc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 26px 0 34px; }
.svc__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; font-weight: 500; color: var(--navy); }
.svc__list .icon { flex-shrink: 0; margin-top: 3px; color: var(--navy); background: var(--amber); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.svc__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.svc__call { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy); }
.svc__call .icon { color: var(--gold); }
.svc__call:hover { color: var(--gold-deep); }

/* ---------- Plans ---------- */
.plans__lead { color: #a9b4bd; }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--navy-700); border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-lg); padding: 42px 34px;
    transition: transform .35s var(--ease);
}
.plan:hover { transform: translateY(-6px); }
.plan > .icon { color: var(--amber); margin-bottom: 18px; }
.plan h3 { font-family: var(--font-head); color: var(--white); font-size: 1.5rem; margin-bottom: 4px; }
.plan__for { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 24px; }
.plan ul { margin-bottom: 30px; }
.plan li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); font-size: .94rem; color: #c7d0d7; }
.plan li .icon { color: var(--amber); flex-shrink: 0; }
.plan .btn { margin-top: auto; }

.plan--featured { background: var(--amber); border-color: var(--amber); transform: scale(1.04); }
.plan--featured:hover { transform: scale(1.04) translateY(-6px); }
.plan--featured > .icon, .plan--featured h3, .plan--featured .plan__for { color: var(--navy); }
.plan--featured li { color: #2d2716; border-color: rgba(19, 29, 39, .15); }
.plan--featured li .icon { color: var(--navy); }
.plan__tag {
    position: absolute; top: 20px; right: 20px;
    background: var(--navy); color: var(--amber);
    font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.faq__head { position: sticky; top: 120px; }
.faq__head .section-lead { margin-bottom: 28px; }
.faq__item { background: var(--white); border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow-sm); border: 1px solid transparent; transition: border-color .25s; }
.faq__item[open] { border-color: var(--amber); }
.faq__item summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 22px 64px 22px 26px; font-weight: 600; color: var(--navy); font-size: 1.02rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus {
    position: absolute; right: 22px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
    border-radius: 50%; background: var(--sand);
}
.faq__plus::before, .faq__plus::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
    background: var(--navy); transition: transform .3s var(--ease);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus { background: var(--amber); }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__item p { padding: 0 26px 24px; margin: 0; color: var(--muted); }

.cta-wrap { padding: 20px 0 100px; }

/* ---------- JavaScript-driven extras (services.js) ---------- */
.svc-tabs-wrap { position: sticky; top: 84px; z-index: 50; }
.svc-tabs { transition: border-radius .3s, box-shadow .3s; }
.svc-tabs-wrap.is-stuck .svc-tabs { border-radius: 0 0 var(--radius) var(--radius); }
.svc-tabs-wrap.is-stuck .svc-tabs a { padding: 14px 18px; }
.svc-tabs a { position: relative; }
.svc-tabs a::after {
    content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px;
    background: var(--amber); transform: scaleX(0); transition: transform .3s var(--ease);
}
.svc-tabs a.is-active { color: var(--gold-deep); }
.svc-tabs a.is-active::after { transform: scaleX(1); }

.faq__search { position: relative; margin-bottom: 18px; }
.faq__search .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.faq__search input {
    width: 100%; padding: 16px 18px 16px 50px; border-radius: 999px;
    border: 1.5px solid var(--line); background: var(--white); font-size: .95rem;
}
.faq__search input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(249, 177, 42, .18); }
.faq__empty { color: var(--muted); padding: 10px 4px; }
.faq__empty a { color: var(--gold-deep); font-weight: 600; }
.faq__item mark { background: rgba(249, 177, 42, .4); color: inherit; border-radius: 3px; padding: 0 2px; }
.faq__item p { animation: none; }
.faq__item.is-opening p { animation: faqIn .35s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
    .svc-tabs-wrap { top: 72px; }
    .svc-tabs-wrap.is-stuck .svc-tabs { grid-template-columns: repeat(3, 1fr); }
    .svc-tabs-wrap.is-stuck .svc-tabs a { justify-content: center; padding: 12px 6px; font-size: .78rem; flex-direction: column; gap: 4px; text-align: center; }
    .svc-tabs-wrap.is-stuck .svc-tabs a + a { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
    .svc__grid, .faq__grid { grid-template-columns: 1fr; gap: 56px; }
    .svc--alt .svc__media { order: 0; }
    .svc__media { max-width: 600px; }
    .plans__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .plan--featured, .plan--featured:hover { transform: none; }
    .faq__head { position: static; }
}
@media (max-width: 700px) {
    .svc-tabs { grid-template-columns: 1fr; }
    .svc-tabs a { justify-content: flex-start; padding: 18px 22px; }
    .svc-tabs a + a { border-left: 0; border-top: 1px solid var(--line); }
    .svc__list { grid-template-columns: 1fr; }
    .svc__media::before { left: -10px; top: -10px; }
    .svc--alt .svc__media::before { right: -10px; }
    .svc__num { width: 80px; height: 70px; font-size: 1.5rem; right: -6px; }
    .svc--alt .svc__num { left: -6px; }
    .cta-wrap { padding: 0 0 70px; }
}