/* ==========================================================================
   WHY CHOOSE VAHRK — section#whyus (approved Solution 01 "Buyer Decision Factors", 8 Oct 2026)
   Markup: why-choose-section.php · Content: data/why-choose.php · Behaviour: js/why-choose.js
     ≥992    [ head: eyebrow + H2 | lead ]
             [ five buyer questions, each with a one-line answer | evidence card: capability · evidence · why · CTA ]
     <992    one card: numbered selector → answer → lead evidence → CTA; height locked to the tallest answer
   Measured (preview, go-live view): 75% of 1440×900, 96% of 1366×768, 100% of 390×844.
   Sits on a light-grey band between Our Projects (dark) and How We Work (white).
   Neutral palette; teal only on the CTA and links; orange accents for the active question.
   Every rule is scoped under .wcv / .wcv1. Resets use :where(.wcv) element (0,0,1).
   Built from why-vahrk-concepts/ (wcv-base.css + s1.css).
   ========================================================================== */
/* base (scope .wcv). Neutral palette; teal only on actions/links,
   small orange accents for active states. Resets use :where(.wcv) el (0,0,1) so component classes always win. */
.wcv {
    --wcv-ink:#17202a;
    --wcv-body:#3f4954;
    --wcv-muted:#5f6974;
    --wcv-line:#e1e5e9;
    --wcv-line-2:#cfd5db;
    --wcv-surface:#f5f6f7;
    --wcv-surface-2:#eceff2;
    --wcv-bar:#1b2229;
    --wcv-teal:var(--primary-color, #006b7a);
    --wcv-teal-d:var(--primary-dark, #004a54);
    --wcv-orange:var(--accent-color, #ff8a3d);
    --wcv-orange-d:#c25a12;
    --wcv-r:12px;
    font-family:"Nunito", sans-serif;
    color:var(--wcv-body);
    padding:64px 0;
    background:#fff;
}
:where(.wcv) *, :where(.wcv) *::before, :where(.wcv) *::after { box-sizing:border-box; }
:where(.wcv) p, :where(.wcv) dl, :where(.wcv) dd, :where(.wcv) figure, :where(.wcv) ul, :where(.wcv) ol { margin:0; padding:0; }
:where(.wcv) ul, :where(.wcv) ol { list-style:none; }
:where(.wcv) h2, :where(.wcv) h3, :where(.wcv) h4 { font-family:"Poppins", "Nunito", sans-serif; color:var(--wcv-ink); margin:0; letter-spacing:-.01em; }
:where(.wcv) button { font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
:where(.wcv) a { color:var(--wcv-teal); text-decoration:none; }
:where(.wcv) img { display:block; max-width:100%; }

.wcv-i { width:1em; height:1em; flex:none; }

/* heading block (style.css centres and decorates every .whyservo/section h2 — this section uses its own classes) */
.wcv-eyebrow { display:flex; align-items:center; gap:10px; font-family:"Poppins", sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#4d5863; margin-bottom:8px; }
.wcv-eyebrow::before { content:""; width:22px; height:2px; background:var(--wcv-orange); border-radius:2px; }
.wcv .wcv-h2 { font-size:clamp(26px, 2.6vw, 36px); font-weight:800; line-height:1.15; text-align:left; margin:0 0 8px; padding:0; }
.wcv .wcv-h2::after { content:none; display:none; }
.wcv-lead { font-size:16px; line-height:1.55; color:var(--wcv-body); max-width:62ch; }

/* primary action */
.wcv-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:10px;
    background:var(--wcv-teal); color:#fff; font-family:"Poppins", sans-serif; font-size:15px; font-weight:600; line-height:1.2;
    transition:background .15s, transform .15s; }
.wcv-btn:hover { background:var(--wcv-teal-d); }
.wcv-btn:active { transform:translateY(1px); }
.wcv-btn .wcv-i { width:18px; height:18px; transition:transform .15s; }
.wcv-btn:hover .wcv-i { transform:translateX(3px); }
.wcv-btn--light { background:#fff; color:var(--wcv-ink); }
.wcv-btn--light:hover { background:#fff3ea; }
.wcv :focus-visible { outline:3px solid var(--wcv-orange); outline-offset:2px; border-radius:6px; }

/* ---------- Solution 01 layout */
.wcv1 { padding:44px 0 48px; }
.wcv1__head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:22px; }
.wcv1__head .wcv-h2 { margin:0; }
.wcv1__lead { max-width:540px; padding-bottom:4px; }
.wcv1__talk { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:13.5px; color:var(--wcv-muted); white-space:nowrap; }
.wcv1__talk a { display:inline-flex; align-items:center; gap:7px; font-family:"Poppins", sans-serif; font-size:16px; font-weight:600; color:var(--wcv-ink); }
.wcv1__talk a .wcv-i { width:17px; height:17px; color:var(--wcv-teal); }
.wcv1__talk a:hover { color:var(--wcv-teal); }

.wcv1__body { display:grid; grid-template-columns:minmax(330px, 410px) 1fr; gap:22px; align-items:stretch; }

/* question list — every answer readable without a click */
.wcv1__list { display:flex; flex-direction:column; gap:6px; }
.wcv1__tab { display:grid; grid-template-columns:34px 1fr; gap:2px 8px; align-items:start; width:100%; flex:1 1 0; padding:11px 16px 11px 14px;
    border-radius:12px; border:1px solid transparent; background:var(--wcv-surface); transition:background .15s, border-color .15s, box-shadow .15s; }
.wcv1__tab:hover { background:var(--wcv-surface-2); }
.wcv1__n { font-family:"Poppins", sans-serif; font-size:13px; font-weight:600; color:#8a939c; line-height:22px; }
.wcv1__tab-t { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wcv1__q { font-family:"Poppins", sans-serif; font-size:14.5px; font-weight:600; line-height:1.4; color:var(--wcv-ink); }
.wcv1__ans { font-size:13.5px; line-height:1.4; color:var(--wcv-muted); }
.wcv1__short { display:none; }
.wcv1__tab[aria-selected="true"] { background:#fff; border-color:var(--wcv-line); box-shadow:inset 3px 0 0 var(--wcv-orange), 0 6px 18px rgba(23,32,42,.07); }
.wcv1__tab[aria-selected="true"] .wcv1__n { color:var(--wcv-orange-d); }
.wcv1__tab[aria-selected="true"] .wcv1__ans { color:var(--wcv-body); }

/* evidence card */
.wcv1__card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--wcv-line); border-radius:16px; box-shadow:0 10px 30px rgba(23,32,42,.06); }
.wcv1__panel { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas:"main ev" "act act"; gap:22px 30px; padding:26px 28px 0; flex:1 1 auto; grid-template-rows:1fr auto; }
.wcv1__card.is-measuring { align-self:start; }
.wcv1__card.is-measuring .wcv1__panel { flex:none; }
.wcv1__panel[hidden] { display:none; }
.wcv1__panel:focus-visible { outline-offset:-3px; border-radius:16px; }
.wcv1__main { grid-area:main; min-width:0; }
.wcv1__kq { display:none; }
.wcv1__title { font-size:21px; font-weight:700; line-height:1.28; margin-bottom:8px; }
.wcv1__line { font-size:15px; line-height:1.55; margin-bottom:14px; }
.wcv1__offer { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.wcv1__offer li { position:relative; padding-left:18px; font-size:14.5px; line-height:1.45; color:var(--wcv-ink); }
.wcv1__offer li::before { content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:2px; background:var(--wcv-orange); }
.wcv1__why { padding:13px 16px; border-radius:10px; background:var(--wcv-surface); }
.wcv1__why b { display:block; font-family:"Poppins", sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--wcv-teal-d); margin-bottom:3px; }
.wcv1__why p { font-size:14.5px; line-height:1.5; color:var(--wcv-ink); }

.wcv1__ev { grid-area:ev; display:flex; flex-direction:column; gap:8px; min-width:0; }
.wcv1__ev-h { font-family:"Poppins", sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#4d5863; }
.wcv1__ph { display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:center; padding:6px; border-radius:10px; background:var(--wcv-surface); }
.wcv1__ph img { width:132px; height:92px; object-fit:cover; border-radius:7px; }
.wcv1__ph figcaption { display:flex; flex-direction:column; gap:2px; align-items:flex-start; min-width:0; }
.wcv1__ph figcaption b { font-family:"Poppins", sans-serif; font-size:13.5px; font-weight:600; color:var(--wcv-ink); line-height:1.3; }
.wcv1__ph figcaption span { font-size:13px; line-height:1.4; color:var(--wcv-muted); }
.wcv1__rec { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--wcv-line); flex-wrap:wrap; }
.wcv1__rec > .wcv-i { width:18px; height:18px; color:var(--wcv-teal); margin-top:2px; }
.wcv1__rec p { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wcv1__rec b { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--wcv-muted); }
.wcv1__rec span { font-size:14px; line-height:1.4; color:var(--wcv-ink); overflow-wrap:anywhere; }
.wcv1__rec--wait { border-style:dashed; border-color:#e3b9a0; background:#fffaf6; }
.wcv1__rec--wait > .wcv-i { color:var(--wcv-orange-d); }
.wcv1__spec { padding:4px 14px 10px; border-radius:10px; background:var(--wcv-surface); }
.wcv1__spec dl > div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--wcv-line); }
.wcv1__spec dt { font-size:13.5px; font-weight:600; color:var(--wcv-muted); }
.wcv1__spec dd { font-size:14px; font-weight:700; color:var(--wcv-ink); text-align:right; }
.wcv1__spec > p { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:8px; font-size:12.5px; color:var(--wcv-muted); }
.wcv1__spec > p .wcv-i { color:var(--wcv-teal); }
.wcv1__more { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:2px; font-size:14px; font-weight:700; }
.wcv1__more .wcv-i { width:15px; height:15px; transition:transform .15s; }
.wcv1__more:hover .wcv-i { transform:translateX(3px); }

.wcv1__act { grid-area:act; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 -28px; padding:13px 28px; border-top:1px solid var(--wcv-line); background:#fcfcfd; border-radius:0 0 16px 16px; }
.wcv1__act-alt { font-size:14px; color:var(--wcv-muted); }
.wcv1__act-alt a { font-weight:700; }

/* ---------- 992–1199: narrower list */
@media (max-width:1199.98px) {
    .wcv1__body { grid-template-columns:330px 1fr; }
    .wcv1__panel { gap:20px 22px; padding:22px 22px 0; }
    .wcv1__act { margin:0 -22px; padding:14px 22px; }
    .wcv1__ph { grid-template-columns:1fr; }
    .wcv1__ph img { width:100%; height:110px; }
}

/* ---------- ≤991: one card — numbered selector attached to the panel */
@media (max-width:991.98px) {
    .wcv1 { padding:44px 0 48px; }
    .wcv1__head { flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:18px; }
    .wcv1__talk { display:none; }
    .wcv1__body { display:block; border:1px solid var(--wcv-line); border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(23,32,42,.06); overflow:hidden; }
    .wcv1__list { flex-direction:row; gap:0; background:var(--wcv-surface); border-bottom:1px solid var(--wcv-line); }
    .wcv1__tab { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px; min-height:58px; padding:8px 4px 7px; border-radius:0; border:0; text-align:center; }
    .wcv1__tab[aria-selected="true"] { background:#fff; box-shadow:inset 0 -3px 0 var(--wcv-orange); }
    .wcv1__n { line-height:1.2; }
    .wcv1__q, .wcv1__ans { display:none; }
    .wcv1__short { display:block; font-family:"Poppins", sans-serif; font-size:12.5px; font-weight:600; line-height:1.2; color:var(--wcv-ink); }
    .wcv1__card { border:0; border-radius:0; box-shadow:none; }
    .wcv1__panel { padding:20px 22px 0; }
    .wcv1__act { margin:0 -22px; border-radius:0; }
    .wcv1__kq { display:block; font-size:13.5px; line-height:1.4; color:var(--wcv-muted); margin-bottom:6px; }
    .wcv1__kq span { font-family:"Poppins", sans-serif; font-weight:600; color:var(--wcv-orange-d); margin-right:8px; }
    .wcv1__ph { grid-template-columns:120px 1fr; }
    .wcv1__ph img { width:120px; height:84px; }
}

/* ---------- ≤767: single column panel */
@media (max-width:767.98px) {
    .wcv1__panel { grid-template-columns:1fr; grid-template-areas:"main" "ev" "act"; grid-template-rows:auto auto 1fr; gap:16px; padding:18px 16px 0; }
    .wcv1__act { align-self:end; }
    .wcv1__act { margin:0 -16px; padding:12px 16px 14px; }
    .wcv1__act .wcv-btn { width:100%; }
    .wcv1__act-alt { width:100%; text-align:center; }
    .wcv1__title { font-size:19px; margin-bottom:6px; }
    .wcv1__line { display:none; }
    .wcv1__offer { gap:5px; margin-bottom:12px; }
    .wcv1__offer li { font-size:14px; }
    .wcv1__why { padding:11px 13px; }
    .wcv1__why p { font-size:14px; }
    .wcv1__ev-h { display:none; }
    .wcv1__ph { grid-template-columns:96px 1fr; padding:5px; }
    .wcv1__ph img { width:96px; height:68px; }
    .wcv1__rec { padding:8px 10px; }
    .wcv1__spec dl > div { padding:5px 0; }
    .wcv1__more { display:none; }
}
@media (max-width:374.98px) {
    .wcv1__short { font-size:11.5px; }
    .wcv1__tab { padding:8px 2px 7px; }
}

/* phones: keep the five selectors inside the card and the answer within about one screen */
@media (max-width:991.98px) {
    .wcv1__tab { min-width:0; }
}
@media (max-width:575.98px) {
    .wcv1 .wcv-lead { font-size:15px; line-height:1.5; }
    .wcv1__short { font-size:11.5px; letter-spacing:-.01em; }
    .wcv1__offer li:nth-child(3) { display:none; }          /* third point stays on tablet/desktop */
    .wcv1__spec dl > div:nth-child(n+4) { display:none; }    /* core, thickness, length on phones */
    .wcv1__kq { font-size:13px; }
}
@media (max-width:575.98px) {
    /* phones: the lead piece of evidence only (photo, spec table or registry); the full set shows from 576 px up */
    .wcv1__ev > .wcv1__rec:not(:nth-child(2)), .wcv1__ev > .wcv1__spec:not(:nth-child(2)) { display:none; }
}

/* ---------- live placement: light-grey band so it reads apart from the white How We Work section below */
.wcv1 { background:var(--wcv-surface); }
.wcv1__tab { background:var(--wcv-surface-2); }
.wcv1__tab:hover { background:#e3e7eb; }
.wcv1__tab[aria-selected="true"] { background:#fff; }
.wcv1__why, .wcv1__ph, .wcv1__spec { background:#f5f6f7; }
@media (max-width:991.98px) {
    .wcv1__list { background:var(--wcv-surface-2); }
    .wcv1__tab { background:transparent; }
    .wcv1__tab[aria-selected="true"] { background:#fff; }
}

/* Pre-launch audit 2026-10-09: at 320–374 px the five phone tab labels touched ("ApprovalsVerifiable"). */
@media (max-width: 374.98px) {
    .wcv1 .wcv1__tab { padding-left: 2px; padding-right: 2px; }
    .wcv1 .wcv1__short { font-size: 10.5px; letter-spacing: -.02em; }
}