:root {
  --s-canvas: #f3f7f4;
  --s-layer: #e6eee9;
  --s-copy: #1d2b26;
  --s-quiet: #4e5f58;
  --s-brand: #1f6b57;
  --s-mark: #b38426;
  --s-link: #1f6b57;
  --s-on-brand: #f3f7f4;
  --s-ff-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --s-ff-body: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --s-type-h1: clamp(35.2px, 1.055vw + 31.25px, 43.9px);
  --s-type-h2: clamp(28.1px, 0.861vw + 24.87px, 35.2px);
  --s-type-h3: clamp(22.5px, 0.679vw + 19.95px, 28.1px);
  --s-type-h4: clamp(20.1px, 0.291vw + 19.01px, 22.5px);
  --s-rad: 8px;
  --bs-body-bg: var(--s-canvas);
  --bs-body-bg-rgb: 243, 247, 244;
  --bs-body-color: var(--s-copy);
  --bs-body-color-rgb: 29, 43, 38;
  --bs-body-font-family: var(--s-ff-body);
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--s-copy);
  --bs-emphasis-color-rgb: 29, 43, 38;
  --bs-heading-color: inherit;
  --bs-secondary-color: var(--s-quiet);
  --bs-secondary-rgb: 78, 95, 88;
  --bs-tertiary-color: var(--s-quiet);
  --bs-secondary-bg: var(--s-layer);
  --bs-secondary-bg-rgb: 230, 238, 233;
  --bs-tertiary-bg: var(--s-layer);
  --bs-tertiary-bg-rgb: 230, 238, 233;
  --bs-primary: var(--s-brand);
  --bs-primary-rgb: 31, 107, 87;
  --bs-link-color: var(--s-link);
  --bs-link-color-rgb: 31, 107, 87;
  --bs-link-hover-color: var(--s-copy);
  --bs-link-hover-color-rgb: 29, 43, 38;
  --bs-light-rgb: 230, 238, 233;
  --bs-dark-rgb: 29, 43, 38;
  --bs-border-color: color-mix(in srgb, var(--s-copy) 16%, var(--s-canvas));
  --bs-border-radius: var(--s-rad);
  --bs-border-radius-sm: calc(var(--s-rad) * .6);
  --bs-border-radius-lg: calc(var(--s-rad) * 1.4);
  --bs-border-radius-xl: calc(var(--s-rad) * 1.8);
  --bs-focus-ring-color: color-mix(in srgb, var(--s-brand) 40%, transparent);
}

html {
  color-scheme: light;
}

body {
  background: var(--s-canvas);
  color: var(--s-copy);
  font-family: var(--s-ff-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--s-ff-heading);
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}

h1, .h1 { font-size: var(--s-type-h1); }
h2, .h2 { font-size: var(--s-type-h2); }
h3, .h3 { font-size: var(--s-type-h3); }
h4, .h4 { font-size: var(--s-type-h4); }

