/* =========================================================================
   ПрофЭкоЛаб — сайт на Joomla 5 (tpl_profecolab)
   Дизайн воспроизводит приложенный макет. Файл структурирован по разделам:
   переменные, сброс, шапка, hero, типовые секции, футер, форма, модальное
   окно, адаптивность и безопасные зоны iOS.
   ========================================================================= */

:root {
    --bg: #262626;
    --panel: #2d2d2c;
    --panel-2: #323231;
    --text: #f1efea;
    --muted: #b4b4ae;
    --line: rgba(241, 239, 234, .14);
    --cream: #e8e2d6;
    --ink: #191919;
    --pad: max(24px, calc((100vw - 1180px) / 2));
    --header-h: 82px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Geist, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
}
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.skip-link {
    position: fixed; z-index: 300; top: -60px; left: 12px;
    background: var(--cream); color: var(--ink); padding: 12px 18px;
    border-radius: 8px; font-size: 13px; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: calc(12px + var(--safe-t)); }

/* ---------------------------------------------------------------- header */
.header {
    position: absolute; z-index: 20; top: 0; left: 0; right: 0;
    height: calc(var(--header-h) + var(--safe-t));
    padding: var(--safe-t) var(--pad) 0;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14px; min-width: 0; }
.brand-logo { width: 190px; height: auto; max-height: 58px; object-fit: contain; object-position: left center; }
.header .brand-logo { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .28)); }
.logo-text { font-family: Georgia, serif; font-size: 18px; }

