/* ==========================================================================
   Traguardo Group — основен стил
   Черно-бяла, монохромна палитра в стила на Kirkland & Ellis —
   бял канвас, черен текст, тъмни "reversed" ленти (hero, footer, CTA)
   ========================================================================== */

:root {
  --ink-900: #121212;
  --ink-800: #1c1c1c;
  --ink-700: #2c2c2c;
  --ink-600: #454545;
  --accent: #121212;
  --accent-soft: #4a4a4a;
  --gray-900: #101010;
  --gray-700: #3f3f3f;
  --gray-500: #6b6b6b;
  --gray-300: #c9ccce;
  --gray-200: #e2e2e0;
  --gray-100: #f5f4f2;
  --white: #ffffff;

  --font-heading: "Source Serif 4", "Georgia", serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --max-width: 1140px;
  --radius: 0px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid rgba(18, 18, 18, 0.3);
}

a:hover {
  border-bottom-color: var(--ink-900);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink-900);
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 600;
}

h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.9rem; letter-spacing: -0.005em; }
h3 { font-size: 1.25rem; font-weight: 600; }

p {
  margin: 0 0 1.1em;
  color: var(--gray-700);
}

/* Dark "reversed" surfaces (hero, footer, cta-band) carry light text
   regardless of the light page canvas everywhere else */
.hero, .site-footer, .cta-band, .section--photo,
.hero h1, .hero h2, .hero h3, .hero h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.section--photo h1, .section--photo h2, .section--photo h3, .section--photo h4 {
  color: var(--white);
}

.hero p, .site-footer p, .cta-band p, .section--photo > .container > .section-head p {
  color: var(--gray-200);
}

.hero a, .site-footer a, .cta-band a {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.hero a:hover, .site-footer a:hover, .cta-band a:hover {
  border-bottom-color: var(--white);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-soft);
  margin-bottom: 1.1em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
}

.hero .eyebrow {
  color: var(--gray-300);
  border-bottom: none;
  padding-bottom: 0;
}

.section {
  padding: 110px 0;
}

.section--alt {
  background: var(--gray-100);
}

.section--navy {
  background: var(--ink-900);
  color: var(--gray-200);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section--navy p {
  color: var(--gray-300);
}

.section--photo {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-900);
}

.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.62) 0%, rgba(18, 18, 18, 0.70) 100%),
    url("../images/section-consulting.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.section--photo > .container {
  position: relative;
  z-index: 1;
}

.section--photo .eyebrow {
  color: var(--gray-200);
  border-bottom: none;
  padding-bottom: 0;
}

.section-head {
  max-width: 680px;
  margin: 0 0 64px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Header / Navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-900);
  border-bottom: none;
}

.brand:hover {
  color: var(--ink-900);
}

.brand-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text .brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-900);
}

.brand-text .brand-suffix {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  text-transform: uppercase;
}

.brand-text .brand-tagline {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-style: italic;
  color: #bf9850;
  margin-top: 3px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .brand-text .brand-tagline {
    font-size: 0.62rem;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 6px 2px;
  border: none;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink-900);
  border-bottom-color: var(--ink-900);
}

.nav-cta {
  background: var(--ink-900);
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: var(--radius);
  border-bottom: none !important;
  font-weight: 600;
}

.nav-cta:hover {
  background: var(--ink-700);
  color: var(--white) !important;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 2px;
  margin-left: 4px;
}

.lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
  line-height: 1;
}

.lang-btn:hover {
  color: var(--ink-900);
}

.lang-btn.active {
  background: var(--ink-900);
  color: var(--white);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

/* ---------- Nav dropdown (Услуги) ---------- */

.has-dropdown {
  position: relative;
}

.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.has-dropdown > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
  margin-top: -2px;
}

.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after {
  transform: rotate(225deg) translateY(2px);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 300px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  /* extra top padding (instead of a top margin) keeps the whole gap above
     the menu items part of this element's own hoverable box, so moving the
     mouse down from "Услуги" into the menu never drops out of :hover and
     the links stay clickable. */
  padding: 18px 6px 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu a {
  display: block;
  padding: 11px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray-700);
  border-bottom: none !important;
  white-space: nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a[aria-current="page"] {
  background: var(--gray-100);
  color: var(--ink-900);
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink-900);
  display: block;
}

