/* ============================================================
   DENT MASTER GLOBAL - components.css (v2, light editorial)
   Hero, page hero, cards, split, stats, steps, compare,
   before/after slider, FAQ, forms, marquee, map, CTA
   ============================================================ */

/* ---------- Home hero: rounded contained banner with video background ---------- */
.hero-video-wrap {
  background: var(--bg-soft);
  padding-block: clamp(1rem, 0.6rem + 1vw, 1.7rem);
}
.hero-video {
  position: relative;
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(420px, 60vh, 600px);
  display: flex;
  align-items: center;
  box-shadow: 0 34px 80px -40px rgba(17, 17, 17, 0.55);
  isolation: isolate;
}
.hero-video__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.hero-video::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.68) 38%, rgba(10,10,12,0.15) 72%, transparent 100%),
    linear-gradient(0deg, rgba(10,10,12,0.5), transparent 45%);
}
.hero-video__inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: clamp(1.8rem, 1.2rem + 3vw, 3.6rem);
}
.hero-video .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.32); color: #fff; }
.hero-video .chip--red { background: var(--red-fill, var(--red)); border-color: var(--red); color: #fff; }
.hero__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.hero-video h1 { color: #fff; margin: 0; }
.hero-video h1 em { font-style: italic; color: var(--red); }
.hero-video__lead { color: rgba(255,255,255,0.85); margin-top: 0.9rem; max-width: 46ch; font-size: 1rem; }
.hero__cta { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
/* Exceptia de la „eticheta nu se rupe" (base.css, .btn): butonul cu telefonul
   („Rufen Sie uns jederzeit an! +40 743 606 666") e mai lat decat un telefon
   de 390px in de, fr, ru, pl. Fara loc de facut, alternativa era un buton
   taiat la marginea ecranului. Pe rand mai lat, eticheta ramane intreaga. */
@media (max-width: 520px) {
  .hero__cta .btn { max-width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 700px) {
  .hero-video { border-radius: 20px; width: calc(100% - 1.5rem); }
  .hero-video__inner { max-width: 100%; text-align: center; }
  .hero-video::after { background: linear-gradient(0deg, rgba(10,10,12,0.82), rgba(10,10,12,0.55) 55%, rgba(10,10,12,0.5)); }
  /* Smaller, centered advantage badges */
  .hero__badges { justify-content: center; gap: 0.4rem; margin-bottom: 0.9rem; }
  .hero-video .chip { font-size: 0.66rem; padding: 0.28rem 0.65rem; letter-spacing: 0.06em; }
  .hero-video__lead { margin-inline: auto; font-size: 0.92rem; }
  /* Centered buttons */
  .hero__cta { justify-content: center; }
}

.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface);
  transform: skewX(var(--skew));
}
.chip > span { transform: skewX(calc(var(--skew) * -1)); }
.chip--red { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.chip--navy { border-color: var(--navy); color: var(--navy); background: var(--navy-soft); }
.chip--ink { border-color: var(--text-strong); color: var(--text-strong); }

/* Slash badge (used on photos across the site) */
.slash-badge {
  display: inline-flex;
  background: var(--red-fill, var(--red));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  transform: skewX(var(--skew));
  box-shadow: 0 10px 24px -8px rgba(191, 10, 26, 0.55);
}
.slash-badge > span { transform: skewX(calc(var(--skew) * -1)); }

/* ---------- Quick trust bar under hero ---------- */
.trust-bar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: 1.1rem;
}
.trust-bar__item {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-strong);
  justify-content: center;
}
.trust-bar__item svg { width: 22px; height: 22px; color: var(--red); flex: 0 0 auto; }
@media (max-width: 820px) {
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1rem; }
  .trust-bar__item { justify-content: flex-start; font-size: 0.82rem; }
}

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative;
  background: var(--ink);
  color: #b9b9b9;
  padding-block: clamp(3.6rem, 2.8rem + 3.5vw, 6rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -6%;
  width: 46%; height: 170%;
  background:
    linear-gradient(115deg, transparent 40%, rgba(191, 10, 26, 0.35) 40.5%, rgba(191, 10, 26, 0.35) 55%, transparent 55.5%),
    linear-gradient(115deg, transparent 64%, rgba(28, 78, 156, 0.3) 64.5%, rgba(28, 78, 156, 0.3) 71%, transparent 71.5%);
  transform: skewX(var(--skew));
}
.page-hero__inner { position: relative; max-width: 820px; margin-inline: auto; text-align: center; }
.breadcrumb {
  display: flex; gap: 0.6rem; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8f8f8f; margin-bottom: 1.1rem; font-weight: 600; /* #7a7a7a: 4,4:1 pe antetul negru */
}
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span::before { content: "//"; margin-right: 0.6rem; color: var(--red); }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); }
.page-hero h1 em { font-style: italic; color: var(--red); }
.page-hero p { margin-top: 1rem; max-width: 58ch; margin-inline: auto; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--red), var(--navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.3); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-block: 1rem 0.55rem; font-size: 1.35rem; }
.card p { font-size: var(--text-sm); color: var(--text-dim); }