.btn-primary {
  --bs-btn-color: var(--s-on-brand);
  --bs-btn-bg: var(--s-brand);
  --bs-btn-border-color: var(--s-brand);
  --bs-btn-hover-color: var(--s-on-brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--s-brand) 88%, #000000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--s-brand) 88%, #000000);
  --bs-btn-active-color: var(--s-on-brand);
  --bs-btn-active-bg: color-mix(in srgb, var(--s-brand) 80%, #000000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--s-brand) 80%, #000000);
  --bs-btn-disabled-color: var(--s-on-brand);
  --bs-btn-disabled-bg: var(--s-brand);
  --bs-btn-disabled-border-color: var(--s-brand);
}

.btn-outline-primary {
  --bs-btn-color: var(--s-link);
  --bs-btn-border-color: var(--s-brand);
  --bs-btn-hover-color: var(--s-on-brand);
  --bs-btn-hover-bg: var(--s-brand);
  --bs-btn-hover-border-color: var(--s-brand);
  --bs-btn-active-color: var(--s-on-brand);
  --bs-btn-active-bg: var(--s-brand);
  --bs-btn-active-border-color: var(--s-brand);
}

/* Bootstrap красит .bg-* только фоном, а текст наследуется: на .bg-primary
   выходил основной текст (до 1.2:1), на тёмной основе .bg-light — светлый
   текст на светлом (1:1). Здесь у каждой заливки своя пара из гарантированных,
   и ссылки со вторичным текстом внутри .bg-primary тоже берут onPrimary */
.bg-primary {
  color: var(--s-on-brand);
  --bs-body-color-rgb: 243, 247, 244;
  --bs-emphasis-color-rgb: 243, 247, 244;
  --bs-secondary-color: var(--s-on-brand);
  --bs-secondary-rgb: 243, 247, 244;
  --bs-link-color: var(--s-on-brand);
  --bs-link-color-rgb: 243, 247, 244;
  --bs-link-hover-color: var(--s-on-brand);
  --bs-link-hover-color-rgb: 243, 247, 244;
}

.bg-primary .btn-outline-primary {
  --bs-btn-color: var(--s-on-brand);
  --bs-btn-border-color: var(--s-on-brand);
  --bs-btn-hover-color: var(--s-brand);
  --bs-btn-hover-bg: var(--s-on-brand);
  --bs-btn-hover-border-color: var(--s-on-brand);
  --bs-btn-active-color: var(--s-brand);
  --bs-btn-active-bg: var(--s-on-brand);
  --bs-btn-active-border-color: var(--s-on-brand);
}

/* «Светлая» заливка — панель на обеих основах: на тёмной --bs-light-rgb
   равен цвету текста (он нужен .text-light), и фон совпадал бы с текстом */
.bg-light {
  background-color: var(--s-layer) !important;
  color: var(--s-copy);
}

.bg-body {
  color: var(--s-copy);
}

.bg-dark {
  color: var(--s-canvas);
}

/* Панели и поля внутри заливки primary возвращают переменные корня: иначе
   ссылки и подсказки полей на белой карточке вышли бы цветом onPrimary */
.bg-primary :where(.bg-body, .bg-light, .card, .form-control, .form-select, .dropdown-menu, .list-group-item, .accordion-item) {
  --bs-body-color-rgb: 29, 43, 38;
  --bs-emphasis-color-rgb: 29, 43, 38;
  --bs-secondary-color: var(--s-quiet);
  --bs-secondary-rgb: 78, 95, 88;
  --bs-link-color: var(--s-link);
  --bs-link-color-rgb: 31, 107, 87;
  --bs-link-hover-color: var(--s-copy);
  --bs-link-hover-color-rgb: 29, 43, 38;
}

:where(img[height][width]) { height: auto; }

.site-header {
  background: var(--s-canvas);
  border-bottom: 3px solid var(--s-mark);
}
.site-header .navbar {
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.site-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: 0;
  color: var(--s-copy);
  font-family: var(--s-ff-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
}
.site-header .navbar-brand img {
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
  object-fit: contain;
}
.site-header .navbar-brand span {
  white-space: nowrap;
}
.site-header .navbar-toggler {
  border-color: var(--s-brand);
  border-radius: var(--s-rad);
  padding: .4rem .6rem;
  color: var(--s-brand);
}
.site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem var(--s-mark);
}
.site-header .navbar-toggler-icon {
  background-image: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}
.site-header .navbar-toggler-icon::before {
  content: "\F479";
  font-family: "bootstrap-icons";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--s-brand);
}
.site-header .nav-link {
  color: var(--s-copy);
  font-family: var(--s-ff-body);
  font-weight: 600;
  padding: .55rem .85rem;
  border-radius: var(--s-rad);
  transition: background-color .2s ease, color .2s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--s-brand);
  background: var(--s-layer);
}
.site-header .nav-link:focus-visible,
.site-header .navbar-brand:focus-visible {
  outline: 3px solid var(--s-brand);
  outline-offset: 2px;
}
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: .6rem;
    padding: .5rem;
    background: var(--s-layer);
    border-radius: var(--s-rad);
  }
}
@media (max-width: 400px) {
  .site-header .navbar-brand {
    font-size: 1.1rem;
    gap: .45rem;
  }
}

#contact-main { background: var(--s-canvas); color: var(--s-copy); font-family: var(--s-ff-body); padding: 52px 0; }
#contact-main h1, #contact-main h2, #contact-main h3 { font-family: var(--s-ff-heading); color: var(--s-copy); }
#contact-main h1 { font-size: var(--s-type-h1); margin-bottom: 16px; }
#contact-main h2 { font-size: var(--s-type-h2); margin-bottom: 14px; }
#contact-main h3 { font-size: var(--s-type-h3); margin-bottom: 10px; }
#contact-main p { max-width: 70ch; }
#contact-main .contact-lead { color: var(--s-quiet); margin-bottom: 0; }
#contact-main .form-panel { background: var(--s-layer); border-radius: var(--s-rad); padding: 28px; border-left: 4px solid var(--s-mark); }
#contact-main .form-label { color: var(--s-copy); font-weight: 600; }
#contact-main .form-control { border-radius: var(--s-rad); background: var(--s-canvas); color: var(--s-copy); border: 1px solid var(--s-quiet); font-family: var(--s-ff-body); padding: 10px 14px; }
#contact-main .form-control::placeholder { color: var(--s-quiet); opacity: 1; }
#contact-main .form-control:focus { border-color: var(--s-brand); box-shadow: 0 0 0 3px var(--s-mark); outline: 2px solid var(--s-brand); outline-offset: 1px; }
#contact-main .btn-primary { border-radius: var(--s-rad); padding: 12px 26px; font-family: var(--s-ff-body); font-weight: 600; }
#contact-main .btn-primary:focus-visible { outline: 3px solid var(--s-copy); outline-offset: 2px; }
#contact-main .side-block { margin-bottom: 32px; }
#contact-main .side-block p { margin-bottom: 10px; }
#contact-main .mail-link { color: var(--s-link); font-weight: 600; word-break: break-all; }
#contact-main .mail-link:focus-visible { outline: 3px solid var(--s-brand); outline-offset: 2px; }
#contact-main .after-list { padding-left: 1.2rem; margin-bottom: 0; }
#contact-main .after-list li { margin-bottom: 8px; }
#contact-main .more-band { background: var(--s-layer); border-radius: var(--s-rad); padding: 28px; margin-top: 48px; }
#contact-main .more-band a { color: var(--s-link); }
#contact-main .more-band a:focus-visible { outline: 3px solid var(--s-brand); outline-offset: 2px; }
#contact-main .cta-end { margin-top: 48px; padding-top: 32px; border-top: 3px solid var(--s-mark); }
@media (max-width: 575.98px) {
  #contact-main { padding: 40px 0; }
  #contact-main .form-panel { padding: 20px; }
  #contact-main .more-band { padding: 20px; }
}

