/**
 * Elementor bridge: keep LELICOS look when content is rendered by Elementor.
 * Theme main.css remains source of truth; this only neutralizes Elementor defaults.
 */

body.elementor-page,
body.elementor-editor-active {
  background: var(--bg);
}

.elementor-widget-container > *:last-child {
  margin-bottom: 0;
}

/* Reset Elementor widget gaps that fight LELICOS section rhythm */
.elementor-element.lelicos-section > .e-con-inner,
.elementor-element.lelicos-section {
  --padding-top: 0px;
  --padding-bottom: 0px;
}

.elementor .btn,
.elementor a.btn,
.elementor .elementor-button {
  font-family: var(--font-body);
}

/* LELICOS widgets already contain the original section rhythm. */
.elementor-element[class*="elementor-widget-lelicos-"] {
  width: 100%;
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
}

.elementor-widget-lelicos-hero .elementor-widget-container,
.elementor-widget-lelicos-mission .elementor-widget-container,
.elementor-widget-lelicos-value .elementor-widget-container,
.elementor-widget-lelicos-feature .elementor-widget-container,
.elementor-widget-lelicos-founder .elementor-widget-container,
.elementor-widget-lelicos-tariffs .elementor-widget-container,
.elementor-widget-lelicos-programs .elementor-widget-container,
.elementor-widget-lelicos-faq .elementor-widget-container,
.elementor-widget-lelicos-contacts .elementor-widget-container,
.elementor-widget-lelicos-header .elementor-widget-container,
.elementor-widget-lelicos-footer .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* Xpro's shell must inherit the exact theme background. */
.xpro-theme-builder-header,
.xpro-theme-builder-header-nav {
  background: var(--bg);
}

/* Header logo must stay compact inside Elementor/Xpro shell */
.elementor-widget-lelicos-header img.brand__logo,
.xpro-theme-builder-header img.brand__logo {
  width: auto !important;
  height: 2.05rem !important;
  max-width: 11.5rem !important;
  max-height: 2.05rem !important;
}

/* Header sits inside the hero's greige field instead of a lighter cream band */
.site-header,
.xpro-theme-builder-header,
.xpro-theme-builder-header-nav {
  background: rgba(224, 219, 214, 0.92);
  border-bottom-color: rgba(122, 110, 99, 0.12);
}

/* Brand lockup: a larger wordmark carries the header on its own */
@media (min-width: 768px) {
  .elementor-widget-lelicos-header img.brand__logo,
  .xpro-theme-builder-header img.brand__logo,
  img.brand__logo {
    height: 2.6rem !important;
    max-height: 2.6rem !important;
    max-width: 15rem !important;
  }

  .lelicos-header .header-cta,
  .site-header .header-cta {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}

/* When Xpro header/footer active, theme shell may still exist — hide duplicates */
body.xpro-template-header .site > .site-header,
body.xtb-header-enabled .site > .site-header {
  display: none;
}

body.xpro-template-footer .site > .site-footer,
body.xtb-footer-enabled .site > .site-footer {
  display: none;
}

/* Canvas / fullwidth Elementor pages */
.elementor-page .site > main,
.page-template-elementor-fullwidth main,
.elementor-template-full-width main {
  padding: 0;
}

.elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--max);
}

/* Keep theme sentence case if Elementor kit forces uppercase on headings. */
.elementor-widget-lelicos-hero .hero__title,
.elementor-widget-lelicos-hero .hero__title .hero__line,
.elementor-widget-lelicos-hero .hero__kicker,
.elementor [class*="elementor-widget-lelicos-"] h1,
.elementor [class*="elementor-widget-lelicos-"] h2,
.elementor [class*="elementor-widget-lelicos-"] h3 {
  text-transform: none;
}

/* —— Native homepage: block rhythm + hero wave + founder crop —— */

.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(1),
.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(2),
.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(3),
#hero {
  background-color: #f6f3ed;
}

.lelicos-hero-wave,
#hero,
.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(1) {
  position: relative;
  overflow: hidden;
}

