/*
   Contacts page — trust-first Russian B2B depth treatment.
   Scope is intentionally limited to .contact-depth-page so shared header,
   footer and form behavior remain intact across the rest of the site.
*/
.contact-depth-page {
  --contact-ink: #0b1a25;
  --contact-ink-soft: #17323b;
  --contact-copper: #c9682d;
  --contact-copper-dark: #a74c1e;
  --contact-teal: #2f756b;
  --contact-paper: #f7f3ed;
  --contact-white: #fffdf9;
  --contact-line: #ded7cd;
  --contact-muted: #62717a;
  --contact-shadow: 0 18px 42px rgba(11, 26, 37, .10);
  --contact-shadow-deep: 0 28px 66px rgba(11, 26, 37, .15);
  background: var(--contact-paper);
  color: var(--contact-ink);
}

.contact-depth-page .breadcrumb-wrap {
  background: rgba(255, 253, 249, .92);
  border-bottom: 1px solid rgba(222, 215, 205, .86);
}

/* The hero frames the page as a response channel, not as a generic address
   block. The large outlined word gives depth without adding another asset. */
.contact-depth-page .contact-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 390px;
  padding: clamp(70px, 8vw, 112px) 0 clamp(64px, 7vw, 90px) !important;
  background:
    radial-gradient(circle at 87% 16%, rgba(47, 117, 107, .30), transparent 29%),
    radial-gradient(circle at 18% 118%, rgba(201, 104, 45, .20), transparent 37%),
    linear-gradient(122deg, var(--contact-ink) 0%, var(--contact-ink-soft) 64%, #214a4f 100%) !important;
  border-bottom: 3px solid var(--contact-copper);
}

.contact-depth-page .contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .56) 67%, transparent 100%);
}

.contact-depth-page .contact-hero::after {
  content: 'RFQ';
  position: absolute;
  right: 2vw;
  bottom: -8vw;
  z-index: -1;
  color: transparent;
  font-size: clamp(150px, 26vw, 360px);
  font-weight: 900;
  letter-spacing: -.12em;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .12);
  pointer-events: none;
}

.contact-depth-page .contact-hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.contact-depth-page .contact-hero h1 {
  max-width: 900px;
  margin-bottom: 17px;
  color: #fff !important;
  font-size: clamp(2.25rem, 5vw, 4.35rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.contact-depth-page .contact-hero .hero-sub {
  max-width: 730px;
  margin-bottom: 0;
  color: #c7d5d7 !important;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.72;
}

.contact-depth-page .contact-main-section {
  position: relative;
  overflow: hidden;
  padding: clamp(66px, 7vw, 98px) 0 clamp(72px, 8vw, 112px) !important;
  background:
    radial-gradient(circle at 4% 14%, rgba(47, 117, 107, .08), transparent 27%),
    linear-gradient(180deg, var(--contact-white) 0%, var(--contact-paper) 100%);
  border-bottom: 1px solid var(--contact-line);
}

.contact-depth-page .contact-main-section > .container { position: relative; z-index: 1; }
.contact-depth-page .contact-main-section .row { align-items: start; }

.contact-depth-page .contact-channels {
  position: relative;
  padding-right: clamp(18px, 3.5vw, 52px);
}

.contact-depth-page .contact-channels::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 104, 45, .48), rgba(222, 215, 205, .15));
}

.contact-depth-page .contact-request { padding-left: clamp(0px, 1.5vw, 24px); }

.contact-depth-page .label-tag {
  margin-bottom: 14px;
  border: 1px solid rgba(201, 104, 45, .20);
  background: #fff0e6;
  color: var(--contact-copper-dark);
  letter-spacing: .11em;
}

.contact-depth-page .section-title {
  color: var(--contact-ink);
  font-size: clamp(1.8rem, 3.1vw, 2.65rem);
  line-height: 1.13;
  letter-spacing: -.035em;
}

.contact-depth-page .contact-intro {
  max-width: 640px;
  margin-bottom: 22px;
  color: var(--contact-muted);
  font-size: 15px;
  line-height: 1.72;
}