.site-footer{background:var(--s-layer);color:var(--s-copy);padding:48px 0 32px;font-family:var(--s-ff-body);border-top:3px solid var(--s-mark)}
.site-footer h2,.site-footer h3{font-family:var(--s-ff-heading);color:var(--s-copy)}
.site-footer .footer-brand{font-size:var(--s-type-h3);margin-bottom:12px}
.site-footer .footer-title{font-size:var(--s-type-h4);margin-bottom:12px}
.site-footer p{color:var(--s-quiet);margin-bottom:12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--s-link);text-decoration:underline;text-underline-offset:3px}
.site-footer a:hover,.site-footer a:focus{color:var(--s-brand)}
.site-footer a:focus-visible{outline:2px solid var(--s-brand);outline-offset:2px;border-radius:3px}
.site-footer .footer-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--s-mark);color:var(--s-quiet);font-size:16px}
.site-footer .footer-end{min-height:32px;margin-top:8px}
#consentBox{position:fixed;left:12px;right:12px;bottom:12px;z-index:1080;background:var(--s-canvas);color:var(--s-copy);border:2px solid var(--s-brand);border-radius:var(--s-rad);box-shadow:0 6px 24px rgba(0,0,0,.25);padding:14px 16px;max-width:760px;margin:0 auto;max-height:60vh;overflow-y:auto;font-family:var(--s-ff-body)}
#consentBox .consent-title{font-family:var(--s-ff-heading);font-size:var(--s-type-h4);color:var(--s-copy);margin:0 0 6px}
#consentBox p{font-size:16px;color:var(--s-quiet);margin:0 0 8px;line-height:1.4}
#consentBox ul{font-size:16px;color:var(--s-copy);padding-left:18px;margin:0 0 10px;line-height:1.4}
#consentBox li{margin-bottom:2px}
#consentBox .consent-actions .btn{width:100%;font-size:16px;padding:8px 10px}
#consentBox .consent-more{display:inline-block;margin-top:8px;font-size:16px;color:var(--s-link)}
@media (min-width:576px){#consentBox{left:20px;right:auto;bottom:20px;margin:0}}

.thanks-section {
  background-color: var(--s-canvas);
  color: var(--s-copy);
  font-family: var(--s-ff-body);
  padding: 5rem 0;
}
.thanks-section .thanks-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--s-brand);
  color: var(--s-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.thanks-section .thanks-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}
