/* PZL Law — base styles (ported from the Claude Design component helmet) */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #F2EEE4;
  color: #1B1A17;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

::selection { background: rgba(156, 122, 47, 0.22); color: #1B1A17; }

input::placeholder,
textarea::placeholder { color: #736E63; }

.lucide { stroke-width: 1.5; }

/* ======================================================================
   Mobile navigation (hamburger). Burger hidden on desktop, shown on mobile.
   ====================================================================== */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #1B1A17;
  padding: 6px;
  line-height: 0;
}

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  background: rgba(242, 238, 228, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 92px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(-100%);
  transition: transform .4s ease;
  box-shadow: 0 14px 44px rgba(27, 26, 23, 0.14);
  border-bottom: 1px solid rgba(156, 122, 47, 0.16);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  color: #1B1A17;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(156, 122, 47, 0.12);
}
.mobile-menu .mobile-menu-cta {
  margin-top: 22px;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1B1A17;
  color: #F2EEE4;
  padding: 16px;
}

/* ======================================================================
   Responsive layout.
   The page uses inline styles, and `data-reveal` elements get their inline
   `style` re-serialized by JS — so layout overrides are keyed off explicit
   classes (g-*), not [style*] selectors. !important is needed to beat the
   inline `grid-template-columns`.
   ====================================================================== */

/* ====================================================================
   Attorney cards — CSS subgrid: every section (photo, name, tags, quote,
   each case row, footer) shares row tracks across all three cards, so
   they line up row-by-row at any width. Section spacing via margins.
   ==================================================================== */
/* Висота карток. ЗА ЗАМОВЧУВАННЯМ (усі справи згорнуті) — спільна: інакше низ
   карток «плаває» сходинками, бо біографії й пілюлі переносяться по-різному на
   кожній ширині вікна. Смуга «Обрані справи» притиснута margin-top:auto, тож усі
   три лежать на одній лінії.
   ЯК ТІЛЬКИ хоч одна справа розкрита — app.js вішає .has-open на сітку, і картки
   переходять на природну висоту: інакше грид тягне сусідів під найвищу картку й
   відкриває порожні провали (та сама причина, з якої колись прибрали субгрид). */
/* row-gap потрібен на ≤1150px, де картки переходять у 2 і 1 колонку: раніше в
   інлайні стояв row-gap:0 (спадок від субгрида, якому нульовий проміжок був
   обовʼязковий) і на всьому мобільному картки злипались рамка в рамку. */
.g-attorneys { align-items:stretch; row-gap:16px; }
.g-attorneys.has-open { align-items:start; }
.att-card { display:flex; flex-direction:column;
  background:#FBFAF4; border:1px solid #E0DACA; box-shadow:0 2px 12px rgba(27,26,23,0.05); overflow:hidden; }
.att-photo { position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#FBFAF4; }
.att-photo img { width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(12%) contrast(1.03); }
.att-photo .grad { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 88%, rgba(251,250,244,0.45) 100%); }
.att-name { padding:20px 26px 0; }
.att-name h3 { font-family:'Lora',serif; font-size:21px; font-weight:500; margin:0 0 5px; color:#1B1A17; }
.att-ig { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#7A5E1F; letter-spacing:.5px; text-decoration:none; transition:color .3s; }
.att-ig:hover { color:#9C7A2F; }
.att-pills { padding:0 26px; margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; align-items:flex-start; }
.att-tag { font-size:11px; color:#56524A; background:rgba(156,122,47,0.08); border:1px solid rgba(156,122,47,0.2); padding:5px 11px; border-radius:20px; }
.att-break { flex-basis:100%; height:0; margin-top:-6px; }  /* forces the next tag onto a new row */
.att-quote { margin:14px 26px 0; background:rgba(156,122,47,0.07); border-left:2px solid #9C7A2F; padding:11px 15px; font-family:'Lora',serif; font-size:14px; font-style:italic; line-height:1.4; color:#1B1A17; }
.att-kicker { padding:14px 26px 0; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#7A5E1F; }
.att-case { padding:8px 26px; border-bottom:1px solid rgba(156,122,47,0.16); display:flex; flex-direction:column; }
.att-case-end { border-bottom:none; }
.att-clabel { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#7A5E1F; margin-bottom:6px; }
.att-cdesc { font-size:13px; color:#56524A; line-height:1.5; }
.att-clink { display:inline-flex; align-items:center; gap:6px; color:#7A5E1F; font-size:11px; text-decoration:none; margin-top:auto; padding-top:8px; align-self:flex-start; }
.att-clink:hover { text-decoration:underline; text-underline-offset:3px; }
.att-foot { margin-top:14px; padding:14px 26px 20px; border-top:1px solid #E0DACA; display:flex; align-items:center; }
.att-contact { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#1B1A17; letter-spacing:.5px; text-decoration:none; transition:color .3s; min-height:44px; }
.att-contact:hover { color:#9C7A2F; }

/* Свідоцтво ЄРАУ + біографія + членство (редлайн 06.08.2026) */
.att-cred { padding:10px 26px 0; font-size:12px; color:#7A5E1F; line-height:1.55; }
.att-cred a { color:#7A5E1F; text-decoration:underline; text-underline-offset:2px; transition:color .3s; }
.att-cred a:hover { color:#9C7A2F; }
.att-bio  { padding:10px 26px 0; margin:0; font-size:13px; color:#56524A; line-height:1.6; }
.att-memb { padding:8px 26px 0; margin:0; font-size:12px; color:#6E6A61; line-height:1.55; }

/* «Обрані справи» — згорнутий блок (нативний <details>). Кількість кейсів у
   партнерів різна (3/4/3), тому картка лишається природної висоти, а список
   справ не роздуває секцію. */
.att-cases { margin-top:auto; border-top:1px solid #E0DACA; }
/* Мінімальний повітряний зазор між цитатою і смугою, коли картка найвища в ряду
   і margin-top:auto не дає жодного вільного місця. */
.att-quote { margin-bottom:16px; }
.att-cases summary {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; list-style:none; padding:14px 26px; min-height:44px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#7A5E1F;
  transition:color .25s;
}
.att-cases summary::-webkit-details-marker { display:none; }
.att-cases summary:hover { color:#9C7A2F; }
.att-cases-chev {
  flex-shrink:0; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#9C7A2F; font-size:19px; font-weight:300; line-height:1;
  transition:transform .25s;
}
.att-cases[open] .att-cases-chev { transform:rotate(45deg); }
.att-cases > .att-case:first-of-type { border-top:1px solid rgba(156,122,47,0.16); padding-top:14px; }
.att-cases > .att-case:last-child { padding-bottom:20px; }
/* Номер справи без посилання на реєстр (рішення не оприлюднене / посилання не надано) */
.att-cnum { margin-top:auto; padding-top:8px; font-size:11px; color:#8A857A; }

/* Список «Ми добре спрацюємось, якщо ви:» у секції «Про нас» */
.about-fit { margin:0; padding-left:20px; max-width:500px; list-style:none; }
.about-fit li { position:relative; font-size:17px; line-height:1.8; color:#56524A; margin-bottom:8px; }
.about-fit li::before { content:'—'; position:absolute; left:-20px; color:#9C7A2F; }

/* ====================================================================
   FAQ accordion (native <details>) — id="faq"
   ==================================================================== */
.faq-item { border-bottom: 1px solid rgba(156, 122, 47, 0.22); }
.faq-item:first-child { border-top: 1px solid rgba(156, 122, 47, 0.22); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer; list-style: none;
  padding: 19px 2px;
  font-size: 15.5px; font-weight: 500; color: #1B1A17;
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #7A5E1F; }
.faq-plus {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9C7A2F; font-size: 21px; font-weight: 300; line-height: 1;
  transition: transform .25s;
}
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item > p { padding: 0 40px 20px 2px; font-size: 14px; line-height: 1.75; color: #56524A; }

/* Tablet / large phone */
@media (max-width: 900px) {
  .g-about,
  .g-contact { grid-template-columns: 1fr !important; gap: 48px !important; }
  .g-why     { grid-template-columns: repeat(2, 1fr) !important; }
  .g-urgent,
  .g-faq     { grid-template-columns: 1fr !important; gap: 44px !important; }
}

/* Process steps: 4 -> 2 -> 1 */
@media (max-width: 1150px) {
  .g-process { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .g-process { grid-template-columns: 1fr !important; }
}

/* Лічильники hero (3 / 28 / ЄСПЛ) підняті до рівня кнопки «Отримати консультацію»,
   лишаючись праворуч. Тільки на широких екранах: нижче ~1100px блок під'їжджає під
   підпис «2 хвилини — відповімо…» і наїжджає на нього, тому там лишається звичайний
   потік (під підписом). */
@media (min-width: 1100px) {
  .hero-stats { margin-top: -96px; }
}

/* Attorneys: 3 cols -> 2 cols on narrow desktops / large tablets (avoids cramped 3-up).
   Must stay ABOVE the 820px rule below so the single-column rule wins at ≤820. */
@media (max-width: 1150px) {
  .g-attorneys { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 820px) {
  /* Swap desktop nav for hamburger */
  .nav-links { display: none !important; }
  .nav-cta-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  nav[data-navbar] { padding-left: 24px !important; padding-right: 24px !important; }
  /* Gutters + vertical rhythm */
  section { padding-left: 24px !important; padding-right: 24px !important; }
  footer  { padding-left: 24px !important; padding-right: 24px !important; }
  section:not(#home) { padding-top: 80px !important; padding-bottom: 80px !important; }
  #home { padding-top: 120px !important; padding-bottom: 64px !important; }
  /* Attorneys: 3 columns -> single column */
  .g-attorneys { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .g-services { grid-template-columns: 1fr !important; }
}

/* Small phone */
@media (max-width: 560px) {
  .g-about-cards { grid-template-columns: 1fr !important; }
  .g-fields      { grid-template-columns: 1fr !important; }
  .g-why         { grid-template-columns: 1fr !important; }
  .hero-stats    { gap: 28px !important; flex-wrap: wrap; }
  .contact-form  { padding: 32px 22px !important; }
}

@media (max-width: 480px) {
  section { padding-left: 18px !important; padding-right: 18px !important; }
  footer  { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ======================================================================
   Lead form (multi-step wizard) — namespaced .lf-*
   ====================================================================== */
.lf-progress {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #736E63;
}
.lf-progress .is-active { color: #7A5E1F; }
.lf-progress-sep { flex: 1; height: 1px; background: rgba(156, 122, 47, 0.22); }

.lf-q { margin-bottom: 22px; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-label {
  display: block;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #7A5E1F;
  margin-bottom: 10px;
}
.lf-qtitle { font-size: 14px; font-weight: 500; color: #1B1A17; margin-bottom: 12px; }

.lf-input {
  width: 100%;
  background: #FFFFFF; border: 1px solid #E0DACA; color: #1B1A17;
  padding: 14px 18px;
  font-family: 'Manrope', sans-serif; font-size: 14px;
  outline: none; transition: border-color .3s;
}
.lf-input:focus { border-color: #9C7A2F; }
.lf-count { text-align: right; font-size: 11px; color: #736E63; margin-top: 6px; }

/* Category chips */
/* Категорій рівно 6, тож замість auto-fit (який давав «5+1» і «4+2» з осиротілим
   хвостом ліворуч) беремо ЛИШЕ дільники шістки: 6, 3 або 2 колонки. Хвоста не
   виникає взагалі, ряди завжди рівні, плитки, як і раніше, розтягуються на всю
   ширину (1fr) — жодних бічних провалів.
   Пороги рахуються від ширини САМОГО блоку, а не вікна: форма на ≤900px
   перебудовується в одну колонку і різко ширшає, тож медіазапит по вікну тут
   збрехав би. Мінімальна плитка — ті самі 118px: 3 колонки треба ≥370px,
   6 колонок ≥748px. */
.lf-cats-wrap { container-type: inline-size; }
.lf-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 370px) {
  .lf-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 748px) {
  .lf-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Старі браузери без container queries залишаються на auto-fit — як було досі. */
@supports not (container-type: inline-size) {
  .lf-cats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
}
.lf-cat {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 16px 8px;
  background: #FFFFFF; border: 1px solid #E0DACA; border-radius: 10px;
  font-size: 12.5px; color: #56524A; transition: border-color .2s, background .2s, box-shadow .2s;
}
.lf-cat input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lf-cat .lucide { color: #9C7A2F; }
.lf-cat:hover { border-color: rgba(156, 122, 47, 0.5); }
.lf-cat:has(input:checked) {
  border-color: #9C7A2F; background: rgba(156, 122, 47, 0.08); color: #1B1A17;
  box-shadow: 0 4px 14px rgba(156, 122, 47, 0.12);
}

/* Option pills (radio / checkbox) */
.lf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-pill { position: relative; cursor: pointer; }
.lf-pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lf-pill span {
  display: inline-block;
  font-size: 13px; color: #56524A;
  background: #FFFFFF; border: 1px solid #E0DACA; border-radius: 22px;
  padding: 8px 15px; transition: border-color .2s, background .2s, color .2s;
}
.lf-pill:hover span { border-color: rgba(156, 122, 47, 0.5); }
.lf-pill:has(input:checked) span {
  border-color: #9C7A2F; background: rgba(156, 122, 47, 0.10); color: #1B1A17;
}

/* Buttons */
.lf-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #1B1A17; color: #F2EEE4; border: none;
  padding: 16px;
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: background .3s, transform .3s, opacity .3s;
}
.lf-btn:hover:not(:disabled) { background: #34312A; transform: translateY(-2px); }
.lf-btn:disabled { opacity: .45; cursor: not-allowed; }
.lf-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid #E0DACA; color: #56524A;
  padding: 16px 20px;
  font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: border-color .3s, color .3s;
}
.lf-btn-ghost:hover { border-color: #9C7A2F; color: #9C7A2F; }

.lf-err { color: #A23A2F; font-size: 13px; margin-bottom: 14px; }

.lf-captcha {
  border: 1px dashed rgba(156, 122, 47, 0.4);
  background: rgba(156, 122, 47, 0.04);
  color: #8A857C; font-size: 12px; text-align: center;
  padding: 16px; margin: 4px 0 18px;
}

.lf-success { text-align: center; padding: 26px 8px; }
.lf-success .lucide { color: #9C7A2F; margin-bottom: 14px; }
.lf-success-title { font-family: 'Lora', serif; font-size: 24px; color: #1B1A17; margin-bottom: 12px; }
.lf-success p { font-size: 14px; color: #56524A; line-height: 1.75; }
.lf-success a { color: #9C7A2F; text-decoration: none; white-space: nowrap; }

/* Consent checkbox */
.lf-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; cursor: pointer; }
.lf-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: #9C7A2F; flex-shrink: 0; cursor: pointer; }
.lf-consent span { font-size: 12px; line-height: 1.5; color: #6E6A61; }
.lf-consent a { color: #7A5E1F; }

/* ======================================================================
   Keyboard focus visibility (accessibility) — the markup relies on
   style-hover for mouse; this restores a visible focus ring for keyboard.
   ====================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #9C7A2F; outline-offset: 2px; border-radius: 2px;
}

/* ======================================================================
   Sticky mobile action bar (call / lead) — phones only.
   ====================================================================== */
.mobile-cta-bar { display: none; }
@media (max-width: 820px) {
  .mobile-cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    gap: 1px; background: rgba(156, 122, 47, 0.18);
    box-shadow: 0 -2px 16px rgba(27, 26, 23, 0.12);
  }
  .mobile-cta-bar a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none;
  }
  .mcb-call { background: #FBFAF4; color: #1B1A17; }
  .mcb-lead { background: #1B1A17; color: #F2EEE4; }
  body { padding-bottom: 56px; }
}

/* ======================================================================
   Tap targets (mobile a11y) + reduced motion.
   ====================================================================== */
.nav-burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.g-attorneys a[href^="tel:"],
.g-attorneys a[href^="#contact"] { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}