/* Beauty Salon Hero — advanced styles v1.3.3 */
:root{
  --bsa-bg: transparent;
  --bsa-fg: #111;
  --bsa-subfg: #444;
  --bsa-safe-pad: clamp(12px, 2vw, 24px);
}
.bsa-hero{ position:relative; width:100%; min-height:100svh; display:grid; place-items:center; overflow:hidden; background:var(--bsa-bg); color:var(--bsa-fg); padding:var(--bsa-safe-pad); box-sizing:border-box; isolation:isolate; }
.bsa-inner{   
  width: min(1280px, 94vw);
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr; /* как у тебя сейчас */
  align-items: center;
  justify-items: stretch;
  gap: clamp(12px, 3vw, 28px); 
}
/* Десктоп: 2 блока по 50% высоты */
@media (min-width: 1024px) {
  .bsa-inner {
    height: 100vh;              /* или 100%, если родитель уже задан по высоте */
    grid-template-rows: 1fr 1fr; /* 50% + 50% */
    align-items: stretch;        /* чтобы блоки тянулись по высоте */
  }
}
/* Title LEFT aligned */
.bsa-titlewrap{ --title-left:6vw; position:relative; display:grid; grid-template-columns:1fr; justify-items:center; align-items:center; width:100%; height:min(42vh,520px); max-width:100%; }
.bsa-c{ font-weight:800; line-height:.85; letter-spacing:0; display:inline-block; position:absolute; left:var(--c-left, var(--title-left)); top:50%; --tx: var(--c-x, 0); --ty: var(--c-y, 0); transform: translate(var(--tx), calc(-50% + var(--ty))); z-index:2; -webkit-text-fill-color:currentColor; }
.bsa-rest{ font-weight:700; line-height:1; display:inline-block; position:absolute; left:var(--rest-left, var(--title-left)); top:50%; --tx: var(--rest-x, 0); --ty: var(--rest-y, 0); transform: translate(var(--tx), calc(-50% + var(--ty))); z-index:1; white-space:nowrap; will-change:transform; }

/* Logos */
.bsa-logos{ width:100%; height: 100%; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); align-items: center;}
@media (max-width:768px){ .bsa-logos{ grid-template-columns:2fr; grid-template-rows:1fr 1fr; } 
.bsa-logo--1 .bsa-logo-img {
    max-height: 80px;
    margin: 0 auto 10px auto;
  }
.bsa-logo--2 .bsa-logo-img img {
    max-width: 200px !important;
    max-height: 90px;
    margin: -10px 20% 0px 20%;
  }
}
.bsa-logo{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; max-width:min(46vw,520px); }
.bsa-logo-img{ display:block; width:auto; height:auto; max-width:none; transform-origin:center; opacity:0; }
.bsa-logo-line{ opacity:0; transform: translateY(10px); }
.bsa-logo-link, .bsa-line-link{ opacity:0; display:inline-block; transform: translateY(10px); transition: color .25s ease, opacity .25s ease; }
.bsa-logo-link:hover, .bsa-line-link:hover{ opacity:1; }

