/* /assets/css/styles.css — v3.0 */

/* ========== Base & Variables ========== */
:root{
  --navy:#263B60; --blue:#99D8FF;
  --teal1:#C1E8E3; --teal2:#6FD9D5; --teal3:#77C4CA;
  --text:#233A5A; --muted:#60708F; --bg:#f5f5f4;
  --clr-border:#eaf4ff;
  --radius:22px; --btn-radius:12px;
  --shadow:0 20px 40px rgba(38,59,96,.08), 0 6px 12px rgba(38,59,96,.06);
  --shadow-soft:0 10px 22px rgba(38,59,96,.07);
  --grad:linear-gradient(135deg, #99D8FF 0%, #6FD9D5 100%);
  --grad-bg:linear-gradient(180deg, rgba(153,216,255,.10), rgba(111,217,213,.08));
  --grad-bg-alt:linear-gradient(135deg, rgba(111,217,213,0.08), rgba(153,216,255,0.08));
  --icon-box:40px; --icon-size:24px;
  --hero-badge-width:170px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;color:var(--text);background:var(--bg);line-height:1.65;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{line-height:1.2;margin:0 0 12px;color:var(--text)}
h1{font-weight:800;font-size:clamp(24px,3.7vw,37px)}
h2{font-weight:800;font-size:clamp(18px,2.4vw,24px)}
h3{font-weight:700;font-size:16px}
p{margin:0 0 12px}
a{text-decoration:none;color:var(--navy)}
.container{max-width:1160px;margin-left:auto;margin-right:auto;padding:0 20px}
.muted{color:var(--muted)}

/* ========== Header & Navigation ========== */
.site-header{
  position:fixed;top:0;left:0;right:0;
  background:#ffffffcc;border-bottom:1px solid var(--clr-border);
  z-index:100;backdrop-filter:saturate(120%) blur(8px)
}
.nav{
  display:flex;gap:14px;justify-content:space-between;align-items:center;min-height:72px
}
.brand img{display:block;height:60px;width:auto}
.menu{
  display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0;z-index:150
}
.menu a{
  color:var(--text);font-weight:600;position:relative;padding:6px 8px;border-radius:10px;
  transition:box-shadow .25s ease
}
.menu a.active{box-shadow:0 0 18px 7px rgba(111,217,213,.45)}

/* Language Switcher (Desktop & Mobile) */
.lang-switch,
.mobile-lang-switch{
  position:relative;display:flex;gap:6px;align-items:center
}
.lang{
  border:1px solid var(--clr-border);background:#fff;color:#233A5A;border-radius:10px;
  padding:6px 10px;font-weight:700;cursor:default;transition:all .2s
}
.lang.active{
  background:#f1f9ff;border-color:#d8eeff;cursor:pointer;position:relative;z-index:10
}
.lang:disabled{opacity:.5;cursor:not-allowed}

/* Стрелочка у активной кнопки */
.lang.active::after{
  content:'';display:inline-block;margin-left:6px;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  vertical-align:middle;
  transition:transform .2s ease
}
.lang-switch.open .lang.active::after,
.mobile-lang-switch.open .lang.active::after{
  transform:rotate(180deg)
}

/* Desktop: скрываем неактивные */
.lang-switch .lang:not(.active){display:none}

/* Desktop: выпадающий список (абсолютное позиционирование) */
.lang-switch.open .lang:not(.active){
  display:block;position:absolute;top:100%;left:0;right:0;
  margin-top:6px;min-width:100%;opacity:0;z-index:150;
  animation:langFadeIn .2s ease forwards
}
.lang-switch.open .lang:nth-child(2){margin-top:6px;animation-delay:.03s}
.lang-switch.open .lang:nth-child(3){margin-top:46px;animation-delay:.06s}
.lang-switch.open .lang:nth-child(4){margin-top:86px;animation-delay:.09s}

@keyframes langFadeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Mobile: скрываем по умолчанию */
.mobile-lang-switch{
  display:none;flex-direction:column;align-items:stretch;
  padding-top:12px;border-top:1px solid var(--clr-border);margin-top:8px;gap:8px
}
.mobile-lang-switch .lang:not(.active){display:none}

/* Mobile: открытое состояние */
.mobile-lang-switch.open .lang:not(.active){
  display:block;opacity:0;animation:langFadeInMobile .2s ease forwards
}
.mobile-lang-switch.open .lang:nth-child(2){animation-delay:.03s}
.mobile-lang-switch.open .lang:nth-child(3){animation-delay:.06s}
.mobile-lang-switch.open .lang:nth-child(4){animation-delay:.09s}

@keyframes langFadeInMobile{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}

/* ========== Mobile Navigation ========== */
.nav-toggle{
  display:none;position:relative;border:1px solid var(--clr-border);background:#eaf4ff;
  width:44px;height:44px;border-radius:12px;box-shadow:var(--shadow-soft);z-index:201
}
.nav-toggle .line{
  position:absolute;left:10px;right:10px;height:2px;background:var(--navy);
  border-radius:2px;transition:transform .2s,opacity .2s,top .2s
}
.nav-toggle .line:nth-child(1){top:13px}
.nav-toggle .line:nth-child(2){top:21px}
.nav-toggle .line:nth-child(3){top:29px}
.nav-toggle.open .line:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle.open .line:nth-child(2){opacity:0}
.nav-toggle.open .line:nth-child(3){top:21px;transform:rotate(-45deg)}

.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  display:none;z-index:180;opacity:0;transition:opacity .25s
}
.nav-overlay.show{display:block;opacity:1}

.mobile-only{display:none}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;
  border-radius:var(--btn-radius);border:1px solid transparent;font-weight:800;
  font-size:16px;line-height:1;cursor:pointer;
  transition:transform .06s ease,box-shadow .25s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#0d2b3b;border:0;box-shadow:var(--shadow)}
.btn-secondary{background:#fff;border:1px solid #D8EEFF;color:#233A5A;box-shadow:var(--shadow-soft)}
.btn-outline{background:#fff;border:1px solid #D8EEFF;color:#233A5A;box-shadow:var(--shadow-soft)}
.btn-wide{min-width:170px}
.btn-whatsapp{
  display:inline-flex;gap:8px;align-items:center;background:#25D366;color:#fff !important;
  padding:12px 16px;border-radius:12px;border:0;box-shadow:var(--shadow-soft);
  font-size:16px !important;font-weight:800 !important;transition:transform .06s ease
}
.btn-whatsapp:hover{transform:translateY(-1px)}

/* ========== Decorative glows ========== */
.hero,.section{position:relative}
.hero::before,.hero::after,.section::before{
  content:"";position:absolute;z-index:-1;filter:blur(40px);opacity:.35;pointer-events:none
}
.hero::before{width:220px;height:220px;left:-50px;top:-40px;background:#C1E8E3;border-radius:50%}
.hero::after{width:280px;height:280px;right:-50px;bottom:-40px;background:#99D8FF;border-radius:50%}
.section::before{width:160px;height:160px;right:-30px;top:-20px;background:#6FD9D5;border-radius:50%;opacity:.18}

/* ========== Section spacing ========== */
.section{padding:64px 0}

/* ========== Hero ========== */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:620px;
  padding:80px 0;
  margin-top:72px; /* не залезаем под фиксированный header (72px) */
  overflow:hidden;
  text-align:center;
  width:100%; /* секция на всю ширину, без 100vw-хаков */
}

.hero-bg-video{
  position:absolute;
  inset:0;             /* растягиваем на всю секцию */
  width:100%;
  height:100%;
  object-fit:cover;    /* видео заполняет фон без полос */
  z-index:1;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(38,59,96,0.65);
  z-index:2;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:3;
  max-width:800px;
  color:#fff;
  margin:0 auto;
}

.hero-content h1{
  color:#fff;
  font-size:clamp(26px,4.2vw,48px);
  margin-bottom:16px;
  text-shadow:0 4px 12px rgba(0,0,0,.4);
  display:inline; /* оставляем inline, обвязка .nowrap управляет переносами */
}

.nowrap{ white-space:nowrap; }

.hero-content h1 .sparkle{
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  animation:sparkleFloat 3s ease-in-out infinite;
}

@keyframes sparkleFloat{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-8px) rotate(5deg); }
}

.hero-content .hero-sub{
  font-weight:700;
  color:#6FD9D5;
  margin-top:12px;
  margin-bottom:16px;
  font-size:clamp(13px, 2.1vw, 22px);
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}

.hero-content > p{
  color:#fff;
  margin-bottom:24px;
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.6;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}

.hero-ctas{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:28px;
  flex-wrap:wrap;
}

.g-badge{ margin-top:28px; }
.g-badge.bare{ display:inline-block;width:var(--hero-badge-width);height:auto }

/* ========== Vision ========== */
.vs2-grid{
  display:grid;grid-template-columns:1.05fr 1.95fr;gap:18px;align-items:stretch;margin-top:10px;
  position:relative;background:var(--grad-bg);border-radius:18px;overflow:hidden
}
.vs2-grid::before{
  content:"";position:absolute;left:34.5%;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(111,217,213,.6) 20%,rgba(111,217,213,.6) 80%,transparent 100%)
}
.vs2-left{display:flex;align-items:center;min-height:100%;padding:18px 16px}
.vs2-quote{display:flex;align-items:center;gap:12px}
.vs2-qmark{
  font-family:'News Cycle',sans-serif;font-size:72px;line-height:.8;margin-top:-6px;
  background:linear-gradient(135deg,#6FD9D5,#99D8FF);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:700
}
.vs2-lines{display:flex;flex-direction:column;gap:2px;font-weight:800;color:#0f2f48}
.vs2-right{min-width:0;padding:18px 16px}
.vs2-band p{margin:0 0 12px}
.vs2-band p:last-child{margin-bottom:0}

/* ========== About ========== */
.about-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px;align-items:center}
.about-photo img{
  border-radius:24px;width:100%;max-width:400px;aspect-ratio:4/5;
  object-fit:cover;border:0;box-shadow:none
}
.about-cta-desktop{margin-top:8px}
.about-cta-mobile{display:none}

/* ========== Services ========== */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
  background:#fff;padding:40px 24px;border-radius:var(--radius);
  border:1px solid var(--clr-border);box-shadow:var(--shadow-soft);
  transition:transform .28s ease,box-shadow .28s ease;
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);z-index:2}
.card-ico{
  width:var(--icon-box);height:var(--icon-box);border-radius:14px;
  background:#ecf7ff;display:flex;align-items:center;justify-content:center;margin-bottom:16px
}
.card-ico img{width:var(--icon-size);height:var(--icon-size)}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card .time{font-size:14px;color:var(--muted);margin-bottom:12px}
.card .desc{font-size:14px;line-height:1.5}

/* ===== LABEL ====== */
/* Диагональный треугольный уголок в правом нижнем углу */
.card-corner{
  --corner-size: 112px;
  --corner-bg: #eaf4ff;

  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--corner-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
  z-index: 3;
  border-bottom-right-radius: var(--radius);
}

/* Логотип внутри уголка по диагонали */
.card-corner img{
  position: absolute;
  right: 6px;
  bottom: 60px;
  max-width: 68px;
  height: auto;
  transform: rotate(-45deg);
  transform-origin: 100% 100%;
  display: block;
}

/* Индивидуальные подстройки размеров логотипов */
.brand-zoom img{      max-width: 82px }
.brand-swarovski img{ max-width: 74px }
.brand-airflow img{   max-width: 76px }

/* На ховере карточки — легкая глубина у уголка (только для не-тач устройств) */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-corner{
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.08));
  }
}