/* ---------- Page-top spinning logo (all pages) ---------- */

.page-logo-wrap {
  perspective: 700px;
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

.page-logo-spin {
  width: 120px;
  height: 120px;
  animation: spin-globe 7s linear infinite;
  transform-style: preserve-3d;
}

@keyframes spin-globe {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-logo-spin {
    animation: none;
  }
}

/* ---------- CEO intro (Contacts page) ---------- */

.ceo-intro {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  margin-bottom: 56px;
}

.ceo-photo-wrap {
  flex-shrink: 0;
}

.ceo-photo-wrap img {
  width: 220px;
  height: 272px;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 40%, transparent 100%);
}

.ceo-info {
  max-width: 62ch;
  padding-top: 4px;
}

.ceo-info h3 {
  margin-bottom: 2px;
}

.ceo-info .ceo-role {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  margin-bottom: 18px;
}

.ceo-info p {
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .ceo-intro {
    flex-direction: column;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-900);
  padding: 168px 0 140px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/hero-port.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero--zanas::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/hero-zanas-port.jpg");
}

/* Contacts page: full-page photo background instead of a plain white section. */
.hero--kontakti::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/section-consulting.jpg");
}

.hero--kontakti .ceo-info .ceo-role {
  color: var(--gray-300);
}

.hero--kontakti .contact-item .icon {
  background: var(--white);
  color: var(--ink-900);
}

.hero--kontakti .map-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--gray-200);
}

.hero--kontakti .map-note h1,
.hero--kontakti .map-note h2,
.hero--kontakti .map-note h3,
.hero--kontakti .map-note h4 {
  color: var(--white);
}

/* Services page hero: static photo, same treatment as the other page heroes
   (no hover interaction here — the crossfade lives on the section below). */
.hero--uslugi::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/uslugi-office-hero.jpg");
}

/* Services page, section below the hero: stacked, crossfading background
   layers so hovering a "Научете повече" link previews that service's own
   photo across the whole section. */
.services-photo-section {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-900);
}

.services-photo-section .bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.services-photo-section .bg-layer.is-default {
  opacity: 1;
}

.services-photo-section.is-hovering .bg-layer.is-default {
  opacity: 0;
}

.services-photo-section .bg-layer.is-active {
  opacity: 1;
}

.services-photo-section > .container {
  position: relative;
  z-index: 1;
}

.services-photo-section .service-block {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.services-photo-section .service-block:last-child {
  border-bottom: none;
}

.services-photo-section .service-block,
.services-photo-section .service-block h3,
.services-photo-section .service-num {
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.services-photo-section .service-block p,
.services-photo-section .service-block ul {
  color: var(--gray-200);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.services-photo-section .service-block a.card-link {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.services-photo-section .service-block a.card-link:hover {
  border-bottom-color: var(--white);
}

/* Individual service-detail page heroes: same idea as .hero--zanas, one
   per service, each with its own photo instead of the two-column boxed
   image the pages used before. */
.hero--service .container {
  max-width: 900px;
  text-align: left;
}

.hero--customs::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/customs-hero.jpg");
}

.hero--excise::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/tile_akt_warehouse.jpg");
}

.hero--energy::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/energiyni-tanks-hero.jpg");
}

.hero--compliance::before {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.88) 100%),
    url("../images/compliance-scales-hero.jpg");
}

/* Service-detail pages: the body section under the hero uses the general
   consulting photo (.section--photo's own default image) instead of the
   hero's own photo, so the two backgrounds don't just repeat each other. */

.section--photo .service-detail-body p {
  color: var(--gray-200);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.section--photo .btn-outline-dark {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white) !important;
}

.section--photo .btn-outline-dark:hover {
  background: var(--white);
  color: var(--ink-900) !important;
}