.thanks-section .thanks-line {
  width: 4rem;
  height: 4px;
  background-color: var(--s-mark);
  border-radius: var(--s-rad);
  margin: 1.5rem auto;
}
.thanks-section h1 {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h1);
  color: var(--s-copy);
  line-height: 1.2;
}
.thanks-section .thanks-lead {
  color: var(--s-copy);
  line-height: 1.6;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
.thanks-section .thanks-note {
  color: var(--s-quiet);
  line-height: 1.6;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
.thanks-section .btn-primary {
  border-radius: var(--s-rad);
  padding: 0.75rem 1.75rem;
}
@media (max-width: 575.98px) {
  .thanks-section {
    padding: 3rem 0;
  }
}

#services-content { background: var(--s-canvas); color: var(--s-copy); font-family: var(--s-ff-body); padding: 52px 0; }
#services-content h1, #services-content h2, #services-content h3 { font-family: var(--s-ff-heading); color: var(--s-copy); }
#services-content h1 { font-size: var(--s-type-h1); margin-bottom: 16px; }
#services-content h2 { font-size: var(--s-type-h2); }
#services-content h3 { font-size: var(--s-type-h3); margin-bottom: 12px; }
#services-content .sv-lead { max-width: 68ch; color: var(--s-quiet); }
#services-content .sv-intro { margin-bottom: 40px; }
#services-content .sv-card { background: var(--s-layer); border: 1px solid var(--s-mark); border-radius: var(--s-rad); padding: 28px 24px; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
#services-content .sv-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
#services-content .sv-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--s-rad); background: var(--s-brand); color: var(--s-on-brand); font-size: 28px; margin-bottom: 18px; }
#services-content .sv-card p { color: var(--s-copy); margin-bottom: 0; line-height: 1.6; }
#services-content .sv-steps { background: var(--s-layer); border-radius: var(--s-rad); padding: 36px 28px; margin-top: 52px; }
#services-content .sv-steps ol { margin: 20px 0 0; padding-left: 1.3em; }
#services-content .sv-steps li { margin-bottom: 14px; padding-left: 6px; line-height: 1.6; }
#services-content .sv-steps li::marker { color: var(--s-brand); font-weight: 700; }
#services-content .sv-cta { margin-top: 52px; border-left: 6px solid var(--s-mark); padding: 8px 0 8px 24px; }
#services-content .sv-cta p { max-width: 62ch; color: var(--s-quiet); }
#services-content .btn-primary { border-radius: var(--s-rad); }
#services-content a:focus-visible, #services-content .btn:focus-visible { outline: 3px solid var(--s-brand); outline-offset: 3px; }
#services-content .sv-link { color: var(--s-link); }
@media (max-width: 575px) {
  #services-content { padding: 40px 0; }
  #services-content .sv-steps { padding: 28px 20px; }
}

#faq-body { background: var(--s-canvas); color: var(--s-copy); font-family: var(--s-ff-body); padding: 56px 0; }
#faq-body .faq-head { max-width: 760px; }
#faq-body .faq-head h1 { font-family: var(--s-ff-heading); font-size: var(--s-type-h1); color: var(--s-copy); line-height: 1.2; margin-bottom: 16px; }
#faq-body .faq-head p { color: var(--s-quiet); margin-bottom: 0; }
#faq-body .faq-rule { width: 64px; height: 4px; background: var(--s-mark); border-radius: 4px; margin: 20px 0 0; }
#faq-body .faq-wrap { margin-top: 40px; }
#faq-body .accordion { --bs-accordion-bg: var(--s-layer); --bs-accordion-color: var(--s-copy); --bs-accordion-border-color: var(--s-mark); --bs-accordion-border-radius: var(--s-rad); --bs-accordion-inner-border-radius: var(--s-rad); --bs-accordion-btn-bg: var(--s-layer); --bs-accordion-btn-color: var(--s-copy); --bs-accordion-active-bg: var(--s-layer); --bs-accordion-active-color: var(--s-copy); }
#faq-body .accordion-item { background: var(--s-layer); color: var(--s-copy); border-radius: var(--s-rad); margin-bottom: 10px; overflow: hidden; }
#faq-body .accordion-button { font-family: var(--s-ff-heading); font-size: var(--s-type-h4); color: var(--s-copy); background: var(--s-layer); line-height: 1.35; padding: 18px 20px; box-shadow: none; }
#faq-body .accordion-button:not(.collapsed) { color: var(--s-copy); background: var(--s-layer); box-shadow: none; }
#faq-body .accordion-button:focus { box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
#faq-body .accordion-body { color: var(--s-copy); padding: 4px 20px 22px; max-width: 75ch; }
#faq-body .accordion-body p { margin-bottom: 0; line-height: 1.65; }
#faq-body .faq-group-title { font-family: var(--s-ff-heading); font-size: var(--s-type-h3); color: var(--s-copy); margin: 40px 0 16px; }
#faq-body .faq-group-title:first-child { margin-top: 0; }
#faq-body .faq-steps { margin-top: 56px; background: var(--s-layer); border-radius: var(--s-rad); padding: 32px 28px; border-left: 4px solid var(--s-mark); }
#faq-body .faq-steps h2 { font-family: var(--s-ff-heading); font-size: var(--s-type-h2); color: var(--s-copy); margin-bottom: 14px; }
#faq-body .faq-steps ol { padding-left: 1.3em; margin: 0; max-width: 75ch; }
#faq-body .faq-steps li { margin-bottom: 12px; line-height: 1.6; color: var(--s-copy); }
#faq-body .faq-steps li:last-child { margin-bottom: 0; }
#faq-body .faq-steps a { color: var(--s-link); }
#faq-body .faq-cta { margin-top: 48px; background: var(--s-brand); color: var(--s-on-brand); border-radius: var(--s-rad); padding: 36px 28px; }
#faq-body .faq-cta h2 { font-family: var(--s-ff-heading); font-size: var(--s-type-h2); color: var(--s-on-brand); margin-bottom: 12px; }
#faq-body .faq-cta p { color: var(--s-on-brand); max-width: 65ch; margin-bottom: 20px; }
#faq-body .faq-cta .btn { background: var(--s-canvas); color: var(--s-copy); border: 2px solid var(--s-canvas); border-radius: var(--s-rad); font-weight: 600; padding: 12px 26px; transition: background-color .2s ease, color .2s ease; }
#faq-body .faq-cta .btn:hover { background: var(--s-layer); color: var(--s-copy); }
#faq-body .faq-cta .btn:focus-visible { outline: 3px solid var(--s-on-brand); outline-offset: 3px; }
@media (max-width: 575.98px) {
  #faq-body { padding: 40px 0; }
  #faq-body .faq-steps, #faq-body .faq-cta { padding: 24px 18px; }
  #faq-body .accordion-button { padding: 16px; }
  #faq-body .accordion-body { padding: 4px 16px 18px; }
}

.hero-pl{background:var(--s-canvas);color:var(--s-copy);padding:48px 0 56px;font-family:var(--s-ff-body);}
.hero-pl .hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
.hero-pl .layers{position:relative;padding-left:20px;}
.hero-pl .layers::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px;background:var(--s-mark);}
.hero-pl .layer{display:flex;align-items:center;gap:14px;padding:22px 20px;border-radius:var(--s-rad);color:var(--s-on-brand);font-family:var(--s-ff-body);font-weight:600;font-size:1.1rem;line-height:1.35;}
.hero-pl .layer + .layer{margin-top:12px;}
.hero-pl .layer small{display:block;font-weight:400;font-size:1rem;opacity:.92;}
.hero-pl .layer i{font-size:1.6rem;flex-shrink:0;}
.hero-pl .layer-1{background:var(--s-brand);}
.hero-pl .layer-2{background:var(--s-brand);filter:brightness(1.18);}
.hero-pl .layer-3{background:var(--s-brand);filter:brightness(1.38);}
.hero-pl h1{font-family:var(--s-ff-heading);font-size:var(--s-type-h1);line-height:1.2;color:var(--s-copy);margin-bottom:16px;}
.hero-pl h2{font-family:var(--s-ff-heading);font-size:var(--s-type-h3);line-height:1.3;color:var(--s-copy);margin-bottom:14px;}
.hero-pl .lead-text{color:var(--s-quiet);font-size:1.125rem;line-height:1.6;max-width:62ch;margin-bottom:18px;}
.hero-pl .points{list-style:none;padding:0;margin:0 0 24px;}
.hero-pl .points li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;color:var(--s-copy);}
.hero-pl .points i{color:var(--s-brand);margin-top:3px;flex-shrink:0;}
.hero-pl .hero-img{display:block;aspect-ratio:3 / 2;width:100%;height:auto;object-fit:cover;border-radius:var(--s-rad);margin-top:24px;}
.hero-pl .btn{border-radius:var(--s-rad);padding:12px 22px;font-weight:600;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;}
.hero-pl .btn-primary{background:var(--s-brand);border-color:var(--s-brand);color:var(--s-on-brand);}
.hero-pl .btn-primary:hover,.hero-pl .btn-primary:focus{background:var(--s-copy);border-color:var(--s-copy);color:var(--s-canvas);transform:translateY(-1px);}
.hero-pl .btn-outline-primary{border-color:var(--s-brand);color:var(--s-brand);background:transparent;}
.hero-pl .btn-outline-primary:hover,.hero-pl .btn-outline-primary:focus{background:var(--s-brand);color:var(--s-on-brand);}
.hero-pl .btn:focus-visible{outline:3px solid var(--s-mark);outline-offset:3px;}
@media (min-width:992px){
.hero-pl{padding:56px 0;}
.hero-pl .hero-grid{grid-template-columns:2fr 3fr;gap:48px;}
.hero-pl .hero-img{margin-top:28px;}
}