/* Bottom */
.bsa-bottom{ width:100%; text-transform:uppercase; font-weight:900; text-align:center; letter-spacing:clamp(.04em,1vw,.14em); font-size:clamp(24px,8.5vw,140px); line-height:1; will-change:transform; }
.bsa-bottom .bsa-letter{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.bsa-bottom .bsa-letter > span{ display:inline-block; transform: translateY(100%); }

/* Animations */
.bsa-run .bsa-c, .bsa-run .bsa-rest{ animation: bsa-title-enter var(--bsa-title-dur,1400ms) cubic-bezier(.22,1,.36,1) var(--bsa-title-delay,0ms) both; }
.bsa-run .bsa-rest{ animation-delay: calc(var(--bsa-title-delay,0ms) + var(--bsa-rest-extra-delay,220ms)); }
@keyframes bsa-title-enter{
  0%  { opacity:0; transform: translate(calc(var(--tx,0) + var(--bsa-title-start-x,0)), calc(-50% + var(--ty,0) + var(--bsa-title-start-y,0))) scale(var(--bsa-title-start-scale,8)); }
  60% { opacity:1; transform: translate(var(--tx,0), calc(-50% + var(--ty,0))) scale(1); }
  100%{ opacity:1; transform: translate(var(--tx,0), calc(-50% + var(--ty,0))) scale(var(--bsa-title-settle-scale,1.03)); }
}

.bsa-run .bsa-logo--1 .bsa-logo-img{ animation: bsa-entity-enter var(--bsa-logos-dur,1100ms) cubic-bezier(.22,1,.36,1) calc(var(--bsa-logos-delay,1200ms)) both; --start-x: var(--bsa-logo1-start-x, 0); --start-y: var(--bsa-logo1-start-y, 0); }
.bsa-run .bsa-logo--2 .bsa-logo-img{ animation: bsa-entity-enter var(--bsa-logos-dur,1100ms) cubic-bezier(.22,1,.36,1) calc(var(--bsa-logos-delay,1200ms) + var(--bsa-logos-stagger,250ms)) both; --start-x: var(--bsa-logo2-start-x, 0); --start-y: var(--bsa-logo2-start-y, 0); }
@keyframes bsa-entity-enter{
  0%  { opacity:0; transform: translate(var(--start-x,0), var(--start-y,0)) scale(var(--bsa-logo-start-scale,6)); }
  60% { opacity:1; transform: translate(0, 0) scale(1); }
  100%{ opacity:1; transform: translate(0, 0) scale(var(--bsa-logo-settle-scale,1.03)); }
}
.bsa-run .bsa-logo--1 .bsa-logo-line.l1{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + 300ms) both; }
.bsa-run .bsa-logo--1 .bsa-logo-line.l2{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + 520ms) both; }
.bsa-run .bsa-logo--1 .bsa-logo-link   { animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + 740ms) both; }
.bsa-run .bsa-logo--1 .bsa-line-link.l1{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + 900ms) both; }
.bsa-run .bsa-logo--1 .bsa-line-link.l2{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + 1060ms) both; }
.bsa-run .bsa-logo--2 .bsa-logo-line.l1{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + var(--bsa-logos-stagger,250ms) + 300ms) both; }
.bsa-run .bsa-logo--2 .bsa-logo-line.l2{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + var(--bsa-logos-stagger,250ms) + 520ms) both; }
.bsa-run .bsa-logo--2 .bsa-logo-link   { animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + var(--bsa-logos-stagger,250ms) + 740ms) both; }
.bsa-run .bsa-logo--2 .bsa-line-link.l1{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + var(--bsa-logos-stagger,250ms) + 900ms) both; }
.bsa-run .bsa-logo--2 .bsa-line-link.l2{ animation: bsa-fadeUp 520ms ease calc(var(--bsa-logos-delay,1200ms) + var(--bsa-logos-stagger,250ms) + 1060ms) both; }
@keyframes bsa-fadeUp{ from{opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }

/* Bottom */
.bsa-run .bsa-bottom .bsa-letter > span{ animation: bsa-curtain var(--bsa-bottom-dur,700ms) cubic-bezier(.22,1,.36,1) both; }
@keyframes bsa-curtain{
  0%  { transform: translate(calc(var(--bsa-bottom-start-x,0)), calc(100% + var(--bsa-bottom-start-y,0))) scale(var(--bsa-bottom-start-scale,8)); }
  60% { transform: translate(0,0) scale(1); }
  100%{ transform: translate(0,0) scale(var(--bsa-bottom-settle-scale,1.02)); }
}

/* Reverse */
.bsa-reverse .bsa-c, .bsa-reverse .bsa-rest, .bsa-reverse .bsa-logo-img, .bsa-reverse .bsa-logo-line, .bsa-reverse .bsa-logo-link, .bsa-reverse .bsa-line-link, .bsa-reverse .bsa-bottom .bsa-letter > span{ animation-direction: reverse !important; }

@media (prefers-reduced-motion: reduce){ .bsa-c, .bsa-rest, .bsa-logo-img, .bsa-logo-line, .bsa-logo-link, .bsa-line-link, .bsa-bottom .bsa-letter > span{ animation:none !important; transform:none !important; opacity:1 !important; } }

/* Split background images for logo halves */
.bsa-hero::before,
.bsa-hero::after{
  content:"";
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
}
.bsa-hero::before{
  left:0;
  background-image:linear-gradient(rgba(72, 78, 19, 0.7), rgba(72, 78, 19, 0.7)),
    var(--bsa-bg1-image, none) !important;
}
.bsa-hero::after{
  left:auto;
  right:0;
  background-image:linear-gradient(rgba(72, 78, 19, 0.7), rgba(72, 78, 19, 0.7)),
    var(--bsa-bg2-image, none) !important;
}

/* Ensure content is above backgrounds */
.bsa-inner{
  position:relative;
  z-index:1;
}

@media (max-width:768px){
  .bsa-hero::before,
  .bsa-hero::after{
    width:100%;
    height:50%;
    left:auto;
  }
  .bsa-hero::before{
    top:0;
  }
  .bsa-hero::after{
    top:50%;
    right:auto;
  }
  .bsa-inner {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr; /* как у тебя сейчас */
  align-items: center;
  justify-items: stretch; 
  }
  .bsa-logo {
  padding-top: 25% !important;
  align-items: top;
  justify-items: stretch;
  }
}

/* Mobile duplicated titles above logos */
.bsa-mobile-title{
  display:none;
  width:100%;
  margin-bottom:0.75rem;
}
@media (max-width:768px){
  .bsa-titlewrap{
    display:none;
  }
  .bsa-c {
    margin: 0 auto;
    left: 0;
    top: 3vh !important;
  }
  .bsa-rest {
    margin: 0 auto;
    left: 3vw;
    top: 3vh !important;
  }
  .bsa-mobile-title{
    display:block;
    position:absolute;
    top: 0;
    left:0;
    min-width: 100px;
    margin: 0 auto 0 auto;
    flex: 1;
    max-width: 100%;
    transform: translateX(0%);
    white-space: nowrap;
  }
.bsa-logo--1 .bsa-logo-img {
    max-height: 80px;
    margin: 0 auto 10px auto;
  }
.bsa-logo--2 .bsa-logo-img {
    max-height: 90px;
    margin: -10px auto 0px auto;
  }
}

/* Extra buttons under logos */
.bsa-logo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0.5rem;
  padding:0.6em 1.4em;
  border-radius:999px;
  border:1px solid currentColor;
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.bsa-logo-btn:hover,
.bsa-logo-btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Side SVGs around logos */
.bsa-logo{
  position:relative;
}
.bsa-logo-side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  max-width:30%;
}
.bsa-logo-side--left{
  left:0;
  transform:translate(-50%, -50%);
}
.bsa-logo-side--right{
  right:0;
  transform:translate(50%, -50%);
}
.bsa-logo-side-img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width:768px){
  .bsa-logo{
    padding-inline:min(4vw, 32px);    
    margin: auto auto !important;
    max-width: 94vw;
  }
}