.section--photo a.card-link {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.section--photo a.card-link:hover {
  border-bottom-color: var(--white);
}

.hero .container {
  max-width: 800px;
  text-align: center;
}

.hero--zanas .container {
  max-width: 1100px;
  text-align: left;
}

.hero--zanas .cta-band {
  margin: 0;
}

.hero--kontakti .container {
  max-width: var(--max-width);
  text-align: left;
}

.hero h1 {
  font-size: 3.1rem;
  line-height: 1.15;
  margin-bottom: 0.55em;
}

.hero p.lead {
  font-size: 1.15rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-figure {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
}

.hero-figure dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.hero-figure dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-300);
  margin-bottom: 4px;
}

.hero-figure dd {
  margin: 0;
  color: var(--white);
  font-size: 1rem;
}

.hero-figure img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white) !important;
  border-bottom: 1px solid var(--ink-900);
}

.btn-primary:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline-dark {
  background: transparent;
  border-color: var(--ink-900);
  color: var(--ink-900) !important;
  border-bottom: 1px solid var(--ink-900);
}

.btn-outline-dark:hover {
  background: var(--ink-900);
  color: var(--white) !important;
}

/* Buttons inside dark reversed bands (hero, cta-band) invert to white fill */
.hero .btn-primary, .cta-band .btn-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-900) !important;
}

.hero .btn-primary:hover, .cta-band .btn-primary:hover {
  background: var(--gray-200);
  border-color: var(--gray-200);
}

/* ---------- Cards / Grids ---------- */

.grid {
  display: grid;
  gap: 40px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 2px solid var(--ink-900);
  border-radius: 0;
  padding: 40px 34px;
  box-shadow: var(--shadow-sm);
  color: var(--gray-700);
}

.card h1, .card h2, .card h3, .card h4 {
  color: var(--ink-900);
}

/* Equal-height cards only inside grid rows (index/uslugi highlight grids) */
.grid > .card {
  height: 100%;
}

.card .card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--ink-900);
}

.card h3 {
  margin-bottom: 0.5em;
}

.card p:last-child {
  margin-bottom: 0;
}

.card-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Homepage "Какво предлагаме" cards: no white box and no photo of their
   own - they are transparent glass panels that let the section's own
   background photo show through continuously behind all four of them,
   so nothing reads as a separate image with its own edge. */
.card--photo {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.card--photo h3 {
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.card--photo p {
  color: var(--gray-200);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.card--photo a.card-link {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.card--photo a.card-link:hover {
  border-bottom-color: var(--white);
}

/* ---------- Service detail blocks (Услуги page) ---------- */

.service-block {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--gray-200);
}

.service-block:last-child {
  border-bottom: none;
}

.service-num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--ink-900);
  font-weight: 700;
}

.service-block ul {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--gray-700);
}

.service-block li {
  margin-bottom: 6px;
}

/* ---------- List with check marks ---------- */

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  color: var(--gray-700);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1px;
  background: var(--ink-900);
}

/* ---------- Stats strip ---------- */

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.stats > div {
  padding: 26px 0;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.stats > div:last-child {
  border-bottom: 1px solid var(--gray-200);
}

.stats .stat-number {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--ink-900);
  font-weight: 600;
  flex-shrink: 0;
}

.stats .stat-label {
  color: var(--gray-700);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
}

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.contact-item {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}

.contact-item .icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-item h3 {
  margin-bottom: 4px;
  font-size: 1.05rem;
}

.contact-item p {
  margin: 0;
}

.map-note {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.92rem;
}

.map-note h1, .map-note h2, .map-note h3, .map-note h4 {
  color: var(--ink-900);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--ink-900);
  padding: 64px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-band h2 {
  margin: 0;
  font-size: 1.6rem;
  max-width: 26ch;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink-900);
  padding: 56px 0 24px;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-grid h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.footer-grid p,