.lelicos-hero-wave::after,
#hero::after,
.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(1)::after {
  content: "";
  position: absolute;
  right: -4%;
  top: 0;
  width: min(48%, 460px);
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.78;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 400' fill='none'%3E%3Cpath d='M60 240C120 90 210 40 300 80C380 120 420 210 460 180' stroke='%23a8998a' stroke-width='14' stroke-linecap='round' opacity='.18'/%3E%3Cpath d='M40 270C110 120 210 55 305 100C395 145 425 240 470 215' stroke='%23a8998a' stroke-width='10' stroke-linecap='round' opacity='.28'/%3E%3Cpath d='M70 300C135 160 220 90 310 130C395 170 430 265 475 250' stroke='%2377695d' stroke-width='7' stroke-linecap='round' opacity='.38'/%3E%3Cpath d='M100 70C175 25 270 45 330 120C390 195 400 280 350 345' stroke='%23a8998a' stroke-width='9' stroke-linecap='round' opacity='.22'/%3E%3Cpath d='M150 50C220 15 300 45 345 125C390 205 385 290 330 350' stroke='%2377695d' stroke-width='5' stroke-linecap='round' opacity='.32'/%3E%3Cpath d='M20 310C95 180 195 110 290 150C385 190 415 280 460 270' stroke='%23a8998a' stroke-width='3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.lelicos-hero-wave > .elementor-container,
#hero > .elementor-container,
.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(1) > .elementor-container {
  position: relative;
  z-index: 1;
}

.lelicos-elementor-main .elementor > .elementor-top-section:nth-child(1) {
  min-height: 0;
}

#academy {
  background-color: #f2ede6;
}

/* «Про академію»: readable measure, a photo that carries weight, calmer CTA */
@media (min-width: 768px) {
  #academy > .elementor-container > .elementor-column:first-child {
    width: 58%;
  }

  #academy > .elementor-container > .elementor-column:last-child {
    width: 42%;
  }

  #academy .elementor-widget-text-editor p {
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.72;
  }

  #academy > .elementor-container > .elementor-column:last-child .elementor-widget-wrap {
    align-content: center;
  }

  #academy .elementor-widget-image {
    padding-left: clamp(1rem, 3vw, 2.75rem);
  }

  #academy .elementor-widget-image img {
    width: 100%;
    height: auto;
    border-radius: 14px;
  }

  .lelicos-elementor-main #academy .elementor-widget-button .elementor-button {
    font-size: 0.85rem;
    padding: 0.78rem 1.5rem !important;
  }
}

#value {
  background-color: #dfd6cd;
}

#value > .elementor-container {
  align-items: stretch;
  gap: 1.5rem;
}

#value > .elementor-container > .elementor-column {
  width: calc(50% - 0.75rem) !important;
}

#value .elementor-column > .elementor-widget-wrap {
  background: #fffdf9;
  border-radius: 12px;
  padding: 32px 28px !important;
  height: 100%;
}

#feature {
  background-color: #f6f3ed;
}

#founder {
  background-color: #d5cac0;
}

#founder .elementor-column:last-child > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}

#founder .elementor-widget-image,
#founder .lelicos-founder-photo,
#founder .elementor-column:last-child .elementor-widget-text-editor {
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: 0;
}

#founder .elementor-widget-image img,
#founder .lelicos-founder-photo img {
  width: 100%;
  max-width: 280px;
  max-height: 360px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 12px;
}

#founder .elementor-column:last-child .elementor-widget-text-editor,
#founder .elementor-column:last-child .elementor-widget-text-editor p {
  margin: 0 !important;
  text-align: center;
  line-height: 1.45;
}

#courses {
  background-color: #eee9e2;
}

#programs {
  background-color: #fffdf9;
}

#faq {
  background-color: #f6f3ed;
}

#contacts {
  background-color: #dfd6cd;
}

#courses .elementor-container {
  align-items: stretch !important;
}

#courses .lelicos-tariff-card,
#courses .elementor-column.lelicos-tariff-card {
  display: flex;
}

#courses .lelicos-tariff-card > .elementor-widget-wrap,
#courses .elementor-column.lelicos-tariff-card > .elementor-element-populated {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  padding: 28px 24px !important;
}

#courses .lelicos-tariff-card .elementor-widget-button {
  margin-top: auto !important;
  width: 100%;
}

#courses .lelicos-tariff-card .elementor-widget-button .elementor-widget-container,
#courses .lelicos-tariff-card .elementor-widget-button .elementor-button-wrapper {
  width: 100%;
}