.nav { display: flex; align-items: center; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, .75); }
.nav a { transition: color .35s; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { content: ""; display: block; height: 1px; margin-top: 5px; background: currentColor; }

.pill {
    min-height: 40px; padding: 0 18px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    border: 1px solid transparent; font-size: 12px; font-weight: 650; letter-spacing: .01em;
    transition: background .35s, color .35s, border-color .35s, transform .35s;
    cursor: pointer; background: transparent;
}
.pill:hover { transform: translateY(-2px); }
.pill-light { background: var(--cream); color: var(--ink); }
.pill-outline { border-color: rgba(255, 255, 255, .3); color: #fff; background: transparent; }
.header-cta { justify-self: end; }

.menu-toggle {
    display: none; background: transparent; border: 0; color: #fff;
    width: 48px; height: 48px; padding: 12px; cursor: pointer;
}
.menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; margin: 6px 0; }

/* ---------------------------------------------------------------- hero (home) */
.hero {
    position: relative; min-height: 88vh; height: 820px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #292929;
}
.hero-image {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 52% 48%;
    animation: heroZoom 18s ease-in-out infinite alternate;
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(24, 24, 24, .08), rgba(38, 38, 38, .04) 56%, #262626 100%),
        linear-gradient(90deg, rgba(24, 24, 24, .2), transparent 68%);
}
.hero-content { position: relative; z-index: 2; width: min(760px, calc(100% - 48px)); text-align: center; margin-top: 20px; }
.eyebrow { margin: 0 0 22px; color: #c9c4bb; font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
/* Homepage masthead eyebrow gets its own dressed-up treatment - a glowing
   pill badge instead of the plain small caption used for every other
   section's eyebrow - since it's the very first thing visitors read. */
.hero-content .eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
    padding: 9px 20px; color: var(--cream); border: 1px solid rgba(232, 226, 214, .32);
    border-radius: 999px; background: rgba(232, 226, 214, .08); backdrop-filter: blur(6px);
}
.hero-content .eyebrow::before {
    content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%;
    background: var(--cream); box-shadow: 0 0 10px 2px rgba(232, 226, 214, .65);
}
.hero h1, .section h2, .feature h3, .story h2, .request h2 {
    font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em;
}
.hero h1 { margin: 0; font-size: clamp(42px, 6.2vw, 82px); line-height: .98; text-shadow: 0 2px 18px rgba(0, 0, 0, .38); }
.hero h1 em {
    font-weight: 400; font-style: italic;
    background: linear-gradient(100deg, #d8d1c5, var(--cream) 45%, #d8d1c5);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy { max-width: 580px; margin: 24px auto 30px; color: rgba(255, 255, 255, .78); font-size: 16px; text-shadow: 0 2px 18px rgba(0, 0, 0, .38); }
.hero-meta {
    position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: calc(26px + var(--safe-b));
    display: flex; justify-content: space-between; gap: 10px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .6);
    font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
}
@keyframes heroZoom { to { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-image { animation: none; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- page-hero (services/laboratory) */
.page-hero {
    position: relative; min-height: 620px; padding: calc(150px + var(--safe-t)) var(--pad) 100px;
    display: flex; align-items: flex-end; overflow: hidden; background: #1f1f1f;
}
.page-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(28, 28, 28, .88), rgba(38, 38, 38, .2) 72%), linear-gradient(0deg, #262626, transparent 50%);
}
.page-hero-copy { position: relative; z-index: 1; max-width: 790px; }
.page-hero h1 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(38px, 6vw, 84px); line-height: .98; letter-spacing: -.045em; }
.page-hero-copy > p:last-of-type { max-width: 650px; margin: 26px 0 0; color: #d0cec8; font-size: 16px; line-height: 1.75; }

/* ---------------------------------------------------------------- simple-hero (contacts/privacy) */
.simple-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: calc(160px + var(--safe-t)) var(--pad) 90px; min-height: 480px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: radial-gradient(circle at 80% 20%, #363635, #262626 42%);
}
.simple-hero::before, .simple-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.simple-hero::before {
    z-index: -2; background-image: var(--hero-image, none); background-repeat: no-repeat;
    background-size: cover; background-position: center; opacity: .86; filter: grayscale(.35);
}
.simple-hero::after {
    z-index: -1;
    background: linear-gradient(90deg, rgba(38, 38, 38, .96) 0%, rgba(38, 38, 38, .72) 58%, rgba(38, 38, 38, .9) 100%),
                linear-gradient(0deg, #262626 0%, transparent 48%);
}
.contacts-hero::before { background-position: center 46%; }
.policy-hero::before { background-position: center; }
.simple-hero > * { position: relative; z-index: 1; }
.simple-hero h1 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(34px, 6vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.simple-hero > p:last-of-type { max-width: 650px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }

/* ---------------------------------------------------------------- generic sections */
.section { padding: 110px var(--pad); position: relative; }
.intro { text-align: center; padding-bottom: 80px; }
.intro h2, .center-heading h2, .section-title h2 {
    margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 4.8vw, 62px);
    font-weight: 400; line-height: 1.08; letter-spacing: -.04em;
}
.section-lead, .center-heading > p:last-child { max-width: 640px; margin: 26px auto 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.section-lead p, .section-lead p + p { margin: 0 0 14px; }
.section-description { max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }

/* feature list (home) */
.feature-list { padding: 0 var(--pad); }
.feature { min-height: 0; padding: 64px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center; border-top: 1px solid var(--line); }
.feature-reverse .feature-visual { order: 2; }
.feature-visual { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: #222; }
.feature-visual > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.feature:hover .feature-visual > img { transform: scale(1.03); }
.ui-note {
    position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(22, 22, 22, .82);
    backdrop-filter: blur(12px); display: grid; gap: 4px;
}
.ui-note small, .number, .tag { color: #aaa79f; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.ui-note strong { font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
.ui-note span { color: var(--muted); font-size: 12px; }
.feature-copy { max-width: 530px; }
.feature-copy h3 { margin: 24px 0 18px; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; }
.feature-copy p { color: var(--muted); line-height: 1.75; font-size: 15px; margin: 0 0 14px; }
.feature-copy > a { display: inline-flex; gap: 20px; margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; }

/* service list (services) */
.service-catalog { padding-top: 50px; }
.service-detail {
    min-height: 0; padding: 32px 0; display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, .85fr);
    gap: 36px; align-items: center; border-top: 1px solid var(--line);
}
.service-detail > span { align-self: start; color: var(--muted); font-size: 11px; }
.service-detail h2 { margin: 0; font-family: Georgia, serif; font-weight: 400; letter-spacing: -.035em; font-size: 32px; }
.service-detail p { max-width: 580px; color: var(--muted); line-height: 1.75; font-size: 15px; margin: 10px 0 0; }
.service-detail img { width: 100%; height: 220px; border-radius: 8px; object-fit: cover; }
.split-callout { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; background: #30302f; padding: 90px var(--pad); }
.split-callout h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.06; font-family: Georgia, serif; font-weight: 400; margin: 0; }
.split-callout > div:last-child p { color: var(--muted); line-height: 1.75; margin: 0 0 24px; font-size: 15px; }

/* policy (privacy) */
.policy { margin: 0 auto; padding: 40px var(--pad) 30px; }
.policy section { padding: 34px 0; display: grid; grid-template-columns: 60px 1fr; gap: 26px; border-top: 1px solid var(--line); }
.policy section > span { color: var(--muted); font-size: 11px; }
.policy h2 { margin: 0; font-family: Georgia, serif; font-weight: 400; letter-spacing: -.035em; font-size: 26px; }
/* No max-width here (unlike the general prose readability caps elsewhere,
   e.g. .details p): .policy itself no longer caps its own width either (по
   просьбе — убрали max-width), so an extra 780px cap on the paragraphs
   would just leave a large, uneven strip of empty space to the right of
   the text instead of letting each entry use its actual grid column, the
   way its own <h2> already does. */
.policy p { color: var(--muted); line-height: 1.8; font-size: 15px; margin: 12px 0 0; }
.policy a { text-decoration: underline; text-underline-offset: 3px; }

/* bento (audience) */
.bento-section { position: relative; }
.center-heading { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.bento article { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color .4s, background .4s; }
.bento article:hover { border-color: rgba(241, 239, 234, .25); background: #333332; }
.bento h3 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1.2; }
.bento p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.bento article a { align-self: flex-start; margin-top: 8px; font-size: 12px; }
.bento-wide { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.bento-wide h3 { font-size: 34px; max-width: 480px; }
.bento-image { padding: 0 !important; grid-column: 3 / span 2; grid-row: 1; overflow: hidden; }
.bento-image img { width: 100%; height: 100%; object-fit: cover; }
.bento article:nth-child(3) { grid-column: 3; grid-row: 2; }
.bento article:nth-child(4) { grid-column: 4; grid-row: 2; }
.bento article:nth-child(5) { grid-column: 1; grid-row: 3; }
.bento article:nth-child(6) { grid-column: 2; grid-row: 3; }
.bento-accent { grid-column: 3 / span 2 !important; grid-row: 3 !important; background: var(--cream) !important; color: var(--ink); }
.bento-accent .tag { color: #5e5a54; }
.bento-accent p { color: #514f4b; }

/* story */
.story { padding: 110px var(--pad); display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: center; }
.story-image { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 10px; position: relative; }
.story-image img { width: 100%; height: 100%; object-fit: cover; }
.story h2 { margin: 0; font-size: clamp(30px, 4.5vw, 52px); line-height: 1.1; }
.story-copy > p { color: var(--muted); margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tags span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; color: #bbb8b0; }

/* process / benefits / faq / contacts — shared two-column layout */
.process, .benefits, .faq, .contacts { display: grid; grid-template-columns: .72fr 1.28fr; gap: 4vw; }
.section-title { position: sticky; top: 40px; align-self: start; }
.process-list { border-top: 1px solid var(--line); }
.process-list article { min-height: 0; padding: 26px 0; display: grid; grid-template-columns: 50px .7fr 1fr; gap: 22px; border-bottom: 1px solid var(--line); align-items: start; }
.process-list span { font-size: 10px; color: var(--muted); }
.process-list h3 { margin: 0; font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.process-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.laboratory { background: #292929; }
.gallery { display: grid; grid-template-columns: 1.3fr .7fr .7fr; grid-template-rows: 300px 230px; gap: 10px; }
.gallery-expanded { grid-template-rows: 340px 260px; }
.gallery figure { margin: 0; overflow: hidden; border-radius: 8px; background: #1f1f1f; }
.gallery-main { grid-row: span 2; }
.gallery figure:last-child { grid-column: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.gallery figure:hover img { transform: scale(1.03); }
[data-lightbox] { cursor: zoom-in; }

.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.benefit-grid article { min-height: 0; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.benefit-grid article > span { font-size: 18px; color: #c9c3b8; }
.benefit-grid h3 { margin: 46px 0 10px; font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.benefit-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-family: Georgia, serif; font-size: 18px; padding: 8px 0; }
summary::-webkit-details-marker { display: none; }
summary span { font-family: Arial, sans-serif; font-size: 18px; font-weight: 300; transition: transform .3s; flex-shrink: 0; }
details[open] summary span { transform: rotate(45deg); }
details p { max-width: 650px; margin: -5px 40px 24px 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.contacts .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-grid > a, .contact-grid > div { min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-grid > div { grid-column: span 2; }
.contact-grid small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.contact-grid strong { font-family: Georgia, serif; font-size: 21px; font-weight: 400; line-height: 1.3; }
/* .contacts is the shared 2-column section grid (.72fr label column / 1.28fr
   content column, see the ".process, .benefits, .faq, .contacts" rule above)
   that only ever has 2 direct children elsewhere (.section-title + one list
   wrapper) - .contacts is the one section with a 3rd direct child
   (.requisites), and grid auto-placement wraps a 3rd item to a new row
   starting back in column 1, under the (usually much shorter) .section-title
   instead of under .contact-grid. Pin it to column 2 so it lands directly
   under the contact cards instead of floating alone, low and misaligned, in
   the label column. */
.contacts .requisites { grid-column: 2; }
.requisites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.requisites span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; color: var(--muted); }

/* faint decorative background photos behind some sections */
.intro, .bento-section, .process, .benefits, .faq, .contacts, .request { isolation: isolate; }
.intro, .process, .benefits, .faq { position: relative; }
.intro::before, .process::before, .benefits::before, .faq::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-repeat: no-repeat; background-size: cover; background-position: center;
    opacity: .06; pointer-events: none;
}
.intro::before { background-image: url(../../com_profecolab/images/lab-overview.jpeg); }
.process::before { background-image: url(../../com_profecolab/images/lab-benches.jpeg); }
.benefits::before { background-image: url(../../com_profecolab/images/field-sampling.jpeg); }
.faq::before { background-image: url(../../com_profecolab/images/soil.jpg); }

/* ---------------------------------------------------------------- request / CTA + form */
.request {
    position: relative; margin: 70px var(--pad); padding: 70px; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 8vw; align-items: start;
    overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #30302f;
}
.request-glow { position: absolute; z-index: 0; width: 600px; height: 600px; left: -250px; bottom: -380px; border-radius: 50%; background: radial-gradient(circle, rgba(215, 204, 185, .16), transparent 66%); }
.request-copy, .contact-form { position: relative; z-index: 1; }
.request-copy { align-self: center; }
/* Страницы без формы заявки в этом блоке (например "О лаборатории") не
   выводят .contact-form вовсе - но .request по умолчанию всё равно был
   двухколоночной сеткой (текст + место под форму), поэтому вторая колонка
   оставалась зарезервированной и пустой, создавая большой пустой блок
   справа от текста. Схлопываем сетку в одну колонку, когда формы нет. */
.request.request-no-form { grid-template-columns: 1fr; }
.request.request-no-form .request-copy { max-width: 640px; }
.request h2 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.06; }
.request-copy > p { color: var(--muted); max-width: 550px; font-size: 15px; line-height: 1.75; margin: 20px 0 0; }
.request-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }

.contact-form { width: 100%; max-width: 520px; justify-self: end; padding: 26px; background: #363634; border: 1px solid var(--line); border-radius: 10px; }
.contact-form .form-field { margin-bottom: 14px; }
.contact-form label { display: block; font-size: 12px; color: #c5c2ba; }
.contact-form label small { color: #85837f; margin-left: 3px; }
.contact-form input, .contact-form textarea {
    width: 100%; margin-top: 7px; padding: 13px 2px; font-size: 16px; color: #fff;
    background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--cream); }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: #e2897f; }
.contact-form textarea { resize: vertical; min-height: 96px; }
.field-error { margin: 6px 0 0; font-size: 12px; color: #e2897f; }
.contact-form .consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 4px; font-size: 12px; color: #c5c2ba; }
.contact-form .consent input { width: auto; margin-top: 4px; min-width: 18px; min-height: 18px; }
.contact-form .consent a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form button { width: 100%; border: 0; margin-top: 18px; }
.form-status { min-height: 18px; margin: 12px 0 0; color: #aaa79f; font-size: 12px; text-align: center; }
.form-status[data-state="error"] { color: #e2897f; }
.form-status[data-state="ok"] { color: #9fd6b0; }
.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- modal */
.pf-modal {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
    padding-top: max(20px, var(--safe-t)); padding-bottom: max(20px, var(--safe-b));
    background: rgba(15, 15, 15, .78);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.pf-modal.open { opacity: 1; visibility: visible; }
.pf-modal-dialog {
    position: relative; width: min(520px, 100%); max-height: 100%; overflow-y: auto;
    background: #262626; border: 1px solid var(--line); border-radius: 14px; padding: 30px;
}
.pf-modal-dialog .contact-form { max-width: none; background: transparent; border: 0; padding: 0; }
.pf-modal-title { margin: 0 0 20px; font-family: Georgia, serif; font-weight: 400; font-size: 24px; padding-right: 40px; }
.pf-modal-close {
    position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: #2e2e2c; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}

/* ---------------------------------------------------------------- site messages as a popup
   Joomla renders confirmation/error notices (including the contact form's
   classic, non-AJAX submit fallback - used when JS doesn't intercept the
   form) into #system-message-container as <joomla-alert> elements. Left
   unstyled, that's a plain block sitting at the very top of <body>, which is
   why it showed up as a stray light banner across the very top of the page
   instead of a popup. Style it as a centered, dismissible popup matching the
   .pf-modal contact dialog above. */
#system-message-container {
    position: fixed; inset: 0; z-index: 280; display: none; place-items: center; padding: 20px;
    padding-top: max(20px, var(--safe-t)); padding-bottom: max(20px, var(--safe-b));
    background: rgba(15, 15, 15, .78);
}
#system-message-container:has(joomla-alert) { display: grid; }
body:has(#system-message-container joomla-alert) { overflow: hidden; }
#system-message-container joomla-alert {
    position: relative; display: block; width: min(460px, 100%); margin: 0 0 14px;
    padding: 26px 50px 26px 26px; border-radius: 14px; border: 1px solid var(--line);
    background: #262626; color: var(--text); font-size: 15px; line-height: 1.6;
}
#system-message-container joomla-alert:last-child { margin-bottom: 0; }
#system-message-container joomla-alert[type="success"] { border-color: #3f5f45; }
#system-message-container joomla-alert[type="danger"] { border-color: #6b3a36; }
#system-message-container joomla-alert[type="warning"] { border-color: #6b5730; }
#system-message-container joomla-alert[type="info"] { border-color: #33505a; }
#system-message-container .alert-heading { display: none; }
#system-message-container .joomla-alert--close {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); background: #2e2e2c; color: #fff; opacity: 1;
    font-size: 20px; line-height: 1; text-shadow: none; cursor: pointer;
}
#system-message-container .joomla-alert--close:hover { background: #383836; }

/* ---------------------------------------------------------------- lightbox */
.lightbox {
    position: fixed; z-index: 250; inset: 0; padding: 24px; display: grid; place-items: center;
    background: rgba(15, 15, 15, .92); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1200px, 92vw); max-height: 84vh; object-fit: contain; border-radius: 4px; }
.lightbox-caption { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; color: #d6d3cc; font-size: 12px; max-width: 80%; text-align: center; }
.lightbox-close { position: absolute; z-index: 2; top: 18px; right: 22px; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: #2b2b2b; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
body.lightbox-open { overflow: hidden; }

/* ---------------------------------------------------------------- free content block */
.profecolab-freetext { max-width: 860px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.75; }
.profecolab-freetext :is(h1, h2, h3) { color: var(--text); font-family: Georgia, serif; font-weight: 400; }
.profecolab-freetext a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; overflow: hidden; padding: 70px var(--pad) calc(24px + var(--safe-b)); background: #202020; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.2fr .8fr 1fr 1.5fr; gap: 40px; align-items: start; }
.footer-top > div { display: flex; flex-direction: column; gap: 10px; }
.footer-top strong { margin-bottom: 6px; font-size: 11px; }
.footer-top > div a, .footer-top > div span { color: var(--muted); font-size: 12px; }
.footer-logo { align-self: start; }
.footer-logo .brand-logo { width: 210px; max-height: 68px; }
.footer-description { max-width: 260px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-partners { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 24px; row-gap: 8px; }
.footer-partners > strong:first-child { grid-column: 1; grid-row: 1; }
.footer-partners > span.org { grid-column: 1; grid-row: 2; color: #dedbd4; font-size: 13px; }
.footer-partners > span.reg { grid-column: 1; grid-row: 3; }
.footer-partners > strong.support { grid-column: 2; grid-row: 1; }
.partner-logos { grid-column: 2; grid-row: 2 / span 2; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.partner-logos a { width: 150px; height: 42px; display: flex; align-items: center; }
.partner-logos img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.footer-bottom {
    position: relative; z-index: 2; margin-top: 56px; padding-top: 20px; display: flex; flex-wrap: wrap;
    gap: 10px 20px; justify-content: space-between; border-top: 1px solid var(--line); color: #7a7a76; font-size: 12px;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-word {
    margin-top: 20px; color: rgba(255, 255, 255, .035); font-family: Georgia, serif;
    font-size: clamp(60px, 15vw, 200px); line-height: .8; white-space: nowrap; user-select: none;
}

.quick-call {
    display: none; position: fixed; z-index: 40; right: 14px; bottom: calc(14px + var(--safe-b));
    align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; background: var(--cream); color: var(--ink);
    border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------- reveal-on-scroll
   Начинаем с opacity:1 (блок виден сразу), а не opacity:0 - раньше, если по
   каким-то причинам на странице не срабатывал site.js (файл не загрузился,
   заблокирован, устаревшая версия шаблона без него и т. п.), элемент с
   классом .reveal оставался невидимым навсегда, потому что снять
   .reveal{opacity:0} мог только сам JS. Теперь при таком сбое JS блок всё
   равно виден (с лёгким смещением по вертикали), а не пропадает. */
.reveal { opacity: 1; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* =========================================================================
   Адаптивность. Ключевые точки: 1180 / 980 / 680px, плюс частные проверки
   для 360 / 375 / 390 / 393 / 430px укладываются в правило max-width:680px.
   ========================================================================= */
@media (max-width: 1180px) {
    .nav { gap: 12px; font-size: 10px; }
    .header .brand-logo { width: 155px; }
    .footer-top { grid-template-columns: 1.1fr 1fr 1fr; }
    .footer-logo { grid-column: 1; }
    .footer-top > .footer-partners { grid-column: 1 / span 3; grid-template-columns: minmax(180px, .7fr) 1.3fr; margin-top: 8px; }
}

@media (max-width: 980px) {
    .header { grid-template-columns: 1fr auto; }
    .nav {
        position: fixed; z-index: 90; inset: 0; top: 0; left: 0; width: 100vw; height: 100dvh;
        background: #181818; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 20px; padding: 30px; padding-top: calc(30px + var(--safe-t)); padding-bottom: calc(30px + var(--safe-b));
        font-family: Georgia, serif; font-size: 30px;
        opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, visibility .3s, transform .3s;
    }
    .nav.open { opacity: 1; visibility: visible; transform: none; }
    .header-cta { display: none; }
    .menu-toggle { position: relative; z-index: 91; display: block; }
    .feature { grid-template-columns: 1fr; gap: 32px; }
    .feature-reverse .feature-visual { order: 0; }
    .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 210px); }
    .bento-wide { grid-column: 1 / span 2; grid-row: 1 / span 2; }
    .bento-image { grid-column: 1 / span 2; grid-row: 3; }
    .bento article:nth-child(3) { grid-column: 1; grid-row: 4; }
    .bento article:nth-child(4) { grid-column: 2; grid-row: 4; }
    .bento article:nth-child(5), .bento article:nth-child(6), .bento-accent { grid-column: auto !important; grid-row: auto !important; }
    .story { grid-template-columns: 1fr; gap: 40px; }
    .process, .benefits, .faq, .contacts { grid-template-columns: 1fr; gap: 40px; }
    /* .contacts .requisites is pinned to "grid-column: 2" for the desktop
       2-column layout above (see the comment near that rule) - left
       unscoped, that explicit placement forces the grid to generate an
       implicit second column here too, even though this rule just collapsed
       .contacts to one explicit column, which is what was pushing the whole
       contacts block (and every page that includes one, e.g. the homepage's
       own contact section) wider than the screen on mobile. Release it back
       to normal in-flow placement at this breakpoint. */
    .contacts .requisites { grid-column: auto; }
    .section-title { position: static; }
    .service-detail { grid-template-columns: 40px 1fr; }
    .service-detail img { grid-column: 2; }
    .split-callout { grid-template-columns: 1fr; gap: 32px; }
    .request { grid-template-columns: 1fr; padding: 48px; }
    .contact-form { max-width: none; justify-self: stretch; }
}

@media (max-width: 680px) {
    :root { --pad: 20px; }
    body { font-size: 17px; }
    .header { height: calc(70px + var(--safe-t)); padding: var(--safe-t) 18px 0; }
    .hero { height: auto; min-height: 100svh; align-items: flex-start; padding-top: calc(140px + var(--safe-t)); padding-bottom: 60px; }
    .hero-image { object-position: 63% 50%; }
    .hero-content { width: 100%; text-align: left; margin-top: 0; }
    .hero h1 { font-size: clamp(38px, 12vw, 56px); }
    .hero-copy { margin-left: 0; font-size: 16px; }
    .hero-meta { left: 18px; right: 18px; gap: 10px; flex-wrap: wrap; }
    .hero-meta span:nth-child(2) { display: none; }

    .page-hero { min-height: 0; padding: calc(120px + var(--safe-t)) 18px 60px; }
    .page-hero h1 { font-size: 40px; }
    .simple-hero { padding: calc(130px + var(--safe-t)) 18px 60px; min-height: 0; }
    .simple-hero h1 { font-size: 38px; }

    .section { padding: 64px 18px; }
    .intro { text-align: left; padding-bottom: 8px; }
    .intro h2, .center-heading h2, .section-title h2 { font-size: 32px; }
    .section-lead { margin-left: 0; font-size: 17px; }
    .section-description { font-size: 16px; }

    .feature { padding: 40px 0; gap: 26px; }
    .feature-copy h3 { font-size: 32px; }
    .feature-copy p { font-size: 17px; }
    .ui-note strong { font-size: 18px; }
    .ui-note span { font-size: 13px; }

    .service-detail { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
    .service-detail > span { display: none; }
    .service-detail img { height: 100%; grid-column: 1; }
    .service-detail h2 { font-size: 26px; }
    .service-detail p { font-size: 17px; }

    .policy { padding-top: 20px; }
    .policy section { grid-template-columns: 1fr; gap: 10px; }
    .policy section > span { display: none; }
    .policy h2 { font-size: 22px; }
    .policy p { font-size: 16px; }

    .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
    .bento-wide, .bento-image, .bento article, .bento-accent { grid-column: auto !important; grid-row: auto !important; }
    .bento article { min-height: 150px; }
    .bento-image { min-height: 220px !important; }
    .bento-wide h3 { font-size: 28px; }
    .bento p { font-size: 15px; }

    .story h2 { font-size: 30px; }
    .story-copy p { font-size: 17px; }

    .process-list article { grid-template-columns: 32px 1fr; gap: 14px; padding: 20px 0; }
    .process-list p { grid-column: 2; font-size: 16px; }
    .process-list h3 { font-size: 20px; }

    .gallery, .gallery-expanded { grid-template-columns: 1fr; grid-template-rows: 280px 220px 220px; }
    .gallery-main { grid-column: auto; grid-row: auto; }
    .gallery figure:last-child { grid-column: auto; }

    .benefit-grid { grid-template-columns: 1fr; }
    .benefit-grid article { min-height: 0; padding: 22px 0; }
    .benefit-grid h3 { margin-top: 14px; font-size: 20px; }
    .benefit-grid p { font-size: 16px; }

    summary { font-size: 18px; }
    details p { margin-right: 0; font-size: 16px; }

    /* Scoped to ".contacts .contact-grid" (not just ".contact-grid") to match
       the base rule's specificity (".contacts .contact-grid", two classes) at
       line ~288 - a bare ".contact-grid" here (one class) loses that
       specificity fight and never actually applies, regardless of the media
       query matching, which is what let the 2-column desktop layout keep
       forcing every page with a contacts block wider than the phone screen
       (visible as sideways-scrolling / cut-off content on mobile). */
    .contacts .contact-grid { grid-template-columns: 1fr; }
    .contact-grid > div { grid-column: auto; }
    .contact-grid > a, .contact-grid > div { min-height: 0; padding: 20px; }
    .requisites { margin-top: 14px; }

    .request { margin: 40px 12px; padding: 40px 18px; }
    .request h2 { font-size: 32px; }
    .request-copy p { font-size: 17px; }
    .contact-form { padding: 20px 16px; }

    .split-callout { padding: 60px 18px; }
    .split-callout h2 { font-size: 30px; }
    .split-callout p { font-size: 17px; }

    .footer { padding: 56px 18px calc(20px + var(--safe-b)); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
    .footer-top > .footer-logo { grid-column: 1 / span 2; }
    .footer-top > .footer-partners { grid-column: 1 / span 2; grid-template-columns: 1fr; row-gap: 10px; }
    .partner-logos { grid-column: 1; grid-row: auto; }
    .footer-bottom { gap: 8px 16px; }

    .quick-call { display: flex; }

    .pf-modal-dialog { padding: 24px 18px; border-radius: 16px 16px 0 0; align-self: flex-end; width: 100%; max-height: 92dvh; }
    .pf-modal { align-items: flex-end; padding: 0; }
    .lightbox { padding: 14px; }
}

@media (max-width: 430px) {
    .brand-logo { width: 150px; max-height: 46px; }
}


.bento-section.section.reveal.visible {
  display: none;
}