/* Landing & hub: услуги (/tatuaze/, /tatuaze/na-barku/, каталог на /piercing/).
   Та же редакционная система, что «O nas» и «Kontakt», но самостоятельная: about.css тут не грузится. */

.landing-page { padding-top: var(--hdr-h); background: #141414; color: #f1eeea; }
.landing-container { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.landing-page p, .landing-section p { margin: 0; }
.landing-page h1, .landing-section h2, .landing-section h3 { text-wrap: balance; }
.landing-hero, .landing-section { scroll-margin-top: 24px; }

.landing-eyebrow { color: #ff8562; font: 500 12px/1.4 var(--font); letter-spacing: 1.2px; text-transform: uppercase; }
.landing-section h2 { font: 700 42px/1.13 var(--font); letter-spacing: -.7px; }
.landing-heading { margin-bottom: 44px; }
.landing-heading h2 { margin-top: 18px; max-width: 760px; }

/* Секции: тёмные по умолчанию, светлые — .landing-light. Между тёмными соседями — тонкая линия. */
.landing-section { padding: 88px 0; background: #141414; color: #f1eeea; border-top: 1px solid #262626; }
.landing-light { background: #f1eeea; color: #171717; border-top: 0; }
.landing-light .landing-eyebrow { color: #854932; }
.landing-light + .landing-light { padding-top: 0; }

/* Кнопки и ссылки. */
.landing-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 56px; padding: 17px 24px; background: #ff8562; border: 1px solid transparent; border-radius: 4px; color: #161616; font: 500 15px/1.4 var(--font); text-decoration: none; transition: background-color .2s; }
.landing-button svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .2s; }
.landing-button:hover { background: #ffa185; }
.landing-button:hover svg { transform: translateX(3px); }
.landing-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 10px; color: inherit; font: 500 15px/1.4 var(--font); text-decoration: underline 1px #747474; text-underline-offset: 6px; transition: color .2s; }
.landing-text-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.landing-text-link:hover { color: #ff8562; }
.landing-button:focus-visible, .landing-text-link:focus-visible { outline: 2px solid #ff8562; outline-offset: 4px; border-radius: 4px; }

/* ---------- первый экран ---------- */
.landing-hero { padding: 36px 0 88px; }
.landing-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 48px; padding: 0; list-style: none; color: #8f8f8f; font: 400 13px/1.5 var(--font); }
.landing-crumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.landing-crumbs li + li::before { content: '/'; color: #555; }
.landing-crumbs a { display: inline-block; padding-block: 4px; color: #bdbdbd; text-decoration: none; transition: color .18s; }
.landing-crumbs a:hover { color: #ff8562; }
.landing-crumbs a:focus-visible { outline: 2px solid #ff8562; outline-offset: 2px; border-radius: 2px; }
.landing-crumbs [aria-current] { color: #f1eeea; }

.landing-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.landing-hero-plain .landing-hero-grid { grid-template-columns: minmax(0, 860px); }
.landing-hero h1 { margin: 22px 0 26px; font: 700 clamp(44px, 4.4vw, 62px)/1.06 var(--font); letter-spacing: -1.6px; }
.landing-lead { max-width: 540px; color: #bdbdbd; font: 400 18px/1.6 var(--font); }
.landing-hero-plain .landing-lead { max-width: 680px; }
.landing-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 34px; }

.landing-chips { display: flex; flex-wrap: wrap; margin: 44px 0 0; padding: 0; border-top: 1px solid #333; }
.landing-chip { min-width: 0; padding: 20px 32px 0; border-left: 1px solid #333; }
.landing-chip:first-child { padding-left: 0; border-left: 0; }
.landing-chip dt { color: #8f8f8f; font: 500 12px/1.4 var(--font); letter-spacing: 1px; text-transform: uppercase; }
.landing-chip dd { margin: 8px 0 0; color: #f1eeea; font: 500 22px/1.3 var(--font); }

.landing-hero-media { margin: 0; aspect-ratio: 4 / 5; max-height: 620px; background: #292929; overflow: hidden; }
.landing-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- работы ---------- */
.landing-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.landing-work { display: block; overflow: hidden; background: #ddd8d2; cursor: zoom-in; }
.landing-work img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .35s ease; }
.landing-work:hover img { transform: scale(1.025); }
.landing-work:focus-visible { outline: 3px solid #854932; outline-offset: 3px; }

/* ---------- текст блоками ---------- */
.landing-block { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 100px; padding: 56px 0; border-top: 1px solid #333; }
.landing-block:first-child { padding-top: 0; border-top: 0; }
.landing-block:last-child { padding-bottom: 0; }
.landing-block-head { align-self: start; position: sticky; top: 32px; }
.landing-block-num { display: block; margin-bottom: 18px; color: #ff8562; font: 500 13px/1.4 var(--font); }
.landing-section .landing-block h2 { font-size: 34px; line-height: 1.18; letter-spacing: -.5px; }

.landing-prose { max-width: 68ch; color: #c9c9c9; font: 400 18px/1.7 var(--font); }
.landing-prose > * { margin: 0 0 1.1em; }
.landing-prose > :last-child { margin-bottom: 0; }
.landing-section .landing-prose p { margin: 0 0 1.1em; }
.landing-section .landing-prose p:last-child { margin-bottom: 0; }
.landing-prose strong, .landing-prose b { color: #f1eeea; font-weight: 500; }
.landing-prose a { color: #ff987b; text-decoration: underline 1px; text-underline-offset: 4px; }
.landing-prose a:hover { color: #ffc0ac; }
.landing-prose ul, .landing-prose ol { padding-left: 22px; }
.landing-prose li { padding-left: 4px; margin-top: 8px; }
.landing-prose li:first-child { margin-top: 0; }
.landing-prose li::marker { color: #ff8562; }
.landing-prose h3, .landing-prose h4 { margin: 1.6em 0 .6em; color: #f1eeea; font: 500 22px/1.3 var(--font); }
.landing-prose img { height: auto; }

/* ---------- цена и факты ---------- */
.landing-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid #c7c2bc; }
.landing-facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.landing-facts-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.landing-fact { min-width: 0; padding: 28px 32px 0; border-left: 1px solid #c7c2bc; }
.landing-fact:first-child { padding-left: 0; border-left: 0; }
.landing-fact:last-child { padding-right: 0; }
.landing-fact dt { color: #6b6661; font: 500 12px/1.4 var(--font); letter-spacing: 1px; text-transform: uppercase; }
.landing-fact dd { margin: 14px 0 0; }
.landing-fact-value { display: block; color: #171717; font: 500 21px/1.4 var(--font); }
.landing-fact-price .landing-fact-value { font: 700 40px/1.1 var(--font); letter-spacing: -.8px; }
.landing-fact-note { display: block; margin-top: 12px; color: #54514e; font: 400 15px/1.6 var(--font); }

/* ---------- мастера ---------- */
.landing-masters { background: #111; }
.landing-masters-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.landing-master { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; padding: 28px 0; border-top: 1px solid #333; }
.landing-master-photo { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #292929; overflow: hidden; }
.landing-master-photo img { width: 100%; height: 100%; object-fit: cover; }
.landing-master-initial { color: #8f8f8f; font: 500 32px/1 var(--font); }
.landing-section .landing-master h3 { margin: 6px 0 8px; font: 500 22px/1.25 var(--font); }
.landing-master p { color: #a8a8a8; font: 400 15px/1.6 var(--font); }

/* ---------- FAQ ---------- */
.landing-faq { background: #1b1b1b; border-top-color: #303030; }
.landing-faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 100px; align-items: start; }
.landing-faq-heading h2 { margin-top: 20px; }
.landing-faq-intro { max-width: 390px; margin-top: 24px !important; color: #bdbdbd; font: 400 17px/1.6 var(--font); }
.landing-faq-link { margin-top: 16px; color: #ff987b; }
.landing-faq-list { min-width: 0; }
.landing-faq-item { border-top: 1px solid #4a4a4a; }
.landing-faq-item:last-child { border-bottom: 1px solid #4a4a4a; }
.landing-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; padding: 24px 0; color: #f1eeea; font: 500 21px/1.35 var(--font); list-style: none; cursor: pointer; transition: color .2s; }
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::marker { content: ''; }
.landing-faq-item summary svg { width: 22px; height: 22px; flex-shrink: 0; color: #b0b0b0; transition: transform .2s ease; }
.landing-faq-item[open] summary { color: #ff987b; }
.landing-faq-item[open] summary svg { transform: rotate(180deg); color: #ff987b; }
.landing-faq-item summary:hover { color: #ffb099; }
.landing-faq-item summary:focus-visible { outline: 2px solid #d77556; outline-offset: 6px; border-radius: 2px; }
.landing-faq-answer { padding: 0 42px 28px 0; color: #c3c3c3; font-size: 16px; line-height: 1.65; }

/* ---------- карточки: каталог и похожие ---------- */
.landing-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.landing-card { min-width: 0; }
.landing-card-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'media media' 'body arrow'; column-gap: 16px; height: 100%; color: inherit; text-decoration: none; }
.landing-card-media { grid-area: media; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #222; }
.landing-card-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.landing-card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(150deg, #262626, #161616); color: #3a3a3a; font: 700 96px/1 var(--font); text-transform: uppercase; }
.landing-card-body { grid-area: body; min-width: 0; padding-top: 18px; }
.landing-section .landing-card-title { margin: 0; font: 500 20px/1.3 var(--font); text-wrap: initial; transition: color .2s; }
.landing-card-text { display: -webkit-box; margin-top: 8px !important; overflow: hidden; color: #a8a8a8; font: 400 15px/1.55 var(--font); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.landing-card-link > .icon-arrow-right { grid-area: arrow; width: 20px; height: 20px; margin-top: 21px; color: #8a8a8a; transition: transform .2s, color .2s; }
.landing-card-link:hover .landing-card-img { transform: scale(1.03); }
.landing-card-link:hover .landing-card-title, .landing-card-link:hover > .icon-arrow-right { color: #ff8562; }
.landing-card-link:hover > .icon-arrow-right { transform: translateX(4px); }
.landing-card-link:focus-visible { outline: 2px solid #ff8562; outline-offset: 6px; border-radius: 2px; }
.landing-light .landing-card-media { background: #ddd8d2; }
.landing-light .landing-card-placeholder { background: linear-gradient(150deg, #e6e1da, #d6d0c8); color: #c4bdb3; }
.landing-light .landing-card-text { color: #54514e; }
.landing-light .landing-card-link > .icon-arrow-right { color: #8a847e; }
.landing-light .landing-card-link:hover .landing-card-title, .landing-light .landing-card-link:hover > .icon-arrow-right { color: #854932; }
.landing-light .landing-card-link:focus-visible { outline-color: #854932; }

.landing-catalog-group + .landing-catalog-group { margin-top: 80px; }
.landing-catalog-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid #333; }
.landing-light .landing-catalog-head { border-bottom-color: #c7c2bc; }
.landing-section .landing-catalog-head h2 { font-size: 36px; line-height: 1.15; }
.landing-catalog-count { color: #ff8562; font: 500 14px/1.4 var(--font); }
.landing-light .landing-catalog-count { color: #854932; }

/* ---------- запись ---------- */
.landing-cta-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.landing-cta-copy { position: sticky; top: 32px; }
.landing-cta-copy h2 { margin-top: 18px; }
.landing-cta-text { max-width: 460px; margin-top: 22px; color: #bdbdbd; font: 400 18px/1.6 var(--font); }
.landing-section .landing-cta-text p { margin: 0 0 1em; }
.landing-section .landing-cta-text p:last-child { margin-bottom: 0; }
.landing-form-box { padding: 44px 48px 48px; background: #1b1b1b; border: 1px solid #2a2a2a; }
.landing-form-box .enigma-form { width: 100%; margin: 0; }

@media (min-width: 981px) and (max-width: 1199px) {
 .landing-container { width: calc(100% - 48px); }
 .landing-hero-grid { gap: 48px; }
 .landing-hero h1 { font-size: 48px; }
 .landing-section h2 { font-size: 36px; }
 .landing-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .landing-block, .landing-faq-grid { gap: 56px; }
 .landing-section .landing-block h2 { font-size: 30px; }
 .landing-facts-list:not(.landing-facts-2):not(.landing-facts-1) .landing-fact { padding-inline: 24px; }
 .landing-facts-list .landing-fact:first-child { padding-left: 0; }
 .landing-fact-price .landing-fact-value { font-size: 34px; }
 .landing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .landing-cta-grid { gap: 48px; }
 .landing-form-box { padding: 36px 32px 40px; }
}

@media (max-width: 980px) {
 .landing-page { padding-top: 0; }
 .landing-hero, .landing-section { scroll-margin-top: calc(var(--hdr-h) + 16px); }
 .landing-container { width: calc(100% - 48px); max-width: 720px; }
 .landing-section { padding: 56px 0; }
 .landing-section h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.5px; }
 .landing-heading { margin-bottom: 28px; }
 .landing-heading h2 { margin-top: 16px; }

 .landing-hero { padding: 24px 0 56px; }
 .landing-crumbs ol { margin-bottom: 32px; }
 .landing-hero-grid, .landing-hero-plain .landing-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
 .landing-hero h1 { margin: 18px 0 22px; font-size: clamp(36px, 7.2vw, 54px); letter-spacing: -1px; text-wrap: initial; }
 .landing-lead { max-width: 590px; font-size: 17px; }
 .landing-hero-actions { margin-top: 28px; }
 .landing-button { min-height: 54px; padding: 15px 20px; gap: 22px; }
 .landing-chips { margin-top: 32px; }
 .landing-hero-media { aspect-ratio: 1 / 1; max-height: none; }

 .landing-block { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 40px 0; }
 .landing-block-head { position: static; }
 .landing-block-num { margin-bottom: 12px; }
 .landing-section .landing-block h2 { font-size: 28px; }
 .landing-prose { font-size: 17px; }

 .landing-facts-list, .landing-facts-3, .landing-facts-2, .landing-facts-1 { grid-template-columns: minmax(0, 1fr); max-width: none; }
 .landing-fact, .landing-fact:first-child, .landing-fact:last-child { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 20px 0; border-left: 0; border-bottom: 1px solid #c7c2bc; }
 .landing-fact dd { margin: 0; }
 .landing-fact-price .landing-fact-value { font-size: 32px; }
 .landing-fact-value { font-size: 19px; }

 .landing-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
 .landing-faq-heading h2 { margin-top: 16px; }
 .landing-faq-intro { max-width: 590px; margin-top: 18px !important; font-size: 16px; }
 .landing-faq-item summary { min-height: 72px; padding-block: 20px; gap: 18px; font-size: 19px; }
 .landing-faq-answer { padding-right: 20px; }

 .landing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
 .landing-catalog-group + .landing-catalog-group { margin-top: 56px; }
 .landing-section .landing-catalog-head h2 { font-size: 28px; }

 .landing-cta-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
 .landing-cta-copy { position: static; }
 .landing-cta-text { max-width: 590px; font-size: 17px; }
 .landing-form-box { padding: 32px 28px 36px; }
}

@media (max-width: 599px) {
 .landing-container { width: calc(100% - 40px); }
 .landing-section { padding: 48px 0; }
 .landing-section h2 { font-size: 30px; }
 .landing-hero h1 { font-size: clamp(32px, 9.4vw, 40px); }
 .landing-hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
 .landing-hero-actions .landing-text-link { align-self: flex-start; }
 .landing-chip { padding-inline: 20px; }
 .landing-chip dd { font-size: 19px; }
 .landing-hero-media { aspect-ratio: 4 / 5; }

 .landing-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .landing-section .landing-block h2 { font-size: 25px; }
 .landing-prose { font-size: 16px; }

 .landing-fact, .landing-fact:first-child, .landing-fact:last-child { grid-template-columns: minmax(0, 1fr); gap: 8px; }

 .landing-master { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
 .landing-master-photo { width: 72px; height: 72px; }
 .landing-section .landing-master h3 { margin-top: 2px; font-size: 20px; }

 .landing-faq-item summary { font-size: 18px; }
 .landing-faq-answer { padding-right: 0; }

 .landing-cards { gap: 28px 12px; }
 .landing-card-link { grid-template-areas: 'media media' 'body body'; }
 .landing-card-link > .icon-arrow-right { display: none; }
 .landing-card-body { padding-top: 12px; }
 .landing-section .landing-card-title { font-size: 16px; }
 .landing-card-text { font-size: 13px; line-height: 1.5; }
 .landing-card-placeholder { font-size: 64px; }
 .landing-section .landing-catalog-head h2 { font-size: 25px; }

 .landing-form-box { padding: 0; background: none; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
 .landing-button, .landing-button svg, .landing-text-link, .landing-crumbs a, .landing-work img, .landing-card-img, .landing-card-title, .landing-card-link > .icon-arrow-right, .landing-faq-item summary, .landing-faq-item summary svg { transition: none; }
 .landing-work:hover img, .landing-card-link:hover .landing-card-img { transform: none; }
}