/* JAQAIYM — общие стили. Палитра взята из логотипа: кремовый фон, тёмно-коричневый шрифт, терракотовый акцент. */
:root{
  color-scheme:only light; /* страница только светлая: браузер не должен принудительно инвертировать цвета */
  --bg:#fbf3e4; --paper:#fffaf0; --ink:#2b180e; --muted:#7b6a5c; --line:rgba(43,24,14,.14);
  --accent:#b45c37; --accent-d:#97482a; --sage:#9db39a; --sage-d:#6f8a6c; --dark:#24130b;
  --r:24px; --ease:cubic-bezier(.2,.7,.2,1);
  --serif:'Playfair Display','Times New Roman',serif; --sans:Manrope,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
h1,h2,h3{overflow-wrap:break-word;font-family:var(--serif);font-weight:500;font-style:normal;letter-spacing:-.01em;line-height:1.1}
h1{font-size:clamp(40px,5.6vw,82px)}
h2{font-size:clamp(32px,4vw,56px)}
h3{font-size:24px}
.acc{color:var(--accent)}
h2 .acc{white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:20px}
.eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor}
section{padding:110px 0}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 30px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.3s var(--ease);text-align:center}
.btn:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(180,92,55,.75)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{padding:12px 22px;font-size:14px}
.link{font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:1px}

