html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

:root{--bg:#f1f1f1;--ink:#1A1A1A;--green:#FDB10B;--red:#B20000;--container:1160px;--shadow:0 12px 28px rgba(0,0,0,.12)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit}
.site-header{position:sticky;top:0;z-index:50;background:#000;backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #222}
.topbar{max-width:var(--container);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none}.brand img{width:40px;height:40px;border-radius:8px}.brand b{font-weight:900}
.site-header,.site-header a,.brand b{color:#fff}
.hamburger{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;background:transparent;border:1px solid #000;border-radius:10px}
.hamburger span,.hamburger span:before,.hamburger span:after{content:'';display:block;width:22px;height:3px;background:#fff;border-radius:3px;position:relative}
.hamburger span:before{position:absolute;top:-6px}.hamburger span:after{position:absolute;top:6px}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,88%);
  background:#fff;border-left:1px solid #e1eaf7;transform:translateX(102%);transition:.3s;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.drawer.open{transform:translateX(0)}.drawer .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef3fb}
nav ul{list-style:none;margin:0;padding:0}nav a,nav button.menu{display:block;width:100%;padding:16px 18px;border:0;background:none;text-align:left;font:700 17px/1.2 system-ui;border-bottom:1px solid #f1f5fb;cursor:pointer}
.sub{display:none}.sub.open{display:block}.sub a{padding-left:34px}
.container{max-width:var(--container);margin:0 auto;padding:22px 16px}
.pagetitle{text-align:center;color:#000;font-weight:900;font-size:clamp(20px,3.2vw,28px);margin:14px 0}
h1{font-size:clamp(22px,3vw,30px);margin:0 0 10px;font-weight:900}
h2{font-size:clamp(22px,3vw,30px);margin:0 0 10px;font-weight:900}
p{margin:.35rem 0}
.overlay{background:var(--red);color:#fff;padding:22px;border-radius:0;box-shadow:var(--shadow)}
.cta{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:12px 18px;border-radius: 8px;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.block3{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.block3 .mid img{width:280px;height:auto;display:block;box-shadow:var(--shadow)}
@media(max-width:960px){.block3{grid-template-columns:1fr}.block3 .mid{order:-1;text-align:center}.block3 .mid img{width:68%}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:960px){.grid2{grid-template-columns:1fr}}
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.count{background:#fff;text-align:center;padding:12px;border:2px solid #ffe3e3;box-shadow:var(--shadow)}
.count .num{font:900 clamp(26px,5vw,40px)/1 system-ui;color:#B20000}
.footer{margin-top:28px;background:#111;color:#fff}
.footer .inner{max-width:var(--container);margin:0 auto;padding:18px;display:flex;justify-content:space-between}
.footer {
  background: #000;
  color: #ffffff;
  padding: 10px 0;          
}

.footer .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-left span {
  font-size: 17px;
  opacity: 0.9;
}

.footer-credit {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}



.footer-center {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex: 1;
  text-align: center;
}

.footer-center a {
  color: #FDB10B;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.footer-center a:hover {
  opacity: 0.8;
}

.footer-right {
  display: flex;
  align-items: center;   
  gap: 12px;
}

.footer-brand {
  text-align: right;
  font-size: 44px;      
  font-weight: 900;       
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

.footer-logo {
  width: 46px;         
  height: auto;
  object-fit: contain;
}

.footer-credit a {
  color: rgb(165, 77, 153);
  font-weight: 600;
}
.footer-credit a:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .footer-right {
    flex-direction: column;
    gap: 6px;
  }

  .footer-brand {
    font-size: 15px;
  }

  .footer-logo {
    width: 50px;
  }
}

.footer-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ссылки */
.footer-links {
  display: flex;
  gap: 20px;
  width: 10px;
}

.footer-links a {
  color: #FDB10B;
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer .copyright {
  font-size: 14px;
  opacity: 0.8;
}

.drawer{
  background:#fff;            
  color: #5f004f;
  border-left: none;
  overflow-y: auto;
  max-height: 100vh;
}

.drawer nav a,
.drawer nav button.menu{
  background: transparent;
  color: #5f004f;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.drawer nav a:hover,
.drawer nav button.menu:hover{
  border-bottom-color: transparent;
  background: rgba(229, 185, 235, 0.04);
}

.drawer nav a.current,
.drawer nav a:active{
  background: rgba(87, 0, 72, 0.288); 
  border-bottom-color: transparent;
}
.hamburger span,
.hamburger span:before,
.hamburger span:after{
  background: #fff;
}

body.menu-open .hamburger span,
body.menu-open .hamburger span:before,
body.menu-open .hamburger span:after {
  background: #000;
}



/* ==== GALLERY / PROJECTS PAGE ==== */

.gallery-page {
  font-family: Arial, sans-serif;
  margin: 40px auto;
  max-width: 1200px;
  text-align: center;
}

.gallery-tabs {
  display: flex;
  justify-content: center; 
  gap: 12px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.gallery-tab {
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  border-radius: 14px;
  background-color: #5f004f; 
  color: white;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.3s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.gallery-tab:hover {
  background-color: #500043;
  transform: translateY(-2px);
}

.gallery-tab.active {
  background-color: #4b003e; 
  color: white;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(142, 35, 151, 0.4);
}

.gallery-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

.gallery-content.active {
  display: block;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.gallery-page img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  margin: 8px;
}

.gallery-page img:hover {
  transform: scale(1.03);
}

.page-hero.gradient {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #fff 0%, #D9D9D9 55%, #B20000 100%);
  padding: 40px 0;
  box-shadow: var(--shadow);
}

.page-hero.gradient .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 30px 0 0;
  gap: 30px;
}

.page-hero.gradient .cutout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 240px; 
  height: auto;
  object-fit: contain;
  transform: translateX(-40px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.2));
  z-index: 2;
}

.page-hero.gradient .hero-text {
  flex: 1;
  margin-left: 280px; 
  color: #000;
  z-index: 3;
  position: relative;
  text-align: center;
}

.page-hero.gradient .hero-text h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.page-hero.gradient .hero-text p {
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  color: #000;
  margin: 0 0 24px;
  max-width: 520px;
}

.page-hero.gradient .hero-text .cta {
  display: inline-block;
  background: #FDB10B;
  color: #fff;
  padding: 14px 26px;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  text-transform: uppercase;
  transition: 0.25s;
}
.page-hero.gradient .hero-text .cta:hover {
  background: #FDB10B;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .page-hero.gradient {
    padding: 30px 10px;
    background: linear-gradient(90deg, #fff 0%, #D9D9D9 60%, #B20000 100%);
  }

  .page-hero.gradient .hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }

  .page-hero.gradient .cutout {
    position: relative;
    transform: none;
    width: 130px;
    max-width: 40%;
    flex-shrink: 0;
  }

  .page-hero.gradient .hero-text {
    margin: 0;
    text-align: left;
  }

  .page-hero.gradient .hero-text h1 {
    font-size: clamp(20px, 5vw, 28px);
  }

  .page-hero.gradient .hero-text p {
    font-size: clamp(14px, 4vw, 16px);
    margin-bottom: 14px;
  }

  .page-hero.gradient .hero-text .cta {
    padding: 10px 18px;
    font-size: 14px;
  }
}
.section-title-bar {
  max-width: var(--container);
  margin: 26px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.section-title-bar .line {
  flex: 1 1 140px;
  height: 3px;
  background: linear-gradient(90deg, #D9D9D9 0%, #B20000 100%);
  border-radius: 10px;
}

.section-title-bar .text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.section-title-bar .text {
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A1A1A;
}

.section-title-bar .subtitle {
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 500;
  color: #000;
  margin: 0;
}

/* мобилка */
@media (max-width: 700px) {
  .section-title-bar {
    gap: 10px;
  }
  .section-title-bar .line {
    flex-basis: 60px;
  }
  .section-title-bar .text {
    font-size: 16px;
  }
  .section-title-bar .subtitle {
    font-size: 13px;
  }
}
/* 1. ШАПКА С ПОЛОСКАМИ */
.section-title-bar {
  max-width: var(--container);
  margin: 26px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.section-title-bar .line {
  flex: 1 1 140px;
  height: 3px;
  background: linear-gradient(90deg, #D9D9D9 0%, #5f004f 100%);
  border-radius: 10px;
}

.section-title-bar .text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.section-title-bar .text {
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B20000;
  white-space: nowrap;
}

.section-title-bar .subtitle {
  font-size: clamp(13px, 1.6vw, 15px);
  color: #B20000;
  margin: 0;
}

/* На телефоне линии должны быть РЯДОМ с названием, как ты просила */
@media (max-width: 700px) {
  .section-title-bar {
    gap: 8px;
  }
  .section-title-bar .line {
    flex-basis: 50px;
  }
  .section-title-bar .text {
    white-space: normal;
  }
}
.page-hero.gradient {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #D9D9D9 0%, #E6CFCF 40%, #C55050 75%, #B20000 100%);
  padding: 38px 0;
  box-shadow: var(--shadow);
}

.page-hero-wide {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: linear-gradient(90deg, #fff 0%, #fff 65%, #003366 100%);
  box-shadow: var(--shadow);
  padding: 50px 0 46px;       
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

.page-hero-wide .hero-inner {
  position: relative;
  display: flex;
  align-items: center;         
  justify-content: flex-start;
  max-width: var(--container);
  margin: 0 auto;
  gap: 40px;
  padding: 0 20px;
  position: relative;
  min-height: 230px;           
}

.page-hero-wide .cutout {
  position: absolute;
  bottom: -4px;              
  left: 0;
  width: 210px;
  height: auto;
  object-fit: contain;
  transform: translateX(20px);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  pointer-events: none;
  z-index: 2;
}

.page-hero-wide .hero-text {
  margin-left: 180px;          
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero.gradient .hero-text h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.page-hero.gradient .hero-text p {
  font-size: clamp(16px, 2.3vw, 20px);
  margin: 0 0 20px;
  max-width: 560px;
}

.page-hero.gradient .hero-text .cta {
  display:inline-block;
  background:#fff;
  color:#B20000;
  padding:12px 20px;
  border-radius:6px;
  font-weight:800;
  text-decoration:none;
  text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  transition:.2s;
}
.page-hero.gradient .hero-text .cta:hover {
  background:#FDB10B;
  color:#fff;
  transform:translateY(-2px);
}

@media (max-width: 900px) {
  .page-hero.gradient {
    padding: 30px 10px 40px;
    background: linear-gradient(90deg, #fff 0%, #fff 60%, #B20000 100%);
  }

  .page-hero.gradient .hero-inner {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: end;
    gap: 16px;
  }

  .page-hero.gradient .cutout {
    position: static; 
    transform: none;
    width: 110px;
    height: auto;
    justify-self: start;
  }

  .page-hero.gradient .hero-text {
    margin-left: 0;
    text-align: left;
    align-self: end;
  }

  .page-hero.gradient .hero-text h1 {
    font-size: 20px;
  }

  .page-hero.gradient .hero-text p {
    font-size: 14px;
  }
}
  .page-hero.gradient .hero-text .cta {
    padding: 8px 14px;
    font-size: 13px;
  }

.page-hero-wide {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: linear-gradient(90deg, #fff 0%, #fff 65%, #5f004f 100%);
  box-shadow: var(--shadow);
  padding: 10px 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

.page-hero-wide .hero-inner {
  display: flex;
  align-items: center;          
  justify-content: flex-start;    
  max-width: var(--container);
  margin: 0 auto;
  gap: 40px;
  padding: 0 20px;
  position: relative;              
}

.page-hero-wide .cutout {
  width: 300px;
  height: auto;
  object-fit: contain;
  margin-left: -60px;             
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  position: relative;
  bottom: -150px;                  
}


.page-hero-wide .hero-text {
  color: #000;
  flex: 1;
  text-align: center;     
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;   
}

.page-hero-wide .hero-text h1 {
  font-size: clamp(34px, 5vw, 35px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 1px;
  margin: 0 0 14px;
  text-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

.page-hero-wide .hero-text p {
  font-size: clamp(18px, 2vw, 16px);
  margin: 0 0 20px;
  max-width: 520px;
  line-height: 1.4;
}

.page-hero-wide .cta {
  background: #FDB10B;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.2s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.page-hero-wide .cta:hover {
  background: #FDB10B;
  color: #fff;
  transform: translateY(-2px);
}

/* Мобильная адаптация */
@media (max-width: 900px) {
  .page-hero-wide .hero-inner {
    flex-direction: row;
    gap: 20px;
  }
  .page-hero-wide .cutout {
    width: 200px;
    margin-left: -20px;
  }
  .page-hero-wide .hero-text h1 {
    font-size: 20px;
  }
  .page-hero-wide .hero-text p {
    font-size: 14px;
  }
}

.orange-texture{
  position:relative;
  background:linear-gradient(180deg,#FFD166 0%,#F5A623 100%);
  overflow:hidden;
  padding:60px 0;           
}

.orange-texture::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

.orange-texture::after{
  content:"";
  position:absolute;
  inset:-6% -4%;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(circle at 85% 40%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(circle at 50% 95%, rgba(0,0,0,.12), transparent 65%);
  opacity:1;
  pointer-events:none;
  z-index:0;
}

.orange-texture > *{
  position:relative;
  z-index:1;
}

.orange-texture::after{
  content:"";
  position:absolute; inset:-8% -4%;
  pointer-events:none; z-index:0;
  background-image:
    radial-gradient(closest-side at 15% 20%, rgba(255,255,255,.25), transparent 65%),
    radial-gradient(closest-side at 80% 35%, rgba(255,255,255,.18), transparent 65%),
    radial-gradient(closest-side at 55% 88%, rgba(0,0,0,.12), transparent 60%);
  mix-blend-mode:overlay;
  opacity:.85;
}

.cards-grid{
  position:relative;
  z-index:1;                    
  max-width:var(--container);
  margin:0 auto;             
  padding:0 34px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

.card{
  background:#fff;
  color:#1A1A1A;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  padding:22px 20px 20px;
  text-align:center;
}
.card h2{
  margin:0 0 10px;
  color:var(--red);
  font-weight:800;
  text-transform: uppercase;
}
.card p{ margin:6px 0; }
.card ul{ margin:6px 0 0 18px; text-align:left; }

.card .cta{
  display:inline-block;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
  margin-top:8px;
}

@media (max-width: 900px){
  .cards-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

.page-hero-wide {
  min-height: 240px;      
  padding: 0;              
  display: flex;
  align-items: flex-end; 
}

.page-hero-wide .hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-end;   
  padding: 0 20px;
}

.page-hero-wide .cutout {
  position: relative;
  bottom: 0;              
}

.page-hero-wide .hero-text {
  text-align: center;
}
.page-hero-wide .hero-inner {
  display: flex;
  align-items: center !important;
  justify-content: flex-start;
  max-width: var(--container);
  margin: 0 auto;
  gap: 40px;
  padding: 0 20px;
  position: relative;
}

.page-hero-wide .hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;      
  text-align: center;
  transform: translateY(0); /* обнуляем смещения, если были */
}
.page-hero-wide {
  padding-top: -150px;
  padding-bottom: 10px;
}
/* Оранжевая/фиолетовая текстурная секция — на всю ширину */
.orange-texture {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(180deg, #5f004f 0%, #3f0036 100%);
  overflow: hidden;
  padding: 60px 0;
}

/* шум поверх */
.orange-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* светлые/тёмные пятна */
.orange-texture::after {
  content: "";
  position: absolute;
  inset: -8% -4%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(closest-side at 15% 20%, rgba(255,255,255,.25), transparent 65%),
    radial-gradient(closest-side at 80% 35%, rgba(255,255,255,.18), transparent 65%),
    radial-gradient(closest-side at 55% 88%, rgba(0,0,0,.12), transparent 60%);
  mix-blend-mode: overlay;
  opacity: .85;
}

/* контент внутри */
.orange-texture .cards-grid,
.orange-texture > .container-like {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) {
  .page-hero-wide {
    padding: 16px 0;
  }

  .page-hero-wide .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  /* СБРОСИТЬ все «фокусы» с фото */
  .page-hero-wide .cutout {
    position: static;      /* не absolute и не со сдвигом */
    bottom: auto;
    margin-left: 0;
    width: 120px;          /* чтобы поместилось */
    flex-shrink: 0;
  }

  .page-hero-wide .hero-text {
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
  }

  .page-hero-wide .hero-text h1 {
    font-size: 19px;
    line-height: 1.1;
  }

  .page-hero-wide .hero-text p {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .page-hero-wide .cta {
    padding: 8px 14px;
    font-size: 13px;
  }
}
/* === 1. ХЕРО-БЛОК: картинка слева внизу на десктопе === */
.page-hero-wide {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(90deg, #fff 0%, #f9eafc 75%, #6c0081 100%);
  box-shadow: var(--shadow);
  padding: 10px 0 14px;           /* сверху 40, снизу 16 */
}

.page-hero-wide .hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;            /* текст по центру по вертикали */
  gap: 0px;
  padding: 0 20px;
  min-height: 210px;
  position: relative;
}

/* картинка у левого нижнего края */
.page-hero-wide .cutout {
  position: absolute;
  right: 10px;
  bottom: -20;
  width: 280px;
  height: auto;
  transform: translateX(-15px);   /* сдвиг за край */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  pointer-events: none;
}

/* текст справа от фото */
.page-hero-wide .hero-text {
  margin-left: 200px;             /* чтобы не наехал на фото */
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
}

/* === 2. ОТСТУП МЕЖДУ ГРАДИЕНТОМ И ФИОЛЕТОВОЙ СЕКЦИЕЙ === */
.orange-texture {
  margin-top: 40px;               /* на компе — 40px */
}

/* на телефоне тоже добавим отступ, чтобы не липло */
@media (max-width: 900px) {
  .orange-texture {
    margin-top: 28px;
  }

  .page-hero-wide .hero-inner {
    display: grid;
    grid-template-columns: 115px 2fr; /* ← фото уже, текст шире */
    align-items: center;
    gap: 8px;                        /* ← расстояние между ними меньше */
  }

  /* и на телефоне пусть картинка станет обычной, чтобы не обрезалась */
  .page-hero-wide .cutout {
    position: relative;
    left: -20;
    bottom: 0;
    justify-self: start;
    transform: translateX(-40px);
    width: 200px;
    margin-left: 10;
  }
  .page-hero-wide .hero-text {
    margin-left: 0;
    text-align: center;
    align-items: center;
  }
}
/* === Анимация появления карточек при скролле === */
.orange-texture .card {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .5s ease;
}

.orange-texture .card.show {
  opacity: 1;
  transform: translateY(0);
}
/* === Настройки для десктопа (градиент и текст) === */
@media (min-width: 901px) {
  /* увеличиваем вертикальный размер градиента */
  .page-hero-wide {
    padding-top: 60px;   /* было 40 — добавили воздуха сверху */
    padding-bottom: 50px; /* можно 50–70, подбирай по фото */
    min-height: 320px;   /* задаём минимальную высоту */
  }

  /* немного двигаем фото, если оно стало крупнее */
  .page-hero-wide .cutout {
    width: 360px;          /* увеличенное фото */
    right: 0;
    bottom: 0;
    transform: translateX(-40px); /* чтобы не выходило за край */
  }

  /* текст справа — чуть шире и жирнее */
  .page-hero-wide .hero-text {
    margin-left: 220px; /* сдвиг от фото */
    text-align: center;
  }

  .page-hero-wide .hero-text h1 {
    font-size: clamp(38px, 5vw, 52px); /* немного больше */
    font-weight: 900;                  /* очень жирный */
  }

  .page-hero-wide .hero-text p {
    font-size: clamp(15px, 2vw, 19px); /* чуть крупнее */
    font-weight: 200;                  /* полужирный текст */
    max-width: 600px;
  }
}
@media (min-width: 901px) {
  /* Секция с градиентом — немного больше по высоте */
  .page-hero-wide {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 340px; /* можно 320–380 */
  }

  /* Фото — чуть правее, чтобы не вылезало за экран */
  .page-hero-wide .cutout {
    position: absolute;
    right: 60px;              /* ← сдвигаем внутрь */
    bottom: 0;
    width: 360px;             /* подгони по размеру */
    transform: translateX(-40px);          /* убираем прежний translateX */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
    z-index: 2;
  }

  /* Текст можно чуть сузить, чтобы фото могло немного налезать */
  .page-hero-wide .hero-text {
    margin-left: 200px;       /* уменьшили, чтобы фото могло заходить */
    position: relative;
    z-index: 3;               /* текст выше фона, но под фото */
    max-width: 600px;
  }

  /* Немного увеличим текст и жирность */
  .page-hero-wide .hero-text h1 {
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 900;
  }

  .page-hero-wide .hero-text p {
    font-size: clamp(23px, 2vw, 22px);
    font-weight: 400;
  }
}

/* текст внутри белых карточек — по ширине */
.orange-texture .card p,
.orange-texture .card ul,
.orange-texture .card li {
  text-align: justify;
}
/* текст в карточках по ширине */
.card p {
  text-align: justify;
}

/* а кнопка всегда по центру */
.card .cta {
  display: block;
  width: max-content;   /* по содержимому */
  margin: 14px auto 0;  /* ← авто по бокам = центр */
  text-align: center;
}



/* вертикальная надпись, свисающая на фиолетовую */
.page-hero-wide {
  position: relative; /* обязательно, чтобы vm-word цеплялась */
  overflow: visible; /* ← вот это главное */
}

.vm-word {
  position: absolute;
  top: 40px;          /* можно 0, можно -30 — двигаешь вверх */
  left: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-weight: 300;
  font-size: 92px;
  line-height: 1;
  color: #B20000;
  opacity: 1;
  pointer-events: none;
  z-index: 1;          /* ниже карточек */
  bottom: -170px;        /* тянем вниз за градиент */
}


/* а фиолетовую секцию подними выше по z, чтобы карточки были над текстом
.orange-texture,
.orange-texture .cards-grid,*/
.orange-texture .card {
  position: relative;
  z-index: 2;
}

/* на телефоне можно скрыть */
@media (max-width: 900px) {
  .vm-word { display: none; }
}


.apply-page {
  padding: 34px 0 50px;
  margin-bottom: -28px;

  /* фон-картинка — путь из ПАПКИ css */
  background-image: url("../img/photos/photo_5829036753103293238_y.jpg");
  /* если файл называется иначе — подставь своё точное имя */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative; /* нужно для ::before */
}

.apply-page::before {
  content: "";
  position: absolute;
  inset: 0;
   /* background: rgba(0,0,0,0.35);затемнение, можно сделать 0.2 или 0 убрать */
  z-index: 0;
}

/* всё содержимое поверх затемнения */
.apply-wrap,
.apply-photo,
.apply-form {
  position: relative;
  z-index: 1;
}

.apply-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: relative;
  width: 50%;
     /* grid-template-columns: 1fr 330px;форма + фото */
  gap: 26px;
  align-items: flex-start;
}

.apply-form {
  background: rgba(247, 233, 233, 0.555);           /* ← ярко-жёлтая сама форма */
  border-radius: 20px;
  padding: 22px 22px 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  color: #5f004f;
  align-items: center;
}

.apply-form h1,
.apply-form h2,
.apply-form h3 {
  margin-top: 0;
}

.apply-form input,
.apply-form select,
.apply-form textarea {
  width: 100%;
  border: 0;
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  margin-bottom: 10px;
}

.apply-form .cta {
  display: inline-block;
  background: rgb(95, 0, 79);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}



/* на телефоне — в столбик */
@media (max-width: 900px) {
  .apply-wrap {
    display: relative;
    width: 100%;
  }
}
/* общая строка с чекбоксом */
.checkline {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 0;
}

.checkline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.checkline span {
  flex: 1;
}

/* маленькие чекбоксы в after-school тоже подровняем */
#sec-after label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 6px;
}
#sec-after input[type="checkbox"] {
  width: 16px;
  height: 16px;
}


.header-icons a {
  text-decoration: none;
  color: #fff;
}

/* размеры ТОЛЬКО для круглых иконок */
.header-icons .contact-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  color: #fff;
}


.header-icons {
  display: flex;
  gap: 10px;
  margin-left: auto;    /* ← чтобы они встали у правого края, перед бургером */
  margin-right: 12px;
  align-items: center;
   position: relative; /* чтобы попап был около иконок */
}


.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  background: rgba(0,0,0,.12);
  cursor: pointer;
}

.phone-popover {
  position: absolute;
  top: 44px;            /* ниже иконок */
  right: 0;             /* у правого края блока иконок */
  background: #fff;
  color: #000;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.25);
  display: none;
  z-index: 180;
  min-width: 165px;     /* чтобы номер влез */
  white-space: nowrap;
}
.phone-popover a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

/* на телефоне показываем сразу звонок, попап не нужен */
@media (max-width: 900px) {
  .phone-popover { display: none !important; }
  .phone-trigger {
    /* можно сделать чуть больше на мобиле */
    width: 34px;
    height: 34px;
  }
}

.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.check-row label {
  display: flex;
  gap: 6px;
  align-items: center;
}
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* === TEAM CAROUSEL === */
.team-carousel {
  max-width: var(--container);
  overflow:hidden;
  margin: 40px auto 70px;
  position: relative;
}
.team-title {
  margin-bottom: 16px;
}
.team-window {
  overflow: hidden;
}
.team-track {
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform .35s ease;
}
.team-card {
  min-width: calc(33% - 12px); /* даст примерно 2.5 на десктопе при контейнере */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}
.team-card .photo {
  background: #f3f3f3;
  height: 140px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.team-prev,
.team-next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: #5f004f;
  color: #fff;
  cursor: pointer;
}
.team-prev { left: 0px; }
.team-next { right: 0px; }

@media (max-width: 900px) {
  .team-card {
    min-width: 70%;
  }
}


.header-icons {
  position: relative;
}

.phone-popover {
  position: absolute;
  top: 42px;        /* сразу под иконками */
  right: 0;
  background: #fff;
  color: #000;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.25);
  display: none;
  z-index: 300;
  min-width: 200px; /* ← шире */
  white-space: nowrap;
}

.phone-popover a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

/* на телефоне попап не нужен */
@media (max-width: 900px){
  .phone-popover { display: none !important; }
}

/* шапка всегда сверху */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

/* чтобы контент не уехал под шапку */
body {
  padding-top: 64px; /* под высоту твоей шапки */
}

/* на главной пагетайтл не нужен */
.pagetitle {
  display: none;
}

 
.team-card .photo {
  background: #f3f3f3;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;           /* ← чтобы не торчало */
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* ← заполнить карточку */
  display: block;
}


/* --- карточки команды --- */
.team-card .photo {
  background: #f3f3f3;
  height: 210px;             /* было 140 —  выше */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* подрезать по карточке */
  display: block;
}


/* --- карточки команды: выше и фото влезает --- */
.team-title {
  color:#B20000;
}
.team-card .photo {
  background: #f3f3f3;
  height: 280px;            /* выше вертикально */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card .photo img {
  height: 100%;             /* уменьшаем фото */
  width: 100%;              /* в ширину не растягиваем */
  object-fit: cover;
  display: block;
}

/* --- meet our team: уже, но выше --- */
.team-window {
  overflow: hidden;
}

.team-card {
  min-width: 180px;      /* было шире — сделала уже */
  max-width: 210px;
}

.team-card .photo {
  height: 210px;         /* повыше, чтобы фото влезло */
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card .photo img {
  max-height: 120%;
  width: auto;
  object-fit: cover;
  display: block;
}
.team-card h3 {
  color:#B20000;
}

.team-card p {
  color:#B20000;
}

/* заголовок над видео */
.hero-page-title {
  text-align:center; color:#B20000;
  max-width: var(--container);
  margin: 0 auto 8px;
  padding: 0 16px;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
}

/* видео на всю ширину страницы, без 100vw и без скроллов */
.hero-video {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 520px;               /* тут регулируешь высоту видео */
  overflow: hidden;
}

/* само видео фоном */
.hero-video .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;  /* двигаешь число – какая часть кадра видна */
}

/* слой с контентом внутри видео */
.hero-video .hero-content {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 20px 16px 110px;     /* снизу оставили место под кнопку */
}

/* стеклянный блок с achievements */
.hero-video .hero-glass {
  position: absolute;
  top: 20px;                    /* выше/ниже — меняешь это число */
  right: 16px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.hero-video .hero-glass h2 {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

/* ВАЖНО: убираем белые карточки именно в hero */
.hero-video .hero-glass .count {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-width: auto;
  text-align: left;
  color: #000;
}
.hero-video .hero-glass .count .num {
  font-size: 18px;             /* если мелко — поставь 20 */
  font-weight: 800;
  line-height: 1;
}
.hero-video .hero-glass .count div:last-child {
  font-size: 12px;
  line-height: 1.1;
}


/* кнопка снизу по центру */
.hero-video .hero-cta {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  z-index: 10;
   display: flex;              
  flex-direction: column;
    align-items: center;
}
.hero-video .hero-btn {
  background: #FDB10B;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 18px;           /* ← крупнее текст */
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* мобилка */
@media (max-width: 900px) {
  .hero-video {
    height: 500px;           /* можно 480 */
  }
  .hero-video .hero-glass {
    top: 12px;
    right: 10px;
    max-width: 88vw;
  }

.hero-video .hero-cta {
    bottom: 35px !important; /* ниже, чем на десктопе */
  }

  .hero-video .hero-btn {
    padding: 12px 24px;       /* чуть меньше кнопка по размеру */
    font-size: 16px;          /* чтобы текст выглядел сбалансировано */
  }
}
.founder-track {
  position: relative;
  width: 100%;
  height: 420px;       /* или сколько ты там задала под фото */
  overflow: hidden;
}

.founder-track .founder-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;       /* ← по умолчанию ВСЕ спрятаны */
  border-radius: 14px;
}

.founder-track .founder-slide.active {
  display: block;      /* ← показываем только активный */
}



/* === AFTER-SCHOOL hero в стиле твоего старого градиента === */
.as-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(90deg, #5f004f 0%, #ffffffda 30%, #fff 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  padding: 15px 0 20px;
  overflow: visible;              /* важно: чтобы вертикальная надпись выходила */
  margin-bottom: -150px;            /* расстояние до следующей (фиолетовой) секции */
}

.as-hero .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: -38px;
  position: relative;
}

/* левый блок — тексты */
.as-hero .text {
  flex: 1;              /* ширина текстового блока */
  text-align: center;
  max-width: 620px;
  margin-left: 10%;
}

.as-hero .eyebrow {
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  letter-spacing: .08em;
  color: #5f004f;
  margin-bottom: 6px;
  font-size: 13px;
  font-size: clamp(18px, 2vw, 22px); /* чуть крупнее */ 
  font-weight: 600; /* полужирный текст */ 
  max-width: 600px;
}
.as-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(38px, 5vw, 52px); /* немного больше */ font-weight: 900;
  text-transform: uppercase;
  color: #1A1A1A;
  text-align: center;

}
.as-hero p {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px); /* font-size: 14px;чуть крупнее */ 
  font-weight: 500; /* полужирный текст */ 
  max-width: 600px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.9);
}
.as-hero .cta {
  display: block;
  width: max-content;
  text-transform: uppercase;
  margin: 14px auto 0;
  text-align: center;
  background: #FDB10B;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

.as-hero {
  margin-bottom: 40px;  /* ← БОЛЬШЕ/МЕНЬШЕ расстояния между градиентом и текстурой */
}

.as-hero .inner {        /* ← ВОТ ЭТИМ управляем расстояние между текстом и фото */
  align-items: center;
}

/* правый блок — фото */
.as-hero .photo {
  position: relative;
  top: 20px; 
  width: 300px;
  flex: 0 0 300px;
  z-index: 2;
}
.as-hero .photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

/* вертикальная надпись справа, как у тебя было — и чтобы свисала вниз */
.as-hero .vm-word {
  position: absolute;
  top: 0px;
  right: 10px;                     /* СПРАВА */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-weight: 280;
  font-size: 92px;
  line-height: 1;
  color: #B20000;
  opacity: 1;
  pointer-events: none;
  z-index: 1;                      /* ниже карточек следующей секции */
  bottom: -400px;                  /* тянем вниз за градиент */
}

/* фиолетово-оранжевая секция и белые карточки — как у тебя */
.as-texture {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  overflow: hidden;
  padding: 60px 0;
}
.as-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.as-texture .inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 26px;
}

/* сами карточки — по образцу твоих .card */
.as-card {
  background: #fff;
  color: #1A1A1A;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 22px 35px 20px;
}
.as-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #B20000;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
.as-card p,
.as-card ul,
.as-card li {
  color: #1A1A1A;;                 /* чёрный, не серый */
  font-weight: 450;            /* плотнее */
  font-size: 14px;             /* line-height: 1.55;чуть крупнее, чем 14 */
  text-align: justify;
}
.as-card ul {
  margin: 6px 0 0 10px;
}
.as-card .cta {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  text-align: center;
  background: #FDB10B;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.as-texture .inner {
  gap: 24px;
}

.section-title-bar.as-title {
  margin-top: 0px;   /* подбери: 64–78 */
}
/* чтобы белые подложки были выше этой длинной вертикальной надписи */
.as-texture .as-card {
  position: relative;
  z-index: 2;
}


/* === MOBILE FIX только для AFTER-SCHOOL === */
@media (max-width: 900px) {

  /* фиолетовый градиент с текстом */
   .as-hero {
    width: 100vw;          /* ВАЖНО: не 100% */
    left: 50%;
    margin-left: -50vw;    /* возвращаем full-bleed */
    padding: 0;
    overflow: hidden;
    margin-bottom: 30px;
  }
  
  .as-hero .inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 12px;
  }

  .as-hero .text {
    flex: 1;
    margin-left: 20px;
    text-align: center;
    position: relative;
    top: -20px;
  }

  .as-hero .eyebrow {
    font-size: 12px;
  }
  .as-hero h1 {
    font-size: 20px;
    line-height: 1.1;
    margin: 4px 0 6px;
  }
  .as-hero p {
    font-size: 13px;
    line-height: 1.35;
  }
  .as-hero .cta {
    margin-top: 6px;
    padding: 7px 14px;
    font-size: 13px;
  }

  .as-hero .photo {
    order: 2;
    width: 140px;
    max-width: 50%;
    margin-top: 6px;
    margin-left: -10px;
    top: -16px;
  }

  .as-hero .vm-word {
    display: none;
  }
}
  /* вертикальную надпись прячем */
  .as-hero .vm-word {
    display: none;
  }


/* ========== 1. ТИТУЛ С ПОЛОСКАМИ ========== */
.pf-titlebar {
  max-width: var(--container);
  margin: 26px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.pf-titlebar .line {
  flex: 1 1 140px;
  height: 3px;
  background: linear-gradient(90deg, #D9D9D9 0%, #5f004f 100%);
  border-radius: 10px;
}
.pf-titlebar .text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.pf-titlebar .text {
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B20000;
}
.pf-titlebar .subtitle {
  font-size: clamp(13px, 1.6vw, 15px);
  color: #B20000;
  margin: 0;
}
@media (max-width: 700px) {
  .pf-titlebar { gap: 8px; }
  .pf-titlebar .line { flex-basis: 50px; }
}

/* ========== 2. ГРАДИЕНТ КАК В KIDS MODELING ========== */
.pf-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(90deg, #fff 0%, #f9eafc 70%, #6c0081 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  padding: 38px 0 34px;             /* ← высота градиента по вертикали */
  margin-bottom: 40px;   /* ← вот ЭТО даёт пространство вниз */
  overflow: visible;
}
.pf-hero .inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
}

/* вертикальная слева, тянется вниз */
.pf-hero .vm-word {
  position: absolute;
  top: 0px;
  left: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 300;
  font-size: 92px;
  line-height: 1;
  color: #B20000;
  pointer-events: none;
  z-index: 1;
  bottom: -500px;                   /* ← удлиняешь сюда, если надо на секцию ниже */
}

/* фото сразу после вертикали */
.pf-hero .photo {
  position: absolute;
  left: 140px;                       /* ← сдвиг от вертикали */
  bottom: -35px;                        /* ← опустить/поднять фото */
  width: 260px;                     /* ← размер фото на компе */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  z-index: 2;
}
.pf-hero .photo img {
  width: 100%;
  display: block;
}

/* текст справа от фото, центр внутри своей зоны */
.pf-hero .text {
  margin-left: 270px;               /* ← ЭТИМ двигаешь текст ближе к фото */
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pf-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5f004f;
  font-weight: 700;
  font-size: 14px;
}
.pf-hero h1 {
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}
.pf-hero p {
  max-width: 560px;
  line-height: 1.4;
  margin: 8px 0 16px;
}
.pf-hero .cta {
  background: #FDB10B;
  color: #fff;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

/* ========== 3. ТЕКСТУРНАЯ СЕКЦИЯ С БЕЛЫМИ КАРТОЧКАМИ ========== */
.pf-texture {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  overflow: hidden;
  padding: 60px 0;
}
.pf-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.pf-texture .inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));  /* ← 2 колонки на компе */
  gap: 26px;
}
.pf-card {
  background: #fff;
  color: #1A1A1A;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 22px 28px 20px;          /* ← отступы внутри, можно увеличить */
  text-align: left;
}
.pf-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #B20000;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
.pf-card p,
.pf-card ul,
.pf-card li {
  text-align: justify;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.pf-card ul { margin-left: 16px; }
.pf-card .cta {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  text-align: center;
  background: #FDB10B;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

/* ========== 4. МОБИЛКА: всё влезает, карточки по одной ========== */
@media (max-width: 900px) {
  /* сам градиент */
  .pf-hero {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding: 1px 0 6px;
  }
  .pf-hero .inner {
    display: grid;
    grid-template-columns: 115px 1fr;   /* фото + текст в строку */
    gap: 10px;
    align-items: center;
    padding: 0 14px;
  }
  .pf-hero .photo {
    position: relative;
    width: 160px;                       /* ← увеличить/уменьшить фото на телефоне */
    bottom: -7px;
    left: 0;
  }
  .pf-hero .text {
    margin-left: 0;
    text-align: center;
    align-items: flex-start;
    gap: 0px;         /* ← уменьшает расстояние между всеми строками текста */
    margin-bottom: -10px; /* ← пододвигает всё ближе к кнопке */
  }
  .pf-hero .eyebrow {
    margin-bottom: 5px;  /* ← если “Creative program” далеко от заголовка */
  }
  .pf-hero h1 { font-size: 20px; line-height: 1.1; margin-bottom: -2px;}
  .pf-hero p { 
    font-size: 13px;
  }
  .pf-hero .cta { 
    /* padding: 7px 10px; 
    font-size: 13px; 
    align-items: center;карточки — по одной */
    display: block;
    margin: 10px auto 0;   /* ← авто по бокам ставит в центр */
    text-align: center;
  }
  .pf-hero .vm-word { display: none; }

  /* карточки — по одной */
  .pf-texture .inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
  }
  .pf-card {
    padding: 20px 18px;
  }
}

/* ========== 5. АНТИ-СКРОЛЛ ПО ГОРИЗОНТАЛИ ТОЛЬКО ДЛЯ ЭТОЙ СТРАНИЦЫ ========== */
.pf-hero,
.pf-texture {
  box-sizing: border-box;
}

/* если у тебя внутри body снова поедет, оставь это внизу файла */
html, body {
  overflow-x: hidden;
}

/* === десктоп: after-school вернуть как было === */
@media (min-width: 901px) {
  /* показываем вертикальную надпись */
  .as-hero .vm-word {
    display: block;
    position: absolute;
    top: 0;
    right: 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 92px;
    font-weight: 300;
    color: #B20000;
    pointer-events: none;
    /* тянем вниз на текстурную секцию, как ты делала */
    bottom: -350px;
    z-index: 1;
  }

  /* карточки на компе — ДВЕ в ряд */
  .as-texture .inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 26px;
    max-width: var(--container);
    margin: 0 auto;
  }

  /* а сами карточки пусть не тянутся на всю ширину */
  .as-card {
    width: 100%;
  }
}
/* === 1. Шапка с полосками для SUMMER === */
.section-title-bar.sm-title {
  margin-top: 10px;
}
.section-title-bar.sm-title .line {
  background: linear-gradient(90deg, #D9D9D9 0%, #5f004f 100%);
}
.section-title-bar.sm-title .text,
.section-title-bar.sm-title .subtitle {
  color: #B20000;
}

/* === 2. HERO "как kids modeling" === */
.sm-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(90deg, #fff 0%, #f9eafc 75%, #6c0081 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  padding: 120px 0 50px;           /* ← высота по вертикали, уменьшаешь/увеличиваешь тут */
  overflow: visible;
  margin-bottom: 40px;            /* ← пространство до текстурной секции */
}

.sm-hero .sm-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  min-height: 240px;
}

/* вертикальная надпись слева, тянется вниз, как у тебя в kids modeling */
.sm-hero .sm-vm-word {
  position: absolute;
  top: -80px;
  left: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-weight: 300;
  font-size: 92px;
  line-height: 1;
  color: #B20000;
  pointer-events: none;
  z-index: 1;
  bottom: -300px;               /* ← этим тянешь надпись на фиолетовую секцию */
}

/* фото ПРАВОЙ стороной, как у тебя в последнем варианте kids modeling */
.sm-hero .sm-photo {
  position: absolute;
  left: 150px;
  bottom: -50px;
  width: 320px;                 /* ← размер фото на компе */
  transform: translateX(-15px); /* чуть вглубь */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  z-index: 2;
}
.sm-hero .sm-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* текст по центру, но чуть сдвинут вправо, чтобы не налезать на левый край */
.sm-hero .sm-text {
  margin-left: 200px;           /* ← ЭТОМУ равен твой kids modeling: двигаем вправо */
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  top: -40px;
  gap: 6px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.sm-hero .sm-text .eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: #5f004f;
  font-size: 14px;
}
.sm-hero .sm-text h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 900;
  text-transform: uppercase;
}
.sm-hero .sm-text p {
  max-width: 580px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: #000;
}
.sm-hero .sm-text .cta {
  margin-top: 6px;
  background: #FDB10B;
  color: #fff;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* === 3. Текстурная секция под ним, 2 колонки на компе === */
.sm-texture {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  padding: 60px 0;
  overflow: hidden;
}
.sm-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.sm-texture .sm-cards {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));  /* ← 2 колонки на компе */
  gap: 26px;
}

.sm-texture .sm-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 22px 28px 20px;
  text-align: left;
}
.sm-texture .sm-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #B20000;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}
.sm-texture .sm-card p,
.sm-texture .sm-card ul,
.sm-texture .sm-card li {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}
.sm-texture .sm-card ul {
  margin-left: 16px;
}
.sm-texture .sm-card .cta {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  background: #FDB10B;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

/* === 4. Мобилка — чтобы было как у тебя: фото видно, текст не съезжает === */
@media (max-width: 900px) {
  .sm-hero {
    width: 100vw;
    left: -15px;
    margin-left: 0;
    padding: 3px 0 7px;
  }
  .sm-hero .sm-inner {
    display: grid;
    grid-template-columns: 140px 1fr;  /* фото уже, текст шире */
    gap: 10px;
    align-items: center;
  }
  .sm-hero .sm-vm-word {
    display: none;
  }
  .sm-hero .sm-photo {
    position: absolute;
    left: 15px;
    top: 3px;
    margin-left: 0px;
    width:200px;                   /* ← тут уменьшишь/увеличишь фото на телефоне */
    z-index: 2;    
  }
  .sm-hero .sm-photo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .sm-hero .sm-text {
    grid-column: 2;       /* ← текст во втором столбце */
    grid-row: 1;
    position: relative;
    margin-left: 0px;
    z-index: 1;
    top: -3px;
    text-align: center;
  }
  .sm-hero .sm-text h1 {
    font-size: 22px;
  }
  .sm-hero .sm-text p {
    font-size: 13px;
  }
  .sm-hero .sm-text .cta {
    font-size: 13px;
    padding: 10px 24px;
    margin-left: 0;
    margin: 6px auto 0;
    left: -40px;
    align-items: flex-start;
  }

  /* карточки — в одну колонку */
  .sm-texture .sm-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  .sm-texture .sm-card {
    width: 100%;
  }
}
/* старт: карточки спрятаны */
.as-texture .as-card,
.pf-texture .pf-card,
.sm-texture .sm-card {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .5s ease;
}

/* когда добавим класс .show — они выезжают */
.as-texture .as-card.show,
.pf-texture .pf-card.show,
.sm-texture .sm-card.show {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 59;          /* чуть меньше, чем .drawer (60) */
  display: none;
}
.menu-overlay.show {
  display: block;
}


/* фиолетовая текстурная секция на главной */
.home-purple {
  width: 100vw;
  position: relative;
  isolation: isolate;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  overflow: visible;
  padding: 25px 0;
  margin-top: 44px;   /* ← вот тут делаешь зазор */
}

/* шум как у других фиолетовых */
.home-purple::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

/* фиолетовая текстурная секция на главной */
.home-purple {
  width: 100vw;
  position: relative;
  isolation: isolate;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  overflow: visible;
  padding: 25px 0;
  margin-top: 44px;   /* ← вот тут делаешь зазор */
}

/* шум как у других фиолетовых */
.home-purple::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}


.hp-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 16px 18px 16px;
}
.hp-card h2 {
  margin: 0 0 8px;
  color: #B20000;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
}
.hp-card p {
  margin: 0 0 10px;
  text-align: justify;
  font-size: 14px;
  line-height: 1.5;
}


/* мобилка: всё в столбик, фото после текста */
@media (max-width: 900px) {
  .home-purple {
    padding: 42px 0 46px;
  }
  .home-purple .hp-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cutout-row img {
    height: 170px;
  }
  
}

/* контейнер секции */
.home-purple .hp-inner{
  position: relative;
  z-index: 1;
  max-width: 1180px;     /* почти вся ширина */
  margin: 0 auto;
  padding: 0 34px 28px;
}


/* верх: две карточки слева/справа */
.hp-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 14px;
}


/* карточки оставляем белые как были */
.hp-card{
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 16px 18px 16px;
}
.hp-card h2{
  margin: 0 0 10px;
  color: #B20000;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  letter-spacing: .04em;
}
.hp-card p{
  margin: 0;
  text-align: justify;
  font-size: 14px;
  line-height: 1.6;
}

/* карусель альбомов */
.hp-albums{
  position: relative;
  margin-top: 18px;
}

.alb-viewport{
  overflow: hidden;
  /* чтобы было “не на всю ширину” визуально */
  max-width: 980px;
  margin: 0 auto;
}

.alb-track{
  display: flex;
  gap: 16px;
  padding: 10px 56px; /* место под стрелки */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.alb-track::-webkit-scrollbar{ display:none; }

/* карточка альбома */
.alb{
  flex: 0 0 auto;
 width: clamp(220px, 28vw, 280px);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  text-decoration: none;
  color: #2a001f;
  overflow: hidden;
  scroll-snap-align: start;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.alb:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}
.alb img{
 width: 100%;
  height: 320px;                /* портретная высота */
  object-fit: cover;
  object-position: center top;  /* головы не режет */
  display: block;
}
.alb-title{
  display:block;
  padding: 12px 14px 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* стрелки */
.alb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #5f004f;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform .16s ease, opacity .16s ease;
}
.alb-nav span{
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  margin-top: -2px;
}
.alb-nav:hover{
  transform: translateY(-50%) translateY(-3px);
}
.alb-nav.prev{ left: 6px; }
.alb-nav.next{ right: 6px; }
.alb-nav:disabled{
  opacity: .35;
  cursor: default;
}

/* ссылка "View all albums" */
.hp-all-albums{
  display: block;
  width: fit-content;
  margin: 12px auto 0;   /* теперь точно центр */
  text-align: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  transform: translateY(0);
  transition: transform .18s ease, background .18s ease;
}

.hp-all-albums:hover{
  transform: translateY(-5px);
  background: rgba(255,255,255,.18);
}

/* мобилка */
@media (max-width: 900px){
  .home-purple{
    padding: 42px 0 46px;
  }
  .home-purple .hp-inner{
    padding: 0 18px 24px;
  }
  .hp-top{
    grid-template-columns: 1fr;  /* один столбик */
    justify-items: center;       /* центрируем карточки */
  }

  .hp-card{
    width: min(92vw, 520px);     /* по центру, не во всю ширину */
    margin: 0 auto;              /* центр */
  }

  .alb-track{
    padding: 10px 44px;
  }
  .alb img{
    height: 360px;
  }
}

/* меню выше, чем фиксированная шапка */
.drawer {
  z-index: 260;
}

/* полупрозрачный фон тоже выше */
.menu-overlay {
  z-index: 255;
}


/* ===== список альбомов (фотопроекты/мероприятия) ===== */
.media-albums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.media-album {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.media-album img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.media-album-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(95,0,79,0) 0%, rgba(95,0,79,.9) 100%);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 5px rgba(0,0,0,.3);
  font-size: 14px;
}

/* ===== окно открытого альбома ===== */
.media-viewer {
  margin-top: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding: 14px 0 26px;
}
.media-viewer[hidden] {
  display: none;
}
.media-viewer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px 8px;
}
.media-viewer-top h2 {
  margin: 0;
  font-size: 18px;
  color: #5f004f;
}
.media-close {
  border: 0;
  background: #5f004f;
  color: #5f004f;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* ===== слайдер ===== */
.media-slider {
  position: relative;
  overflow: hidden;
}
.media-slider-track {
  display: flex;
  gap: 14px;
  transition: transform .35s ease;
  padding: 0 4px;
}
.media-slide {
  flex: 0 0 calc(33.333% - 10px); /* 3 и кусочек 4й */
  max-width: calc(33.333% - 10px);
}
.media-slide img {
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* стрелки — только на десктопе */
.media-prev,
.media-next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: #5f004f;
  color: #fff;
  cursor: pointer;
  z-index: 3;
}
.media-prev { left: 6px; }
.media-next { right: 6px; }

/* точки */
.media-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.media-dots span {
  width: 7px;
  height: 7px;
  background: #ddd;
  border-radius: 999px;
}
.media-dots span.active {
  background: #5f004f;
}

/* мобилка: 2 фото + кусочек 3ей, без стрелок */
@media (max-width: 900px) {
  .media-slide {
    flex: 0 0 48%;
    max-width: 48%;
  }
  .media-prev,
  .media-next {
    display: none;
  }
}


/* === gallery: список альбомов (обложки) === */
.media-albums {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.media-album {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  width: 210px;               /* ширина обложки */
  aspect-ratio: 4 / 3;        /* форма */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.media-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-album-title {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 90%);
  color: #fff;
  padding: 10px 14px 12px;
  font-weight: 600;
  text-align: left;
  font-size: 14px;
}

/* === viewer (открытый альбом) === */
.media-viewer {
  margin-top: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 14px 16px 20px;
}

.media-viewer[hidden] {
  display: none;
}

.media-viewer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.media-close {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* слайдер */
.media-slider {
  position: relative;
  overflow: hidden;
}

.media-slider-track {
  display: flex;
  transition: transform .35s ease;
  gap: 12px;
}

/* фото внутри слайдов */
.media-slide {
  flex: 0 0 calc(33.33% - 12px);    /* 3 фотки на компе */
  max-width: calc(33.33% - 12px);
}
.media-slide img {
  width: 100%;
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

/* стрелки только на десктопе */
.media-prev,
.media-next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: #5f004f;
  color: #fff;
  cursor: pointer;
}
.media-prev { left: 4px; }
.media-next { right: 4px; }

/* точки */
.media-dots {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  justify-content: center;
}
.media-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: #d2d2d2;
}
.media-dots button.active {
  background: #5f004f;
}

/* мобилка: 2 фото и кусочек 3-й, без стрелок */
@media (max-width: 900px) {
  .media-albums {
    gap: 12px;
  }
  .media-album {
    width: 44vw;
  }

  .media-slide {
    flex: 0 0 48vw;     /* две и кусочек */
    max-width: 48vw;
  }
  .media-prev,
  .media-next {
    display: none;
  }

  .media-slider-track {
    scroll-snap-type: x mandatory;
  }
  .media-slide {
    scroll-snap-align: start;
  }
}

/* ====== обложки альбомов ====== */
.media-albums {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.media-album {
  width: 280px;              /* размер обложки */
  aspect-ratio: 3 / 4;       /* те же пропорции */
  border: none;
  background: #eee;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.media-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;      /* штатное сглаживание */
  transform: translateZ(0);  /* иногда помогает сглаживанию при scale */
}

.media-album-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 80%);
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
}

/* ====== режим: альбом открыт ====== */
/* прячем табы и обычный контент, показываем только viewer */
body.album-open .gallery-tabs,
body.album-open .gallery-content.active > .media-albums,
body.album-open .gallery-content.active > p,
body.album-open .gallery-content.active > h2 {
  display: none !important;
}

.media-viewer {
  max-width: 1100px;
  margin: 20px auto 50px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 18px 18px 24px;
  display: none;               /* по умолчанию скрыто */
}

.media-viewer.open {
  display: block;
}

/* шапка viewer */
.media-viewer-top {
  display: grid;
  grid-template-columns:auto 1fr auto; /* left | center | right */
  align-items: center;
  gap: 10px;
  margin-bottom: -80px;
  color: #B20000;
}

.media-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 100px;
}
.media-viewer-top h2 {
  grid-column:2;          /* середина */
  justify-self:center;    /* margin-top: 30px;
  margin-bottom: -100px;центр по горизонтали */
  margin-top: 300px;
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #B20000;
  margin-left: -200px;
  
}
.media-back {
  background-color: #751b9e;
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: left;
  gap: 4px;
  font-size: 14px;
}

.media-back:hover {
  background-color: #650392;     /* темнее */
}

/* эффект при клике */
.media-back:active {
  background-color: #650392;     /* ещё темнее */
}

/* сам слайдер внутри альбома */
.media-slider {
  position: relative;
  overflow: hidden;
}

.media-slider-track {
  display: flex;
  gap: 14px;
  transition: transform .3s ease;
}

.media-slide {
  flex: 0 0 32%;          /* было 30 — теперь меньше, влезет почти 4 */
  max-width: 32%;
  margin-top: 60px;
  height: 280px;          /* фикс высота, чтобы все были ровные */
  display: flex;
  align-items: center;    /* центруем по вертикали */
  justify-content: center;
}

.media-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;    /* если фото вытянутое — будет внутри */
  border-radius: 0px;
  cursor: pointer;
}

/* точки */
.media-dots {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.media-dots button,
.media-dots span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: #ddd;
}
.media-dots .active {
  background: #B20000;
}

/* стрелки только на компе */
.media-prev,
.media-next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: #5f004f;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  margin-top: 70px;
}
.media-prev { left: -12px; }
.media-next { right: -12px; }

/* лайтбокс */
.media-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.media-lightbox.show {
  display: flex;
}
.media-lightbox img {
  max-width: min(92vw, 1050px);
  max-height: 92vh;
  border-radius: 14px;
}

/* мобайл */
@media (max-width: 900px) {
  .media-album {
    width: 45%;
    min-width: 150px;
  }

  .media-viewer {
    margin: 10px auto 40px;
    border-radius: 0;
  }

  .media-viewer-top {
    margin-top: 4px;
    margin-bottom: -100px;
  }

  .media-viewer-top h2 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .media-slider-track {
    gap: 10px;
  }

  .media-slide {
    flex: 0 0 40%;         /* 2 фотки + кусочек третьей */
    max-width: 40%;
    height: auto;       /* на мобиле пусть растёт */
  }

  .media-prev,
  .media-next {
    display: none;
  }
}


/* === открытый альбом: слайды на десктопе === */
.media-slider {
  position: relative;
  overflow: hidden;
}

.media-slider-track {
  display: flex;
  gap: 14px;
  transition: transform .3s ease;
  margin-top: 60px;
}

/* карточка с фото */
.media-slide {
  flex: 0 0 30%;        /* 3 в ряд → меняешь это число, если надо */
  max-width: 30%;
  height: 380px;        /* ← вот тут делаешь выше/ниже */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* само фото */
.media-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* если хочется прямо во всю карточку — поставь cover */
  border-radius: 10px;
  cursor: pointer;
}

/* сам «вьюпорт» слайдера — может оставаться overflow:hidden */
.media-slider{
  position: relative;
  overflow: hidden;
}

/* стрелки внутри видимой области, не «за краем», выше слоёв */
.media-prev,
.media-next{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: #5f004f;
  color: #fff;
  cursor: pointer;
  z-index: 2;       /* важно: поверх фотографий */
  /* было left:-12px/right:-12px — из-за этого их резало */
}
.media-prev{ left: 8px; }
.media-next{ right: 8px; }


/* сам вьюпорт слайдера */
.media-slider{
  position: relative;
  overflow: hidden;        /* оставить hidden, стрелки держим ВНУТРИ */
}

/* стрелки — внутри, с z-index и кликабельностью */
.media-prev,
.media-next{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 0;
  background: #5f004f;
  color: #fff;
  cursor: pointer;
  z-index: 5;              /* поверх фото/фонов */
  pointer-events: auto;
}
.media-prev{ left: 8px; }
.media-next{ right: 8px; }



.media-album{
  position: relative;
  display: block;
  border: none;
  padding: 0;
  background: none;
  overflow: hidden;
  border-radius: 18px;
}

/* чтобы картинка не “дергалась” */
.media-album img{
  display: block;
  width: 100%;
  height: auto;
}

/* Тот самый “запотевший” фон под названием */
.media-album-title{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 10px 16px;
  text-align: center;

  background: rgba(173, 172, 172, 0.15);           /* лёгкая дымка */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: #fff;
  font-weight: 700;
  font-size: 18px;

  border: none;
  box-shadow: none;
}


/* телефон: одна обложка на строку */
@media (max-width: 900px){
  .media-album{
    width: 75vw;          /* было 100% — делаем немного уже */
    max-width: 420px;     /* ограничитель, чтобы не разъезжалось на больших мобилках */
    margin: 0 auto;       /* центрируем */
  }
}

/* Блок с альбомами — позиционируем как контейнер */
.media-albums {
  position: relative;
}

/* Большие надписи LILI MODEL под обложками */
.gallery-brand {
  position: absolute;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 600;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Верхняя надпись — чуть уезжает за левый край */
.gallery-brand--top {
  top: -2.5rem;        /* можно подправить по вкусу */
  left: -18%;          /* уезжает влево за экран */
}

/* Нижняя надпись — уезжает за правый край */
.gallery-brand--bottom {
  bottom: -2.5rem;
  right: -18%;
}

/* Обложки поверх текста */
.media-album {
  position: relative;
  z-index: 1;
}

/* display: inline-flex;Кнопка Back to projects: фиолетовая подложка + hover темнее */
.media-back {
  background: #5f004f;        /* базовый фиолетовый */
  color: #fff;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  
  align-items: left;
  position: relative;
  gap: 0.4rem;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.media-back:hover,
.media-back:focus-visible {
  background: #4b003e;        /* темнее при наведении */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Чтобы стрелочка не уезжала слишком далеко от текста */
.media-back::first-letter {
  margin-right: 0.1em;
}



/* ===== Founder block: текст слева, фото справа ===== */

.founder-container {
  max-width: 1200px;   /* регулируется — хочешь 1100, 1300, 1000 */
  margin: 0 auto;      /* ← И вот это даёт идеальный центр */
  padding: 0 24px;     /* чтобы не прилипало к краям на мобильном */
}

.founder-block {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 40px;
  padding: 5px 0;
  margin-top: 30px;
}

.founder-text {
  flex: 0 0 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Белые карточки */
.founder-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.founder-box h2,
.founder-box h3 {
  margin-top: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.founder-box p,
.founder-box li {
  font-size: 14px;
  line-height: 1.6;

  text-transform: uppercase;
}

/* Список внутри боксов */
.founder-box ul {
  padding-left: 20px;
  margin: 8px 0 0;
}

/* Фото справа */
.founder-photo {
  flex: 0 0 420px;
  max-width: 420px;
  width: 420px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;

  background: radial-gradient(circle at top left, #ffb5e1 0, #6f4bff 55%, #1a1038 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Анимация появления справа */
  opacity: 0;
  transform: translateX(40px);
  animation: founderPhotoIn 0.9s ease-out 0.2s forwards;
}

/* Лента фото — просто обёртка */
.founder-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Каждый слайд занимает всё поле, поверх друг друга */
.founder-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.02);             /* чуть-чуть увеличен, будет эффект "приближения" */
  pointer-events: none;

  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out;
}

/* Видимый слайд */
.founder-slide.active {
  opacity: 1;
  transform: scale(1);                /* возвращаем в нормальный размер */
  pointer-events: auto;
}

/* Точки под фото */
.founder-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.founder-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.founder-dots button.active,
.founder-dots button.is-active {
  width: 18px;
  background: #ffffff;
  transform: translateY(-1px);
}

/* базовый стиль для обеих стрелок */
.f-arrow {
  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  cursor: pointer;

  background: rgb(95, 0, 79);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, transform 0.1s ease;
  z-index: 3;
}


.f-prev {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  cursor: pointer;

  background: rgb(95, 0, 79);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, transform 0.1s ease;
}


/* Кнопка "next" справа на фото */
.f-next {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  cursor: pointer;

  background: rgb(95, 0, 79);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, transform 0.1s ease;
}

.f-next:hover {
  background: rgba(0, 0, 0, 0.65);
}

.f-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* Анимация: выезд фото справа */
@keyframes founderPhotoIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Адаптив под мобильные ===== */

@media (max-width: 900px) {
  .founder-block {
    flex-direction: column;
    gap: 24px;
    padding: 5px 0;
  }

  .founder-photo {
    max-width: 100%;
    width: 100%;
    order: -1; /* фото сверху, текст снизу */
  }

  .founder-box {
    border-radius: 14px;
    padding: 14px 16px;
  }
}


/* ===== WHY PARENTS CHOOSE: заголовок + ромбики ===== */

.why-parents {
  padding: 50px 0 40px;
}

.why-parents-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Фиолетовая "таблетка" под заголовком */
.why-title-pill {
  display: inline-block;
  background: #5f004f;      /* фиолетовый фон */
  color: #ffffff;           /* белый текст */
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  text-transform: uppercase;  /* ВСЁ НАЗВАНИЕ БОЛЬШИМИ БУКВАМИ */
  margin: 0 auto 28px;        /* расстояние между названием и ромбиками */
}

/* Сетка ромбиков: мобилка — 2, комп — 4, лёгкое наложение углов */
.why-diamonds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  justify-content: center;
}

@media (min-width: 900px) {
  .why-diamonds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0px; /* убираем зазоры, будем чуть перекрывать */
  }

  .why-card:not(:first-child) {
    margin-left: -18px; /* лёгкое перекрытие углов на десктопе */
  }
}

/* Блок-ромб: делаем квадрат и обрезаем его клип-патом в ромб */
.why-card {
  position: relative;
  aspect-ratio: 1 / 1;  /* всегда квадрат */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* ромб без поворота */
  border-radius: 10px;
  overflow: hidden;
  text-transform: uppercase;  /* ВСЁ НАЗВАНИЕ БОЛЬШИМИ БУКВАМИ */
}

/* Цвета ромбиков */
.why-card--yellow {
  background: #ffcf02;
  color: #111111;   /* чёрный текст на жёлтом */
}

.why-card--purple {
  background: #5f004f;
  color: #ffffff;   /* белый текст на фиолетовом */
}

/* Внутренний контейнер – центрируем текст по середине ромба */
.why-card-inner {
  position: absolute;
  inset: 14%;                    /* отступы от краёв ромба (можно менять) */
  display: flex;
  flex-direction: column;
  justify-content: center;       /* по вертикали в центр */
  align-items: center;           /* по горизонтали в центр */
  text-align: center;
}

/* Заголовок внутри ромбика */
.why-card-inner h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;   /* заголовок ромбика капсом */
}

/* Текст внутри ромбика */
.why-card-inner p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}


/* === MOBILE FIX: увеличить ромбики, но оставить 2 в ряд === */
@media (max-width: 900px) {

  .why-diamonds {
    grid-template-columns: repeat(2, 1fr); /* два ромба в строку */
    gap: 22px; /* чуть больше воздуха */
  }

  .why-card {
    width: 220px;      /* ← увеличенный размер */
    height: 220px;     /* ← делай 150–180px если хочешь ещё крупнее */
    margin: -10px auto;       /* ← ключевой момент: ромбы залезают друг на друга */
    position: relative;
    z-index: 1;
  }

  .why-card:nth-child(even) {
    margin-left: -22px;
  }

  /* ромбы левой колонки можно чуть смещать вправо */
  .why-card:nth-child(odd) {
    margin-right: -22px;
  }

  .why-card-inner {
    inset: 18%;        /* больше пространства для текста */
  }

  .why-card h3 {
    font-size: 14px;   
    margin-bottom: 4px;
  }

  .why-card p {
    font-size: 12px;
    line-height: 1.35;
  }
}




/* ===== ABOUT BLOCK: текст слева, широкое фото справа ===== */

.about-block {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 10px;
}

/* Левая колонка с текстом */
.about-text {
  flex: 0 0 520px;          /* делаем фиксированную ширину, чтобы блоки были ПОУЖЕ */
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-transform: uppercase;
}

/* Белые коробочки с текстом – поуже */
.about-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.about-box h2 {
  margin: 0 0 8px;
  color: #B20000;
  text-transform: uppercase;
}

.about-box p,
.about-box li {
  font-size: 14px;
  line-height: 1.6;
}

/* Правая колонка – ШИРОКОЕ фото */
.about-photo {
  flex: 0 0 480px;          /* УВЕЛИЧИВАЕШЬ/УМЕНЬШАЕШЬ ширину фото по горизонтали */
  max-width: 480px;
  position: relative;
  margin-top: 20px;    /* <<< МЕНЯЕШЬ ЗДЕСЬ */
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at top left, #ffb5e1 0, #6f4bff 55%, #1a1038 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: justify;
  justify-content: center;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* На телефоне – стекаем блоки друг под другом */
@media (max-width: 900px) {
  .about-block {
    flex-direction: column;
    padding: 40px 16px;
  }

  .about-text {
    flex: 1 1 auto;
  }

  .about-photo {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    height: 260px;       /* здесь можешь менять высоту фото на мобилке */
  }
}


/* Стартовое состояние — невидимые и чуть ниже */
.media-album {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Когда вошли в зону просмотра */
.media-album.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.media-albums {
  position: relative;
  z-index: 1;
}

/* Бренд-текст под альбомами */
.gallery-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(40px, 9vw, 90px);
  font-weight: 800;
  letter-spacing: 0.35em;
  white-space: nowrap;

  /* ВАЖНО! */
  color: rgba(185, 8, 8, 0.555); /* стабильная видимая прозрачность */
  opacity: 1 !important;            /* запрещаем анимациям менять прозрачность */
  z-index: 0;                       /* всегда под карточками */
  pointer-events: none;
}

/* ВЕРХ – регулируешь высоту здесь */
.gallery-brand--top {
  top: -50px; /* двигай как хочешь */
  left: -50px;
}

/* НИЗ – регулируешь высоту здесь */
.gallery-brand--bottom {
  bottom: -50px;
  left: 850px;
}

/* Обложки всегда выше надписей */
.media-album {
  position: relative;
  z-index: 2;
}

/* ТВОЯ АНИМАЦИЯ ПОКАЗА АЛЬБОМОВ — оставляем, но убираем влияние на фон */
.media-album {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}

.media-album.is-visible {
  opacity: 1 !important;  /* только для альбомов */
  transform: translateY(0);
}


/* общий контейнер для трёх блоков + фоновые надписи */
.founder-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* вертикальные подписи слева и справа */
.founder-label {
  position: absolute;
  top:138%;                     /* где по высоте – двигай тут (больше = ниже) */
  transform: translateY(-50%);
  font-size: 80px;              /* ← СДЕЛАЛ БОЛЬШЕ (можешь менять) */
  letter-spacing: 0.35em;       /* ← растягивает надпись по длине */
  color: rgba(170, 20, 20, 0.664);   /* ← более заметный серый (можно сделать ещё темнее) */
  text-transform: uppercase;    /* ВСЕ БУКВЫ БОЛЬШИЕ */
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* слева: верх букв ближе к левому краю, низ – правее */
.founder-label--left {
  left: -920px;
  transform: translateY(-50%) rotate(-90deg);
}

/* справа: верх букв справа, низ – левее */
.founder-label--right {
  right: -500px;
  transform: translateY(-50%) rotate(90deg);
}

/* чтобы блоки были над надписями */
.founder-block,
.why-parents,
.about-block {
  position: relative;
  z-index: 1;
}

/* на телефоне можно надписи убрать */
@media (max-width: 900px) {
  .founder-label {
    display: none;
  }
}

.policy-page {
  max-width: 900px;        /* ширина блока с текстом */
  margin: 0 auto;          /* по центру страницы */
  padding: 40px 20px 60px; /* ВОТ ЗДЕСЬ регулируешь отступы от краёв */
  line-height: 1.7;
  font-size: 15px;
}

.policy-page h1,
.policy-page h2,
.policy-page h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

.policy-page p,
.policy-page li {
  margin-bottom: 10px;
}

/* ====== PHOTO FAN / STACK ====== */

.km-feature {
  padding: 60px 0;
}

.km-feature-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  margin-left: 140px;
}

/* Контейнер для двух фото */
.km-photo-stack {
  position: relative;
  width: 360px;
  height: 100%;
}

/* Общий стиль фото */
.km-photo-stack .photo {
  position: absolute;
  width: 330px;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
  object-fit: cover;
}


.km-card {
  background: rgb(119, 15, 102);
  border-radius: 20px;
  padding: 24px 28px;
  margin-right: 0px;
  box-shadow: 0 30px 26px rgba(0,0,0,0.12);
}

.km-card h2 {
  margin: 0 0 12px;
  font-size: 26px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
}

.km-card ul {
  margin: 0;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
}

.km-card p {
  margin: 0;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
  text-align: center;
}

@media (max-width: 900px) {
  .km-feature-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-transform: uppercase;
    margin-left: 0px;
  }

  .km-photo-stack {
    width: 300px;
    height: 100%;
    margin-left: 5px;
  }

  .km-photo-stack .photo {
    width: 80%;
  }
  
.km-card {
  background: rgb(119, 15, 102);
  border-radius: 20px;
  padding: 24px 28px;
  margin-right: 0px;
  box-shadow: 0 30px 26px rgba(0,0,0,0.12);
}
}

/* === MOBILE FIX: все карточки и фото строго в одну колонку === */
@media (max-width: 900px) {
.as-hero .text {
        flex: 1;
        margin-left: 20px;
        text-align: center;
        position: relative;
        top: 13px;
    }

.as-hero .photo {
        order: 2;
        width: 140px;
        max-width: 50%;
        margin-top: 6px;
        margin-left: -10px;
        top: 20px;
      }
  .as-texture .inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
 

  .as-card, 
  .as-photo {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .as-photo img {
    width: 100% !important;
    height: auto !important;
  }

  /* Убираем твой offset, который уводит макет вправо */
  .right-card {
    margin-left: 0 !important;
  }
}

/* ========= WOMEN'S CONFIDENCE: titlebar ========= */
.wc-titlebar {
  max-width: var(--container);
  margin: 26px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.wc-titlebar .line {
  flex: 1 1 140px;
  height: 3px;
  background: linear-gradient(90deg, #D9D9D9 0%, #5f004f 100%);
  border-radius: 10px;
}
.wc-titlebar .text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.wc-titlebar .text {
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B20000;
}
.wc-titlebar .subtitle {
  font-size: clamp(13px, 1.6vw, 15px);
  color: #B20000;
  margin: 0;
}
@media (max-width: 700px) {
  .wc-titlebar { gap: 8px; }
  .wc-titlebar .line { flex-basis: 50px; }
}

/* ========= 3. Текстурная секция ========= */
.wc-texture {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  overflow: hidden;
  padding: 60px 0;
}
.wc-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.wc-texture .inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 26px;
}
.wc-card {
  background: #fff;
  color: #1A1A1A;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 22px 28px 20px;
  text-align: left;
}
.wc-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #B20000;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
.wc-card h3 {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}
.wc-card p,
.wc-card ul,
.wc-card li {
  text-align: justify;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.wc-card ul { margin-left: 16px; }
.wc-card .cta {
  display: inline-block;
  background: #FDB10B;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

/* ========= 4. Мобилка ========= */
@media (max-width: 900px) {
  .wc-hero {
    padding: 10px 0 12px;
  }
  .wc-hero .inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 0 14px;
  }
  .wc-hero .photo {
    position: relative;
    right: 0;
    bottom: 0;
    width: 150px;
    justify-self: center;
  }
  .wc-hero .inner .text {
    margin-right: 60px;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
  }
  .wc-hero .inner .text h1 {
    font-size: 22px;
    line-height: 1.1;
  }
  .wc-hero .inner .text p {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .wc-hero .inner .text .cta {
    padding: 7px 14px;
    font-size: 13px;
  }
  .wc-hero .vm-word {
    display: none;
  }

  .wc-texture .inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
  }
  .wc-card {
    padding: 20px 18px;
  }
}

/* защита от горизонтального скролла */
.wc-hero,
.wc-texture {
  box-sizing: border-box;
}
/* === WOMEN'S CONFIDENCE: десктоп — выравнивание текста на градиенте === */
@media (min-width: 901px) {
  .wc-hero .inner .text {
    margin-right: 160px;   /* подвинь ближе/дальше к фото */
    text-align: center;    /* текст по центру */
    align-items: center;   /* сам блок текста по центру внутри flex */
    gap: 10px;             /* расстояние между строками/элементами */
  }

  .wc-hero .inner .text p {
    text-align: center;    /* если абзацы упрямо остаются слева */
  }
}


/* === HERO with full background photo === */
.wc-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;

  background-image: url("/assets/img/photos/DSC00001.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 80px 0 80px;      /* высота секции */
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  margin-bottom: 40px;
}

/* затемнение для читаемости */
.wc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* можно уменьшить/увеличить */
  z-index: 0;
}

/* контент поверх фото */
.wc-hero .inner {
  position: relative;
  z-index: 2;

  max-width: var(--container);
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  padding: 0 24px;
}

/* текстовая колонка */
.wc-hero .text {
  background: rgba(255,255,255,0.08);   /* намного мягче */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-left: 60px;
  padding: 26px 30px;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.06); /* мягкая, почти невидимая граница */

  box-shadow: 0 0 40px rgba(0,0,0,0.15); /* делает растворение краёв */

  color: #fff;
  max-width: 700px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wc-hero .text h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 50px);
  text-transform: uppercase;
  font-weight: 900;
}

.wc-hero .text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

/* MOBILE */
@media (max-width: 900px) {
  .wc-hero .inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .wc-hero .text {
    text-align: left;
    width: 100%;
  }

  .wc-hero .photo {
    width: 200px;
  }
}

/* ——— ЛЁГКОЕ РАЗМЫТИЕ ФОНОВОГО ФОТО ——— */

/* отдельный слой поверх фонового фото */
.wc-hero::after {
  content: "";
  position: absolute;
  inset: 0;

  backdrop-filter: blur(4px);        /* ← вот размытие */
  -webkit-backdrop-filter: blur(4px);
  
  z-index: 0;                        /* ниже текстов, выше фонового фото */
}

.wc-hero .vm-word {
  position: absolute;
  top: -60px;
  right: 10px;
  bottom: -600px;            /* ← чем больше по модулю, тем «длиннее» вниз */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 300;
  font-size: 102px;
  line-height: 1;
  color: #B20000;
  pointer-events: none;
  z-index: 1;                /* под белыми карточками следующей секции */
}

/* чтобы белые карточки были выше надписи */
.wc-texture .wc-card {
  position: relative;
  z-index: 2;
}

/* на мобильном надпись убираем */
@media (max-width: 900px) {
  .wc-hero .vm-word {
    display: none;
  }
}

/* спец-карта "What's Included" */
.wc-card-included {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.wc-card-included h2 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

/* сетка: фото – текст – фото */
.wc-included-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
}

/* колонки с фотографиями */
.wc-included-photos {
  position: relative;
}

.wc-included-photos figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.wc-included-photos img {
  display: block;
  width: 100%;
  height: auto;
}

/* нижняя фотка немного налезает на верхнюю */
.wc-included-photos figure.overlap {
  margin-top: -26px;
}

/* список-пилюли по центру */
.wc-included-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* отдельная подложка под каждый пункт */
.wc-pill {
  background: rgba(255,255,255,0.96);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

/* МОБИЛКА: всё в одну колонку */
@media (max-width: 900px) {
  .wc-included-grid {
    grid-template-columns: 1fr;
  }

  .wc-included-photos {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .wc-included-photos figure.overlap {
    margin-top: 0;
    margin-left: -18px;   /* чуть-чуть налегают друг на друга в ряд */
  }

  .wc-pill {
    border-radius: 14px;  /* на телефоне можно менее круглый */
  }
}


/* ====== WOMEN'S CONFIDENCE: блок "What's Included" БЕЗ ТЕКСТУРЫ ====== */

.wc-included {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;          /* на всю ширину, как hero */
  padding: 50px 0 60px;
          /* background: #f9f2ff; очень светлый фиолетовый, можно #fff */
}

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

.wc-inc-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #B20000;
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 0 0 24px;
}

/* три колонки: фото — текст — фото */
.wc-inc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr)
                         minmax(260px, min(480px, 40vw))
                         minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
}

/* колонки с фото слева и справа */
.wc-inc-photos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wc-inc-photos img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  display: block;
  object-fit: cover;
}

/* нижняя фотка налезает чуть на верхнюю */
.wc-inc-photos img:nth-child(2) {
  margin-top: -26px;       /* подбери величину, чтобы лёгкое "веером" */
}

/* центральный список — КАЖДЫЙ пункт на своей белой подложке */
.wc-inc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-inc-list li {
  background: #fff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}

/* ====== МОБИЛКА: всё в одну колонку ====== */
@media (max-width: 900px) {
  .wc-included {
    padding: 32px 0 40px;
  }

  .wc-inc-inner {
    padding: 0 16px;
  }

  .wc-inc-row {
    grid-template-columns: 1fr; /* одна колонка */
    gap: 16px;
  }

  /* порядок: верхний левый блок фото → список → правый блок фото */
  .wc-inc-photos-left {
    order: 1;
  }
  .wc-inc-list {
    order: 2;
  }
  .wc-inc-photos-right {
    order: 3;
  }

  .wc-inc-photos img:nth-child(2) {
    margin-top: -16px;   /* чуть поменьше наложение на телефоне */
  }
}

/* общая сетка */
.wc-inc-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* фото — текст — фото */
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* фото */
.wc-inc-photos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wc-inc-photos img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  object-fit: cover;
}

/* центральная колонка */
.wc-inc-center {
  text-align: center;
}

.wc-inc-center h2 {
  color: #B20000;
  font-size: 28px;
  margin-bottom: 16px;
  text-transform: uppercase;
  font-weight: 900;
}

/* каждый пункт — отдельная белая подложка */
.wc-inc-list li {
  background: #fff;
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 14px;
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.wc-inc-photos img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: -40px; /* фото налегают друг на друга */
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}


/* мобилка: всё в одну колонку */
@media (max-width: 900px) {
  .wc-inc-row {
    grid-template-columns: 1fr;
  }
  .wc-inc-photos {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }
  .wc-inc-photos img {
    width: 48%;
  }
}


/* ========== EVENT STUDIO RENTAL ========== */

/* 1. TITLEBAR */
.es-titlebar {
  max-width: var(--container);
  margin: 26px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.es-titlebar .line {
  flex: 1 1 140px;
  height: 3px;
  background: linear-gradient(90deg, #D9D9D9 0%, #5f004f 100%);
  border-radius: 10px;
}
.es-titlebar .text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.es-titlebar .text {
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B20000;
}
.es-titlebar .subtitle {
  font-size: clamp(13px, 1.6vw, 15px);
  color: #B20000;
  margin: 0;
}
@media (max-width: 700px) {
  .es-titlebar { gap: 8px; }
  .es-titlebar .line { flex-basis: 50px; }
}

/* 2. HERO with full background photo */
/* ===== EVENT STUDIO: hero ===== */
.er-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;

  /* фон-фото, путь от style.css → ../img/... */
  background-image: url("../img/photos/1-088.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  padding: 80px 0px;                  /* высота секции */
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  color: #fff;
}

/* лёгкое затемнение поверх фото */
.er-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

/* контент поверх */
.er-hero .inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.er-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 13px;
}

.es-hero-text {
  max-width: 620px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 26px 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.er-hero h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 900;
  text-transform: uppercase;
}

.er-hero p {
  max-width: 620px;
  margin: 6px 0 14px;
  line-height: 1.45;
}

.er-hero .cta {
  background: #FDB10B;
  color: #fff;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}


/* 3. TEXTURE SECTION */
.es-texture {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg,#5f004f 0%,#3f0036 100%);
  padding: 60px 0;
  overflow: hidden;
  top: 40px;
}
.es-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.es-texture .inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 26px;
}
.es-card {
  background: #fff;
  color: #1A1A1A;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 22px 28px 20px;
  text-align: left;
}
.es-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #B20000;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
.es-card p,
.es-card ul,
.es-card li,
.es-card ol {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.es-card ul,
.es-card ol {
  margin-left: 16px;
}

/* 4. GALLERY / CAROUSEL */
.es-gallery {
  max-width: var(--container);
  margin: 40px auto 60px;
  padding: 0 24px;
}
.es-gallery-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.es-gallery-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.es-gallery-row img {
  flex: 0 0 auto;
  height: 220px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* MOBILE */
@media (max-width: 900px) {
    .er-hero {
    padding: 60px 0;
  }
  .er-hero .inner {
    padding: 0 16px;
  }
  .es-hero-text {
    padding: 20px 18px;
  }
  .es-texture .inner {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .es-card {
    padding: 20px 18px;
  }
  .es-gallery {
    padding: 0 16px 40px;
  }
}

/* ===== EVENT STUDIO: gallery carousel ===== */
.er-gallery {
  max-width: var(--container);
  margin: 50px auto 60px;
  padding: 0 20px;
}

.er-gallery h2 {
  text-align: center;
  margin-bottom: 18px;
}

/* обёртка карусели */
.er-carousel {
  position: relative;
  overflow: hidden;              /* скрываем горизонтальный скролл */
}

/* лента слайдов */
.er-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* один слайд */
/* отдельный слайд */
.er-slide {
  flex: 0 0 33.333%;       /* 3 слайда на компе */
  padding: 0 8px;
  box-sizing: border-box;

  /* фиксированное соотношение сторон для всех фото */
  aspect-ratio: 4 / 6;
}

/* картинка внутри слайда */
.er-slide img {
  width: 100%;
  height: 100%;
  display: block;
aspect-ratio: 4 / 6;   /* одинаковые пропорции */
  object-fit: cover;     /* красиво обрезать по краям */
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}


/* стрелки */
.er-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.er-arrow:hover {
  background: rgba(0,0,0,0.8);
}
.er-prev { left: 4px; }
.er-next { right: 4px; }

/* точки под каруселью */
.er-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.er-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
}
.er-dot.is-active {
  background: #5f004f;
  width: 18px;
}

/* ===== АДАПТИВ ===== */

/* планшет: по 2 фото */
@media (max-width: 900px) {
  .er-slide {
    flex: 0 0 50%;
  }

  .er-arrow {
    width: 30px;
    height: 30px;
  }
}

/* ===== EVENT STUDIO: mobile bigger + more vertical ===== */
@media (max-width: 600px) {

  /* можно оставить как есть */
  .er-carousel { padding: 0; overflow: hidden; }

  .er-track{
    display: flex;
    gap: 12px;
    padding: 0 10px; /* чуть воздуха слева/справа */
    will-change: transform;
  }
  
  /* один слайд на экран */
 .er-slide {
    flex: 0 0 88%;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 4 / 5;
  }

  .er-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
  }

  .er-arrow {
    width: 32px;
    height: 32px;
  }
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* === FAQ page === */
.faq-page .inner {
  max-width: var(--container);
  margin: 30px auto 60px;
  padding: 0 16px;
}

.faq-page h1 {
  text-align: center;
  margin-bottom: 10px;
  color: #5f004f;
}

.faq-intro {
  text-align: center;
  margin-bottom: 24px;
  color: #555;
  font-size: 14px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #5f004f;
}

/* один вопрос */
.faq-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  overflow: hidden;
  color: #5f004f;
}

/* кнопка-вопрос */
.faq-question {
  width: 100%;
  padding: 14px 18px;
  font-size: 70px;
  border: 0;
  background: #f7f1fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: #5f004f;
}

.faq-question span:first-child {
  flex: 1;
}

.faq-icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: #5f004f;
}

/* ответ, по умолчанию скрыт */
.faq-answer {
  max-height: 0;
  font-weight: bold;
  font-size: 16px;
  overflow: hidden;
  padding: 0 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  transition:
    max-height 0.25s ease,
    padding-top 0.25s ease,
    padding-bottom 0.25s ease;
    margin-top: 10px;
    margin-bottom: 10px;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

.faq-item.is-open .faq-answer {
  max-height: 800px;          /* хватит на длинные ответы */
  padding-top: 10px;
  padding-bottom: 14px;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);   /* плюс превращаем в крестик */
}



/* ===== FAQ: full-page background ===== */
main.faq-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  margin: 0;
  overflow: hidden;
  margin-bottom: -28px;
  color:#5f004f;
  /* фон: голова сверху, обрезаем только снизу */
  background-image: url("../img/photos/1-40.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* тёмное затемнение по всей странице */
main.faq-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(39, 39, 39, 0.45);
  z-index: 0;
}

/* контент поверх фона */
.faq-page .inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px 60px;
  color:#5f004f;
  text-align: center;
  box-sizing: border-box;
}

.faq-hero {
  margin-bottom: 40px;
}

.faq-hero .hero-overlay {
  display: inline-block;
  padding: 20px 24px;
  border-radius: 24px;

  /* стеклянный эффект */
  background: rgba(235, 235, 235, 0.315);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* без рамок, мягкая тень */
  border: none;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
}

.faq-hero h1,
.faq-hero p {
  margin: 0 0 10px;
  color:#5f004f;
}


@media (max-width: 768px) {
  main.faq-page,
  main.contacts-page {
    background-attachment: scroll; /* фон двигается вместе со страницей */
    background-position: top center; /* чтобы голова оставалась наверху */
  }
}

/* ===== Contacts: full-page background ===== */
main.contacts-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  margin: 0;
  overflow: hidden;
  margin-bottom: -28px; /* если нужно прижать к футеру — можно оставить */

  background-image: url("../img/photos/photo_5828923499110665211_y.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

main.contacts-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.274);
  z-index: 0;
}

.contacts-page .inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px 60px;
  box-sizing: border-box;
  /* общий цвет текста по умолчанию сделаем светлым */
  color: #ac509c;
}

/* СТЕКЛЯННАЯ ПОДЛОЖКА ПОД ВСЕМ ТЕКСТОМ */
.contacts-glass {
  display: inline-block;
  padding: 24px 26px;
  border-radius: 24px;

  background: rgba(223, 223, 223, 0.068);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: none;
  box-shadow: 0 0 30px rgba(75, 75, 75, 0.041);

  text-align: center;
  margin-top: 60px;
}

/* Заголовки внутри стекла */
.contacts-glass h1,
.contacts-glass h2,
.contacts-glass p,
.contacts-glass b {
  color: #ffffff;
  margin: 0 0 12px;
}

/* Ссылки внутри стекла — светлые, чтобы были видны */
.contacts-glass a {
  color: #ff77df;
  text-decoration: underline;
  margin-top: 60px;
}

/* КАРТА НИЖЕ */
.contacts-map {
  margin-top: 30px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(165, 165, 165, 0.753);
}

.contacts-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* На мобиле убираем баг с фоном и fixed-скроллом */
@media (max-width: 768px) {
  main.contacts-page {
    background-attachment: scroll;
    background-position: top center;
  }

  .contacts-glass {
    padding: 18px 16px;
    border-radius: 18px;
    margin-top: -20px;
  }

  .contacts-map {
    margin-top: 70px;
  }
}

/* Общий layout: текст слева, видео справа */
.pf-texture .pf-layout {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

/* Левая колонка с двумя pf-card одна под другой */
.pf-text-col {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Правая колонка под видео */
.pf-video-col {
  flex: 1 1 45%;
  display: flex;
  align-items: flex-start;
}

/* Внутри секции pf-texture .inner должен идти колонкой */
.pf-texture > .inner {
  display: flex;
  flex-direction: column;
  gap: 40px; /* расстояние между верхним блоком (текст+видео) и нижними картами */
}


.video-block {
  width: 100%;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  margin-top: -40px;
}

.video-inner {
  width: 100%;
  max-width: 370px;   /* компактное видео справа */
  margin: 0 auto;
}

.video-inner video {
  width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.35);
}

/* Адаптив: на телефоне всё в одну колонку */
@media (max-width: 900px) {
  .pf-texture .pf-layout {
    flex-direction: column;
  }

  .pf-video-col {
    order: 3; /* хочешь, можем видео поставить между двумя блоками — скажешь */
  }
}

/* Нижние блоки под видео в одну колонку */
.pf-bottom {
  margin-top: -30px;
  display: flex;
  flex-direction: row;   /* ДВЕ КОЛОНКИ */
  gap: 30px;
  align-items: stretch;
}

/* каждая карта занимает половину строки */
.pf-bottom .pf-card {
  flex: 1 1 50%;
}

/* wide можно чуть по-другому выровнять, если нужно */
.pf-bottom .wide {
  text-align: center;
}

@media (max-width: 900px) {
  .pf-bottom {
    flex-direction: column;
  }
}

/* Внутри as-texture все основные блоки должны идти ВНИЗ, один под другим */
.as-texture > .inner {
  display: flex;
  flex-direction: column;
  gap: 40px; /* расстояние между верхним блоком (текст+видео) и нижним layout с фото */
}


.as-layout {
  display: flex;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 40px;
}

/* два as-card один под другим слева */
.as-text-col {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-left: 40px;
}

/* колонка под видео справа */
.as-video-col {
  flex: 1 1 45%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  margin-top: -20px;
}

/* само видео — аккуратное, не огромное */
.as-video-block {
  width: 100%;
  max-width: 280px;  /* как на портфолио, можно сделать 300–350, если хочешь больше */
  margin-right: 80px;
}

.as-video-block video {
  width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.35);
}

/* ===== AFTER-SCHOOL bottom layout: фото слева, 2 блока справа ===== */

.as-bottom-layout{
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: 32px;
  align-items: start;
  margin-top: -50px;
}

.as-bottom-layout .as-photo {
  margin: 0;
  margin-top: 70px;
  min-width: 0;
}
.as-bottom-text{
  margin: 0;
  min-width: 0;
}

.as-bottom-text .as-card + .as-card {
  margin-top: 28px;
}

@media (max-width: 900px){
  .as-bottom-layout{
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
}

/* =========================
   AFTER-SCHOOL: Mobile fix
   ========================= */
@media (max-width: 900px) {

  /* 1) Верхний layout: вместо "текст слева + видео справа" делаем колонку */
  .as-layout{
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 24px;
  }

  /* 2) Текстовая колонка должна быть на всю ширину, убираем левый отступ */
  .as-text-col{
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
  }

  /* 3) Видео блок тоже на всю ширину, убираем сдвиги */
  .as-video-col{
    flex: 1 1 auto;
    width: 100%;
    margin-top: 0;
    justify-content: flex-start;
  }

  .as-video-block{
    width: 100%;
    max-width: none;     /* было 280px — делало узко */
    margin-right: 0;     /* было 80px — уезжало вправо */
  }

  /* чтобы видео было "как карточка" и не касалось краёв, если надо */
  .as-video-block video{
    width: 100%;
    height: auto;
    display: block;
  }
  .as-bottom-text{
    display: grid;
    gap: 18px;          /* расстояние между двумя блоками */
  }

  /* на всякий случай: чтобы у карточек не было отрицательных маргинов */
  .as-bottom-text > *{
    margin: 0;
  }

  /* если у .inner есть паддинги — ок, если нет — можно добавить:
     .as-texture > .inner { padding-left: 16px; padding-right: 16px; }
     (не включаю по умолчанию, чтобы не сломать остальной дизайн)
  */
}


/* === Summer gallery === */

.summer-gallery {
  margin: 40px 0;
}

.summer-gallery-title {
  text-align: center;
  margin-bottom: 20px;
}

/* Обёртка карусели */
.summer-carousel {
  position: relative;
}

/* видимая область */
.sc-viewport {
  overflow: hidden;
  width: 100%;
}

/* лента слайдов */
.sc-track {
  display: flex;
  transition: transform 0.4s ease;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* элемент */
.sc-item {
  flex: 0 0 25%;        /* 4 фото на десктопе */
  padding: 6px;
  box-sizing: border-box;
}

.sc-item img {
  width: 100%;
  height: 420px;  
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

/* стрелки */
.sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: rgb(95, 0, 79);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.sc-prev { left: 8px; }
.sc-next { right: 8px; }

.sc-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* точки под каруселью */
.sc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.sc-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgb(181, 138, 185);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.sc-dots button.is-active {
  width: 16px;
  background: #5f004f;
  transform: translateY(-1px);
}

.sc-viewport{
  touch-action: pan-y; /* вертикальный скролл страницы разрешён, горизонтальный — наш */
}

/* мобилка: по 2 фото */
@media (max-width: 768px) {
  .sc-item {
    flex: 0 0 50%;      /* 2 фото на экране */
  }
  .sc-item img{
    height: 260px;         /* шире по ощущению */
    object-position: center top; /* головы не режет */
  }
}


/* ===== REVIEWS PAGE LAYOUT ===== */
.reviews-page {
  padding: 80px 0;
}

.reviews-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}

.reviews-header h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

.reviews-header p {
  font-size: 18px;
  line-height: 1.6;
}

/* ===== REVIEWS PAGE LAYOUT ===== */
.reviews-page {
  padding: 80px 0;
}

.reviews-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  color: rgb(95, 0, 79);
}

.reviews-header h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

.reviews-header p {
  font-size: 18px;
  line-height: 1.6;
}

/* ===== CAROUSEL ===== */
.rev-gallery {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.rev-viewport {
  flex: 1;
  overflow: hidden;
}

.rev-track {
  display: flex;
  transition: transform 0.4s ease;
}

/* 2 фото на десктопе */
.rev-slide {
  flex: 0 0 50%;         /* две карточки в один экран */
  padding: 8px;
  box-sizing: border-box;
}

.rev-slide img {
  width: 100%;
  height: 650px;
  display: block;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* фиолетовые стрелки */
.rev-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgb(95, 0, 79);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.rev-arrow:hover {
  background: rgb(95, 0, 79);
  box-shadow: 0 8px 20px rgb(95, 0, 79);
  transform: translateY(-1px);
}

/* точки снизу */
.rev-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.rev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgb(95, 0, 79);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.rev-dot.is-active {
  background: rgb(95, 0, 79);
  transform: scale(1.1);
}

/* ссылка с гугл мапс */
.reviews-more {
  margin-top: 32px;
  text-align: center;
  font-size: 24px;
  color: rgb(95, 0, 79);
}

.reviews-more a {
  font-weight: 600;
  text-decoration: underline;
}

/* ===== LIGHTBOX ===== */
.rev-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.rev-lightbox.is-open {
  display: flex;
}

.rev-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

/* делаем картинку крупнее */
.rev-lightbox img {
  position: relative;
  max-width: 120vw;
  max-height: 120vh;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.rev-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .rev-gallery {
    gap: 8px;
  }

  .rev-slide {
    flex: 0 0 100%;   /* по одной фотке */
  }

  .rev-slide img {
    height: 62vh !important;
    width: 100% !important;
    object-fit: cover;              /* заполнение, но с обрезкой */
  }

  .rev-arrow {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .reviews-header h1 {
    font-size: 36px;
  }

  .reviews-header p {
    font-size: 16px;
  }
}

/* ===== Cookie banner ===== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 9999;
  background: rgba(10, 6, 30, 0.96); /* тёмный фон, чуть прозрачный */
  color: #fff;

  font-size: 13px;
  line-height: 1.5;
}

.cookie-banner.is-hidden {
  display: none;
}

.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;

  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.cookie-text {
  margin: 0;
}

.cookie-link {
  color: #ffb5e1;
  text-decoration: underline;
}

.cookie-link:hover {
  text-decoration: none;
}

.cookie-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 18px;

  background: #5f004f;   /* твой фирменный фиолетовый */
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.cookie-btn:hover {
  background: #7a0667;
}

.cookie-btn:active {
  transform: translateY(1px);
}

/* адаптив — на телефоне всё в колонку */
@media (max-width: 768px) {
  .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cookie-btn {
    align-self: flex-end;
  }
}

/* ===== Simple photo carousel (kids + after-school) ===== */
.simple-carousel {
  position: relative;
  overflow: hidden;
}

.simple-carousel .sc-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.simple-carousel .sc-slide {
  flex: 0 0 100%;           /* всегда одна фотка за раз */
  padding: 0 4px;
  box-sizing: border-box;
}

.simple-carousel .sc-slide img {
  width: 100%;
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  object-fit: cover;
}

/* стрелки */
.simple-carousel .sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgb(95, 0, 79);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.simple-carousel .sc-arrow:hover {
  background: rgb(95, 0, 79);
}

.simple-carousel .sc-prev { left: 4px; }
.simple-carousel .sc-next { right: 4px; }

/* точки под каруселью */
.simple-carousel .sc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.simple-carousel .sc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
}

.simple-carousel .sc-dot.is-active {
  background: #5f004f;
  width: 18px;
}

/* desktop/tablet */
.simple-carousel .sc-slide img{
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (max-width: 900px){
  .simple-carousel .sc-slide img{
    aspect-ratio: 3 / 4;  /* портрет на телефоне */
  }
}

/* на очень узких экранах можно сделать фотку чуть ниже по высоте, если захочешь:
@media (max-width: 600px) {
  .simple-carousel .sc-slide img {
    max-height: 320px;
  }
}
*/


.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 9999;
}

.video-modal.open {
  display: flex;
}

.video-modal-inner {
  position: relative;
  width: min(900px, 95%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.video-modal-frame-wrap {
  width: 100%;
  height: 100%;
}

.video-modal iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  cursor: pointer;
}

/* кнопка play на превью */
.yt-thumb {
  position: relative;
  cursor: pointer;
}

.yt-thumb img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.yt-play {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 16px;
}


/* Общий стиль списка видео */
.video-list,
.events-video-list {
  display: grid;
  gap: 24px;
}

/* Мобильный: по одному в строку */
@media (max-width: 767px) {
  .video-list,
  .events-video-list {
    grid-template-columns: 1fr;
  }
}

/* Планшет / маленький десктоп: 2 в строку */
@media (min-width: 768px) and (max-width: 1199px) {
  .video-list,
  .events-video-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Большой экран: 3 или 4 в строку (зависит от ширины контейнера) */
@media (min-width: 1200px) {
  .video-list,
  .events-video-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Карточка видео */
.video-item,
.event-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Сам фрейм — адаптивное 16:9 */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
}

.video-item iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  height: auto;
}

.video-item.is-short iframe {
  aspect-ratio: 9 / 16;
  max-height: 480px; /* можно больше */
}


/* -------- Общий стиль карусели (Kids + After) -------- */

.km-photo-stack .simple-carousel,
.as-bottom-layout .as-photo .simple-carousel {
  position: relative;
  max-width: 400px;         /* как твоя картинка раньше */
}

.km-photo-stack .sc-track,
.as-bottom-layout .as-photo .sc-track {
  width: 100%;
}

.km-photo-stack .sc-slide,
.as-bottom-layout .as-photo .sc-slide {
  width: 100%;
}

.km-photo-stack img,
.as-bottom-layout .as-photo img {
  width: 100%;
  height: 460px;         /* выбери высоту, которая тебе по виду нравится */
  object-fit: cover;     /* <–– аккуратно кадрирует по центру */
  border-radius: 12px;
  display: block;
}

/* Стрелки поверх фото, а не в потоке */
.sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: none;
  cursor: pointer;

  background: #5f004f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* левая и правая позиции */
.sc-prev { left: 8px; }
.sc-next { right: 8px; }

/* точки под фото */
.simple-carousel .sc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.simple-carousel .sc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
}

.simple-carousel .sc-dot.active {
  background: #5f004f;
}

.as-bottom-layout .simple-carousel .sc-slide img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

@media (max-width: 900px) {
  .km-feature-inner,
  .as-bottom-layout {
    flex-direction: column;
  }

  .as-bottom-layout .as-photo,
  .as-bottom-text {
    margin-left: 0;
    margin-right: 0;
  }
}

/* FIX: albums invisible because animation class never gets applied */
#photoAlbumList .media-album{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ===== FIX: Back/Close must be clickable ===== */
.media-viewer-top,
.media-viewer-top * {
  pointer-events: auto !important;
}

.media-back,
.media-close {
  position: relative;
  z-index: 150 !important;
  pointer-events: auto !important;
}

/* если какой-то слой перекрывает (часто бывает из-за margin/pseudo-elements) */
.media-viewer-top::before,
.media-viewer-top::after,
.media-viewer::before,
.media-viewer::after {
  pointer-events: none !important;
}

/* ===== video cards: make iframes visible (no 0-height) ===== */
.video-item iframe,
.events-video-list .video-item iframe {
  width: 100%;
  border: 0;
  display: block;
  aspect-ratio: 16 / 9; /* обычное видео */
}

.video-item.is-short iframe {
  aspect-ratio: 9 / 16; /* shorts вертикальные */
  max-height: 70vh;     /* чтобы не было слишком огромным */
}

/* =========================
   GALLERY VIEWER — MOBILE FIX
   (put at the VERY END of CSS)
========================= */
@media (max-width: 900px) {

  /* 1) Верхняя панель: Back | Title(center) | Close */
  .media-viewer-top{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;

    margin: 0 0 10px 0 !important;
    padding: 10px 6px !important;
  }

  .media-viewer-top h2{
    grid-column: 2 !important;
    justify-self: center !important;
    text-align: center !important;

    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;

    /* СБРОС твоих "уезжающих" значений */
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  /* Back и Close чтобы не ломались */
  .media-back{
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
  }

  .media-close{
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
  }

  /* 2) Делаем фото крупнее на телефоне: 1 фото на экран */
  .media-slider-track{
    margin-top: 10px !important; /* у тебя было 60px — на мобиле это лишнее */
    gap: 10px !important;
  }

  .media-slide{
    flex: 0 0 88vw !important;     /* крупно */
    max-width: 88vw !important;
    height: 50vh !important;       /* крупно по высоте */
    margin-top: 0 !important;
  }

  .media-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* 3) ВКЛЮЧАЕМ стрелки на телефоне (перебиваем старые display:none) */
  .media-prev,
  .media-next{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    height: 36px !important;
    z-index: 20 !important;
    opacity: 0.95 !important;

    top: 50% !important;
    margin-top: -20px;
    transform: translateY(-50%) !important;
  }

  /* чтобы их не резало */
  .media-prev{ left: 10px !important; }
  .media-next{ right: 10px !important; }

  /* 4) Точки можно оставить */
  .media-dots{
    justify-content: center !important;
    margin-top: 10px !important;
  }
}

/* tagline под кнопкой */
.hero-tagline{
  margin-top: 14px;           /* расстояние от кнопки */
  text-align: center;

  color: #B20000;
  font-weight: 800;
  font-size: 16px;            /* ⬅️ можно увеличить */
  line-height: 1.25;

  text-transform: uppercase;
  letter-spacing: .06em;
  max-width: 90vw;
}

@media (min-width: 900px){
  .hero-tagline{
    font-size: 18px;
  }
}



/* текстовая плашка слева от иконок */
/* ---------- header icons base ---------- */
.header-icons a{
  text-decoration: none;
  color: #fff;
}

/* круглая кнопка только для иконок */
.header-icons .contact-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ---------- desktop: text pill ---------- */
.contact-pill{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 0 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);

  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;

  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: background .25s ease, transform .2s ease;
}

.contact-pill:hover,
.contact-pill:focus-visible{
  background: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

/* ---------- mobile: location icon ---------- */
.contact-location{
  display: none !important; /* скрыто на десктопе */
}

/* FIX: картинка никогда не раздувается */
.contact-location img,
.location-ico{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  object-fit: contain !important;
}

/* ---------- switch: mobile only icon, desktop only pill ---------- */
@media (max-width: 900px){
  .contact-pill{ display: none !important; }
  .contact-location{ display: grid !important; }
}