.footer-grid a {
  color: var(--gray-300);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 10px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--gray-300);
  font-size: 0.82rem;
  opacity: 0.85;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .nav-links {
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--gray-200);
  }

  .nav-links a {
    display: block;
    padding: 14px 0;
  }

  .nav-cta {
    display: inline-block;
    margin: 10px 0;
  }

  .lang-switch {
    width: auto;
    border-bottom: none !important;
    margin: 10px 0 4px;
  }

  .nav-toggle {
    display: flex;
  }

  .has-dropdown > a::after {
    margin-left: auto;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    border: none;
    box-shadow: none;
    margin: 0 0 4px;
    padding: 0 0 0 16px;
  }

  .dropdown-menu a {
    padding: 12px 0;
    font-size: 0.85rem;
  }

  .dropdown-menu li {
    border-bottom: none !important;
  }

  .hero {
    padding: 56px 0;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .section {
    padding: 52px 0;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-block {
    grid-template-columns: 40px 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cta-band {
    flex-direction: column;
    text-align: center;
    padding: 48px 24px;
  }
}

/* ---------- Service inquiry button ---------- */

.service-inquiry-btn {
  margin-top: 18px;
  padding: 11px 22px;
  font-size: 0.72rem;
}

/* ---------- Inquiry modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.modal-overlay[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.modal-box {
  position: relative;
  background: var(--white);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
}

.modal-box h3 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

.modal-service-label {
  margin: 0 0 24px;
  color: var(--gray-500);
  font-size: 0.92rem;
}

.modal-service-label strong {
  color: var(--ink-900);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gray-500);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--ink-900);
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink-900);
}

.form-row .req {
  color: #b3261e;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--ink-900);
}

.form-row textarea {
  resize: vertical;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-note {
  margin: 0 0 20px;
  font-size: 0.78rem;
  color: var(--gray-500);
}

.form-actions {
  display: flex;
}

.form-actions .btn {
  width: 100%;
  text-align: center;
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin: 16px 0 0;
  font-size: 0.88rem;
  padding: 12px 14px;
}

.form-status--success {
  background: #eaf6ec;
  color: #1e6b30;
}

.form-status--error {
  background: #fbeaea;
  color: #a02622;
}

@media (max-width: 560px) {
  .modal-box {
    padding: 32px 22px;
  }
}

/* ---------- Service hero (text left / blending photo right) ---------- */

.service-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 24px;
}

.service-hero-text .eyebrow {
  margin-top: 8px;
}

.service-hero-text h1 {
  margin-bottom: 0;
}

.service-hero-image {
  position: relative;
  height: 380px;
}

.service-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.7) 8%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.7) 8%, #000 22%);
}

@media (max-width: 860px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
  }

  .service-hero-image {
    height: 220px;
    margin-top: 8px;
  }

  .service-hero-image img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 6%, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 6%, #000 18%);
  }
}

/* Variant for composite graphics with their own transparent background
   (e.g. multiple photos already blended into the page) - show the whole
   graphic instead of cropping it, and skip the extra edge fade since the
   image already fades to transparent on its own. */
.service-hero-image--graphic img {
  object-fit: contain;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Variant for the honeycomb hexagon-tile SVG clusters used on service pages
   with multiple source photos - each tile is clipped to a hexagon and
   fades at its edges via an SVG mask, so no CSS mask/height cropping. */
.service-hero-image--hex {
  height: auto;
  display: flex;
  align-items: center;
}

/* On the 3 pages using multi-tile hex clusters, align the cluster with the
   top of the heading text instead of centering against the whole (taller)
   text column - keeps the cluster visually level with the h1/eyebrow block.
   Scoped so Митническо представителство's single-photo hero (which still
   uses plain .service-hero-grid) keeps its existing centered layout. */
.service-hero-grid--top {
  align-items: flex-start;
}

/* Push the cluster down past the logo + "Услуги" eyebrow so it starts level
   with the h1 heading itself, rather than the top of the whole text block. */
.service-hero-grid--top .service-hero-image--hex {
  margin-top: 211px;
}

@media (max-width: 860px) {
  .service-hero-grid--top {
    align-items: center;
  }

  .service-hero-grid--top .service-hero-image--hex {
    margin-top: 8px;
  }
}

.hex-cluster-svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .service-hero-image--hex {
    height: auto;
    margin-top: 8px;
  }
}