:root {
  --page: #f5f7fa;
  --raised: #ffffff;
  --tone: #14213d;
  --dim: #4a5568;
  --lead: #1f4e8c;
  --spot: #2a9d6f;
  --anchor: #1f4e8c;
  --on-lead: #f5f7fa;
  --ff-title: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ts-h1: clamp(35.2px, 1.055vw + 31.25px, 43.9px);
  --ts-h2: clamp(28.1px, 0.861vw + 24.87px, 35.2px);
  --ts-h3: clamp(22.5px, 0.679vw + 19.95px, 28.1px);
  --ts-h4: clamp(20.1px, 0.291vw + 19.01px, 22.5px);
  --curve: 18px;
  --bs-body-bg: var(--page);
  --bs-body-bg-rgb: 245, 247, 250;
  --bs-body-color: var(--tone);
  --bs-body-color-rgb: 20, 33, 61;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--tone);
  --bs-emphasis-color-rgb: 20, 33, 61;
  --bs-heading-color: inherit;
  --bs-secondary-color: var(--dim);
  --bs-secondary-rgb: 74, 85, 104;
  --bs-tertiary-color: var(--dim);
  --bs-secondary-bg: var(--raised);
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: var(--raised);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-primary: var(--lead);
  --bs-primary-rgb: 31, 78, 140;
  --bs-link-color: var(--anchor);
  --bs-link-color-rgb: 31, 78, 140;
  --bs-link-hover-color: var(--tone);
  --bs-link-hover-color-rgb: 20, 33, 61;
  --bs-light-rgb: 255, 255, 255;
  --bs-dark-rgb: 20, 33, 61;
  --bs-border-color: color-mix(in srgb, var(--tone) 16%, var(--page));
  --bs-border-radius: var(--curve);
  --bs-border-radius-sm: calc(var(--curve) * .6);
  --bs-border-radius-lg: calc(var(--curve) * 1.4);
  --bs-border-radius-xl: calc(var(--curve) * 1.8);
  --bs-focus-ring-color: color-mix(in srgb, var(--lead) 40%, transparent);
}

html {
  color-scheme: light;
}