.card__icon {
  width: 54px; height: 54px;
  background: var(--red-soft);
  display: grid; place-items: center;
  color: var(--red);
  transform: skewX(var(--skew));
  border-radius: 6px;
}
.card__icon svg { width: 26px; height: 26px; transform: skewX(calc(var(--skew) * -1)); }

.card__num {
  position: absolute;
  top: 1.2rem; right: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700; font-style: italic;
  font-size: 2.8rem; line-height: 1;
  color: var(--bg-soft);
  -webkit-text-stroke: 1px var(--line);
  transition: color var(--dur), -webkit-text-stroke-color var(--dur);
}
.card:hover .card__num { color: var(--red-soft); -webkit-text-stroke-color: var(--red); }

/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 2rem + 3vw, 5.5rem); align-items: stretch; }
.split--rev > :first-child { order: 2; }
/* Media column matches the text column height on desktop: the image is
   absolutely positioned so the row height is set by the text side, then
   the image fills it edge-to-edge. */
.split__media { position: relative; min-height: 320px; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: 0 32px 64px -30px rgba(17, 17, 17, 0.4);
  object-fit: cover;
}
.split__media--slash::before {
  content: "";
  position: absolute;
  inset: -18px auto auto -18px;
  width: 120px; height: 120px;
  background: linear-gradient(115deg, transparent 44%, var(--red) 44.5%, var(--red) 56%, transparent 56.5%);
  transform: skewX(var(--skew));
  z-index: 1;
}
/* Contact: show info before the form on mobile */
@media (max-width: 900px) {
  .split--contact .form-panel { order: 2; }
  .split--contact > :not(.form-panel) { order: 1; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  /* Stacked layout: give the media its own height since there is no
     neighbouring text column to match. */
  .split__media { min-height: 0; aspect-ratio: 16 / 11; }
}

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 0.95rem; margin-top: 1.6rem; }
.checklist li { display: flex; gap: 0.85rem; line-height: 1.5; align-items: flex-start; color: var(--text-dim); font-size: var(--text-sm); }
.checklist li strong { color: var(--text-strong); font-weight: 600; }
.checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px; margin-top: -2px;
  transform: skewX(var(--skew));
  background: var(--red-fill, var(--red)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-radius: 4px;
}
.section--dark .checklist li { color: #b9b9b9; }
.section--dark .checklist li strong { color: #fff; }

/* ---------- Stat band ---------- */
.stat-band { background: var(--red-fill, var(--red)); position: relative; overflow: hidden; }
.stat-band::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 255, 255, 0.05) 140px 200px);
}
.stat-band__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band__item { padding: 2.8rem 1.5rem; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.stat-band__item:first-child { border-left: none; }
.stat-band__item strong {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem);
  line-height: 1;
  color: #fff;
}
.stat-band__item > span { display: block; margin-top: 0.5rem; font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.stat-band__item strong span { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
@media (max-width: 800px) {
  /* `minmax(0, 1fr)`: cu `1fr` simplu, „UMWELTFREUNDLICHER" largea coloana a
     doua pana iesea din ecran. Cuvantul lung se desparte in silabe. */
  .stat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-band__item > span { overflow-wrap: break-word; hyphens: auto; }
  .stat-band__item:nth-child(3) { border-left: none; }
  .stat-band__item { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .stat-band__item:nth-child(-n + 2) { border-top: none; }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; }
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem 2rem;
  counter-increment: step;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.step:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.28); }
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 700; font-style: italic;
  font-size: 3.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  display: block;
  margin-bottom: 1rem;
  opacity: 0.85;
}
.step h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { font-size: var(--text-sm); color: var(--text-dim); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Comparison ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.compare__col { border-radius: var(--radius); padding: 2.2rem 1.9rem; background: var(--surface); border: 1px solid var(--line); }
.compare__col--win { background: var(--ink); border-color: var(--text-strong); color: #c9c9c9; box-shadow: 0 34px 70px -34px rgba(17, 17, 17, 0.55); }
.compare__col--win h3 { color: #fff; }
.compare__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.compare__head h3 { font-size: 1.4rem; }
.compare ul { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.compare li { display: flex; gap: 0.8rem; font-size: var(--text-sm); line-height: 1.5; align-items: flex-start; color: var(--text-dim); }
.compare__col--win li { color: #b9b9b9; }
.compare li strong { color: var(--text-strong); font-weight: 600; }
.compare__col--win li strong { color: #fff; }
.compare li::before { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 0; content: ""; transform: skewX(var(--skew)); border-radius: 4px; }
.compare__col--win li::before {
  background: var(--red-fill, var(--red)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.compare__col--lose li::before {
  background: #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23908f8f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }

/* ---------- Before / After slider ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.ba {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 8/7;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  box-shadow: 0 24px 50px -24px rgba(17, 17, 17, 0.35);
  background: var(--bg-soft);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 3px;
  background: var(--surface);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.ba__handle::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--red-fill, var(--red));
  color: #fff;
  font-size: 0.72rem;
  display: grid; place-items: center;
  letter-spacing: 1px;
  box-shadow: 0 8px 20px -6px rgba(191, 10, 26, 0.7);
}
.ba__label {
  position: absolute; top: 14px; z-index: 3;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  background: rgba(17, 17, 17, 0.72);
  padding: 0.3rem 0.8rem;
  pointer-events: none;
}
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; background: var(--red-fill, var(--red)); }

/* ---------- Estimate Master image collage ----------
   Desktop: the collage matches the text column height while every
   image stays fully visible (object-fit: contain, flex-basis 0 so the
   images don't force the row taller than the text side). */
.em-media { display: flex; flex-direction: column; gap: 1rem; align-self: stretch; min-height: 0; }
.em-media__dash {
  flex: 1.15 1 0; min-height: 0; width: 100%;
  object-fit: contain; object-position: center;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  background: #f4f6fb;
}
.em-media__phones { flex: 1.6 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.em-media__phones img {
  width: 100%; height: 100%; min-height: 0;
  object-fit: contain; object-position: center;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.6);
  background: #0d47c9;
}
@media (max-width: 900px) {
  /* Stacked: let images flow at natural size, fully visible */
  .em-media { display: block; }
  .em-media__dash { height: auto; object-fit: cover; margin-bottom: 1rem; }
  .em-media__phones { display: grid; }
  .em-media__phones img { height: auto; object-fit: cover; }
}

/* ---------- Service cards with before/after (homepage) ---------- */
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem); flex-wrap: wrap; }
.services-head h2 { margin-top: 0.4rem; }
.services-head__aside { display: flex; align-items: center; gap: 1.5rem; max-width: 640px; flex-wrap: wrap; }
.services-head__aside p { color: var(--text-dim); font-size: var(--text-sm); flex: 1; min-width: 220px; margin: 0; }
.services-head__aside .btn { flex: 0 0 auto; }
@media (max-width: 760px) { .services-head { align-items: flex-start; } }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.service-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem 1.8rem; text-align: center; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -32px rgba(17,17,17,0.3); }
.service-card__ba { aspect-ratio: 16 / 11; margin-bottom: 0; }
.service-card__icon {
  position: relative; z-index: 2; width: 62px; height: 62px; margin: -31px auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  display: grid; place-items: center; color: var(--red);
  box-shadow: 0 12px 26px -14px rgba(17,17,17,0.35);
}
.service-card__icon svg { width: 28px; height: 28px; }
.service-card__body { padding-top: 1rem; }
.service-card__body h3 { font-size: 1.4rem; }
.service-card__body p { color: var(--text-dim); font-size: var(--text-sm); margin: 0.6rem 0 1.3rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.85rem; max-width: 840px; margin-inline: auto; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color var(--dur), box-shadow var(--dur); }
.faq__item.is-open { border-color: var(--red); box-shadow: 0 18px 40px -24px rgba(191, 10, 26, 0.3); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; text-align: left;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.faq__q:hover { color: var(--red); }
.faq__q svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--red); transition: transform var(--dur) var(--ease-out); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a p { padding: 0 1.4rem 1.25rem; font-size: var(--text-sm); color: var(--text-dim); }
.faq__a p + p { padding-top: 0; margin-top: -0.5rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--red-fill, var(--red)); }
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, 0.06) 55.5%, rgba(255, 255, 255, 0.06) 72%, transparent 72.5%),
    linear-gradient(115deg, transparent 78%, rgba(17, 17, 17, 0.14) 78.5%, rgba(17, 17, 17, 0.14) 88%, transparent 88.5%);
}
.cta-band__inner {
  position: relative;
  padding-block: clamp(3.4rem, 2.8rem + 2.5vw, 5.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; max-width: 24ch; }
.cta-band h2 em { color: var(--text-strong); font-style: italic; }
/* Pe rosu, #111 iese la 2,9:1; negrul pur trece de pragul pentru titluri. */
html:not([data-theme="dark"]) .cta-band h2 em { color: #000; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-top: 0.7rem; max-width: 54ch; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-strong); }
.field input, .field textarea, .field select {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--text-strong);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(191, 10, 26, 0.12);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 14px; }
.field .error-msg { font-size: var(--text-xs); color: var(--red); display: none; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-weight: 500; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--red); }
.field.has-error .error-msg { display: block; }

.radio-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* Ascunse, dar cu latimea generala a campurilor (100%) si fara parinte
   pozitionat: iesea din pagina si dadea scroll orizontal pe contact. */
.radio-pills { position: relative; }
.radio-pills input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.radio-pills label {
  padding: 0.55rem 1.3rem;
  border: 1.5px solid var(--line);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: all var(--dur-fast);
  transform: skewX(var(--skew));
}
.radio-pills label span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.radio-pills input:checked + label { background: var(--red-fill, var(--red)); border-color: var(--red); color: #fff; }
.radio-pills input:focus-visible + label { box-shadow: 0 0 0 3px rgba(191, 10, 26, 0.25); }

.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1.3rem + 1.5vw, 2.8rem);
  box-shadow: 0 30px 60px -35px rgba(17, 17, 17, 0.25);
}
.form-success {
  display: none;
  padding: 1.1rem 1.3rem;
  border: 1.5px solid #16a34a;
  background: #f0fdf4;
  color: #15803d;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-success.is-visible { display: block; }

/* Perechea rosie a mesajului de succes.
   Pana acum formularele n-aveau ce esua: nu trimiteau nimic. De cand ajung la
   server, un mesaj care nu pleaca trebuie sa se vada – altfel ramanem exact la
   problema de dinainte, doar pe dos. */
.form-error {
  display: none;
  margin: 0;
  padding: 1.1rem 1.3rem;
  border: 1.5px solid #dc2626;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-error.is-visible { display: block; }

/* ---------- Info list ---------- */
.info-list { display: grid; gap: 1.2rem; }
.info-list li { display: flex; gap: 1rem; align-items: flex-start; }
.info-list .card__icon { width: 46px; height: 46px; flex: 0 0 auto; }
.info-list .card__icon svg { width: 21px; height: 21px; }
.info-list strong { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-strong); }
.info-list span, .info-list a { color: var(--text-dim); font-size: var(--text-sm); }
.info-list a:hover { color: var(--red); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; background: var(--ink); padding-block: 1rem; position: relative; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 32s linear infinite; }
.marquee span {
  font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 1.05rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: #8f8f8f;
  display: flex; align-items: center; gap: 3rem; white-space: nowrap;
}
.marquee span::after { content: "⟋"; color: var(--red); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Coverage map ---------- */
.map-wrap { position: relative; }
.map-wrap img { width: 100%; }
.map-flags {
  display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.6rem;
}
.map-flags .chip { font-size: 0.82rem; padding: 0.32rem 0.8rem; }

/* ---------- Articles (blog) ---------- */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 960px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .post-card__body { padding: 0.85rem 0.9rem 1rem; gap: 0.4rem; }
  .post-card__title { font-size: 1rem; }
  .post-card__excerpt { font-size: 0.8rem; }
  .post-card__cat { font-size: 0.66rem; padding: 0.22rem 0.6rem; }
  .post-card__meta { font-size: 0.66rem; }
}
@media (max-width: 340px) { .posts-grid { grid-template-columns: 1fr; } }

.post-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(17,17,17,0.3); border-color: transparent; }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__cat {
  position: absolute; top: 12px; left: 12px;
  background: var(--red-fill, var(--red)); color: #fff;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.8rem; transform: skewX(var(--skew));
}
.post-card__cat { display: inline-block; }
.post-card__body { padding: 1.3rem 1.35rem 1.45rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.post-card__meta { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.post-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; text-transform: none; }
.post-card__title a:hover { color: var(--red); }
.post-card__excerpt { font-size: var(--text-sm); color: var(--text-dim); flex: 1; }
.post-card__more { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-top: 0.3rem; }
.post-card__more:hover { color: var(--red-dark); }

/* Single article */
.post-single { max-width: 960px; margin-inline: auto; }
.post-single__meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: 1rem; }
.post-single h1 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.8rem); text-transform: none; line-height: 1.1; }
.post-single__hero { margin: 1.6rem 0 2rem; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -32px rgba(17,17,17,0.4); }
.post-single__hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.post-single__body p { color: var(--text); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.2rem; }
.post-single__body p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 700; float: left;
  font-size: 3.4rem; line-height: 0.8; padding: 0.1em 0.14em 0 0; color: var(--red);
}
.post-single__cta {
  margin-top: 2.4rem; padding: 1.6rem 1.8rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
}
.post-single__cta strong { font-family: var(--font-display); color: var(--text-strong); }
@media (max-width: 640px) {
  .post-single__body p { font-size: 1rem; }
  .post-single__cta { padding: 1.3rem 1.3rem; }
}

/* ---------- Logo strip on photo pages ---------- */
.photo-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -28px rgba(17, 17, 17, 0.4);
}
.photo-card img { width: 100%; object-fit: cover; }
.photo-card__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.4rem 1.2rem;
  background: linear-gradient(transparent, rgba(17, 17, 17, 0.85));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
}