/* Verdict Partners v2 — fee receipt, process, cases, team, insights, pricing, quotes, faq, contacts, footer, cursor */

/* fee calculator */
.fee { display: grid; gap: 40px; }
.fee__head { margin-bottom: 0; }
.feecalc { display: grid; gap: 30px; }
.feecalc__fields { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--mutL); }
.field input, .field select, .field textarea { min-height: 54px; padding: 0 16px; border: 0; border-radius: 2px; background: #fbf8f2; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lineL), 0 1px 0 rgba(255, 255, 255, .7); transition: box-shadow .3s; }
.field textarea { padding: 14px 16px; resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--brass-lo); }
.field[hidden] { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brass-lo); }
.receipt { position: relative; display: grid; gap: 10px; align-content: start; padding: 34px 32px 40px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 50px 90px -40px rgba(60, 40, 10, .45), 0 0 0 1px var(--lineL); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.2deg); transition: transform .5s var(--ease); -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 50% 100% / 22px 100% repeat-x; mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 50% 100% / 22px 100% repeat-x; }
.receipt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .6), transparent 50%); opacity: .5; }
.receipt__top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--mutL); padding-bottom: 16px; border-bottom: 1px dashed var(--lineL); }
.receipt__label { margin-top: 16px; font-size: 15px; color: var(--mutL); }
.receipt__sum { font: 500 clamp(48px, 6vw, 96px)/1 var(--serif); font-stretch: 70%; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.receipt__sum.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { color: var(--brass-lo); transform: translateY(-3px); } }
.receipt__rule { padding-right: 96px; font-size: 13px; color: var(--ink2); line-height: 1.6; padding-top: 14px; border-top: 1px solid var(--lineL); }
.receipt__stamp { position: absolute; right: 24px; bottom: 34px; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(125, 90, 43, .55); color: rgba(125, 90, 43, .7); font: 500 30px var(--serif); transform: rotate(-14deg); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(125, 90, 43, .45); }
.fee__note { color: var(--mutL); }
@media (min-width: 1040px) { .fee { grid-template-columns: .9fr 1.1fr; column-gap: 80px; } .fee__head { grid-row: 1 / 3; } .feecalc { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .fee__note { grid-column: 1 / -1; } }

/* process */
.steps { position: relative; display: grid; gap: 34px; }
.steps__line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--lineD2); }
.steps__line i { display: block; width: 100%; height: var(--sp, 0%); background: var(--metal); box-shadow: 0 0 10px rgba(230, 200, 142, .6); }
.step { position: relative; padding-left: 34px; }
.step::before { content: ''; position: absolute; left: -5px; top: 18px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--g1); box-shadow: inset 0 0 0 1px var(--brass); transition: background .5s; }
.step.is-on::before { background: var(--brass-hi); }
.step__n { display: block; font: 500 clamp(64px, 7vw, 120px)/.9 var(--serif); font-stretch: 70%; color: transparent; -webkit-text-stroke: 1px rgba(230, 200, 142, .45); transition: color .6s, -webkit-text-stroke-color .6s; }
.step.is-on .step__n { color: transparent; -webkit-text-stroke-color: var(--brass-hi); }
.step h3 { font: 500 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); margin-top: 14px; }
.step p { color: var(--mutD); margin-top: 10px; max-width: 42ch; }
.step small { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--brass-hi); }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 40px; padding-top: 40px; }
  .steps__line { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .steps__line i { height: 100%; width: var(--sp, 0%); }
  .step { padding-left: 0; padding-top: 30px; }
  .step::before { left: 0; top: -45px; }
}