/* Contact methods read as an evidence rail. The vertical copper rule creates
   a deliberate sequence while the platform colors remain recognizable. */
.contact-depth-page .contact-method {
  position: relative;
  gap: 15px;
  padding: 17px 0 17px 18px;
  border-bottom: 1px solid rgba(222, 215, 205, .84);
}

.contact-depth-page .contact-method::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 3px;
  background: var(--contact-copper);
  opacity: .78;
}

.contact-depth-page .contact-method:last-of-type { border-bottom: 0; }

.contact-depth-page .contact-method .cm-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(11, 26, 37, .10);
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(11, 26, 37, .08), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.contact-depth-page .contact-method > div:last-child { min-width: 0; padding-top: 1px; }
.contact-depth-page .contact-method .cm-label {
  color: #69757d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
}

.contact-depth-page .contact-method .cm-value {
  color: var(--contact-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.contact-depth-page .contact-method .cm-value a { color: var(--contact-ink); }
.contact-depth-page .contact-method .cm-value a:hover { color: var(--contact-copper-dark); }
.contact-depth-page .contact-method div[style*='font-size'] { color: var(--contact-muted) !important; line-height: 1.5; }

.contact-depth-page .contact-region-card {
  position: relative;
  overflow: hidden;
  margin-top: 27px !important;
  padding: 23px 23px 21px;
  border: 1px solid #dfd4c9;
  border-left: 3px solid var(--contact-teal);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(236, 244, 240, .83));
  box-shadow: 0 14px 28px rgba(11, 26, 37, .07), inset 0 1px 0 #fff;
}

.contact-depth-page .contact-region-card::after {
  content: 'RU / СНГ';
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: rgba(47, 117, 107, .11);
  font-size: 2.7rem;
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}

.contact-depth-page .contact-region-card h4 {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
  color: var(--contact-ink);
  font-size: 1rem !important;
  letter-spacing: -.01em;
}

.contact-depth-page .region-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.contact-depth-page .region-tag {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid rgba(47, 117, 107, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #35665e;
  font-size: 12px;
  font-weight: 600;
}

.contact-depth-page .contact-region-card p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0;
  color: var(--contact-muted);
  font-size: 13px !important;
  line-height: 1.6;
}

/* The RFQ surface is the main action panel. It uses a single strong lift and
   a narrow copper edge so the page feels tactile without becoming card-heavy. */
.contact-depth-page .contact-form-surface {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 38px) clamp(20px, 2.5vw, 30px);
  border: 1px solid #d9d0c5;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--contact-shadow-deep), inset 0 1px 0 #fff;
}

.contact-depth-page .contact-form-surface::before {
  content: '';
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 4px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--contact-copper), #df9560 58%, var(--contact-teal));
}

.contact-depth-page .contact-form-surface .row { --bs-gutter-y: 0; }
.contact-depth-page .form-jbss .form-group { margin-bottom: 17px; }

.contact-depth-page .form-jbss label {
  margin-bottom: 7px;
  color: #34434c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .015em;
}

.contact-depth-page .form-jbss input,
.contact-depth-page .form-jbss select,
.contact-depth-page .form-jbss textarea {
  min-height: 45px;
  padding: 11px 13px;
  border: 1px solid #d7d1ca;
  border-radius: 8px;
  background: #fffdfa;
  color: var(--contact-ink);
  box-shadow: inset 0 1px 2px rgba(11, 26, 37, .035);
}

.contact-depth-page .form-jbss textarea { min-height: 128px; }
.contact-depth-page .form-jbss input:hover,
.contact-depth-page .form-jbss select:hover,
.contact-depth-page .form-jbss textarea:hover { border-color: #bdb2a7; }

.contact-depth-page .form-jbss input:focus,
.contact-depth-page .form-jbss select:focus,
.contact-depth-page .form-jbss textarea:focus {
  border-color: var(--contact-copper);
  box-shadow: 0 0 0 3px rgba(201, 104, 45, .16), inset 0 1px 2px rgba(11, 26, 37, .035);
}

.contact-depth-page .contact-submit {
  min-height: 52px;
  border: 1px solid var(--contact-copper) !important;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--contact-copper), #b55a26) !important;
  box-shadow: 0 12px 24px rgba(201, 104, 45, .25);
  letter-spacing: .005em;
}

