/* Velvinci FAQ page — approved design (7-faq, 30 Sep 2026). Scoped under .vq. */
.vq{--ink:#111111;--charcoal:#211A14;--stone:#6B6259;--label:#8C8984;--mist:#EEE9E2;--ivory:#FAF7F2;--white:#FFFFFF;--cognac:#9A6B4F;--gold:#C9A96A;--ok:#2F7D57;--serif:"Cormorant Garamond",Garamond,Georgia,serif;--sans:"Inter","Helvetica Neue",Arial,sans-serif}
/* shield from Kadence global link, button and form styles */
.vq a,.vq a:hover,.vq a:focus{color:inherit;text-decoration:none}
.vq button{font:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit;box-shadow:none;text-shadow:none;min-height:0;border-radius:0}
.vq input{box-shadow:none;margin:0;font-family:var(--sans)}
.vq :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vq li{margin:0}
.vq{container:vq / inline-size;background:var(--white);color:var(--charcoal);font-family:var(--sans);font-size:15.5px;line-height:1.6;position:relative;text-align:left}
.vq *{box-sizing:border-box}
.vq [hidden]{display:none!important}
.vq h1,.vq h2,.vq h3{text-transform:none;letter-spacing:normal;margin:0}
.vq p{margin:0}
.vq ul{margin:0;padding:0;list-style:none}
.vq .wrap{max-width:1290px;margin-inline:auto;padding-inline:clamp(16px,4cqw,48px)}
.vq .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cognac)}
.vq .crumbs{font-size:12.5px;color:var(--label);padding-block:18px}
.vq .crumbs span{color:var(--charcoal);font-weight:500}
.vq .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:2px;padding:18px 34px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;background:#fff;color:var(--ink);cursor:pointer;transition:background .25s}
.vq .btn:hover{background:#E5E1DA}
.vq .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s}
.vq .btn:hover svg{transform:translateX(3px)}