/* cases */
.cases { display: grid; border-top: 1px solid var(--lineL); }
.case { display: grid; gap: 20px; padding: 46px 0; border-bottom: 1px solid var(--lineL); }
.case__big { font: 500 clamp(110px, 17vw, 270px)/.8 var(--serif); font-stretch: 64%; letter-spacing: -.04em; color: var(--ink); display: flex; align-items: flex-end; gap: 14px; }
.case__big span { background: linear-gradient(180deg, #2a2620, #6a5233); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case__big small { font: 400 15px/1.2 var(--mono); letter-spacing: 0; color: var(--brass-lo); padding-bottom: 14px; max-width: 6ch; }
.case__tag { font-size: 13px; color: var(--brass-lo); }
.case h3 { font: 500 clamp(28px, 2.6vw, 42px)/1.08 var(--serif); font-stretch: 80%; margin-top: 10px; }
.case__txt > p:not(.case__tag) { margin-top: 14px; color: var(--ink2); max-width: 60ch; }
.case dl { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 22px; }
.case dt { font: 400 12px var(--mono); color: var(--mutL); }
.case dd { font: 500 20px var(--serif); margin-top: 2px; }
@media (min-width: 1000px) { .case { grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; } .case:nth-child(even) .case__big { order: 2; justify-content: flex-end; } }

/* team */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-bottom: 44px; border-bottom: 1px solid var(--lineD); }
.chip { position: relative; padding: 12px 0; border: 0; background: none; color: var(--mutD); font-size: 15.5px; cursor: pointer; transition: color .3s; }
.chip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass-hi); transform: scaleX(0); transition: transform .5s var(--ease); }
.chip:hover { color: var(--txD); }
.chip.is-on { color: var(--txD); }
.chip.is-on::after { transform: scaleX(1); }
.team { display: grid; gap: 16px; }
.role { position: relative; padding: 32px 28px; background: linear-gradient(170deg, #24252b, #1a1b1f); box-shadow: inset 0 0 0 1px var(--lineD); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), opacity .5s, box-shadow .5s, filter .5s; }
.role::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(230, 200, 142, .12), transparent 50%); opacity: 0; transition: opacity .4s; }
.role.is-tilt::after { opacity: 1; }
.role__mono { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; font: 500 26px var(--serif); color: #2a1d0b; background: var(--metal); box-shadow: inset 0 2px 3px rgba(255, 240, 200, .8), inset 0 -3px 6px rgba(60, 40, 10, .5), 0 10px 30px -10px rgba(185, 143, 85, .6); }
.role h3 { font: 500 26px/1.15 var(--serif); margin-top: 24px; }
.role p { color: var(--mutD); margin-top: 10px; font-size: 15.5px; }
.role small { display: block; margin-top: 18px; font-size: 12.5px; color: var(--brass-hi); }
.role.is-hit { box-shadow: inset 0 0 0 1px var(--brass), 0 30px 80px -40px rgba(230, 200, 142, .5); }
.role.is-dim { opacity: .35; filter: saturate(.3); }
@media (min-width: 700px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .team { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* insights */
.posts { border-top: 1px solid var(--lineL); }
.post { position: relative; display: grid; gap: 8px; padding: 34px 0; border-bottom: 1px solid var(--lineL); }
.post time { font-size: 13px; color: var(--brass-lo); }
.post h3 { font: 500 clamp(26px, 2.8vw, 44px)/1.08 var(--serif); font-stretch: 80%; max-width: 26ch; transition: transform .6s var(--ease); }
.post:hover h3 { transform: translateX(12px); }
.post p { color: var(--ink2); max-width: 60ch; }
.post__more { font-size: 12.5px; color: var(--mutL); }
@media (min-width: 1000px) { .post { grid-template-columns: 160px 1fr 260px; align-items: baseline; gap: 30px; } .post p { grid-column: 3; grid-row: 1; } .post__more { grid-column: 3; } }

/* pricing: contract schedule */
.plans { display: grid; border-top: 1px solid var(--lineL); }
.plan { position: relative; display: grid; align-content: start; gap: 14px; padding: 36px 0 40px; border-bottom: 1px solid var(--lineL); }
.plan h3 { font: 500 clamp(30px, 2.8vw, 44px)/1 var(--serif); font-stretch: 80%; }
.plan__price { font: 500 clamp(44px, 4.4vw, 72px)/1 var(--serif); font-stretch: 70%; letter-spacing: -.02em; }
.plan__price small { font: 400 15px var(--sans); color: var(--mutL); letter-spacing: 0; }
.plan > p:not(.plan__price):not(.plan__flag) { color: var(--ink2); }
.plan ul { display: grid; gap: 8px; margin: 6px 0 14px; font-size: 15px; color: var(--ink2); }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: '§'; color: var(--brass-lo); }
.plan .btn { justify-self: start; }
.plan__flag { font-size: 12.5px; color: var(--brass-lo); }
.plan--main { padding: 36px 28px 40px; margin: 0 calc(var(--gut) * -0.5); background: var(--g1); color: var(--txD); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .6); }
.plan--main::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--metal); }
.plan--main .plan__price { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan--main .plan__price small, .plan--main > p:not(.plan__price):not(.plan__flag), .plan--main ul { color: var(--mutD); }
.plan--main .plan__flag { color: var(--brass-hi); }
@media (min-width: 1000px) {
  .plans { grid-template-columns: 1fr 1.08fr 1fr; border-top: 0; align-items: stretch; }
  .plan { padding: 44px 40px 48px; border-bottom: 0; border-left: 1px solid var(--lineL); }
  .plan:first-child { border-left: 0; padding-left: 0; }
  .plan--main { margin: -24px 0; padding: 68px 40px; border-left: 0; }
  .plan--main + .plan { border-left: 0; }
}

/* quotes */
.sec--quotes { overflow: hidden; }
.sec--quotes::before { content: '«'; position: absolute; right: -2vw; top: -6vw; font: 400 46vw/1 var(--serif); color: rgba(230, 200, 142, .05); pointer-events: none; }
.quotes { display: grid; gap: 50px; }
.quotes blockquote { position: relative; padding-top: 26px; border-top: 1px solid var(--lineD2); }
.quotes p { font: 400 clamp(24px, 2.4vw, 36px)/1.3 var(--serif); font-stretch: 85%; color: var(--txD); }
.quotes footer { margin-top: 20px; font-size: 13px; color: var(--brass-hi); }
@media (min-width: 1000px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 50px; } .quotes blockquote:nth-child(2) { margin-top: 90px; } .quotes blockquote:nth-child(3) { margin-top: 180px; } }