/* Адаптация для мобайла */
@media (max-width: 640px){
  /* Отключаем hover-эффекты на мобильных */
  .card:hover{
    transform: none;
    box-shadow: var(--shadow-soft);
    z-index: 1;
  }
  
  .card-corner{ 
    --corner-size: 94px; 
  }
  .card-corner img{
    right: 4px;
    bottom: 48px;
    max-width: 52px;
  }
  
  /* Индивидуальные подстройки для мобильных */
  .brand-zoom img{      max-width: 64px; }
  .brand-swarovski img{ max-width: 58px; }
  .brand-airflow img{   max-width: 60px; }
}

/* Карточка с кнопкой внизу */
.card-with-button {
  display: flex;
  flex-direction: column;
  padding-bottom: 72px; /* Место для кнопки */
  position: relative;
}

.card-with-button .desc {
  flex: 1; /* Описание занимает всё доступное пространство */
}

.card-bottom-btn {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  width: calc(100% - 148px);
  margin: 0;
}

@media (max-width: 640px) {
  .card-with-button {
    padding-bottom: 68px;
  }
  
  .card-bottom-btn {
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: calc(100% - 130px);
  }
}


/* ========== Ritual ========== */
.ritual-band{background:var(--grad-bg-alt);margin:20px 0;padding:28px 0}
.ritual-band-inner{
  display:grid;grid-template-columns:1.05fr 1.95fr;gap:18px;align-items:center;position:relative
}
.ritual-band-inner::before{
  content:"";position:absolute;left:34.5%;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(111,217,213,.6) 20%,rgba(111,217,213,.6) 80%,transparent 100%)
}
.ritual-left h3,.ritual-right p{color:#263B60}

/* ========== Billing ========== */
.insurers-marquee-bleed{
  position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
  padding:14px 0;background:var(--grad-bg);overflow:hidden;margin-bottom:18px
}
.insurers-marquee{
  position:relative;height:56px;display:flex;align-items:center;
  mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%)
}
.insurers-track{display:flex;width:max-content;animation:scroll 35s linear infinite}
.insurers-seq{display:flex;flex-shrink:0;align-items:center;column-gap:26px}
.insurers-seq img{height:34px;display:block;filter:grayscale(100%);opacity:.9;user-select:none}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ========== Benefits ========== */
.benefits.bubbles{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin-top:12px}
.benefits.bubbles li{
  border:1px solid var(--clr-border);border-radius:999px;padding:10px 14px;
  background:#fff;box-shadow:var(--shadow-soft);font-weight:700;display:flex;align-items:center;gap:8px
}
.benefits.bubbles .s-icon{font-weight:900;color:#6FD9D5}
.benefits.bubbles .b1{background:#effbff}.benefits.bubbles .b2{background:#f6fffd}
.benefits.bubbles .b3{background:#f9fbff}.benefits.bubbles .b4{background:#f0fcff}
.benefits.bubbles .b5{background:#f7fffe}.benefits.bubbles .b6{background:#f3fbff}
.benefits.bubbles .b7{background:#f9fffe}.benefits.bubbles .b8{background:#f5fbff}
.benefits.bubbles .b9{background:#ffffff}.benefits.bubbles .b10{background:#ffffff}
.benefits.bubbles .b11{background:#eefaff}.benefits.bubbles .b12{background:#f1fffa}
.benefits.bubbles .b13{background:#f7fbff}

/* ========== Philips Zoom Video ========== */
.zoom-video-section{
  position:relative;
  width:100%;
  overflow:hidden;
  margin:40px 0
}
.zoom-bg-video{
  width:100%;
  height:auto;
  display:block;
}
.zoom-overlay{
  position:absolute;
  inset:0;
  background:rgba(38,59,96,0.65);
  z-index:1;
  pointer-events:none
}
.zoom-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  color:#fff;
  max-width:800px;
  padding:0 20px;
  width:100%
}
.zoom-content h2{
  color:#fff;
  font-size:clamp(22px,3.5vw,36px);
  margin-bottom:14px;
  text-shadow:0 4px 12px rgba(0,0,0,.4)
}
.zoom-content p{
  font-size:clamp(16px,2vw,20px);
  line-height:1.6;
  margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.3)
}


/* ========== Our Studio ========== */
.studio-sub{text-align:left;font-size:16px;color:var(--muted);margin-bottom:18px}
.studio-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.studio-item{
  overflow:hidden;border-radius:16px;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;position:relative
}
.studio-item:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.studio-item img{width:100%;height:100%;object-fit:cover}
.studio-mosaic .m1{grid-column:1/3;grid-row:1/2}
.studio-mosaic .m2{grid-column:3/5;grid-row:1/2}
.studio-mosaic .m3{grid-column:1/2;grid-row:2/4}
.studio-mosaic .m4{grid-column:2/3;grid-row:2/4}
.studio-mosaic .m5{grid-column:3/4;grid-row:2/3}
.studio-mosaic .m6{grid-column:4/5;grid-row:2/3}
.studio-mosaic .m7{grid-column:3/5;grid-row:3/4}

/* ========== Lightbox ========== */
.lightbox{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);z-index:9999;align-items:center;justify-content:center
}
.lightbox.show{display:flex}
.lightbox-img{max-width:90vw;max-height:90vh;border-radius:12px;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;background:#fff;border:1px solid #d8eeff;color:#233A5A;
  width:46px;height:46px;border-radius:12px;font-size:28px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s ease;box-shadow:var(--shadow-soft)
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{
  background:#f1f9ff;transform:scale(1.05)
}
.lightbox-close{top:20px;right:20px}
.lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox-prev:hover{transform:translateY(-50%) scale(1.05)}
.lightbox-next:hover{transform:translateY(-50%) scale(1.05)}

/* ========== Gallery (Before & After Slider) ========== */
.gallery-subtitle{
  text-align:left;font-size:15px;color:var(--muted);margin-top:-6px;margin-bottom:20px
}

.ba-container{
  max-width:886px;margin:0 auto
}

.ba-slider{
  position:relative;width:100%;aspect-ratio:886/335;overflow:hidden;
  border-radius:20px;border:1px solid var(--clr-border);box-shadow:var(--shadow);
  user-select:none;cursor:ew-resize;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none
}

/* Before изображение (фон, всегда видно полностью) */
.ba-before{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:1;pointer-events:none;user-select:none;
  -webkit-user-drag:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none
}

/* After wrapper — clip-path обрезает справа */
.ba-after-wrapper{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:2;
  clip-path:inset(0 50% 0 0);
  transition:clip-path .05s ease-out
}

.ba-after{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;user-select:none;
  -webkit-user-drag:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none
}

/* Вертикальный ползунок */
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:4px;
  transform:translateX(-50%);z-index:3;pointer-events:none;
  transition:left .05s ease-out
}

.ba-handle-line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:#fff;box-shadow:0 0 8px rgba(0,0,0,.4);transform:translateX(-50%)
}

.ba-handle-button{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;cursor:ew-resize;
  transition:transform .2s ease,box-shadow .2s ease;
  padding:10px
}

.ba-slider:hover .ba-handle-button{
  transform:translate(-50%,-50%) scale(1.1);
  box-shadow:0 6px 16px rgba(0,0,0,.35)
}

.ba-handle-button img{
  width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none
}

/* Лейблы Before/After */
.ba-label{
  position:absolute;top:16px;padding:8px 14px;
  background:rgba(255,255,255,.95);border-radius:8px;
  font-weight:700;font-size:13px;color:#263B60;
  box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:4;
  pointer-events:none;text-transform:uppercase;letter-spacing:.5px
}

.ba-label-before{left:16px}
.ba-label-after{right:16px}

/* ========== Reviews ========== */
.reviews-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:18px
}
.reviews-head .glogo{height:34px;width:auto}
.reviews-carousel{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rv-arrow{
  background:#fff;border:1px solid #d8eeff;color:#233A5A;width:46px;height:46px;
  border-radius:12px;font-size:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-soft);flex-shrink:0
}
.rv-arrow:hover{background:#f1f9ff;transform:scale(1.05)}
.rv-track-wrap{flex:1;overflow:hidden;position:relative}
.rv-track{display:flex;transition:transform .4s ease}
.rv-card{
  min-width:100%;padding:28px;background:#fff;border:1px solid var(--clr-border);
  border-radius:var(--radius);box-shadow:none
}
.rv-stars{color:#FFB800;font-size:24px;margin-bottom:10px}
.rv-text{margin-bottom:12px;line-height:1.7;font-size:15px}
.rv-name{font-weight:700;color:#0f2f48}
.rv-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.rv-dot{
  width:10px;height:10px;border-radius:50%;background:#d8eeff;border:0;
  padding:0;cursor:pointer;transition:all .2s ease
}
.rv-dot.active{background:#6FD9D5;width:28px;border-radius:6px}

/* ========== Instagram ========== */
.insta-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:18px
}
.insta-sub{font-size:16px;color:var(--muted);margin-top:-6px}
.instawall{min-height:300px}

/* ========== CTA band ========== */
.cta-band{background:var(--grad);margin:20px 0}
.cta-band-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 8px
}
.cta-band h3{font-size:clamp(18px,2.4vw,24px);color:#0d2b3b;margin:0}

/* ========== FAQ ========== */
.faq-title{text-align:center;margin-bottom:24px}
.faq-group{
  color:#b8c9dd;margin:24px 0 10px;text-align:center;font-size:17px;
  font-weight:600;letter-spacing:.5px
}
.faq-list{max-width:880px;margin:0 auto}
.faq-item{
  border:1px solid var(--clr-border);border-radius:16px;background:#fff;
  box-shadow:var(--shadow-soft);padding:0;overflow:hidden;margin-bottom:10px
}
.faq-item summary{
  display:flex;justify-content:space-between;align-items:center;padding:18px 22px;
  cursor:pointer;font-weight:700;color:#263B60;list-style:none;user-select:none;
  transition:background .2s ease
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:#f9fcff}
.faq-item summary .chev{
  font-size:24px;line-height:1;transition:transform .25s ease;color:#99D8FF;font-weight:900
}
.faq-item[open] summary .chev{transform:rotate(180deg)}
.faq-body{padding:0 22px 18px;color:var(--text);line-height:1.7}
.faq-body ul{padding-left:20px;margin:8px 0}
.faq-body ul li{margin-bottom:6px}

/* ========== Contact ========== */
.contact-zone{border-top:1px solid var(--clr-border);padding-top:48px}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-bottom:28px}
.contact-left h2{margin-bottom:14px}
.contact-left p{margin-bottom:12px}
.contact-left a{color:#263B60;font-weight:400}
.addr-link{display:inline;color:#6FD9D5}
.addr-mobile{display:none}
.open-badge{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;
  border:1px solid #ffd9d9;background:#ffecec;font-weight:700;color:#9a1a1a;
  margin-bottom:12px;box-shadow:var(--shadow-soft)
}
.open-badge.open{color:#0d6a3a;border-color:#d1f7e3;background:#eafff4}

/* Opening Hours */
.hours-box{
  --rail-pad:12px;
  --dot:10px;
  --ico:18px;
  background:transparent;border:0;box-shadow:none;padding:0
}
.hours-box h3{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;color:#0f2f48;
  font-weight:800;letter-spacing:.2px;
  padding-left:calc(var(--rail-pad) + (var(--dot) - var(--ico))/2)
}
.hours-box h3::before{
  content:"";inline-size:var(--ico);block-size:var(--ico);background:#99D8FF;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8m.5-13h-1v6l4.5 2.7l.5-.83L12.5 12Z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8m.5-13h-1v6l4.5 2.7l.5-.83L12.5 12Z"/></svg>') center/contain no-repeat
}
.hours-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.hours-box li{
  display:flex;align-items:center;gap:12px;padding:10px var(--rail-pad);
  border-radius:12px;border:1px solid #eef6ff;background:#fff
}
.hours-box li::before{
  content:"";inline-size:var(--dot);block-size:var(--dot);border-radius:50%;
  margin-right:6px;flex:0 0 auto;background:#cfdcf0;border:1px solid #d8e6ff
}
.hours-box .day{flex:0 0 180px;font-weight:500;color:#263B60}
.hours-box strong{
  margin-left:auto;color:#263B60;font-weight:500;font-variant-numeric:tabular-nums
}
.hours-box li:nth-child(1){background:#fff;border-color:#99D8FF}
.hours-box li:nth-child(1)::before{background:#fff;border:1px solid #99D8FF}
.hours-box li:nth-child(2){background:#ecf7ff;border-color:#99D8FF}
.hours-box li:nth-child(2)::before{background:#99D8FF;border:1px solid #99D8FF}

/* ========== Map ========== */
.map-section{margin-top:28px}
.map-figure{
  position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--clr-border);box-shadow:var(--shadow-soft);aspect-ratio:16/5
}
.map-img{width:100%;height:100%;object-fit:cover;display:block}
.gmap-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.gmap-embed.loaded{display:block}
.map-actions.below{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}

/* ========== Footer ========== */
.site-footer{
  background:#f9fcff;border-top:1px solid var(--clr-border);padding:32px 0 22px
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(240px,1.00fr) minmax(260px,1.05fr) minmax(420px,1.45fr);
  gap:26px;align-items:start
}
.footer-logo{width:168px;margin-bottom:10px}
.site-footer .small{font-size:13px;line-height:1.5}
.site-footer .muted{color:var(--muted)}
.foot-title{
  margin:0 0 8px;font-size:clamp(15px,1.6vw,16px);color:#0f2f48;
  font-weight:800;letter-spacing:.2px
}
.footer-col-useful ul,
.footer-col-getting ul{
  list-style:none;padding:0;margin:0
}
.footer-col-useful li,
.footer-col-getting li{
  margin:0;line-height:1.8;font-size:clamp(14px,1.4vw,15px);color:#0f2f48
}
.footer-col-useful{padding-left:12px}
.footer-col-useful a{
  color:var(--muted);font-weight:500;text-underline-offset:3px;
  transition:color .18s ease,text-decoration-color .18s ease
}
.footer-col-useful a:hover{
  color:var(--teal2);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--teal2) 65%,transparent)
}
.footer-col-useful a:focus-visible{
  outline:2px solid color-mix(in srgb,var(--teal2) 45%,transparent);
  outline-offset:2px;border-radius:6px
}
.footer-col-getting li{display:flex;align-items:flex-start;gap:10px}
.footer-col-getting li + li{margin-top:12px}
.footer-col-getting li strong{
  flex:0 0 88px;white-space:nowrap;margin:0;color:#0f2f48;font-weight:700
}
.footer-col-getting li span{display:inline-block}
.footer-col-getting .stop{display:block;margin-top:2px;color:#0f2f48}
.footer-bottom{margin-top:18px}
.footer-sep{
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(111,217,213,.6) 20%,rgba(111,217,213,.6) 80%,transparent 100%);
  border-radius:1px
}
.site-footer .copyright{
  margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted)
}

/* ========================================
   MEDIA QUERIES (consolidated)
   ======================================== */

/* Desktop tweaks (1080px) */
@media (max-width:1080px){
  .vs2-grid{grid-template-columns:1fr}
  .vs2-grid::before{display:none}
  .ritual-band-inner{grid-template-columns:1fr}
  .ritual-band-inner::before{display:none}
}

/* Tablet & Mobile (920px) */
@media (max-width:920px){
  /* Layout - ПРИНУДИТЕЛЬНЫЕ ОТСТУПЫ */
  .container{
    padding-left:20px !important;
    padding-right:20px !important
  }
  .section{padding:36px 0}
  
  /* Header */
  .lang-switch{display:none}
  .nav-toggle{display:block}
  .nav .menu{
    display:block;position:fixed;right:0;top:0;height:100vh;
    width:min(320px,85vw);background:#fff;border-left:1px solid var(--clr-border);
    box-shadow:var(--shadow);padding:80px 16px 16px;z-index:200;
    transition:transform .25s ease;overflow-y:auto;transform:translateX(100%)
  }
  .nav .menu.open{transform:translateX(0)}
  .menu li{margin:12px 0}
  .menu .btn{margin-top:10px;width:100%;padding:16px 16px}
  .menu.open .mobile-only{display:flex}
  .menu.open .mobile-lang-switch{display:flex}
  
  /* Hero */
  .hero{grid-template-columns:1fr}

/* Small mobile (640px) */
@media (max-width: 640px) {
  /* Hero - ещё меньше на телефонах */
  .hero-content h1 {
    font-size: clamp(35px, 7vw, 50px);
  }
}
.hero-content .hero-sub {
    font-size: clamp(18px, 3.5vw, 24px);
  }

  
  /* About */
  .about-grid{grid-template-columns:1fr}
  .about-cta-desktop{display:none}
  .about-cta-mobile{display:inline-flex;margin-top:8px}
  
  /* Services */
  .services-grid{grid-template-columns:repeat(1,1fr)}
  
  /* Studio */
  .studio-mosaic{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:160px;
    gap:12px
  }
  .studio-mosaic .m1{grid-column:1/3;grid-row:1/3}
  .studio-mosaic .m2{grid-column:1/2;grid-row:3/4}
  .studio-mosaic .m3{grid-column:2/3;grid-row:3/5}
  .studio-mosaic .m4{grid-column:1/2;grid-row:4/5}
  .studio-mosaic .m5{grid-column:1/2;grid-row:5/6}
  .studio-mosaic .m6{grid-column:2/3;grid-row:5/6}
  .studio-mosaic .m7{grid-column:1/3;grid-row:6/7}
  
  /* Gallery Before/After */
  .ba-handle-button{width:48px;height:48px;padding:8px}
  .ba-label{font-size:11px;padding:6px 12px;top:12px}
  .ba-label-before{left:12px}
  .ba-label-after{right:12px}
  

  /* Reviews */
  .rv-arrow{display:none}
  
  /* Contact */
  .contact-split{grid-template-columns:1fr}
  .addr-full{display:none}
  .addr-mobile{display:inline}
  
  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .footer-col-getting{order:1}
  .footer-col-useful{order:2;padding-left:0}
  .footer-col-logo{order:3}
  .footer-logo{width:160px}
  .site-footer .small{font-size:12.5px}
  .footer-col-getting li strong{flex-basis:82px}
}

/* ========== Policy Pages ========== */
.policy-hero {
  padding: 80px 0 32px;
  margin-top: 72px;
}

.policy-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}

.policy-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 16px;
  transition: color 0.2s ease;
}

.policy-back:hover {
  color: var(--navy);
}

.policy-note {
  padding: 14px 18px;
  background: #fff9e6;
  border-left: 4px solid #FFB800;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #5c4a00;
  margin-top: 12px;
  font-weight: 600;
}


/* ========== Fort York Page ========== */

/* Hero */
.fy-hero {
  padding-top: 150px;
  padding-bottom: 40px;
}

.fy-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.fy-hero h1 {
  margin-bottom: 16px;
}

.fy-hero-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 24px;
}

.fy-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fy-hero-img img {
  width: 100%;
  border-radius: 24px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow);
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* About Fort York */
.fy-about-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.fy-about-inner > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 32px;
}

.fy-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.fy-highlight-card {
  background: #fff;
  padding: 24px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fy-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.fy-highlight-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.fy-highlight-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text);
}

.fy-highlight-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Why Choose Us */
.fy-why {
  background: var(--grad-bg);
}

.fy-why h2 {
  text-align: center;
  margin-bottom: 12px;
}

.fy-why-lead {
  text-align: center;
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.fy-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.fy-why-item {
  background: #fff;
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.fy-why-num {
  position: absolute;
  top: -14px;
  left: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: #0d2b3b;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(111, 217, 213, 0.4);
}

.fy-why-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
  margin-top: 8px;
}

.fy-why-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Getting Here */
.fy-getting h2 {
  text-align: center;
  margin-bottom: 12px;
}

.fy-getting-lead {
  text-align: center;
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 36px;
}

.fy-getting-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.fy-getting-card {
  background: #fff;
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-soft);
}

.fy-getting-icon {
  font-size: 42px;
  margin-bottom: 14px;
}

.fy-getting-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.fy-getting-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fy-getting-card li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 8px;
}

.fy-getting-card li:last-child {
  margin-bottom: 0;
}

/* Landmarks */
.fy-landmarks {
  background: var(--grad-bg-alt);
}

.fy-landmarks h2 {
  text-align: center;
  margin-bottom: 12px;
}

.fy-landmarks-lead {
  text-align: center;
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 36px;
}

.fy-landmarks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.fy-landmark-item {
  background: #fff;
  padding: 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-soft);
}

.fy-landmark-item h3 {
  font-size: 17px;
  margin-bottom: 8px;
  color: var(--text);
}

.fy-landmark-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ========== Responsive: Fort York ========== */
@media (max-width: 920px) {
  .fy-hero {
    padding-top: 110px;
    padding-bottom: 36px;
  }

  .fy-hero-inner {
    grid-template-columns: 1fr;
  }

  .fy-highlights {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .fy-why-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fy-getting-grid {
    grid-template-columns: 1fr;
  }

  .fy-landmarks-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


@media (max-width: 600px) {
  .fy-highlights {
    grid-template-columns: 1fr;
  }

  .fy-hero-ctas {
    flex-direction: column;
  }

  .fy-hero-ctas .btn {
    width: 100%;
  }
}

/* Fort York specific spacing */
.page-fort-york .map-section {
  margin-bottom: 64px;
}


/* ========== GBT Modal ========== */
.gbt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gbt-modal.show {
  display: flex;
}

.gbt-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.gbt-modal-content {
  position: relative;
  z-index: 2;
  background: #f5f5f4;
  border-radius: 24px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
  
  /* УБИРАЕМ scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* УБИРАЕМ scrollbar для Webkit (Chrome, Safari) */
.gbt-modal-content::-webkit-scrollbar {
  display: none;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Кнопка закрытия как у бургер-меню */
.gbt-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eaf4ff;
  border: 1px solid var(--clr-border);
  color: #233A5A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-soft);
  z-index: 10;
  padding: 0;
}

.gbt-modal-close::before,
.gbt-modal-close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.gbt-modal-close::before {
  transform: rotate(45deg);
}

.gbt-modal-close::after {
  transform: rotate(-45deg);
}

.gbt-modal-close:hover {
  background: #f1f9ff;
  transform: scale(1.05);
}

.gbt-modal-video {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.gbt-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gbt-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 59, 96, 0.4);
  pointer-events: none;
}

.gbt-modal-body {
  padding: 32px 40px 40px;
  color: var(--text);
}

.gbt-modal-body h2 {
  font-size: clamp(22px, 3vw, 28px);
  color: var(--navy);
  margin-bottom: 16px;
  font-weight: 800;
}

.gbt-modal-body h3 {
  font-size: 18px;
  color: var(--navy);
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 700;
}

.gbt-modal-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 16px;
}

.gbt-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.gbt-list li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  padding-left: 8px;
  margin-bottom: 8px;
}

.gbt-list li:last-child {
  margin-bottom: 0;
}

.gbt-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 4px solid #6FD9D5;
  border-radius: 8px;
}

@media (max-width: 920px) {
  .gbt-intro {
    font-size: 16px;
    padding: 14px 16px;
  }
}

/* Mobile responsive */
@media (max-width: 920px) {
  .gbt-modal {
    padding: 10px;
  }

  .gbt-modal-video {
    height: 200px;
  }

  .gbt-modal-body {
    padding: 24px 20px 28px;
  }

  .gbt-modal-body h2 {
    font-size: 22px;
  }

  .gbt-modal-body h3 {
    font-size: 17px;
    margin-top: 20px;
  }

  .gbt-modal-body p,
  .gbt-list li {
    font-size: 15px;
  }

  .gbt-modal-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
  
  .gbt-modal-close::before,
  .gbt-modal-close::after {
    width: 18px;
  }
}