#company {
  background: var(--s-layer);
  padding: 52px 0;
}
#company .company-title {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h2);
  color: var(--s-copy);
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 4px solid var(--s-mark);
}
#company .company-text p {
  font-family: var(--s-ff-body);
  color: var(--s-copy);
  max-width: 68ch;
  margin-bottom: 16px;
}
#company .company-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--s-link);
  font-family: var(--s-ff-body);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#company .company-link:hover {
  color: var(--s-brand);
}
#company .company-link:focus-visible {
  outline: 3px solid var(--s-brand);
  outline-offset: 3px;
  border-radius: var(--s-rad);
}
#company .company-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--s-rad);
}
#company .company-img-main {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
#company .company-img-second {
  border: 1px solid var(--s-mark);
}
@media (max-width: 575.98px) {
  #company {
    padding: 44px 0;
  }
}

#portfolio.sc-gallery {
  background: var(--s-layer);
  color: var(--s-copy);
  padding: 52px 0;
  font-family: var(--s-ff-body);
}
#portfolio .sc-gallery__head {
  max-width: 640px;
  margin-bottom: 28px;
}
#portfolio .sc-gallery__title {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h2);
  color: var(--s-copy);
  margin: 0 0 12px;
  line-height: 1.25;
}
#portfolio .sc-gallery__lead {
  color: var(--s-quiet);
  margin: 0;
  line-height: 1.6;
}
#portfolio .sc-gallery__item {
  background: var(--s-canvas);
  border-radius: var(--s-rad);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--s-mark);
}
#portfolio .sc-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#portfolio .sc-gallery__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
#portfolio .sc-gallery__badge {
  display: inline-block;
  background: var(--s-brand);
  color: var(--s-on-brand);
  font-size: 0.8125rem;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: var(--s-rad);
  margin-bottom: 12px;
}
#portfolio .sc-gallery__name {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h4);
  color: var(--s-copy);
  margin: 0 0 8px;
  line-height: 1.3;
}
#portfolio .sc-gallery__text {
  color: var(--s-quiet);
  margin: 0;
  line-height: 1.6;
}