#courses .lelicos-tariff-card .elementor-widget-button .elementor-button {
  width: 100% !important;
  justify-content: center !important;
  text-align: center;
  border-radius: 999px !important;
  min-height: 2.85rem;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .lelicos-hero-wave::after,
  .lelicos-elementor-main .elementor > .elementor-top-section:nth-child(1)::after {
    width: min(70%, 280px);
    opacity: 0.45;
  }

  #founder .elementor-column:last-child > .elementor-widget-wrap {
    align-items: center;
  }

  #founder .elementor-widget-image,
  #founder .lelicos-founder-photo,
  #founder .elementor-column:last-child .elementor-widget-text-editor {
    margin-inline: auto;
  }

  #value > .elementor-container {
    flex-direction: column;
    gap: 1.25rem;
  }

  #value > .elementor-container > .elementor-column {
    width: 100% !important;
  }
}

/* Hero video — same crop as the old .hero__visual */
.lelicos-hero-visual {
  --hero-poster: url("https://lelicos.com/wp-content/uploads/2026/08/clinic-room-hero.jpg");
}

.lelicos-hero-visual .elementor-widget-container,
.lelicos-hero-visual .e-hosted-video,
.lelicos-hero-visual .elementor-wrapper {
  position: relative;
  width: 100%;
  height: clamp(360px, 54vw, 680px);
  overflow: hidden;
  background-color: #d5cac0;
  background-image: var(--hero-poster);
  background-size: cover;
  background-position: center;
  border-radius: 12px 12px 0 0;
}

.lelicos-hero-visual video,
.lelicos-hero-visual .elementor-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: scale(1.015);
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lelicos-hero-visual video.is-ready {
  opacity: 1;
}

.lelicos-hero-visual .elementor-custom-embed-play,
.lelicos-hero-visual .elementor-custom-embed-image-overlay {
  display: none !important;
}

/* Scroll reveal on native Elementor columns (same motion as the old theme) */
.lelicos-elementor-main .elementor-column.reveal,
.lelicos-elementor-main .elementor-widget.reveal {
  --reveal-delay: 0ms;
}

/* Hero + academy + feature + contacts: pill buttons (match tariff cards) */
.lelicos-elementor-main #hero .elementor-widget-button .elementor-button,
.lelicos-elementor-main #academy .elementor-widget-button .elementor-button,
.lelicos-elementor-main #feature .elementor-widget-button .elementor-button,
.lelicos-elementor-main #contact-actions .elementor-widget-button .elementor-button,
.lelicos-elementor-main #contacts + .elementor-section .elementor-widget-button .elementor-button {
  border-radius: 999px !important;
}

/* «Академія» on its own row, left-aligned under «Обрати курс» */
.lelicos-elementor-main #hero .elementor-widget-button {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
}

/* End-of-page contact pills: same width inside each column */
.lelicos-elementor-main #contact-actions .elementor-widget-button,
.lelicos-elementor-main #contacts + .elementor-section .elementor-widget-button {
  width: 100%;
}

.lelicos-elementor-main #contact-actions .elementor-widget-button .elementor-button,
.lelicos-elementor-main #contacts + .elementor-section .elementor-widget-button .elementor-button {
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-height: 3rem;
}

/* —— Native hero: copy, then a separate video block, then advantages —— */

.lelicos-elementor-main > .elementor {
  display: flex;
  flex-direction: column;
}

.lelicos-elementor-main > .elementor > #hero {
  order: -30;
}

.lelicos-elementor-main > .elementor > #hero-video {
  order: -20;
}

.lelicos-elementor-main > .elementor > #hero-tags {
  order: -10;
}

#hero {
  min-height: 0;
}

#hero > .elementor-container {
  padding: clamp(2.4rem, 5vw, 4.5rem) 1.25rem 2.1rem !important;
}

#hero,
#hero-video,
#hero-tags {
  background-color: #f6f3ed;
}

#hero .elementor-column,
#hero .elementor-widget-wrap,
#hero-video .elementor-column,
#hero-video .elementor-widget-wrap {
  min-width: 0;
}

#hero .elementor-widget-wrap {
  align-content: center;
  padding: 0 !important;
}

#hero .elementor-widget {
  max-width: 42rem;
}

#hero .elementor-widget-heading:has(.elementor-heading-title:empty) {
  display: none !important;
  margin: 0 !important;
}