/* faq */
.faqwrap { display: grid; gap: 30px; }
.faq details { border-bottom: 1px solid var(--lineL); }
.faq details:first-child { border-top: 1px solid var(--lineL); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 26px 50px 26px 0; font: 500 clamp(21px, 2vw, 28px)/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 20px; height: 1.5px; background: var(--ink); transition: transform .5s var(--ease), background .3s; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details[open] summary::before, .faq details[open] summary::after { background: var(--brass-lo); }
.faq details p { padding: 0 50px 28px 0; color: var(--ink2); max-width: 64ch; }
@media (min-width: 1000px) { .faqwrap { grid-template-columns: .8fr 1.2fr; gap: 80px; } .faq__head { position: sticky; top: 110px; align-self: start; } }

/* contacts */
#contacts { overflow: hidden; }
.contacts__photo { position: absolute; inset: 0 0 auto auto; width: 60%; height: 70%; opacity: .2; -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 70%); mask-image: linear-gradient(200deg, #000 20%, transparent 70%); }
.contacts__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.contacts { position: relative; display: grid; gap: 50px; }
.contacts address { font: 400 clamp(22px, 2vw, 28px)/1.4 var(--serif); font-style: normal; margin-top: 26px; }
.contacts__links { margin-top: 18px; font-size: 17px; line-height: 1.9; }
.contacts__links a { border-bottom: 1px solid var(--lineD2); transition: border-color .3s, color .3s; }
.contacts__links a:hover { color: var(--brass-hi); border-color: var(--brass-hi); }
.hours { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--lineD); }
.hours div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--lineD); font-size: 15px; }
.hours dt { color: var(--mutD); }
.map { margin-top: 28px; min-height: 120px; display: grid; gap: 10px; align-content: start; }
.map .btn { justify-self: start; color: var(--brass-hi); }
.map.is-live { min-height: 300px; }
.map iframe { width: 100%; height: 300px; border: 0; filter: grayscale(1) invert(.92) contrast(.9) sepia(.2); }
.consult { position: relative; padding: clamp(28px, 4vw, 52px); background: var(--paper); color: var(--ink); box-shadow: 0 70px 140px -60px rgba(0, 0, 0, .9); }
.consult::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--metal); }
.consult__head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--mutL); padding-bottom: 18px; border-bottom: 1px solid var(--lineL); margin-bottom: 22px; }
.consult h3 { font: 500 clamp(32px, 3vw, 46px)/1.05 var(--serif); font-stretch: 80%; }
.consult > p { color: var(--ink2); margin: 10px 0 24px; }
.consult .field { margin-bottom: 16px; }
.consult .note { color: var(--mutL); margin-top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__err { margin-top: 12px; color: #9b2c1c; font-size: 14px; }
.thanks { text-align: center; padding: 40px 0; }
.thanks svg { width: 70px; margin: 0 auto 18px; color: var(--brass-lo); }
.thanks h3 { font: 500 32px var(--serif); }
.thanks p { color: var(--ink2); margin-top: 8px; }
@media (min-width: 1000px) { .contacts { grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; } }

/* footer */
.foot { padding: 50px 0 36px; background: var(--g0); border-top: 1px solid var(--lineD); overflow: hidden; }
.foot__word { font: 500 clamp(56px, 13vw, 220px)/.85 var(--serif); font-stretch: 64%; letter-spacing: -.03em; white-space: nowrap; background: linear-gradient(180deg, rgba(230, 200, 142, .75), rgba(230, 200, 142, .04) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 44px; }
.foot__in { display: grid; gap: 18px; }
.brand--foot { font-size: 18px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--mutD); }
.foot nav a:hover { color: var(--brass-hi); }
.foot__demo { font-size: 13px; color: var(--mutD); max-width: 70ch; }
@media (min-width: 900px) { .foot__in { grid-template-columns: auto 1fr; align-items: center; } .foot nav { justify-content: flex-end; } .foot__demo { grid-column: 1 / -1; } }

/* cursor */
.has-cursor input, .has-cursor select, .has-cursor textarea { cursor: auto; }
.cursor { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; }
.cursor.is-on { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #e6c88e; }
.cursor__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; }
.cursor__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(230, 200, 142, .8); transition: transform .45s var(--ease), background .45s; }
.cursor.is-hover .cursor__ring::before { transform: scale(1.8); background: rgba(230, 200, 142, .15); }
.cursor.is-down .cursor__ring::before { transform: scale(.8); }
.cursor__label { position: relative; font: 400 10px var(--mono); color: #fff; opacity: 0; }
.cursor.is-label .cursor__label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* QA 06.11 — дрібниці: заголовки без сиріт, тап-зони футера на телефоні ≥44px */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
@media (max-width: 760px) { footer a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 760px) {
  p a:not([class]), dd a:not([class]) { padding-block: 10px; }
  header .logo, header .brand, header a[class*="logo"] { padding-block: 8px; margin-block: -8px; }
}
[hidden] { display: none !important; }