#what-to-expect {
  background: var(--s-layer);
  padding: 52px 0;
  color: var(--s-copy);
}
#what-to-expect .wte-title {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h2);
  color: var(--s-copy);
  margin-bottom: 12px;
}
#what-to-expect .wte-lead {
  font-family: var(--s-ff-body);
  color: var(--s-quiet);
  max-width: 62ch;
  margin-bottom: 28px;
}
#what-to-expect .wte-card {
  height: 100%;
  background: var(--s-canvas);
  border: 1px solid var(--s-quiet);
  border-radius: var(--s-rad);
  padding: 20px 20px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
#what-to-expect .wte-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}
#what-to-expect .wte-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--s-rad);
  background: var(--s-brand);
  color: var(--s-on-brand);
  font-size: 1.25rem;
  margin-bottom: 14px;
}
#what-to-expect .wte-card h3 {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h4);
  color: var(--s-copy);
  margin-bottom: 8px;
}
#what-to-expect .wte-card p {
  font-family: var(--s-ff-body);
  color: var(--s-copy);
  margin: 0;
}
#what-to-expect .wte-cta {
  margin-top: 28px;
}
#what-to-expect .wte-line {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--s-mark);
  border-radius: 2px;
  margin-bottom: 14px;
}

#the-work {
  background: var(--s-layer);
  padding: 52px 0;
  color: var(--s-copy);
  font-family: var(--s-ff-body);
}
#the-work .tw-head {
  max-width: 680px;
  margin-bottom: 32px;
}
#the-work .tw-head h2 {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h2);
  color: var(--s-copy);
  margin-bottom: 12px;
}
#the-work .tw-head p {
  color: var(--s-quiet);
  margin: 0;
}
#the-work .tw-card {
  background: var(--s-canvas);
  border: 1px solid var(--s-mark);
  border-radius: var(--s-rad);
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .2s ease, box-shadow .2s ease;
}
#the-work .tw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
#the-work .tw-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--s-rad);
  background: var(--s-brand);
  color: var(--s-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
}
#the-work .tw-card h3 {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h4);
  color: var(--s-copy);
  margin-bottom: 10px;
}
#the-work .tw-card p {
  color: var(--s-copy);
  margin: 0;
  line-height: 1.6;
}
#the-work .tw-cta {
  margin-top: 36px;
}
#the-work .tw-cta .btn {
  background: var(--s-brand);
  color: var(--s-on-brand);
  border: 0;
  border-radius: var(--s-rad);
  padding: 12px 26px;
}
#the-work .tw-cta .btn:hover,
#the-work .tw-cta .btn:focus-visible {
  background: var(--s-brand);
  color: var(--s-on-brand);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
#the-work .tw-cta .btn:focus-visible {
  outline: 3px solid var(--s-mark);
  outline-offset: 3px;
}