/* 1 hero + search */
.vq .hero{background:var(--ivory)}
.vq .hero .wrap{display:grid;justify-items:center;text-align:center;gap:20px;padding-block:72px 64px}
.vq .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5cqw,4.2rem);line-height:1.02;color:var(--ink);text-wrap:balance}
.vq .hero h1 em{font-style:italic;color:var(--cognac)}
.vq .lead{font-size:18px;color:var(--stone);max-width:52ch}
.vq .search{position:relative;width:min(640px,100%);margin-top:8px}
.vq .search svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;pointer-events:none}
.vq .search input{width:100%;height:60px;border:1px solid #E3DDD4;border-radius:999px;background:#fff;padding:0 56px 0 56px;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;box-shadow:0 10px 30px -18px rgba(33,26,20,.35)}
.vq .search input:focus{border-color:var(--ink)}
.vq .search input::placeholder{color:#A8A09A}
.vq .search .clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:var(--ivory);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vq .search .clear svg{position:static;transform:none;width:14px;height:14px}
.vq .popular{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:13px;color:var(--label)}
.vq .popular button{background:none;border:0;border-bottom:1px solid var(--mist);padding:2px 0;color:var(--charcoal);cursor:pointer;font-size:13px}
.vq .popular button:hover{border-color:var(--ink)}

/* 2 topic bar (sticks under the header) */
.vq .topics-bar{position:sticky;top:var(--vq-top,0px);z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--mist)}
.vq .topics{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:14px}
.vq .topics::-webkit-scrollbar{display:none}
.vq .topic{flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mist);background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;color:var(--stone);cursor:pointer;min-height:40px;white-space:nowrap;transition:all .2s}
.vq .topic i{font-style:normal;font-size:11px;color:var(--label);font-variant-numeric:tabular-nums}
.vq .topic:hover{border-color:var(--ink);color:var(--ink)}
.vq .topic[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vq .topic[aria-pressed="true"] i{color:#CFC6BB}

/* 3 questions */
.vq .body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,5cqw,80px);padding-block:56px 88px;align-items:start}
.vq .side{position:sticky;top:calc(var(--vq-top,0px) + 90px);display:grid;gap:22px}
.vq .side-nav{display:grid;border-top:1px solid var(--ink)}
.vq .side-nav a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--mist);font-size:14px;color:var(--stone)}
.vq .side-nav a:hover,.vq .side-nav a.on{color:var(--ink)}
.vq .side-nav a.on{font-weight:600}
.vq .side-nav a i{font-style:normal;font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.vq .side-help{background:var(--ivory);padding:22px;border-radius:2px;display:grid;gap:8px}
.vq .side-help b{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);line-height:1.15}
.vq .side-help p{font-size:13.5px;color:var(--stone)}
.vq .side-help a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--ink);justify-self:start;padding-bottom:2px;margin-top:4px}
.vq .groups{display:grid;gap:56px}
.vq .group{display:grid;gap:14px;scroll-margin-top:150px}
.vq .group-h{display:flex;align-items:baseline;gap:14px}
.vq .group-h h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3cqw,2.4rem);line-height:1.1;color:var(--ink)}
.vq .group-h span{font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.vq .qa{border-top:1px solid var(--ink)}
.vq .qa details{border-bottom:1px solid var(--mist);scroll-margin-top:150px}
.vq .qa summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:20px 0;min-height:44px;font-weight:500;font-size:16.5px;color:var(--ink)}
.vq .qa summary::-webkit-details-marker{display:none}
.vq .qa summary .pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--mist);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .25s,background .25s,border-color .25s}
.vq .qa summary .pm svg{width:12px;height:12px;fill:none;stroke:var(--cognac);stroke-width:2}
.vq .qa details[open] summary .pm{transform:rotate(45deg);background:var(--ink);border-color:var(--ink)}
.vq .qa details[open] summary .pm svg{stroke:#fff}
.vq .qa summary:hover{color:var(--cognac)}
.vq .ans{padding:0 44px 22px 0;display:grid;gap:12px}
.vq .ans p{color:var(--stone);font-size:15px;max-width:66ch}
.vq .ans-foot{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.vq .ans-foot a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:1px;color:var(--ink)}
.vq .ans-foot button{background:none;border:0;font-size:12px;color:var(--label);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.vq .ans-foot button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.vq .ans-foot button:hover{color:var(--ink)}
.vq mark{background:#F3E6C8;color:inherit;padding:0 1px;border-radius:2px}
.vq .noresult{padding:28px 0;border-top:1px solid var(--ink);display:grid;gap:8px}
.vq .noresult b{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--ink)}
.vq .noresult p{color:var(--stone)}

/* 4 closing band */
.vq .end{background:var(--ink);color:#EDE8E1}
.vq .end .wrap{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;padding-block:72px}
.vq .end h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6cqw,3rem);line-height:1.05;color:#fff}
.vq .end p{margin-top:10px;color:#B8B0A6;max-width:52ch}
.vq .end .btn{min-width:260px}
.vq .toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:13px;padding:10px 16px;border-radius:2px;z-index:20;white-space:nowrap}

/* ============================ PHONE ============================ */
@container vq (max-width:900px){
  .vq .body{grid-template-columns:1fr;padding-block:36px 48px}
  .vq .side{display:none}
}
@container vq (max-width:760px){
  .vq .crumbs{display:none}
  .vq .hero .wrap{padding-block:44px 40px;gap:16px}
  .vq .hero h1{font-size:2.6rem}
  .vq .lead{font-size:16.5px}
  .vq .search input{height:54px;font-size:16px}
  .vq .groups{gap:40px}
  .vq .qa summary{font-size:16px;padding:18px 0}
  .vq .ans{padding-right:0}
  .vq .end .wrap{grid-template-columns:1fr;padding-block:48px}
  .vq .end .btn{min-width:0;width:100%;min-height:54px}
}
@media (prefers-reduced-motion:reduce){.vq *{transition:none!important}}

/* website additions */
.vq .hero .crumbs{justify-self:start;padding-block:0}
.vq .crumbs a:hover{color:var(--ink)}
.vq .search input,.vq .search input:focus{border-radius:999px;height:60px}
.vq .search input:focus{box-shadow:0 10px 30px -18px rgba(33,26,20,.35);border-color:var(--ink)}
.vq .search .clear,.vq .search .clear:hover{border-radius:50%;background:var(--ivory);padding:0}
.vq .popular button,.vq .popular button:hover{background:none;color:var(--charcoal);padding:2px 0}
.vq .topic{border-radius:999px}
.vq .topic:hover{background:#fff}
.vq .topic[aria-pressed="true"],.vq .topic[aria-pressed="true"]:hover{background:var(--ink);color:#fff}
.vq .ans-foot button,.vq .ans-foot button:hover{background:none;padding:4px 0}
.vq .ans-foot button:hover{color:var(--ink)}
.vq .ans-foot a:hover{color:var(--cognac)}
.vq .side-help a:hover{color:var(--cognac)}
.vq .group,.vq .qa details{scroll-margin-top:calc(var(--vq-top,0px) + 80px)}
.vq .btn:hover,.vq .btn:focus{color:var(--ink)}
.vq .toast{position:fixed;top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
@container vq (max-width:760px){.vq .search input,.vq .search input:focus{height:54px}}