body {
  background: var(--page);
  color: var(--tone);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

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

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

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

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

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

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

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

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

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

/* Панели и поля внутри заливки 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: 20, 33, 61;
  --bs-emphasis-color-rgb: 20, 33, 61;
  --bs-secondary-color: var(--dim);
  --bs-secondary-rgb: 74, 85, 104;
  --bs-link-color: var(--anchor);
  --bs-link-color-rgb: 31, 78, 140;
  --bs-link-hover-color: var(--tone);
  --bs-link-hover-color-rgb: 20, 33, 61;
}

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

body{background:var(--page);color:var(--tone);font-family:var(--font-body);font-size:18px}
.site-header{background:var(--page);border-bottom:1px solid rgba(0,0,0,.08)}
.site-header .navbar{padding:12px 0}
.site-header .navbar-brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-title);font-weight:700;font-size:1.15rem;color:var(--tone);margin-right:0}
.site-header .navbar-brand img{width:50px;height:50px;flex-shrink:0}
.site-header .nav-link{font-family:var(--font-body);font-size:18px;font-weight:600;color:var(--tone);padding:8px 14px;border-radius:var(--curve)}
.site-header .nav-link:hover{color:var(--anchor)}
.site-header .nav-link:focus-visible,.site-header .navbar-brand:focus-visible,.site-header .navbar-toggler:focus-visible{outline:3px solid var(--spot);outline-offset:2px;box-shadow:none}
.site-header .navbar-toggler{border:1px solid rgba(0,0,0,.2);border-radius:var(--curve);padding:6px 10px;color:var(--tone)}
.site-header .navbar-toggler:focus{box-shadow:none}
@media (max-width:991.98px){.site-header .navbar-nav{padding-top:10px}.site-header .nav-link{padding:10px 4px}}

#portfolio-content{background:var(--page);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:56px 0}
#portfolio-content h1,#portfolio-content h2,#portfolio-content h3{font-family:var(--ff-title);color:var(--tone)}
#portfolio-content h1{font-size:var(--ts-h1)}
#portfolio-content h2{font-size:var(--ts-h2)}
#portfolio-content h3{font-size:var(--ts-h3)}
#portfolio-content .pc-lead{color:var(--dim);max-width:62ch}
#portfolio-content .pc-item{background:var(--raised);color:var(--tone);border-radius:var(--curve);overflow:hidden;height:100%;border:1px solid rgba(0,0,0,.06)}
#portfolio-content .pc-item.pc-wide{box-shadow:0 6px 18px rgba(0,0,0,.07)}
#portfolio-content .pc-item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
#portfolio-content .pc-body{padding:20px 22px 24px}
#portfolio-content .pc-body p{color:var(--dim);max-width:62ch}
#portfolio-content .pc-badge{display:inline-block;background:var(--page);color:var(--tone);border:1px solid var(--dim);border-radius:999px;padding:2px 12px;font-size:18px;margin-bottom:10px}
#portfolio-content .pc-details{margin-top:48px;background:var(--raised);border-radius:var(--curve);padding:28px}
#portfolio-content .table{--bs-table-bg:transparent;color:var(--tone);margin:0}
#portfolio-content .table th,#portfolio-content .table td{color:var(--tone);font-size:18px;vertical-align:top}
#portfolio-content .table th{font-family:var(--ff-title)}
#portfolio-content .pc-cta{margin-top:48px;background:var(--lead);color:var(--on-lead);border-radius:var(--curve);padding:32px}
#portfolio-content .pc-cta h2,#portfolio-content .pc-cta p{color:var(--on-lead)}
#portfolio-content .pc-cta .btn{background:var(--page);color:var(--tone);border:0;border-radius:var(--curve);padding:12px 26px;font-size:18px}
#portfolio-content .btn:focus-visible{outline:3px solid var(--spot);outline-offset:3px}

.site-foot{background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:52px 0 72px;border-top:3px solid var(--spot)}
.site-foot h2,.site-foot h3{font-family:var(--ff-title);color:var(--tone)}
.site-foot h2{font-size:var(--ts-h3);margin-bottom:12px}
.site-foot h3{font-size:var(--ts-h4);margin-bottom:12px}
.site-foot p{color:var(--dim);max-width:60ch;line-height:1.6}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:8px}
.site-foot a{color:var(--anchor);text-decoration:underline;text-underline-offset:3px}
.site-foot a:hover{text-decoration-thickness:2px}
.site-foot a:focus-visible,#privacyBox a:focus-visible,#privacyBox button:focus-visible{outline:3px solid var(--spot);outline-offset:2px}
.site-foot .foot-copy{color:var(--dim);border-top:1px solid var(--dim);padding-top:16px;margin-top:32px}
#privacyBox{position:fixed;left:12px;right:12px;bottom:12px;z-index:1050;background:var(--page);color:var(--tone);border:1px solid var(--dim);border-radius:var(--curve);box-shadow:0 8px 28px rgba(0,0,0,.18);font-family:var(--font-body);font-size:18px;max-height:60vh;overflow-y:auto;padding:16px}
#privacyBox h2{font-family:var(--ff-title);font-size:var(--ts-h4);color:var(--tone);margin-bottom:6px}
#privacyBox p,#privacyBox li{color:var(--dim);line-height:1.45;margin-bottom:6px}
#privacyBox ul{padding-left:18px;margin-bottom:10px}
#privacyBox strong{color:var(--tone)}
#privacyBox a{color:var(--anchor)}
#privacyBox .btn{border-radius:var(--curve);font-size:18px}
@media(min-width:768px){#privacyBox{left:auto;max-width:560px;padding:20px}}

#contact-content{background:var(--page);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:56px 0}
#contact-content h1,#contact-content h2,#contact-content h3{font-family:var(--ff-title);color:var(--tone)}
#contact-content h1{font-size:var(--ts-h1);margin-bottom:1rem}
#contact-content h2{font-size:var(--ts-h3);margin-bottom:.75rem}
#contact-content .lead-text{color:var(--dim);max-width:62ch;line-height:1.6}
#contact-content .form-panel{background:var(--raised);border-radius:var(--curve);padding:2rem}
#contact-content .form-label{font-weight:600;color:var(--tone)}
#contact-content .form-control{font-size:18px;border-radius:12px;background:var(--page);color:var(--tone);border:1px solid var(--dim)}
#contact-content .form-control::placeholder{color:var(--dim)}
#contact-content .form-control:focus{border-color:var(--spot);box-shadow:0 0 0 .2rem rgba(0,0,0,.08);outline:2px solid var(--spot);outline-offset:1px}
#contact-content .btn-send{background:var(--lead);color:var(--on-lead);border:0;border-radius:var(--curve);padding:.75rem 1.75rem;font-size:18px;font-weight:600}
#contact-content .btn-send:hover{opacity:.9;color:var(--on-lead)}
#contact-content .btn-send:focus-visible{outline:3px solid var(--spot);outline-offset:2px}
#contact-content .prep-list{padding-left:0;list-style:none;margin:0}
#contact-content .prep-list li{padding-left:1.25rem;position:relative;margin-bottom:.6rem;line-height:1.55}
#contact-content .prep-list li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--spot)}
#contact-content a.inline-link{color:var(--anchor)}
#contact-content .muted{color:var(--dim);line-height:1.6}
#contact-content .divider{border-top:1px solid var(--dim);opacity:.3;margin:1.5rem 0}
@media(max-width:575px){#contact-content .form-panel{padding:1.25rem}}

.ty-section{background:var(--page);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:4rem 0}
.ty-panel{background:var(--raised);border-radius:var(--curve);padding:2.5rem 1.5rem;max-width:44rem}
@media (min-width:768px){.ty-panel{padding:3rem}}
.ty-icon{width:3.5rem;height:3.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--lead);color:var(--lead);margin-bottom:1.5rem}
.ty-icon svg{width:1.75rem;height:1.75rem}
.ty-section h1{font-family:var(--ff-title);font-size:var(--ts-h1);color:var(--tone);line-height:1.2;margin-bottom:1rem}
.ty-section p{max-width:65ch;line-height:1.6;color:var(--tone);font-size:18px}
.ty-section .ty-note{color:var(--dim)}
.ty-section .btn-primary{background:var(--lead);border-color:var(--lead);color:var(--on-lead);border-radius:var(--curve);padding:.75rem 1.5rem;font-size:18px}
.ty-section .btn-primary:focus-visible{outline:3px solid var(--tone);outline-offset:3px}

.hero-d60{background:var(--page);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:56px 0 48px}
.hero-d60 h1{font-family:var(--ff-title);font-size:var(--ts-h1);color:var(--tone);line-height:1.15;margin-bottom:.75rem}
.hero-d60 h2{font-family:var(--ff-title);font-size:var(--ts-h3);color:var(--tone);font-weight:600;margin-bottom:1rem}
.hero-d60 .lead-txt{color:var(--dim);font-size:18px;line-height:1.6;max-width:36em}
.hero-d60 ul{list-style:none;padding:0;margin:1.25rem 0 1.75rem}
.hero-d60 li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.55rem;line-height:1.5;color:var(--tone)}
.hero-d60 li i{color:var(--lead);font-size:1.1rem;margin-top:.15rem}
.hero-d60 .btn-main{background:var(--lead);color:var(--on-lead);border:2px solid var(--lead);border-radius:var(--curve);padding:.7rem 1.4rem;font-weight:600;transition:transform .2s,box-shadow .2s}
.hero-d60 .btn-main:hover{color:var(--on-lead);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.hero-d60 .btn-alt{background:transparent;color:var(--lead);border:2px solid var(--lead);border-radius:var(--curve);padding:.7rem 1.4rem;font-weight:600;transition:background .2s,color .2s}
.hero-d60 .btn-alt:hover{background:var(--lead);color:var(--on-lead)}
.hero-d60 .btn:focus-visible{outline:3px solid var(--spot);outline-offset:3px}
.hero-d60 .img-wrap{border-radius:var(--curve);overflow:hidden;background:var(--raised);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.hero-d60 .img-wrap img{display:block;aspect-ratio:3/2;width:100%;height:auto;object-fit:cover}
.hero-d60 .path{display:flex;justify-content:space-between;position:relative;margin:1.25rem .5rem 0;padding-top:.25rem}
.hero-d60 .path:before{content:"";position:absolute;left:8px;right:8px;top:12px;height:3px;background:var(--spot);border-radius:3px}
.hero-d60 .stop{position:relative;text-align:center;flex:1;font-size:18px;color:var(--dim);line-height:1.3}
.hero-d60 .stop span{display:block;width:18px;height:18px;margin:0 auto .4rem;border-radius:50%;background:var(--page);border:3px solid var(--spot)}
@media(max-width:575px){.hero-d60 .stop{font-size:18px}.hero-d60 .path{flex-wrap:wrap;gap:.5rem}.hero-d60 .path:before{display:none}.hero-d60 .stop{flex:0 0 46%}}

#about{padding:52px 0;background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px}
#about h2,#about h3{font-family:var(--ff-title);color:var(--tone)}
#about h2{font-size:var(--ts-h2);margin-bottom:1rem}
#about h3{font-size:var(--ts-h3);margin:1.5rem 0 .6rem}
#about p,#about li{line-height:1.65;max-width:68ch;color:var(--tone)}
#about .ab-dim{color:var(--dim)}
#about .ab-img{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;border-radius:var(--curve);display:block}
#about .ab-img2{margin-top:1.5rem;box-shadow:0 10px 24px rgba(0,0,0,.08)}
#about figcaption{color:var(--dim);font-size:18px;margin-top:.5rem}
#about ul{padding-left:1.2rem}
#about .ab-note{background:var(--page);color:var(--tone);border-radius:var(--curve);padding:1.25rem 1.5rem;margin-top:1.5rem}
#about .ab-note p{color:var(--tone);margin:0}
#about .btn-primary{background:var(--lead);border-color:var(--lead);color:var(--on-lead);border-radius:var(--curve);padding:.7rem 1.4rem;font-size:18px}
#about .btn-primary:focus-visible{outline:3px solid var(--spot);outline-offset:3px}
#about a.ab-link{color:var(--anchor)}

#showcase{background:var(--raised);color:var(--tone);padding:52px 0;font-family:var(--font-body);font-size:18px}
#showcase h2{font-family:var(--ff-title);font-size:var(--ts-h2);color:var(--tone);margin-bottom:.5rem}
#showcase h3{font-family:var(--ff-title);font-size:var(--ts-h4);color:var(--tone);margin:.75rem 0 .4rem}
#showcase .sc-note{color:var(--dim);max-width:62ch;margin-bottom:2rem}
#showcase .sc-item{background:var(--page);border-radius:var(--curve);overflow:hidden;height:100%;display:flex;flex-direction:column}
#showcase .sc-item.sc-wide{box-shadow:0 6px 18px rgba(0,0,0,.06)}
#showcase .sc-item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
#showcase .sc-wide img{aspect-ratio:16/9}
#showcase .sc-body{padding:1.1rem 1.25rem 1.4rem}
#showcase .sc-badge{display:inline-block;background:var(--lead);color:var(--on-lead);border-radius:999px;padding:.2rem .75rem;font-size:18px;line-height:1.4}
#showcase .sc-body p{color:var(--dim);margin:0;max-width:60ch}

#what-to-expect{background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:52px 0}
#what-to-expect h2{font-family:var(--ff-title);font-size:var(--ts-h2);color:var(--tone);margin-bottom:.5rem}
#what-to-expect .intro{color:var(--dim);max-width:60ch;margin-bottom:1.75rem}
#what-to-expect .step{background:var(--page);color:var(--tone);border:1px solid rgba(0,0,0,.1);border-radius:var(--curve);padding:1.1rem 1.2rem;height:100%;transition:transform .2s ease,box-shadow .2s ease}
#what-to-expect .step:hover,#what-to-expect .step:focus-within{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
#what-to-expect .step i{font-size:1.5rem;color:var(--lead);display:inline-block;margin-bottom:.5rem}
#what-to-expect .step h3{font-family:var(--ff-title);font-size:var(--ts-h4);color:var(--tone);margin-bottom:.4rem}
#what-to-expect .step p{color:var(--dim);margin:0;font-size:18px}
#what-to-expect .btn-primary{background:var(--lead);border-color:var(--lead);color:var(--on-lead);border-radius:var(--curve)}
#what-to-expect .btn-primary:focus-visible{outline:3px solid var(--spot);outline-offset:2px}

#the-work{background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:52px 0}
#the-work h2{font-family:var(--ff-title);font-size:var(--ts-h2);color:var(--tone);margin-bottom:.75rem}
#the-work .lead-text{color:var(--dim);max-width:62ch;margin-bottom:2rem;font-size:18px}
#the-work .life-line{position:relative;padding-left:44px;margin:0;list-style:none}
#the-work .life-line::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;border-left:6px solid var(--spot);border-radius:6px}
#the-work .stage{position:relative;margin-bottom:1.25rem}
#the-work .stage:last-child{margin-bottom:0}
#the-work .stage::before{content:"";position:absolute;left:-39px;top:30px;width:22px;height:22px;border:6px solid var(--spot);background:var(--page);border-radius:50%}
#the-work .stage::after{content:"";position:absolute;left:-17px;top:40px;width:17px;border-top:3px solid var(--spot)}
#the-work .svc{display:flex;gap:1.1rem;align-items:flex-start;background:var(--page);color:var(--tone);border-radius:var(--curve);padding:1.4rem;border:1px solid rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}
#the-work .svc:hover{transform:translateX(4px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
#the-work .svc-icon{flex:0 0 52px;height:52px;border-radius:14px;background:var(--lead);color:var(--on-lead);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
#the-work h3{font-family:var(--ff-title);font-size:var(--ts-h3);color:var(--tone);margin-bottom:.4rem}
#the-work .svc p{color:var(--dim);margin:0;max-width:68ch;line-height:1.6}
#the-work .stage-tag{display:block;color:var(--dim);font-size:18px;margin-bottom:.2rem}
#the-work .note{margin-top:2rem;color:var(--tone);max-width:62ch}
#the-work .btn-primary{background:var(--lead);border-color:var(--lead);color:var(--on-lead);border-radius:var(--curve);padding:.7rem 1.5rem;font-size:18px}
#the-work .btn-primary:focus-visible,#the-work .svc:focus-within{outline:3px solid var(--spot);outline-offset:3px}
@media (max-width:575.98px){#the-work .svc{flex-direction:column}#the-work .life-line{padding-left:36px}#the-work .life-line::before{left:10px}#the-work .stage::before{left:-33px}#the-work .stage::after{left:-11px;width:11px}}

#questions{background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:52px 0}
#questions h2{font-family:var(--ff-title);font-size:var(--ts-h2);color:var(--tone);margin-bottom:.75rem}
#questions h3{font-family:var(--ff-title);font-size:var(--ts-h4);color:var(--tone);margin:2rem 0 .75rem}
#questions .faq-intro{color:var(--dim);max-width:62ch;margin-bottom:1.5rem}
#questions .accordion{--bs-accordion-bg:var(--page);--bs-accordion-color:var(--tone);--bs-accordion-btn-color:var(--tone);--bs-accordion-active-color:var(--tone);--bs-accordion-active-bg:var(--page);--bs-accordion-border-radius:var(--curve);--bs-accordion-inner-border-radius:var(--curve);--bs-accordion-btn-focus-box-shadow:0 0 0 .2rem var(--spot)}
#questions .accordion-item{border-radius:var(--curve);overflow:hidden;margin-bottom:.6rem;border:1px solid rgba(0,0,0,.08)}
#questions .accordion-button{font-family:var(--ff-title);font-weight:600;font-size:18px;color:var(--tone);background:var(--page);line-height:1.4}
#questions .accordion-button:not(.collapsed){box-shadow:inset 3px 0 0 var(--lead)}
#questions .accordion-body{color:var(--tone);line-height:1.65;max-width:72ch;font-size:18px}
#questions .accordion-body a{color:var(--anchor)}
#questions .faq-cta{margin-top:2rem;color:var(--dim)}
#questions .btn-primary{background:var(--lead);border-color:var(--lead);color:var(--on-lead);border-radius:var(--curve);padding:.7rem 1.4rem;font-size:18px}
#questions .btn-primary:focus-visible{outline:3px solid var(--spot);outline-offset:2px}

#updates{background:var(--raised);color:var(--tone);padding:52px 0;font-family:var(--font-body);font-size:18px}
#updates h2{font-family:var(--ff-title);font-size:var(--ts-h2);color:var(--tone);margin-bottom:.75rem}
#updates p{color:var(--dim);max-width:62ch;line-height:1.6;font-size:18px}
#updates .upd-box{background:var(--page);border-radius:var(--curve);padding:1.75rem;border:1px solid rgba(0,0,0,.08)}
#updates label{font-family:var(--ff-title);font-weight:600;color:var(--tone);margin-bottom:.4rem;display:block}
#updates .form-control{font-size:18px;border-radius:var(--curve);padding:.7rem 1rem;color:var(--tone);background:var(--page)}
#updates .form-control:focus{border-color:var(--spot);box-shadow:0 0 0 .2rem rgba(0,0,0,.08);outline:2px solid var(--spot);outline-offset:1px}
#updates .btn-upd{background:var(--lead);color:var(--on-lead);border:0;border-radius:var(--curve);padding:.75rem 1.5rem;font-family:var(--ff-title);font-weight:600;font-size:18px;transition:opacity .2s}
#updates .btn-upd:hover{opacity:.9;color:var(--on-lead)}
#updates .btn-upd:focus-visible{outline:3px solid var(--spot);outline-offset:2px}
#updates .note{font-size:18px;color:var(--dim);margin:.75rem 0 0}
#updates .note a{color:var(--anchor)}

#contact{background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:52px 0}
#contact h2,#contact h3{font-family:var(--ff-title);color:var(--tone)}
#contact h2{font-size:var(--ts-h2);margin-bottom:.75rem}
#contact h3{font-size:var(--ts-h4);margin-bottom:.5rem}
#contact .lead-text{color:var(--dim);max-width:60ch}
#contact .prep li{margin-bottom:.5rem;color:var(--tone)}
#contact .prep li::marker{color:var(--spot)}
#contact .form-box{background:var(--page);color:var(--tone);border-radius:var(--curve);padding:1.75rem;box-shadow:0 6px 22px rgba(0,0,0,.06)}
#contact .form-label{font-weight:600;color:var(--tone)}
#contact .form-control{font-size:18px;border-radius:calc(var(--curve) / 2);background:var(--page);color:var(--tone)}
#contact .form-control:focus{border-color:var(--spot);box-shadow:0 0 0 .2rem rgba(0,0,0,.08);outline:2px solid var(--spot);outline-offset:1px}
#contact .btn-send{background:var(--lead);color:var(--on-lead);border:0;border-radius:var(--curve);padding:.75rem 1.75rem;font-weight:600;font-size:18px}
#contact .btn-send:hover,#contact .btn-send:focus-visible{background:var(--lead);color:var(--on-lead);opacity:.9;outline:3px solid var(--spot);outline-offset:2px}
#contact a.mail{color:var(--anchor);font-weight:600}
#contact .note{color:var(--dim)}
@media(max-width:575px){#contact .form-box{padding:1.25rem}}

#important{background:var(--raised);color:var(--tone);font-family:var(--font-body);font-size:18px;padding:52px 0}
#important h2{font-family:var(--ff-title);font-size:var(--ts-h2);color:var(--tone);margin-bottom:1rem}
#important .disc-box{background:var(--page);border-radius:var(--curve);padding:28px;border-left:4px solid var(--spot);max-width:820px}
#important .disc-icon{font-size:2rem;color:var(--lead);line-height:1}
#important p{line-height:1.65;max-width:68ch;color:var(--tone);margin-bottom:.9rem}
#important .disc-note{color:var(--dim)}
#important a{color:var(--anchor)}
#important a:focus-visible{outline:2px solid var(--spot);outline-offset:3px}
@media (max-width:576px){#important .disc-box{padding:20px}}

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lead);
  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 intro-88 {
  from { opacity: 0; }
  to { opacity: 1; transform: none; }
}

.masthead-27 > * {
  animation: intro-88 550ms 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;
  }
}