#faq {
  background: var(--s-layer);
  padding: 52px 0;
  color: var(--s-copy);
  font-family: var(--s-ff-body);
}
#faq .faq-intro {
  max-width: 640px;
  margin-bottom: 32px;
}
#faq .faq-intro h2 {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h2);
  color: var(--s-copy);
  margin-bottom: 14px;
  padding-left: 16px;
  border-left: 4px solid var(--s-mark);
}
#faq .faq-intro p {
  color: var(--s-quiet);
  margin-bottom: 0;
}
#faq .accordion {
  --bs-accordion-bg: var(--s-canvas);
  --bs-accordion-color: var(--s-copy);
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-color: var(--s-copy);
  --bs-accordion-btn-bg: var(--s-canvas);
  --bs-accordion-active-color: var(--s-copy);
  --bs-accordion-active-bg: var(--s-canvas);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--s-mark);
  max-width: 860px;
}
#faq .accordion-item {
  background: var(--s-canvas);
  color: var(--s-copy);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: var(--s-rad);
  margin-bottom: 10px;
  overflow: hidden;
}
#faq .accordion-button {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h4);
  font-weight: 600;
  color: var(--s-copy);
  background: var(--s-canvas);
  padding: 18px 20px;
  line-height: 1.35;
  box-shadow: none;
}
#faq .accordion-button:not(.collapsed) {
  color: var(--s-copy);
  background: var(--s-canvas);
  box-shadow: none;
}
#faq .accordion-button:focus-visible {
  outline: 3px solid var(--s-brand);
  outline-offset: -3px;
}
#faq .accordion-body {
  color: var(--s-copy);
  padding: 4px 20px 22px;
  line-height: 1.65;
}
#faq .accordion-body p {
  margin-bottom: 12px;
  max-width: 70ch;
}
#faq .accordion-body p:last-child {
  margin-bottom: 0;
}
#faq .accordion-body a {
  color: var(--s-link);
}
#faq .faq-cta {
  max-width: 860px;
  margin-top: 28px;
}
#faq .faq-cta p {
  color: var(--s-quiet);
  margin-bottom: 14px;
}
@media (max-width: 575.98px) {
  #faq { padding: 44px 0; }
  #faq .accordion-button { padding: 16px; }
  #faq .accordion-body { padding: 4px 16px 20px; }
}

#enquiry .enq-section {background:var(--s-layer);color:var(--s-copy);padding:52px 0;font-family:var(--s-ff-body)}
#enquiry .enq-section h2 {font-family:var(--s-ff-heading);font-size:var(--s-type-h2);color:var(--s-copy);margin-bottom:16px}
#enquiry .enq-section h3 {font-family:var(--s-ff-heading);font-size:var(--s-type-h4);color:var(--s-copy);margin-bottom:10px}
#enquiry .enq-lead {color:var(--s-quiet);max-width:62ch;margin-bottom:0}
#enquiry .enq-side {padding-left:20px;border-left:4px solid var(--s-mark)}
#enquiry .enq-side p {color:var(--s-quiet);margin-bottom:18px}
#enquiry .enq-mail {color:var(--s-link);font-weight:600;word-break:break-word}
#enquiry .enq-mail:hover {color:var(--s-link)}
#enquiry .enq-list {list-style:none;padding:0;margin:0 0 22px}
#enquiry .enq-list li {color:var(--s-copy);padding:6px 0 6px 22px;position:relative}
#enquiry .enq-list li::before {content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%;background:var(--s-mark)}
#enquiry .enq-form-box {background:var(--s-canvas);border:1px solid var(--s-mark);border-radius:var(--s-rad);padding:28px;position:relative}
#enquiry .enq-form-box label {font-weight:600;color:var(--s-copy);margin-bottom:6px}
#enquiry .enq-form-box .form-control {border-radius:var(--s-rad);background:var(--s-canvas);color:var(--s-copy);border:1px solid var(--s-quiet);padding:12px 14px;font-family:var(--s-ff-body);font-size:1rem}
#enquiry .enq-form-box .form-control::placeholder {color:var(--s-quiet);opacity:1}
#enquiry .enq-form-box .form-control:focus {border-color:var(--s-brand);box-shadow:0 0 0 .22rem rgba(0,0,0,.18);outline:2px solid var(--s-brand);outline-offset:1px}
#enquiry .enq-form-box textarea.form-control {min-height:150px;resize:vertical}
#enquiry .enq-btn {border-radius:var(--s-rad);padding:12px 28px;font-weight:600}
#enquiry .enq-btn:focus-visible {outline:3px solid var(--s-copy);outline-offset:3px}
#enquiry .enq-after {color:var(--s-quiet);font-size:1rem;margin:16px 0 0}
@media (max-width:575.98px){
#enquiry .enq-section {padding:40px 0}
#enquiry .enq-form-box {padding:20px}
}