/* Kicker look belongs to a small label above the title, never to the H1 itself */
#hero .elementor-widget-wrap > .elementor-widget-heading:first-child:not(:has(h1)) {
  margin: 0 0 1.45rem !important;
}

#hero .elementor-widget-wrap > .elementor-widget-heading:first-child:not(:has(h1)) .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display) !important;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

/* With a kicker above, the H1 no longer needs its own rule line */
#hero .elementor-widget-heading:not(:has(h1)) + .elementor-widget-heading:has(h1)::before {
  display: none;
}

#hero .elementor-widget-wrap > .elementor-widget-heading:first-child:not(:has(h1)) .elementor-heading-title::before {
  content: "";
  width: clamp(2.25rem, 4.5vw, 4rem);
  height: 1px;
  flex: 0 0 auto;
  background: var(--taupe);
}

#hero .elementor-widget-heading:has(h1) {
  margin: 0 !important;
}

#hero .elementor-widget-heading:has(h1)::before {
  content: "";
  display: block;
  width: clamp(2.25rem, 4.5vw, 4rem);
  height: 1px;
  margin: 0 0 1.35rem;
  background: var(--taupe);
}

#hero .elementor-widget-wrap > .elementor-widget-heading:nth-child(2) {
  margin: 0 0 0.65rem !important;
}

#hero .elementor-widget-wrap > .elementor-widget-heading:nth-child(3) {
  margin: 0 !important;
}

#hero h1.elementor-heading-title,
#hero h2.elementor-heading-title {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
}

#hero h1.elementor-heading-title {
  max-width: 41rem;
  font-size: clamp(3rem, 4.15vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

#hero h2.elementor-heading-title {
  max-width: 39rem;
  font-size: clamp(2.25rem, 3.25vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#hero .elementor-widget-wrap > .elementor-widget-text-editor {
  max-width: 37rem;
  margin: 1.75rem 0 0 !important;
}

#hero .elementor-widget-text-editor,
#hero .elementor-widget-text-editor p {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.72;
}

#hero .elementor-widget-wrap > .elementor-widget-button {
  margin: 0 !important;
}

#hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) {
  margin-top: 1.8rem !important;
}

#hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) .elementor-button {
  min-width: 11.75rem;
  min-height: 3.15rem;
}

#hero .elementor-widget-wrap > .elementor-widget-button:last-child {
  margin-top: 0.55rem !important;
}

#hero .elementor-widget-wrap > .elementor-widget-button:last-child .elementor-button {
  padding-inline: 0 !important;
}

#hero-video {
  position: relative;
  overflow: hidden;
  padding: 0.4rem 1.25rem 2.4rem !important;
}

#hero-video > .elementor-container {
  width: 100%;
  max-width: var(--max) !important;
  padding: 0 !important;
}

#hero-video .elementor-column,
#hero-video .elementor-widget-wrap {
  min-width: 0;
}

#hero-video .elementor-widget-wrap {
  padding: 0 !important;
}

#hero-video .lelicos-hero-visual {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(119, 105, 93, 0.18);
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(37, 33, 30, 0.11);
}

#hero-video .lelicos-hero-visual .elementor-widget-container,
#hero-video .lelicos-hero-visual .e-hosted-video,
#hero-video .lelicos-hero-visual .elementor-wrapper {
  width: 100%;
  height: clamp(360px, 54vw, 680px);
  min-height: 0;
  border-radius: inherit;
}

#hero-video .lelicos-hero-visual video,
#hero-video .lelicos-hero-visual .elementor-video {
  display: block !important;
  width: 100%;
  height: 100%;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: cover;
  object-position: center;
}

#hero-video .lelicos-hero-visual video.lelicos-video-needs-tap {
  pointer-events: auto !important;
}

#hero-tags {
  padding: 1.1rem 1.25rem 3.7rem !important;
}

#hero-tags > .elementor-container {
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#hero-tags .elementor-column {
  width: 25%;
}

#hero-tags .elementor-widget-wrap {
  align-content: flex-start;
  padding: 1.55rem clamp(1rem, 2vw, 1.7rem) 1.65rem !important;
}

#hero-tags .elementor-column + .elementor-column {
  border-left: 1px solid var(--line);
}

#hero-tags .elementor-widget-heading {
  margin-bottom: 0.55rem;
}

#hero-tags h3.elementor-heading-title {
  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
  line-height: 1.2;
}

