/*
Theme Name: ADVOCAR
Description: Юридическая практика для бизнеса в Алматы.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 8.0
Text Domain: advocar
*/

@font-face {
    font-family: Manrope; font-weight: 400 800; font-style: normal; font-display: swap;
    src: url(assets/manrope-cyr.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
    font-family: Manrope; font-weight: 400 800; font-style: normal; font-display: swap;
    src: url(assets/manrope-lat.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --paper: #f5f1e8;
    --ink: #242420;
    --quiet: #575650;
    --line: #c9c2b4;
    --accent: #a43723;
    --dark: #202220;
    --warm: #f38767;
    --gutter: clamp(18px, 4vw, 64px);
    --mono: ui-monospace, Consolas, "Liberation Mono", monospace;
    --font: Manrope, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 16px/1.65 var(--font); }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}
img, svg { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h2, h3 { line-height: 1.12; letter-spacing: -.04em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.7rem); font-weight: 750; margin-block-end: .63em; max-width: 23ch; }
h3 { font-size: clamp(1.15rem, 2vw, 1.58rem); font-weight: 780; margin-block-end: .5em; }
p { margin-block-end: 1em; }
[id] { scroll-margin-block-start: 24px; }
.shell { width: min(calc(100% - var(--gutter) * 2), 1320px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 99999; inset: .5rem auto auto .5rem; padding: .75rem 1rem; background: var(--ink); color: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner { min-height: 75px; display: flex; gap: 28px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-size: 1.37rem; font-weight: 800; letter-spacing: -.075em; line-height: 1; text-decoration: none; }
.brand-mark { flex: none; }
.site-nav { display: flex; gap: clamp(14px, 3vw, 38px); align-items: center; }
.site-nav a, .header-phone { font-size: .84rem; font-weight: 800; text-decoration: none; padding-block: 10px; }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; inset: auto 0 3px; border-bottom: 2px solid var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease-out; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: none; }
.site-nav a[aria-current="page"], .header-phone:hover { color: var(--accent); }
.header-phone { white-space: nowrap; }
.eyebrow { font: 700 .74rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.signal { display: inline-block; width: .58em; height: .58em; background: currentColor; transform: rotate(45deg); flex: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; margin-block: clamp(26px, 4vw, 54px) 22px; border: 1px solid var(--line); }
.hero-copy { padding: clamp(25px, 4.1vw, 64px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-kicker { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; margin-bottom: clamp(20px, 3vw, 42px); }
.hero h1 { font-weight: 800; font-size: clamp(2.25rem, 5.25vw, 5rem); letter-spacing: -.088em; line-height: .98; margin: 0 0 clamp(19px, 2.6vw, 37px); }
.hero h1 em { display: block; margin-top: .04em; font: italic 400 1.04em/.98 Georgia, "Times New Roman", serif; letter-spacing: -.082em; color: var(--accent); }
.hero--fleet h1, .hero--construction h1 { font-size: clamp(2.2rem, 4.8vw, 4.65rem); }
.hero-intro { color: var(--quiet); font-size: clamp(.96rem, 1.25vw, 1.12rem); max-width: 43ch; margin-bottom: 26px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 22px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 14px; padding: .68rem 1.05rem; font-size: .88rem; line-height: 1.4; font-weight: 800; text-decoration: none; }
.button svg, .text-link svg { flex: none; transition: transform .17s ease-out; }
.button:hover svg, .text-link:hover svg { transform: translateX(3px); }
.button--primary { background: var(--accent); color: white; }
.button--primary:hover { background: #842b1b; }
.text-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .86rem; min-height: 44px; }
.hero-art {
    position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
    min-height: 410px; padding: 22px 12px; color: #f0e9db; background-color: var(--dark);
    background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
    background-size: 23px 23px;
}
.hero-art::before { content: ""; position: absolute; z-index: -1; inset: 12px; border: 1px solid #efead52f; pointer-events: none; }
.drawing { display: block; width: 100%; height: auto; max-height: 505px; }
.drawing-axis, .drawing-ghost, .drawing-solid, .drawing-accent { stroke-width: 1.15; }
.drawing-axis { stroke: #6d7067; stroke-dasharray: 3 6; }
.drawing-ghost { stroke: #939383; }
.drawing-solid { stroke: #e1d7bd; stroke-width: 1.6; }
.drawing-accent { stroke: var(--warm); stroke-width: 2.2; }
.drawing-dot { fill: var(--warm); }
.drawing-trace { stroke-dasharray: 1; animation: draw-path 2.4s cubic-bezier(.2,.6,.28,1) both; }
.drawing-dot { transform-box: fill-box; transform-origin: center; animation: draw-point 1.25s .7s ease-out both; }
@keyframes draw-path { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes draw-point { from { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }

.chapter { padding-block: clamp(42px, 6.2vw, 90px); border-bottom: 1px solid var(--line); }
.chapter:last-child { border-bottom: 0; }
.intro { max-width: 67ch; color: var(--quiet); font-size: clamp(1.02rem, 1.55vw, 1.23rem); }
.service-grid, .sector-grid, .chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(17px, 2.6vw, 36px); }
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(19px, 3.4vw, 52px); margin-top: 28px; }
.service { border-top: 1px solid var(--line); padding-block: 19px 10px; }
.service p { max-width: 48ch; }
.service p:last-child { margin-bottom: 0; }
.sector-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sector { position: relative; display: flex; flex-direction: column; min-height: 255px; isolation: isolate; overflow: hidden; padding: clamp(20px, 3.3vw, 49px); background: #ebe5d8; text-decoration: none; }
.sector::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .45; transition: transform .24s ease-out; }
.sector--fleet::after { background: repeating-radial-gradient(ellipse at 117% -27%, transparent 0 14px, #a59e8a 15px 16px, transparent 17px 24px); mask-image: linear-gradient(120deg, transparent 42%, black); }
.sector--build::after { background: repeating-linear-gradient(148deg, transparent 0 15px, #a59e8a 16px 17px, transparent 18px 26px); mask-image: linear-gradient(110deg, transparent 57%, black); }
.sector:hover { background: #e5dece; }
.sector:hover::after { transform: scale(1.08); }
.sector h3 { font-size: clamp(1.45rem, 2.6vw, 2.3rem); max-width: 16ch; margin-top: .45em; }
.sector p { max-width: 36ch; margin-bottom: 1.3em; }
.sector > span:last-child { margin-top: auto; color: var(--accent); font-size: .88rem; font-weight: 800; text-decoration: underline; text-underline-offset: .28em; }
.chapter--ink { background: var(--dark); color: #f5f1e8; padding-inline: clamp(22px, 5vw, 72px); border: 0; }
.chapter--ink .eyebrow, .chapter--ink .checklist li::before { color: var(--warm); }
.chapter--ink .service { border-color: #73736a; }
.chapter--ink .intro { color: #ded8cb; }
.chapter--ink .chapter-grid + p, .chapter--ink .service-grid + p { margin-top: 20px; color: #ded8cb; }
.chapter--ink :focus-visible, .site-footer :focus-visible, .contact-section :focus-visible { outline-color: var(--warm); }
.numbered { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(15px, 2.6vw, 38px); padding: 0; margin: 0; list-style: none; }
.numbered > li { border-top: 1px solid var(--line); padding-top: 16px; }
.checklist { padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 19px; margin-bottom: .6em; }
.checklist li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.feature-note { border-inline-start: 3px solid var(--accent); padding: 17px 24px; margin-block: 22px 0; background: #ebe5d8; max-width: 76ch; }
.feature-note > :last-child { margin-bottom: 0; }
.profile { display: grid; grid-template-columns: minmax(160px, 330px) minmax(0, 1fr); gap: clamp(20px, 5.5vw, 76px); align-items: center; }
.profile img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 23%; background: #e5dfd3; }
.profile h2 { margin-block-end: .45em; }
.profile a { color: var(--accent); font-weight: 800; }
.faq { max-width: 880px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 15px 46px 15px 0; list-style: none; font-weight: 800; cursor: pointer; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; top: 13px; right: 4px; color: var(--accent); font: 500 1.45rem var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq details > :not(summary) { max-width: 70ch; margin-right: 24px; }
.plain-page { min-height: 55vh; max-width: 840px; padding-block: clamp(35px, 6vw, 84px); }
.plain-page h1 { font-size: clamp(2rem, 5.4vw, 4.4rem); line-height: 1; letter-spacing: -.065em; margin: 16px 0 26px; }
.plain-page h2 { font-size: clamp(1.42rem, 2.6vw, 2.3rem); }
.plain-page .chapter { padding-block: 18px; }

.contact-section { color: var(--paper); background: #2a2b27; border-top: 4px solid var(--accent); }
.contact-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 6vw, 90px); padding-block: clamp(36px, 6.5vw, 94px); }
.contact-inner .eyebrow { color: var(--warm); }
.contact-inner .signal { margin-right: .35em; }
.contact-inner h2 { margin: 20px 0; }
.contact-intro { color: #ddd7c9; max-width: 38ch; }
.contact-phone, .contact-wa { display: flex; align-items: center; width: fit-content; gap: 8px; min-height: 44px; }
.contact-phone { font-size: clamp(1.18rem, 2.2vw, 1.65rem); font-weight: 800; }
.contact-wa { font-size: .88rem; }
.contact-form .advocar-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-form .advocar-form__field { display: grid; gap: 5px; font-size: .9rem; min-width: 0; }
.contact-form .advocar-form__field--wide { grid-column: 1/-1; }
.contact-form label { color: #e9e2d3; font-weight: 700; }
.contact-form :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) { display: block; width: 100%; min-width: 0; min-height: 47px; color: #22231e; background: #f6f2e9; border: 1px solid #ccc3b2; border-radius: 0; padding: 9px 12px; font-size: 1rem; }
.contact-form textarea { resize: vertical; min-height: 94px; }
.contact-form .advocar-form__consent { display: flex; align-items: flex-start; gap: 9px; margin-block: 13px; font-size: .79rem; line-height: 1.5; }
.contact-form input[type="checkbox"] { accent-color: var(--warm); width: 17px; height: 17px; flex: none; }
.contact-form .advocar-form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contact-form .advocar-form__submit { min-height: 48px; padding: 9px 21px; color: #fff; background: var(--accent); border: 1px solid #d26147; font-weight: 800; cursor: pointer; }
.contact-form .advocar-form__submit:hover { background: #84331f; }
.contact-form .advocar-form__submit:disabled { opacity: .66; cursor: wait; }
.contact-form .advocar-form__status { font-size: .9rem; color: #f7e6ca; }
.contact-form .advocar-form__fallback { color: #f0ddd4; }
.site-footer { color: #e4ddce; background: #1e1f1c; font-size: .89rem; }
.site-footer .brand { color: var(--paper); }
.footer-main { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; padding-block: 30px; }
.footer-main p { margin: 5px 0 0; }
.footer-main address { font-style: normal; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer-nav a, .footer-main address a { min-height: 28px; padding-block: 2px; }
.footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 25px; border-top: 1px solid #56554b; padding-block: 13px 19px; font-size: .78rem; }

@media (max-width: 1020px) {
    .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
    .hero-copy { padding: 28px; }
    .hero-art { min-height: 330px; }
    .header-phone { font-size: .78rem; }
}
@media (max-width: 740px) {
    .site-header__inner { flex-wrap: wrap; gap: 0 14px; min-height: 60px; }
    .site-header__inner > .brand, .site-header__inner > .header-phone { margin-block: 8px; }
    .site-nav { flex: 1 0 100%; order: 3; gap: clamp(10px, 3.1vw, 27px); border-top: 1px solid var(--line); }
    .site-nav a { font-size: .75rem; padding-block: 12px; }
    .hero { grid-template-columns: 1fr; }
    .hero-copy { padding: clamp(19px, 5.3vw, 37px); }
    .hero h1, .hero--fleet h1, .hero--construction h1 { font-size: clamp(2.15rem, 9.2vw, 4.35rem); }
    .hero-art { min-height: 0; height: clamp(228px, 64vw, 370px); padding-block: 17px; }
    .drawing { height: 100%; max-height: 100%; }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-inner { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-main > div:first-child { grid-column: 1/-1; }
}
@media (max-width: 490px) {
    .sector-grid, .service-grid, .chapter-grid, .numbered { grid-template-columns: 1fr; }
    .sector { min-height: 215px; }
    .service-grid { gap: 6px; }
    .profile { grid-template-columns: 1fr; }
    .profile img { width: min(100%, 260px); }
    .contact-form .advocar-form__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}