#important.disclaimer-block {
  background-color: var(--s-layer);
  color: var(--s-copy);
  font-family: var(--s-ff-body);
  padding: 52px 0;
}
#important.disclaimer-block .disclaimer-box {
  background-color: var(--s-canvas);
  border: 1px solid var(--s-mark);
  border-left-width: 5px;
  border-radius: var(--s-rad);
  padding: 28px 24px;
}
#important.disclaimer-block .disclaimer-icon {
  color: var(--s-brand);
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
#important.disclaimer-block h2 {
  font-family: var(--s-ff-heading);
  font-size: var(--s-type-h2);
  color: var(--s-copy);
  margin: 0 0 14px;
}
#important.disclaimer-block p {
  color: var(--s-copy);
  max-width: 72ch;
  line-height: 1.65;
  margin: 0 0 12px;
}
#important.disclaimer-block p.disclaimer-note {
  color: var(--s-quiet);
  margin-bottom: 0;
}
#important.disclaimer-block a {
  color: var(--s-link);
}
#important.disclaimer-block a:focus-visible {
  outline: 3px solid var(--s-brand);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  #important.disclaimer-block { padding: 40px 0; }
  #important.disclaimer-block .disclaimer-box { padding: 22px 18px; }
}

#about-main {
  background: var(--s-canvas);
  color: var(--s-copy);
  font-family: var(--s-ff-body);
  padding: 48px 0 56px;
}
#about-main h1,
#about-main h2,
#about-main h3 {
  font-family: var(--s-ff-heading);
  color: var(--s-copy);
}
#about-main .about-lead {
  color: var(--s-quiet);
  max-width: 68ch;
}
#about-main .about-text p {
  max-width: 70ch;
  line-height: 1.7;
}
#about-main .about-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--s-rad);
  display: block;
}
#about-main .about-mark {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--s-mark);
  border-radius: 2px;
  margin-bottom: 16px;
}
#about-main .about-band {
  background: var(--s-layer);
  padding: 48px 0;
  margin-top: 48px;
}
#about-main .about-step {
  background: var(--s-canvas);
  border-radius: var(--s-rad);
  padding: 20px 22px;
  height: 100%;
  border-left: 4px solid var(--s-brand);
}
#about-main .about-step h3 {
  font-size: var(--s-type-h4);
  margin-bottom: 8px;
}
#about-main .about-step p {
  margin-bottom: 0;
  color: var(--s-quiet);
}
#about-main .about-table {
  background: var(--s-canvas);
  border-radius: var(--s-rad);
  overflow: hidden;
  margin-bottom: 0;
  color: var(--s-copy);
}
#about-main .about-table th,
#about-main .about-table td {
  padding: 14px 16px;
  vertical-align: top;
  color: var(--s-copy);
  background: transparent;
}
#about-main .about-table th {
  font-family: var(--s-ff-heading);
  font-weight: 600;
  width: 34%;
}
#about-main .about-table td {
  color: var(--s-quiet);
}
#about-main .about-list {
  padding-left: 1.1rem;
  max-width: 70ch;
}
#about-main .about-list li {
  margin-bottom: 8px;
  line-height: 1.65;
}
#about-main .about-cta {
  background: var(--s-brand);
  color: var(--s-on-brand);
  border-radius: var(--s-rad);
  padding: 32px 28px;
}
#about-main .about-cta h2 {
  color: var(--s-on-brand);
  font-size: var(--s-type-h3);
}
#about-main .about-cta p {
  color: var(--s-on-brand);
  max-width: 62ch;
}
#about-main .about-cta .btn {
  background: var(--s-canvas);
  color: var(--s-copy);
  border: 2px solid var(--s-canvas);
  border-radius: var(--s-rad);
  font-weight: 600;
  padding: 10px 24px;
}
#about-main .about-cta .btn:hover {
  background: var(--s-layer);
  color: var(--s-copy);
}
#about-main .about-cta .btn:focus-visible,
#about-main a:focus-visible {
  outline: 3px solid var(--s-mark);
  outline-offset: 3px;
}
#about-main a {
  color: var(--s-link);
}
#about-main .about-cta a.btn {
  color: var(--s-copy);
}
@media (max-width: 575.98px) {
  #about-main { padding: 36px 0 48px; }
  #about-main .about-band { padding: 36px 0; margin-top: 36px; }
  #about-main .about-table th { width: 40%; }
}

/* Цвет текста кнопок закреплён: правило блока вида «#about a { color: … }»
   по специфичности перебивало .btn-primary, и кнопка выходила светлым
   текстом на светлой заливке */
a.btn-primary, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: var(--s-on-brand) !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--s-brand);
  outline-offset: 2px;
}

footer a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Название в шапке набрано заголовочным шрифтом; крупное, оно выталкивает
   кнопку меню на вторую строку телефона */
@media (max-width: 575.98px) {
  .navbar-brand, .navbar-brand * {
    font-size: 1.25rem !important;
    line-height: 1.2;
  }
  .navbar-brand {
    min-width: 0;
    max-width: calc(100% - 64px);
    white-space: normal;
  }
}

footer small, footer .small {
  font-size: max(.875rem, 14px);
}

@keyframes appear-58 {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}

.lead-in-16 > * {
  animation: appear-58 740ms cubic-bezier(.2, .7, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}