/* шапка */
header.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:.35s var(--ease)}
header.top.s{background:rgba(251,243,228,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.logo img{height:34px;width:auto}
.menu{display:flex;gap:34px;font-size:14px;font-weight:600}
.nav-r{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;font-weight:700;font-size:13.5px;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);transition:.2s;white-space:nowrap}
.lang:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.menu a{color:var(--muted);transition:.2s}.menu a:hover{color:var(--ink)}

/* hero */
.hero{padding:140px 0 90px}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero p.lead{font-size:19px;color:var(--muted);max-width:520px;margin:26px 0 36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.hero-note span::before{content:"✓";color:var(--sage-d);font-weight:800;margin-right:9px}
.arch{position:relative;border-radius:240px 240px 28px 28px;overflow:hidden;background:#d9c9ae;box-shadow:0 50px 90px -40px rgba(60,30,10,.5)}
.arch::before{content:"";display:block;padding-top:125%}
.arch img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.arch:hover img{transform:scale(1.04)}
.cap{position:absolute;left:18px;bottom:18px;background:rgba(251,243,228,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:11px 16px;border-radius:14px;font-size:13px;font-weight:700;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.cap small{display:block;color:var(--muted);font-weight:500;font-size:12px}

/* заголовки секций */
.head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:52px;flex-wrap:wrap}
.head p{max-width:420px;color:var(--muted)}

/* категории */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;transition:.5s var(--ease)}
.cat:hover{transform:translateY(-6px)}
.cat>img,.cat>.ill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.cat:hover>img{transform:scale(1.06)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 35%,rgba(30,14,6,.78))}
.cat .in{padding:26px}
.cat h3{font-size:26px;margin-bottom:6px}
.cat p{font-size:14px;opacity:.86;margin-bottom:18px}
.cat .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.cat .go::after{content:"→";transition:.3s var(--ease)}.cat:hover .go::after{transform:translateX(5px)}
.ill{background:linear-gradient(160deg,#d8c7a8,#b9a07c);display:grid;place-items:center}
.ill svg{width:62%;opacity:.9}

/* работы */
.works{background:var(--paper)}
.proj{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch;margin-bottom:56px}
.proj:nth-child(even){grid-template-columns:1fr 1.25fr}
.proj:nth-child(even) .pg{order:2}
.pg{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pg a{position:relative;border-radius:18px;overflow:hidden;background:#e9dcc4;cursor:zoom-in}
.pg a img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pg a:hover img{transform:scale(1.05)}
.pg a:nth-child(1){grid-column:span 6;aspect-ratio:3/2}
.pg a:nth-child(n+2){grid-column:span 2;aspect-ratio:1}
.pi{display:flex;flex-direction:column;justify-content:center;padding:10px 6px}
.pi .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage-d);margin-bottom:14px}
.pi h3{font-size:clamp(28px,3vw,40px);margin-bottom:14px}
.pi p{color:var(--muted);margin-bottom:28px;max-width:440px}
.pi .btn{align-self:flex-start}

/* как это работает */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{padding:30px 26px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.step b{font-family:var(--serif);font-style:normal;font-weight:500;font-size:44px;color:var(--accent);line-height:1;display:block;margin-bottom:18px}
.step h3{font-size:22px;margin-bottom:10px}
.step p{font-size:14.5px;color:var(--muted)}
.fine{margin-top:26px;color:var(--muted);font-size:14px}

/* призыв */
.cta{background:var(--dark);color:var(--bg);border-radius:44px;margin:0 16px;padding:100px 0}
.cta-g{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta h2{max-width:640px}
.cta p{color:#c9b7a3;margin-top:18px;max-width:520px}
.cta .row{display:flex;gap:14px;flex-wrap:wrap}
.cta .btn.ghost{color:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(251,243,228,.5)}
.cta .btn.ghost:hover{background:var(--bg);color:var(--dark)}

footer{padding:70px 0 110px;color:var(--muted);font-size:14px}
.fg{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fg .logo img{height:30px;margin-bottom:14px}
.fg b{display:block;color:var(--ink);margin-bottom:8px}
.fg a{display:inline-block;padding:5px 0}
.fg a.tel{color:var(--ink);font-weight:700;font-size:17px;letter-spacing:.01em}
.fg a:hover{color:var(--accent)}
.fg .logo{padding:0}
.fg .req{font-size:13px;line-height:1.55;margin-top:12px;max-width:300px}
.fg a[href^=mailto]{overflow-wrap:anywhere}

/* закреплённая кнопка «Написать нам» */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 16px 34px -12px rgba(0,0,0,.5);transition:.3s var(--ease)}
.fab:hover{transform:translateY(-3px);background:var(--accent)}
.fab svg{width:18px;height:18px}

/* окно быстрой заявки */
.qm{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:none;background:rgba(36,19,11,.62)}
.qm.on{display:block}
.qm-scroll{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}
.qm-box{background:var(--bg);border-radius:28px;width:100%;max-width:480px;margin:auto;padding:34px 32px;position:relative;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.qm-x{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);box-shadow:0 6px 20px -6px rgba(0,0,0,.45);cursor:pointer;font-size:24px;line-height:1}
.qm-x:hover{background:#fff}
.qm h3{font-size:28px;margin-bottom:8px}
.qm .sub{color:var(--muted);font-size:14.5px;margin-bottom:22px}

/* поля форм (общие для окна и анкеты) */
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field>span i{font-style:normal;font-weight:500;color:var(--muted)}
.inp{width:100%;padding:15px 18px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:16px;outline:0;transition:.2s}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(180,92,55,.12)}
textarea.inp{resize:vertical;min-height:90px}
.field.err .inp{border-color:#b3261e}
.msg{display:none;color:#b3261e;font-size:13px;margin-top:6px;font-weight:600}
.field.err .msg,.msg.on{display:block}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{position:relative}
.pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pill span{display:block;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:600;transition:.2s;cursor:pointer}
.pill input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pill input:focus-visible+span{outline:2.5px solid var(--accent);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);cursor:pointer;margin:6px 0 4px}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--accent);flex:none}
.check a{color:var(--ink);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.alert{display:none;padding:14px 16px;border-radius:14px;background:#fbe9e7;color:#8c1d18;font-size:14px;margin:14px 0;font-weight:600}
.alert.on{display:block}
.okbox{text-align:center;padding:14px 0 6px}
.okbox .big{width:68px;height:68px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:30px;margin:0 auto 18px}

/* галерея */
.lb{position:fixed;inset:0;z-index:300;background:rgba(20,10,5,.92);display:none;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb img{max-height:88vh;max-width:92vw;border-radius:10px;object-fit:contain}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .x{top:18px;right:18px}.lb .p{left:18px;top:50%}.lb .n{right:18px;top:50%}

/* появление (только при включённом JS) */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.v{opacity:1;transform:none}

@media(max-width:1000px){
  section{padding:72px 0}
  .menu{display:none}
  .hero{padding-top:112px}
  .hero-g{grid-template-columns:1fr;gap:44px}
  .arch{border-radius:150px 150px 24px 24px}
  .cats{grid-template-columns:1fr 1fr}.cat{min-height:340px}
  .proj,.proj:nth-child(even){grid-template-columns:1fr;gap:20px;margin-bottom:44px}.proj:nth-child(even) .pg{order:0}
  .steps{grid-template-columns:1fr 1fr}
  .cta{border-radius:30px;padding:64px 0}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .nav{gap:10px}.logo img{height:26px;width:auto}
  .nav-r{gap:8px}.lang{padding:0 12px;font-size:12.5px}
  .nav .btn{padding:11px 14px;font-size:12.5px;white-space:nowrap}
  .cats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .qm-box{padding:64px 20px 24px;border-radius:24px}
  .fab span{display:none}.fab{padding:16px}
}

/* юридические страницы: один шрифт, один размер, без выделений */
.doc{max-width:760px;padding-top:48px;padding-bottom:80px;font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink)}
.doc .logo img{height:28px;width:auto;margin-bottom:36px}
.doc h1,.legal h2{font-family:var(--sans);font-size:16px;font-weight:600;font-style:normal;letter-spacing:0;line-height:1.5;color:var(--ink)}
.doc h1{margin:0 0 24px}
.legal h2{margin:28px 0 8px;scroll-margin-top:24px}
.legal p,.legal li{margin:6px 0;color:var(--ink)}
.legal ul{padding-left:22px}
.legal b,.legal i{font-weight:inherit;font-style:normal}
.legal mark{background:#ffe9a8;color:inherit;padding:0 3px}
.legal .draft{margin:0 0 16px;padding:10px 12px;background:#fff4d6;font-size:16px}
.doc .back{margin-top:32px}
.doc .back a{text-decoration:underline;text-underline-offset:3px}

/* пометка тестового подключения к серверу (только демо-версия со ссылкой ?api=) */
.testbar{position:fixed;left:12px;bottom:12px;z-index:90;max-width:60vw;background:#fff4d6;color:#6b5320;font-size:12px;line-height:1.35;padding:6px 10px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15)}