@font-face { font-family: OverusedGrotesk; src: url('../fonts/OverusedGrotesk-Roman-BF64eeac17dee17.otf'); } 
 @font-face { font-family: OverusedGrotesk Light; font-weight: bold; src: url('../fonts/OverusedGrotesk-Light-BF64eeac17cade6.otf');}
 @font-face { font-family: OverusedGrotesk Bold; font-weight: 200; src: url('../fonts/OverusedGrotesk-Bold-BF64eeac1756b57.otf');}
 @font-face { font-family: OverusedGrotesk Medium; font-weight: 600; src: url('../fonts/OverusedGrotesk-Medium-BF64eeac181a996.otf');}


:root {
  --white-100: hsl(206, 5%, 100%);
  --black-100: hsl(210, 21%, 12%);
  --black-200: hsl(210, 21%, 9%);
  --black-300: hsl(210, 21%, 6%);
  --black-400: hsl(210, 21%, 3%);
  --black-500: hsl(210, 21%, 1%);
  --orange: rgb(255, 88, 5);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
     0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --background_t:rgb(245, 245, 246);
  --newsletter_area:#f0f0f0;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  letter-spacing: -0.9px;
  font-family: OverusedGrotesk Medium;
}
a {
  color: var(--black-100);
  text-decoration: none;
}
ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
  margin-left: 10px;
}
.border {
  border: 1px solid #f5f5f6 !important;
}
html, body {
  font-family: "OverusedGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0;
  padding: 0;
  background-color: var(--background_t);
  color: var(--black-100);
}
span.strong{
  font-family: OverusedGrotesk Bold;
}
button{
  color:var(--white-100);
  padding: 5px 20px;
  cursor: pointer;
  width: fit-content;
}
button.black{
  background-color: var(--black-100);
}
button.orange{
  background-color: var(--orange);
}
video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home_mobile_bg {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.bgt{
  background-color: var(--background_t);
}

.home {
    height: 100vh;
    position: relative;
}

.hero_background_line {
  background: url('../images/hero_lines_bg.svg') left bottom / cover no-repeat;
  width: 100%;
  height: 250px;
  position: absolute;
  bottom: 0;
}
.home-content, .cta-content {
  position: relative;
  height: fit-content;
  top: 60%;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.h_shadow {
  background: radial-gradient(100% 150% at 93.7% 50%, rgba(0, 0, 0, 0) 30.3383%, rgba(0, 0, 0, 0.5) 62.1489%, rgba(0, 0, 0, 0.8) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.hc1 {
  width: 50%;
}
.hc2 {
  color: white;
}
.hc2_t{
  font-size: 20px;
}
.mt {
  font-size: 64px;
  line-height: 1;
  color: white;
}
.highlighted_or {
  color: rgb(255, 88, 5);
}
.mst {
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 32px;
  color: white;
  margin-top: 30px;
}

@media only screen and (max-width: 768px) {
  .home_video {
    display: none;
  }
  .home_mobile_bg {
    display: block;
  }
  .h_shadow {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
  .home {
    display: flex;
    align-items: center;
  }
  .home-content {
    position: absolute;
    top: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 40px;
    padding: 0 20px;
    z-index: 1;
    bottom: 10%;
  }
  .cta-content{
    top: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 40px;
    padding: 0 20px;
    z-index: 1;
    bottom: 10%;
  }
  .hc1 {
    width: 100%;
  }
  .hc2 {
    width: 100%;
  }
  .mt {
    font-size: 42px;
  }
  .mst {
    font-size: 17px;
    line-height: 26px;
    margin-top: 20px;
  }
  .hc2 button.orange {
    width: 100%;
  }
}

.pretitle{
  color: var(--black-100);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  letter-spacing: 1.1px;
}
.pretitle .pretitle_icon{
  background: url('../images/title_icon.svg');
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.title{
  color: var(--black-100);
  font-size: 60px;
  letter-spacing: -1.8px;
  font-family: OverusedGrotesk Medium;
  padding: 0 0 20px 0;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .title{
    font-size: 34px;
    padding: 0 0 20px 0;
  }
}
.introduction{
  width: 70%;
  padding: 80px 0 40px;
}



/* Homepage services cards */

.card{
  --mdb-card-bg:none;
  border:none;
  border-radius:none;
  box-shadow:none;
}
.card-img-top {
  border-top-left-radius: unset;
  border-top-right-radius: unset;
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  object-fit: cover;
}
@media only screen and (max-width: 768px) {
  .card-img-top {
    max-width: 100%;
    height: 300px;
  }
}
.hp_s_ {
  min-height: 250px;
  padding: 20px 0;
}
.reverse{
  align-content: end;
}
.card-title {
  font-size: 24px;
  font-family: OverusedGrotesk Medium;
  letter-spacing: -0.5px;
}
.services_cards {
  /*overflow: hidden;*/
}
.hps_viewport {
  width: 100%;
  overflow: hidden;
}
.hps_container {
  /* Width is intentionally not fixed to 2500px: it's derived from the
     actual card width + gaps below, and the horizontal-scroll script
     reads the real rendered width (scrollWidth) at runtime, so this
     just needs to lay the cards out in a single row. */
  width: max-content;
  flex-wrap: nowrap;
  padding: 100px 0 200px 0;
  will-change: transform;
}
.hps {
  width: 350px;
  flex: 0 0 350px;
  margin: 0 90px 0 0;
}
.hps:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 768px) {
  .hps {
    width: 300px;
    flex: 0 0 300px;
  }
}
/* End of homepage services cards */



div.cta{
  padding: 0;
}
.cta_check_icon {
  background: white;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0px 20px;
}
.tax-insights, .about-us, .faq{
  background: var(--white-100);
}
.ti_title{
  font-size: 48px;
}
/* Sticky text column: stays pinned near the top (below the fixed
   header) while its sibling column of images scrolls past. It
   automatically un-sticks once the row ends, i.e. right before
   .hp_ti_bg, because that's outside this element's containing block. */
.ti_sticky_col {
  position: sticky;
  top: calc(4rem + 40px);
  align-self: flex-start;
}
@media only screen and (max-width: 768px) {
  .ti_title{
    font-size: 30px;
  }
  .ti_sticky_col {
    position:relative;
    top: unset;
  }
}
.hp_ti{
  min-height: 550px;
  object-fit: cover;
}
@media only screen and (max-width: 768px) {
  /* Mobile: main article image on top, the other two side by side below */
  .hp_ti_main {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
  .hp_ti_row {
    display: flex;
    gap: 12px;
  }
  .hp_ti_row .hp_ti {
    min-height: auto;
    aspect-ratio: 1 / 1;
    width: 50%;
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0 !important;
  }
  /* Second tax-insights article: images come first in the markup (so
     desktop shows image-left/text-right), but on mobile we want the
     text to read first and the images to follow. */
  .tax-insights .ti_img_col_mobile_last {
    order: 2;
  }
  .tax-insights .row.my-5 .ti_sticky_col {
    order: 1;
  }
}
.hp_ti_bg{
  height: 400px;
  width: 100%;
  background: url(../images/hp_ti_bg.jpg) 100% / cover;
}

.accordion-button:not(.collapsed) {
  color: var(--black-100);
  font-weight: bold;
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--mdb-accordion-btn-icon);
}
.form-outline .form-control ~ .form-label {
  font-size: 14px;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
  border-color: #ff4444; /* Replace with your desired color */
  box-shadow: none !important;      /* Removes default shadow if preferred */
}
.form-outline .form-control:focus ~ .form-label {
  /* Masks the notch border segment behind the label so it doesn't look
     "struck through". Defaults to white since most forms sit on white
     sections; the newsletter form in the footer overrides this below
     because it sits on the gray --background_t card. */
  background: var(--white-100);
  z-index: 1;
  color: #ff4444;
}
.subscribe_newsletter .form-outline .form-control:focus ~ .form-label {
  background: var(--newsletter_area);
  padding: 0;
  margin:0;
}
.newsletter_check{
  accent-color: #ff5805;
}

/* Custom-styled native <select>, matching the MDB .form-outline inputs
   next to it (border, radius, focus color) since the plain MDB CDN
   bundle used here doesn't include the MDB Select UI component. */
.select_field {
  position: relative;
}
.form-select-custom {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0.35rem 2.5rem 0.35rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--black-100);
  background-color: var(--white-100);
  border: 1px solid #bdbdbd;
  border-radius: 0.375rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.form-select-custom:focus {
  outline: none;
  border-color: #ff4444;
  box-shadow: none;
}
.form-select-custom:invalid,
.form-select-custom option[disabled] {
  color: #757575;
}
.select_field_icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 13px;
  color: #757575;
  pointer-events: none;
  transition: color 0.2s ease;
}
.form-select-custom:focus ~ .select_field_icon {
  color: #ff4444;
}

/* Footer: Subscribe Newsletter */
.subscribe_newsletter {
  background: var(--newsletter_area);
  padding: 50px 60px;
}
.subscribe_newsletter .newsletter_text {
  max-width: 460px;
}
.subscribe_newsletter .newsletter_text h3 {
  font-family: OverusedGrotesk Medium;
  font-size: 32px;
  letter-spacing: -0.5px;
  color: var(--black-100);
  margin-bottom: 14px;
}
.subscribe_newsletter .newsletter_text p {
  color: hsl(210, 9%, 45%);
  margin: 0;
}
.subscribe_newsletter .newsletter_form {
  flex: 0 0 auto;
}
.subscribe_newsletter .newsletter_form_row {
  gap: 12px;
}
.subscribe_newsletter .newsletter_input {
  min-width: 320px;
}
.subscribe_newsletter .newsletter_input .form-control {
  background: var(--white-100);
}
.subscribe_newsletter button.orange {
  white-space: nowrap;
}
.subscribe_newsletter .newsletter_checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: hsl(210, 9%, 45%);
}
.subscribe_newsletter .newsletter_checkbox .newsletter_check {
  margin: 0;
}

/* Footer: brand + social row */
.footer_brand_row {
  padding: 40px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.footer_logo svg {
  display: block;
}
.footer_social {
  display: flex;
  gap: 14px;
}
.footer_social_icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-100);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  color: var(--black-100);
  font-size: 18px;
  box-shadow: var(--shadow-small);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer_social_icon:hover {
  background: var(--black-100);
  color: var(--white-100);
}

@media only screen and (max-width: 768px) {
  .subscribe_newsletter {
    padding: 40px 24px;
  }
  .subscribe_newsletter .subscribe_newsletter_inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .subscribe_newsletter .newsletter_text {
    max-width: 100%;
  }
  .subscribe_newsletter .newsletter_form {
    width: 100%;
  }
  .subscribe_newsletter .newsletter_form_row {
    flex-wrap: wrap;
  }
  .subscribe_newsletter .newsletter_input {
    min-width: 0;
    width: 100%;
  }
  .footer_brand_row_inner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
  }
}

/* Footer: link columns + contact block */
.footer_links {
  padding: 50px 0 40px;
}
.footer_links_grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.footer_links_col h5 {
  font-family: OverusedGrotesk Medium;
  font-size: 18px;
  color: var(--black-100);
  margin-bottom: 20px;
}
.footer_links_col ul li {
  margin-bottom: 14px;
}
.footer_links_col ul li a {
  color: hsl(210, 9%, 40%);
  font-size: 15px;
  line-height: 1.4;
}
.footer_links_col ul li a:hover {
  color: var(--orange);
}
.footer_links_col:not(.footer_contact_col) {
  flex: 0 1 auto;
  max-width: 220px;
}
.footer_contact_col {
  flex: 0 0 auto;
  max-width: 340px;
}
.footer_contact_list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.footer_contact_list li:last-child {
  margin-bottom: 0;
}
.footer_contact_list i {
  flex-shrink: 0;
  width: 20px;
  margin-top: 3px;
  font-size: 17px;
  color: var(--black-100);
  text-align: center;
}
.footer_contact_list span {
  color: hsl(210, 9%, 40%);
  font-size: 15px;
  line-height: 1.5;
}
.footer_contact_list strong {
  color: var(--black-100);
  font-weight: 600;
}
.footer_contact_note {
  color: hsl(210, 9%, 55%);
  font-size: 13px;
}

/* Footer: bottom bar */
.footer_bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 24px 0;
  font-size: 14px;
  color: hsl(210, 9%, 45%);
}
.footer_bottom_links {
  display: flex;
  gap: 24px;
}
.footer_bottom_links a {
  color: hsl(210, 9%, 45%);
}
.footer_bottom_links a:hover {
  color: var(--orange);
}

@media only screen and (max-width: 991px) and (min-width: 769px) {
  .home-content{
    top: 45%;
  }
  .footer_links_grid {
    flex-wrap: wrap;
  }
  .footer_links_col:not(.footer_contact_col),
  .footer_contact_col {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

@media only screen and (max-width: 768px) {
  .footer_links {
    padding: 40px 0 20px;
  }
  .footer_links_grid {
    flex-direction: column;
    gap: 36px;
  }
  .footer_links_col:not(.footer_contact_col),
  .footer_contact_col {
    max-width: 100%;
  }
  .footer_bottom {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
}

/* ==========================================================================
   Internal page header template
   Used at the top of every inner page (right after header.php + menu.php):
   light gray band, breadcrumbs + headline + subtitle on the left, photo on the
   right (diagonal edge on desktop). On mobile the photo drops below the text.
   ========================================================================== */
.page_header {
  background: var(--background_t);
  min-height: 560px;
  padding-top: calc(4rem + 24px);
  position: relative;
  display: flex;
  overflow: hidden;
}
.page_header_container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.page_header_text {
  max-width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}
/* Хлебные крошки. Заменили ссылку-назад со стрелкой: стрелка обещала
   один шаг назад, а цепочка из трёх звеньев обещает другое.
   Разделитель рисуется через ::before у всех, кроме первого, — так его
   не приходится ставить в разметке, и он не попадает в текст при копировании
   и в озвучку скринридером. */
.page_header_crumbs {
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.page_header_crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page_header_crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--black-100);
}
.page_header_crumbs li + li::before {
  content: "/";
  color: var(--black-100);
  opacity: 0.35;
  font-weight: 400;
}
.page_header_crumbs a {
  color: var(--black-100);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.page_header_crumbs a:hover,
.page_header_crumbs a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
/* Текущая страница и разделы без своей страницы — не ссылки.
   Приглушены, чтобы взгляд цеплялся за то, куда можно уйти. */
.page_header_crumbs span {
  opacity: 0.55;
}
.page_header_title {
  font-family: OverusedGrotesk Medium;
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--black-100);
  margin-bottom: 20px;
}
.page_header_subtitle {
  font-size: 15px;
  color: hsl(210, 9%, 40%);
  margin: 0;
  padding-right: 50px;
}
.page_header_media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  /* Starts fully collapsed to the right edge so there's no flash of the
     open image before main.js animates it in (see initPageHeaderIntro).
     If JS ever fails to run, main.js's no-gsap fallback opens this back
     up via inline style so the image still degrades gracefully. */
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.page_header_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 992px) {
  .page_header {
    padding-top: 4rem;
    min-height: auto;
    flex-direction: column;
  }
  .page_header_container {
    width: 100%;
  }
  .page_header_text {
    max-width: 100%;
    height: auto;
    padding: 32px 24px;
    justify-content: flex-start;
  }
  .page_header_crumbs {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .page_header_title {
    font-size: 34px;
    letter-spacing: -1px;
  }
  .page_header_subtitle {
    font-size: 16px;
  }
  .page_header_media {
    position: static;
    width: 100%;
    clip-path: none;
    aspect-ratio: 4 / 3;
  }
}


/* About us */
.whatwedo, .stats, .commitment{
  background: var(--white-100);
}
.about_us_s2{
  height: 500px;
  width: 100%;
  object-fit: cover;
}
.stats_title{
  color: var(--orange);
  font-size: 50px;
  letter-spacing: -1.8px;
  font-family: OverusedGrotesk Medium;
  line-height: 1;
}
._stat_ span {
  font-size: 14px;
}

/* Services, press, contact */
.services_list, .press_list, .contact_information{
  background: var(--white-100);
}
/* Картинка карточки в сетках услуг и пресс-релизов.
   Селектор с .pic не для красоты: ниже стоит правило .pic img { height: auto },
   и без указания на обёртку оно перебивает это по весу. Так уже случилось —
   высота здесь была задана, но не действовала. Услуги при этом выглядели
   ровно, потому что все их картинки 3:2; стоило в пресс-релизах появиться
   кадрам 16:9 и 1.47, и сетка поехала.

   aspect-ratio вместо фиксированной высоты — чтобы соотношение держалось
   на любой ширине колонки: в три колонки, в две и в одну на телефоне.
   object-fit: cover обрезает любую пропорцию под рамку, поэтому редактор
   может загружать что угодно. */
.pic img.list_grid,
img.list_grid {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.card{
  --mdb-card-border-radius: 0;
}


/* Логотип отдаётся отдельным файлом assets/images/nationwidelogo.svg,
   а не инлайн-разметкой: так он рендерится независимо от остальной
   страницы и не может ни на что повлиять. */
.brand_logo {
  display: block;
  width: 108px;
  height: 35px;
  max-width: 100%;
}
.footer_logo .brand_logo,
.brand .brand_logo {
  flex: 0 0 auto;
}

/* <picture> по умолчанию inline — из-за этого под картинкой появляется
   зазор от line-height, а внутри .bg-image с абсолютной .mask ломается
   выравнивание. Блочное поведение убирает и то, и другое. */
.pic {
  display: block;
}
.pic img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Client Portal (SmartVault) — коллаж из трёх картинок

   Оригиналы имеют разные пропорции: верхняя 4:3, нижние 16:9. Без фиксированной
   высоты верхняя картинка занимала непропорционально много места и уводила
   правую колонку вниз. Высота задаётся здесь, а не в разметке, потому что
   позже эти картинки будет загружать редактор через CMS — object-fit: cover
   аккуратно обрежет любую пропорцию под рамку.
--------------------------------------------------------------------------- */
.smart_valut .col-12 > img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

/* Нижняя пара стоит бок о бок, поэтому у них должна быть одинаковая высота.
   Сейчас обе картинки 16:9 и совпадают сами, но как только их начнёт менять
   редактор, любая другая пропорция сломала бы ряд. */
.smart_valut .col-6 > img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
}

@media only screen and (max-width: 767px) {
  .smart_valut .col-12 > img { height: 200px; }
  .smart_valut .col-6 > img  { height: 120px; }
}

/* ---------------------------------------------------------------------------
   Стартовые состояния анимаций

   Класс js-fx ставится инлайновым скриптом в <head>, то есть до первой
   отрисовки. Это единственный способ спрятать элемент раньше, чем браузер
   успеет его показать: main.js подключён в конце <body> и выполняется уже
   после отрисовки, поэтому gsap.from() давал видимый рывок — заголовок
   мелькал, исчезал и проявлялся заново.

   Правило намеренно завязано на класс, а не написано напрямую: если
   JavaScript отключён или файл не загрузился, класса нет и текст виден.
--------------------------------------------------------------------------- */
.js-fx .page_header_text {
  opacity: 0;
}

/* Уведомления форм и ловушка для ботов -------------------------------------- */
.form_notice {
  margin: 0 0 1rem;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.form_notice_success {
  background: #eaf7ee;
  border-left: 3px solid #2e7d32;
  color: #1b5e20;
}
.form_notice_error {
  background: #fdecea;
  border-left: 3px solid #c62828;
  color: #8e1b16;
}

/* Ловушка должна быть невидима для людей, но доступна автозаполнению бота.
   display:none часть ботов распознаёт и пропускает, поэтому уводим за экран. */
.form_trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gr_sls {
  padding: 0 50px;
}