#hero-tags .elementor-widget-text-editor,
#hero-tags .elementor-widget-text-editor p {
  font-size: 0.82rem;
  line-height: 1.55;
}

/* —— Desktop hero: centred premium composition (mobile keeps its approved layout) —— */
@media (min-width: 768px) {
  /* Order on wide screens: hero, advantages strip, then the video band */
  .lelicos-elementor-main > .elementor > #hero-tags {
    order: -20;
  }

  .lelicos-elementor-main > .elementor > #hero-video {
    order: -10;
  }

  #hero {
    display: flex;
    align-items: center;
    min-height: min(76vh, 720px);
    /* Greige field sampled from the mockup: #dad5d2 on the left, #bdb3aa at the right edge */
    background-image: linear-gradient(96deg, #dcd7d3 0%, #d8d1cb 46%, #c7bdb3 100%);
  }

  #hero::before {
    display: none;
  }

  /* Abstract sculpture fills the right side and melts into the cream on its left */
  #hero::after {
    top: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: min(56%, 810px);
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    opacity: 1;
    background-image: url("https://lelicos.com/wp-content/uploads/2026/08/lelicos-hero-abstract-client.webp");
    background-position: center right;
    background-size: cover;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 30%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 30%);
  }

  #hero > .elementor-container {
    width: 100%;
    max-width: min(1300px, 94vw);
    padding: clamp(3rem, 5vw, 4.5rem) 1.25rem !important;
  }

  #hero .elementor-widget-wrap {
    max-width: 46%;
  }

  #hero .elementor-widget-wrap > .elementor-widget {
    max-width: 100%;
  }

  #hero .elementor-widget-heading:has(h1)::before {
    width: 4.5rem;
    margin: 0 0 1.5rem;
  }

  #hero h1.elementor-heading-title {
    max-width: 12ch;
    font-size: clamp(3rem, 5.35vw, 5.05rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  #hero .elementor-widget-wrap > .elementor-widget-text-editor {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0 0 !important;
  }

  #hero .elementor-widget-text-editor,
  #hero .elementor-widget-text-editor p {
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--taupe-deep);
  }

  #hero .elementor-widget-text-editor p {
    max-width: 26rem;
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    text-align: center;
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) {
    margin: 2.4rem 1.3rem 0 0 !important;
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:last-child {
    margin: 2.4rem 0 0 !important;
  }

  /* Softly cut rectangles, as drawn in the mockup, not the pills used elsewhere */
  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 11.7rem;
    min-height: 3.25rem;
    padding: 0 1.6rem !important;
    border-radius: 999px !important;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) .elementor-button {
    background: #7d6d5e;
    color: #fffdf9;
    box-shadow: 0 14px 30px rgba(93, 80, 68, 0.22);
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:last-child .elementor-button {
    min-width: 10.5rem;
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) .elementor-button:hover {
    background: #635648;
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:last-child .elementor-button {
    background: transparent;
    color: var(--taupe-deep);
    border: 1px solid rgba(119, 105, 93, 0.38);
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button:last-child .elementor-button:hover {
    background: rgba(119, 105, 93, 0.08);
    border-color: rgba(119, 105, 93, 0.6);
  }

  .lelicos-elementor-main #hero .elementor-widget-wrap > .elementor-widget-button .elementor-button:hover {
    transform: translateY(-2px);
  }

  #hero-video {
    padding: 0 1.25rem 3.2rem !important;
  }

  #hero-video .lelicos-hero-visual {
    border-radius: 1.5rem;
    box-shadow: 0 30px 70px rgba(37, 33, 30, 0.13);
  }

  #hero-video .lelicos-hero-visual .elementor-widget-container,
  #hero-video .lelicos-hero-visual .e-hosted-video,
  #hero-video .lelicos-hero-visual .elementor-wrapper {
    height: clamp(420px, 37vw, 555px);
  }

  #hero-tags {
    padding: 0 1.25rem 3.4rem !important;
    /* Carries the hero field down and dissolves it back into the cream page */
    background-image:
      linear-gradient(180deg, rgba(246, 243, 237, 0) 0%, #f6f3ed 88%),
      linear-gradient(96deg, #dcd7d3 0%, #d8d1cb 46%, #c7bdb3 100%);
  }

  #hero-tags > .elementor-container {
    border-bottom: 0;
  }

  #hero-tags .elementor-widget-wrap {
    align-content: center;
    text-align: center;
    padding: 1.9rem clamp(1rem, 2vw, 1.8rem) 1.7rem !important;
  }

  #hero-tags .elementor-widget-heading::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 0.95rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  #hero-tags .elementor-column:nth-child(1) .elementor-widget-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a8998a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='25' height='17' rx='2'/%3E%3Cpath d='M11 26.5h10M16 22.5v4'/%3E%3Cpath d='M13.5 10.5l6 3.5-6 3.5z'/%3E%3C/svg%3E");
  }

  #hero-tags .elementor-column:nth-child(2) .elementor-widget-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a8998a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8.5C13.5 6.5 9.5 6 5.5 6.5v18C9.5 24 13.5 24.5 16 26.5c2.5-2 6.5-2.5 10.5-2v-18C22.5 6 18.5 6.5 16 8.5z'/%3E%3Cpath d='M16 8.5v18'/%3E%3C/svg%3E");
  }

  #hero-tags .elementor-column:nth-child(3) .elementor-widget-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a8998a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4.5c4.5 5.5 7 9.4 7 12.7A7 7 0 0 1 9 17.2C9 13.9 11.5 10 16 4.5z'/%3E%3Cpath d='M12.8 17.6a3.3 3.3 0 0 0 3.2 3.4'/%3E%3Cpath d='M11 27.5h10'/%3E%3C/svg%3E");
  }

  #hero-tags .elementor-column:nth-child(4) .elementor-widget-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a8998a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='13' r='7.5'/%3E%3Cpath d='M16 9.5l1.5 2.6 2.9.5-2.1 2 .5 2.9-2.8-1.4-2.8 1.4.5-2.9-2.1-2 2.9-.5z'/%3E%3Cpath d='M11.5 20l-2 7.5 6.5-3 6.5 3-2-7.5'/%3E%3C/svg%3E");
  }

  #hero-tags h3.elementor-heading-title {
    font-family: var(--font-body);
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  #hero-tags .elementor-widget-text-editor,
  #hero-tags .elementor-widget-text-editor p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--taupe-deep);
  }
}