.contact-depth-page .contact-submit:hover {
  background: linear-gradient(135deg, #d8793d, var(--contact-copper-dark)) !important;
  box-shadow: 0 16px 30px rgba(201, 104, 45, .31);
  transform: translateY(-2px);
}

.contact-depth-page .contact-submit:active { transform: translateY(0) scale(.99); }
.contact-depth-page .contact-submit .cta-button-icon { width: 18px; height: 18px; }

.contact-depth-page .form-note {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
  color: #758087 !important;
  font-size: 12px !important;
  line-height: 1.58;
}

.contact-depth-page .form-note a { color: var(--contact-copper-dark); text-decoration: underline; text-underline-offset: 2px; }

.contact-depth-page .contact-social {
  margin-top: 28px !important;
  padding: 21px 23px 22px;
  border-top: 1px solid var(--contact-line);
  border-bottom: 1px solid var(--contact-line);
}

.contact-depth-page .contact-social h4 {
  margin-bottom: 14px;
  color: var(--contact-ink);
  font-size: 1rem !important;
}

.contact-depth-page .contact-social .d-flex { gap: 9px !important; }
.contact-depth-page .contact-social .btn-secondary-jbss {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #cfc6ba;
  border-radius: 8px;
  background: rgba(255, 255, 255, .76);
  color: #42525b;
  font-size: 13px;
}

.contact-depth-page .contact-social .btn-secondary-jbss:hover {
  border-color: var(--contact-copper);
  background: #fff4ec;
  color: var(--contact-copper-dark);
  transform: translateY(-1px);
}

.contact-depth-page .social-brand-icon { width: 16px; height: 16px; flex: 0 0 16px; }

.contact-depth-page a:focus-visible,
.contact-depth-page button:focus-visible,
.contact-depth-page input:focus-visible,
.contact-depth-page select:focus-visible,
.contact-depth-page textarea:focus-visible {
  outline: 3px solid rgba(47, 117, 107, .45);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .contact-depth-page .contact-channels { padding-right: 0; }
  .contact-depth-page .contact-channels::after { display: none; }
  .contact-depth-page .contact-request { padding-left: 0; }
  .contact-depth-page .contact-form-surface { box-shadow: var(--contact-shadow); }
}

@media (max-width: 767.98px) {
  .contact-depth-page .contact-hero {
    min-height: 330px;
    padding: 58px 0 56px !important;
  }
  .contact-depth-page .contact-hero h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.08;
  }
  .contact-depth-page .contact-hero .hero-sub { font-size: 15px; line-height: 1.64; }
  .contact-depth-page .contact-hero::after {
    right: -4vw;
    bottom: -12vw;
    font-size: clamp(130px, 38vw, 220px);
  }
  .contact-depth-page .contact-main-section { padding: 50px 0 58px !important; }
  .contact-depth-page .contact-method { padding-left: 15px; }
  .contact-depth-page .contact-form-surface { margin-top: 18px; padding: 24px 18px 20px; }
  .contact-depth-page .contact-form-surface::before { right: 18px; left: 18px; }
  .contact-depth-page .contact-social { padding: 19px 0 0; border-bottom: 0; }
  .contact-depth-page .contact-social .btn-secondary-jbss { flex: 1 1 calc(50% - 9px); justify-content: center; }
}

@media (max-width: 479.98px) {
  .contact-depth-page .contact-region-card { padding: 20px 17px 19px; }
  .contact-depth-page .contact-region-card::after { font-size: 2.2rem; }
  .contact-depth-page .contact-social .btn-secondary-jbss { flex-basis: 100%; }
}

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