@media (max-width: 1099px) {
  #hero-video .lelicos-hero-visual .elementor-widget-container,
  #hero-video .lelicos-hero-visual .e-hosted-video,
  #hero-video .lelicos-hero-visual .elementor-wrapper {
    height: clamp(360px, 64vw, 580px);
  }
}

@media (max-width: 767px) {
  #hero {
    min-height: 0;
    padding: 0 !important;
  }

  #hero {
    background-image:
      linear-gradient(180deg, rgba(246, 243, 237, 0) 86%, #f6f3ed 100%),
      linear-gradient(168deg, #dcd7d3 0%, #d8d1cb 52%, #cbc1b7 100%);
  }

  /* The sculpture opens the screen, the copy reads underneath it */
  #hero::after {
    top: -1vw;
    right: -16vw;
    left: auto;
    bottom: auto;
    width: 118vw;
    height: 74vw;
    opacity: 1;
    background-image: url("https://lelicos.com/wp-content/uploads/2026/08/lelicos-hero-abstract-client.webp");
    background-position: 58% 44%;
    background-size: cover;
    -webkit-mask-image: radial-gradient(115% 96% at 62% 34%, #000 42%, rgba(0, 0, 0, 0) 84%);
    mask-image: radial-gradient(115% 96% at 62% 34%, #000 42%, rgba(0, 0, 0, 0) 84%);
  }

  #hero > .elementor-container {
    padding: 64vw 1.25rem 2.1rem !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) .elementor-button {
    background: #7d6d5e;
    color: #fffdf9;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-height: 3.15rem;
    border-radius: 999px !important;
    box-shadow: 0 14px 30px rgba(93, 80, 68, 0.22);
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:last-child .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    padding: 0 1.4rem !important;
    background: transparent;
    color: var(--taupe-deep);
    border: 1px solid rgba(119, 105, 93, 0.38);
    border-radius: 999px !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
  }

  img.brand__logo {
    height: 2.3rem !important;
    max-height: 2.3rem !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-heading:first-child {
    margin-bottom: 1.25rem !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-heading:first-child:not(:has(h1)) .elementor-heading-title {
    gap: 0.65rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }

  #hero .elementor-widget-heading:has(h1)::before {
    margin-bottom: 1.05rem;
  }

  #hero h1.elementor-heading-title {
    font-size: clamp(2.15rem, 10.4vw, 2.65rem);
    line-height: 1.04;
  }

  #hero h2.elementor-heading-title {
    font-size: clamp(1.8rem, 8.6vw, 2.2rem);
    line-height: 1.08;
  }

  #hero .elementor-widget-wrap > .elementor-widget-text-editor {
    margin-top: 1.4rem !important;
  }

  #hero .elementor-widget-text-editor,
  #hero .elementor-widget-text-editor p {
    font-size: 0.98rem;
    line-height: 1.68;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) {
    margin-top: 1.55rem !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) .elementor-button {
    width: 100%;
  }

  #hero-video {
    padding: 0 1rem 1.8rem !important;
  }

  #hero-video .lelicos-hero-visual {
    border-radius: 1rem;
    box-shadow: 0 18px 42px rgba(37, 33, 30, 0.1);
  }

  #hero-video .lelicos-hero-visual,
  #hero-video .lelicos-hero-visual .elementor-widget-container,
  #hero-video .lelicos-hero-visual .e-hosted-video,
  #hero-video .lelicos-hero-visual .elementor-wrapper {
    height: clamp(320px, 108vw, 430px);
  }

  #hero-tags {
    padding: 0.4rem 1rem 2.8rem !important;
  }

  #hero-tags > .elementor-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #hero-tags .elementor-column {
    width: 100%;
  }

  #hero-tags .elementor-widget-wrap {
    padding: 1.1rem 0.9rem 1.2rem !important;
  }

  #hero-tags .elementor-column:nth-child(3) {
    border-left: 0;
  }

  #hero-tags .elementor-column:nth-child(3),
  #hero-tags .elementor-column:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  #hero-tags h3.elementor-heading-title {
    font-size: 1.04rem;
  }

  #hero-tags .elementor-widget-text-editor,
  #hero-tags .elementor-widget-text-editor p {
    font-size: 0.76rem;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  #hero .elementor-widget-wrap > .elementor-widget-button {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) {
    margin-top: 1.55rem !important;
    margin-right: 0.85rem !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:not(:last-child) .elementor-button {
    width: auto;
    min-width: 10.75rem;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:last-child {
    align-self: center;
    margin-top: 1.55rem !important;
  }

  #hero .elementor-widget-wrap > .elementor-widget-button:last-child .elementor-widget-container {
    display: flex;
    align-items: center;
    min-height: 3.15rem;
  }
}

/* ——————————————————————————————————————————————————————————
   Feature strip (Онлайн / Посібники / Практика / Сертифікат)
   Section 06e32b0 — same element id on all three language homes.
   Phones read it as a tidy 2x2 grid: equal-height cells, a hairline
   between the two columns and a closing rule under the last row, all
   in the same rgba(37,33,30,.16) the top borders already use.
   Lives in the theme (not in Elementor settings) so publishing from
   the editor can never drop it again.
   —————————————————————————————————————————————————————————— */
@media (max-width: 767px) {
  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column > .elementor-element-populated {
    height: 100%;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* hairline between the left and the right cell of each row */
  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column:nth-child(2n+1) > .elementor-element-populated {
    border-right: 1px solid rgba(37, 33, 30, 0.16);
    padding-right: 1.1rem !important;
  }

  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column:nth-child(2n) > .elementor-element-populated {
    padding-left: 1.1rem !important;
  }

  /* closing rule under the last row, so the block is framed like before */
  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column:nth-last-child(-n+2) > .elementor-element-populated {
    border-bottom: 1px solid rgba(37, 33, 30, 0.16);
  }
}

/* Same hairlines on wide screens: the four cells read as one framed row
   instead of four floating captions. Colour matches the existing top border. */
@media (min-width: 768px) {
  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container {
    align-items: stretch !important;
  }

  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column > .elementor-element-populated {
    height: 100%;
    padding-bottom: 18px !important;
  }

  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column:not(:last-child) > .elementor-element-populated {
    border-right: 1px solid rgba(37, 33, 30, 0.16);
    padding-right: 1.75rem !important;
  }

  .lelicos-elementor-main .elementor-element-06e32b0 > .elementor-container > .elementor-column + .elementor-column > .elementor-element-populated {
    padding-left: 1.75rem !important;
  }
}