/* =========================
   Confetti Collective — STUDIO
   Страница 3 (studio.html)
   ========================= */

/* ---------- Page Title ---------- */
.page-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.12;
  margin: 0 0 10px;
  color: #0b0f14;
}

/* =========================================================
   SECTION 1: Studio Intro — text + keyword marquee + photo stack
   ========================================================= */
.studio-intro {
  background: radial-gradient(1100px 700px at 50% -240px, #fff6fb 0%, #ffffff 45%, #ffffff 100%);
}

/* Двухколоночная сетка (на мобилках станет 1 колонкой) */
.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(16px, 4vw, 32px);
  align-items: center;
}
.intro-lead { color: #334054; }

/* Ключевые слова — горизонтальный бегунок */
.keywords {
  overflow: hidden;
  border-top: 1px solid #f1f5ff;
  border-bottom: 1px solid #f1f5ff;
  margin-top: .6rem;
}
.kw-track {
  display: inline-flex;
  gap: 18px;
  padding: .5rem 0;
  white-space: nowrap;
  animation: kw 16s linear infinite;
}
.kw-track + .kw-track { animation-delay: -8s; }
.kw-track span { font-weight: 700; letter-spacing: .4px; color: #2e3a51; opacity: .9; }
@keyframes kw { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Фото-стек: гарантированно вписывается в контейнер (без обрезаний) */
.photo-stack {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
}
.stack-photo {
  width: min(100%, 350px);          /* Внутри контейнера и ≤ 350px */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16,20,30,.10);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.stack-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Лёгкий «разлёт» карточек на десктопе */
.s1 { transform: rotateZ(-2deg) translate(-8px, 4px); z-index: 1; }
.s2 { transform: rotateZ(1.6deg) translate(10px, -8px); z-index: 2; }
.s3 { transform: rotateZ(-0.6deg) translate(6px, 10px); z-index: 3; }
.stack-photo:hover { transform: translateY(-4px) rotateZ(0deg); filter: saturate(1.05); box-shadow: 0 18px 42px rgba(16,20,30,.16); }

/* Плавное появление */
.studio-intro .intro-copy,
.studio-intro .stack-photo { opacity: 0; transform: translateY(10px); }
.in-view.studio-intro .intro-copy,
.in-view.studio-intro .stack-photo {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}
.in-view.studio-intro .stack-photo.s2 { transition-delay: .06s; }
.in-view.studio-intro .stack-photo.s3 { transition-delay: .12s; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; }
  .s1, .s2, .s3 { transform: none; } /* убираем наклон, чтобы тени не выпирали */
  /* на всякий случай разрешаем горизонтальный контент внутри этой секции */
  .studio-intro .container { overflow-x: visible; }
}

/* =========================================================
   SECTION 2: Sessions — availability bar + slot cards
   ========================================================= */
.sessions { background: #fbfdff; }

.sessions-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 4vw, 32px);
  align-items: start;
}
.sessions-copy p { color: #334054; }

/* Availability bar */
.avail { margin-top: .6rem; }
.avail-bar {
  position: relative;
  height: 10px;
  background: #eef3ff;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #d9e6ff;
}
.avail-fill {
  display: block;
  width: 0%;                          /* анимация выставит фактическое значение */
  height: 100%;
  background: linear-gradient(90deg, #9ee0ff, #ffd36e, #ff8ec3);
}
.avail-note { color: #5a6677; font-size: .95rem; }

/* Slot rail */
.slot-rail { display: grid; gap: 14px; justify-items: center; }
.slot-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16,20,30,.10);
  transform-origin: center;
  opacity: 0;
  transform: translateY(12px) scale(.98);
}
.slot-card img {
  width: 100%;
  height: auto;
  max-width: 350px;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.slot-card figcaption { padding: .7rem .9rem 1rem; color: #2f3b4e; text-align: center; font-weight: 600; }

/* Вход анимацией при появлении секции */
.in-view.sessions .slot-card {
  opacity: 1; transform: translateY(0) scale(1);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.in-view.sessions .slot-card:nth-child(2) { transition-delay: .06s; }

/* =========================================================
   SECTION 3: Packages — ribbon accordion + animated bars
   ========================================================= */
.packages {
  background: radial-gradient(1100px 700px at 100% -260px, #f3fbff 0%, #ffffff 45%, #ffffff 100%);
}

.pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px,4vw,32px);
  align-items: start;
}
.pack-copy p { color: #334054; }

/* Accordion */
.pack-accordion { display: grid; gap: 12px; }
.pack {
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16,20,30,.08);
}
.pack > summary::-webkit-details-marker { display: none; }

.pack-head {
  list-style: none;
  cursor: pointer;
  padding: .9rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  background: linear-gradient(90deg, rgba(158,224,255,.25), rgba(255,211,110,.25), rgba(255,142,195,.25));
}
.pack .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #29c27a; box-shadow: 0 0 0 3px rgba(41,194,122,.18);
}
.pack[open] .dot { background: #ffd36e; box-shadow: 0 0 0 3px rgba(255,211,110,.28); }

.pack-body { padding: .8rem 1rem 1rem; }

/* Animated bars (values приходят из data-w) */
.bars { display: grid; gap: 8px; margin-top: .4rem; }
.bars span {
  --w: 0%;
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: .6rem;
  color: #2b3340;
}
.bars span::after {
  content: "";
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #9ee0ff, #ffd36e, #ff8ec3);
  width: var(--w);
  transition: width .9s ease;
}

/* Support photos */
.pack-photos { display: grid; gap: 14px; justify-items: center; }
.pack-photo {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(16,20,30,.10);
}
.pack-photo img {
  width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover;
}
.angle-a { transform: rotateZ(-0.8deg); }
.angle-b { transform: rotateZ(0.8deg); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sessions-grid, .pack-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduce Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kw-track { animation: none; }
  .studio-intro .intro-copy,
  .studio-intro .stack-photo,
  .slot-card { transition: none; }
}
/* --- FIX: stop intro grid from pushing beyond viewport --- */
.intro-grid > * { min-width: 0; }           /* ключевое: детям грид-контейнера можно сжиматься */
.intro-copy,
.keywords,
.photo-stack { min-width: 0; }

/* подстраховка для бегущей строки, чтобы она точно не влияла на расчёт ширины грида */
.keywords { overflow: hidden; max-width: 100%; }
.kw-track { max-width: 100%; }

/* на случай, если где-то осталось горизонтальное скрытие — для этой секции запрещаем его */
.studio-intro, .studio-intro .container { overflow-x: visible; }
/* ===== Section 4: Run of Show ===== */
.runofshow { background: #ffffff; }
.ros-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(16px,4vw,32px); align-items: start; }
.ros-grid > * { min-width: 0; } /* важно, чтобы не распирало грид */
.ros-sticky { position: sticky; top: calc(var(--header-h) + 10px); align-self: start; }
.ros-sticky p { color: #334054; }

.ros-photo { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(16,20,30,.10); margin-top: .6rem; }
.ros-photo img { width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }
.ros-photo.bottom { justify-self: center; }

.ros-track-wrap { position: relative; display: grid; gap: 12px; }
.ros-track {
  --prog: 0; /* 0..1 из JS */
  position: absolute; left: 10px; top: 0; bottom: 0; width: 4px; border-radius: 999px;
  background:
    linear-gradient(#9ee0ff, #ffd36e, #ff8ec3) 0 0 / 100% calc(var(--prog) * 100%) no-repeat,
    #eef3ff;
  box-shadow: inset 0 0 0 1px #d9e6ff;
}
.ros-steps { list-style: none; margin: 0; padding: 0 0 0 28px; display: grid; gap: 12px; }
.ros-step { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.ros-time { font-weight: 800; color: #2b3340; }
.ros-card {
  background: #ffffff; color: #2b3340; border-radius: 14px; padding: .7rem .9rem;
  box-shadow: 0 10px 26px rgba(16,20,30,.08);
  opacity: 0; transform: translateY(8px);
}
.in-view.runofshow .ros-card { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; }
.in-view.runofshow .ros-step:nth-child(2) .ros-card { transition-delay: .05s; }
.in-view.runofshow .ros-step:nth-child(3) .ros-card { transition-delay: .10s; }
.in-view.runofshow .ros-step:nth-child(4) .ros-card { transition-delay: .15s; }
.in-view.runofshow .ros-step:nth-child(5) .ros-card { transition-delay: .20s; }

@media (max-width: 960px){
  .ros-grid { grid-template-columns: 1fr; }
  .ros-sticky { position: static; }
  .ros-track { left: 6px; }
}

/* ===== Section 5: Comfort Maps ===== */
.comfort { background: radial-gradient(1100px 700px at 100% -260px, #f3fbff 0%, #ffffff 45%, #ffffff 100%); }
.comfort-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(12px,3.5vw,24px); align-items: start; }
.comfort-copy { grid-column: 1 / -1; }
.comfort-copy p { color: #334054; }

.map-card {
  position: relative; justify-self: center;
  border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(16,20,30,.10);
  width: min(100%, 350px); aspect-ratio: 4/3;
}
.map-card img { width: 100%; height: 100%; object-fit: cover; }

/* декоративные точки */
.ping {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: #29c27a;
  box-shadow: 0 0 0 6px rgba(41,194,122,.22);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0%{ transform: translate(-50%,-50%) scale(0.6); opacity:.9; } 100%{ transform: translate(-50%,-50%) scale(1.4); opacity:0; } }

@media (max-width: 960px){ .comfort-grid { grid-template-columns: 1fr; } }

/* ===== Section 6: Prototyping Lab ===== */
.proto { background: #fbfdff; }
.proto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items: center; }
.proto-copy p { color: #334054; }

.wheel {
  --r: 56px;
  position: relative; width: calc(var(--r) * 2 + 18px); height: calc(var(--r) * 2 + 18px);
  margin-top: 8px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #ffffff 55%, #eef6ff 56%);
  animation: spin 12s linear infinite;
}
.wheel span {
  position: absolute; font-weight: 800; color: #2b3b54;
  transform-origin: calc(var(--r) + 0px) 50%;
}
.wheel span:nth-child(1){ transform: rotate(0deg) translateX(var(--r)); }
.wheel span:nth-child(2){ transform: rotate(60deg) translateX(var(--r)); }
.wheel span:nth-child(3){ transform: rotate(120deg) translateX(var(--r)); }
.wheel span:nth-child(4){ transform: rotate(180deg) translateX(var(--r)); }
.wheel span:nth-child(5){ transform: rotate(240deg) translateX(var(--r)); }
.wheel span:nth-child(6){ transform: rotate(300deg) translateX(var(--r)); }
@keyframes spin { to { transform: rotate(360deg); } }
.wheel:hover { animation-play-state: paused; }

.proto-photo { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(16,20,30,.10); justify-self: center; }
.proto-photo img { display:block; width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; }
.angle-a { transform: rotateZ(-0.7deg); }
.angle-b { transform: rotateZ(0.8deg); }

@media (max-width: 960px){ .proto-grid { grid-template-columns: 1fr; } }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .wheel { animation: none; }
}
/* ===== Section 7: Radio Etiquette ===== */
.radio { background:#ffffff; }
.radio-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items: start; }
.radio-grid > * { min-width: 0; }
.radio-copy p { color:#334054; }

.ptt {
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:999px; cursor:pointer;
  background:#0f1622; color:#d7edff; box-shadow: 0 12px 30px rgba(16,20,30,.12);
  user-select:none; touch-action:manipulation;
}
.ptt .dot { width:10px; height:10px; border-radius:50%; background:#29c27a; box-shadow:0 0 0 6px rgba(41,194,122,.22); }
.ptt[aria-pressed="true"] .dot { background:#ffd36e; box-shadow:0 0 0 6px rgba(255,211,110,.28); }
.ptt .hint { opacity:.7; font-size:.85rem; }

.radio-tips { margin-top:.45rem; min-height:2.2em; }
.radio-tips .tip { display:none; color:#2b3340; }
.radio-tips .tip.is-active { display:block; }

.radio-rail { display:grid; gap:14px; justify-items:center; }
.radio-photo { border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(16,20,30,.10); }
.radio-photo img { width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; }
.angle-a{ transform: rotateZ(-0.6deg); } .angle-b{ transform: rotateZ(0.8deg); }

@media (max-width:960px){ .radio-grid{ grid-template-columns:1fr; } }

/* ===== Section 8: Accessibility & Safety Kit ===== */
.access { background: radial-gradient(1100px 700px at 100% -260px, #f3fbff 0%, #ffffff 45%, #ffffff 100%); }
.access-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items:start; }
.access-grid > * { min-width:0; }
.access-copy p { color:#334054; }

.access-list { display:grid; gap:.45rem; margin-top:.5rem; }
.access-list li {
  position:relative; padding-left:1.5rem; color:#2b3340;
  background: linear-gradient(90deg, rgba(255,211,110,.0), rgba(255,211,110,.16)) 0 100% / 0% 40% no-repeat;
  border-radius:6px; transition: background-size .6s ease;
}
.access-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:#29c27a; font-weight:800; }
.in-view.access .access-list li { background-size: 100% 40%; }
.in-view.access .access-list li:nth-child(2){ transition-delay:.05s; }
.in-view.access .access-list li:nth-child(3){ transition-delay:.10s; }
.in-view.access .access-list li:nth-child(4){ transition-delay:.15s; }
.in-view.access .access-list li:nth-child(5){ transition-delay:.20s; }

.access-photos{ display:grid; gap:14px; justify-items:center; }
.acc-card{ border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(16,20,30,.10); }
.acc-card img{ width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; }

@media (max-width:960px){ .access-grid{ grid-template-columns:1fr; } }

/* ===== Section 9: Budget Bands ===== */
.bands { background:#fbfdff; }
.bands-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px,4vw,32px); align-items:center; }
.bands-grid > *{ min-width:0; }
.bands-copy p{ color:#334054; }
.tiny-note{ color:#5a6677; font-size:.95rem; }

.band-bars{ display:grid; gap:10px; margin:.6rem 0 .4rem; }
.band{ display:grid; grid-template-columns: 120px 1fr; align-items:center; gap:.6rem; }
.band .label{ font-weight:800; color:#2b3340; }
.band .bar{
  --w: 0%;
  height:10px; border-radius:999px;
  background: linear-gradient(90deg, #9ee0ff, #ffd36e, #ff8ec3);
  width: var(--w); transition: width .9s ease;
  box-shadow: 0 0 0 1px #e6efff inset;
}

.bands-rail{ display:grid; gap:14px; justify-items:center; }
.bands-photo{ border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(16,20,30,.10); }
.bands-photo img{ width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; }

@media (max-width:960px){ .bands-grid{ grid-template-columns:1fr; } }
/* ===== Section 10: Vendors ===== */
.vendors { background:#ffffff; }
.vendors-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items:start; }
.vendors-grid > * { min-width:0; }
.vendors-copy p { color:#334054; }

.vend-rail { display:grid; gap:14px; justify-items:center; }
.vend-card {
  position: relative;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(16,20,30,.10);
  transform-style: preserve-3d;
  will-change: transform, filter;
}
.vend-card img { width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; display:block; }
.vend-cap { position:absolute; left:0; right:0; bottom:0; padding:.55rem .7rem; color:#0b0f14; font-weight:700;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 70%); }
.angle-a{ transform: rotateZ(-0.6deg); } .angle-b{ transform: rotateZ(0.8deg); }

/* ===== Section 11: Season & Venue Intelligence ===== */
.season { background: radial-gradient(1100px 700px at 100% -260px, #f3fbff 0%, #ffffff 45%, #ffffff 100%); }
.season-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items:start; }
.season-grid > * { min-width:0; }
.season-copy p { color:#334054; }

.season-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 .5rem; }
.chip {
  appearance:none; border:0; cursor:pointer;
  padding:.45rem .75rem; border-radius:999px; font-weight:700;
  background:#eef6ff; color:#264466; box-shadow: inset 0 0 0 1px #d7e7ff;
}
.chip.is-active { background:#ffd36e; color:#2b3340; box-shadow: inset 0 0 0 1px #f2c55b; }

.season-bar { height:10px; border-radius:999px; background:#eef3ff; box-shadow: inset 0 0 0 1px #d9e6ff; overflow:hidden; }
.season-fill { display:block; width:100%; height:100%;
  background: linear-gradient(90deg, #9ee0ff, #ffd36e, #ff8ec3); transform-origin:left; transform: scaleX(.33);
  transition: transform .35s ease;
}
.season-note { color:#5a6677; font-size:.95rem; margin:.35rem 0; }

.season-tips { display:grid; gap:.45rem; margin: .3rem 0 0; }
.season-tips .tip { display:none; color:#2b3340; }
.season-tips .tip.is-on { display:list-item; }

.season-photos { display:grid; gap:14px; justify-items:center; }
.season-card { border-radius:16px; overflow:hidden; box-shadow: 0 12px 32px rgba(16,20,30,.10); }
.season-card img { width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; }

@media (max-width:960px){ .season-grid { grid-template-columns:1fr; } }

/* ===== Section 12: Aftercare ===== */
.aftercare { background:#fbfdff; }
.care-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items:center; }
.care-grid > * { min-width:0; }
.care-copy p { color:#334054; }

.deliver { margin-top:.6rem; }
.deliver-bar { position:relative; height:10px; background:#eef3ff; border-radius:999px; overflow:hidden; box-shadow: inset 0 0 0 1px #d9e6ff; }
.deliver-fill { display:block; width:0%; height:100%; background: linear-gradient(90deg, #9ee0ff, #ffd36e, #ff8ec3); transition: width .9s ease; }
.deliver-list { display:grid; gap:.45rem; margin-top:.45rem; }
.deliver-list li { position:relative; padding-left:1.5rem; color:#2b3340; }
.deliver-list li::before { content:"✓"; position:absolute; left:0; top:0; color:#29c27a; font-weight:800; }

.care-rail { display:grid; gap:14px; justify-items:center; }
.care-photo { border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(16,20,30,.10); }
.care-photo img { width:100%; height:auto; max-width:350px; aspect-ratio:4/3; object-fit:cover; }
.angle-a{ transform: rotateZ(-0.6deg); } .angle-b{ transform: rotateZ(0.8deg); }

@media (max-width:960px){ .care-grid { grid-template-columns:1fr; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .vend-card { transition:none; }
  .season-fill { transition:none; }
  .deliver-fill { transition:none; }
}
/* ===== Section 13: Cases ===== */
.cases { background:#ffffff; }
.cases-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items:start; }
.cases-grid > * { min-width:0; }
.cases-copy p { color:#334054; }
.case-points { display:grid; gap:.45rem; margin-top:.4rem; }
.case-points li { position:relative; padding-left:1.5rem; color:#2b3340; }
.case-points li::before { content:"✓"; position:absolute; left:0; top:0; color:#29c27a; font-weight:800; }

.cases-cards { display:grid; gap:14px; justify-items:center; }
.case-card { width:min(100%,350px); aspect-ratio:4/3; border-radius:18px; overflow:hidden; box-shadow:0 12px 32px rgba(16,20,30,.10); }
.case-card img { width:100%; height:100%; object-fit:cover; }

/* clip-reveal при появлении */
.case-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, #fff, #fff0);
  transform: translateX(0%);
}
.in-view.cases .cut-a::after { animation: cut 0.9s ease forwards .05s; }
.in-view.cases .cut-b::after { animation: cut 0.9s ease forwards .15s; }
.in-view.cases .cut-c::after { animation: cut 0.9s ease forwards .25s; }
@keyframes cut { to { transform: translateX(100%); } }

@media (max-width:960px){ .cases-grid{ grid-template-columns:1fr; } }

/* ===== Section 14: Team & Culture ===== */
.team { background: radial-gradient(1100px 700px at 100% -260px, #f3fbff 0%, #ffffff 45%, #ffffff 100%); }
.team-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,32px); align-items:center; }
.team-grid > * { min-width:0; }
.team-copy p { color:#334054; }

.team-photos { display:grid; gap:14px; justify-items:center; }
.team-orb { position:relative; width:min(100%, 300px); aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.25); }
.team-orb img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* вращающееся кольцо */
.team-orb::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background: conic-gradient(#ff8ec3,#ffd36e,#9ee0ff,#ff8ec3);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 0px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 0px));
  animation: spin 9s linear infinite;
  pointer-events:none;
}
.team-orb:hover::before{ animation-play-state: paused; }

/* лёгкое «плавание» */
@keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
.orb-1{ animation: floatY 5.2s ease-in-out infinite; }
.orb-2{ animation: floatY 5.6s ease-in-out infinite .12s; }
.orb-3{ animation: floatY 6.0s ease-in-out infinite .24s; }

@media (max-width:960px){ .team-grid{ grid-template-columns:1fr; } }

/* ===== Section 15: Studio CTA ===== */
.studio-cta { background: linear-gradient(180deg, #0b0f14 0%, #111b29 100%); color:#cfe9ff; }
.studio-cta .light { color:#eaf7ff; }
.scta-grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px,4vw,24px); align-items:center; }

.scta-photo { justify-self:center; width:min(100%, 280px); aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:0 16px 42px rgba(0,0,0,.35); }
.scta-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.bubble-left, .bubble-right { border:10px solid transparent; background: linear-gradient(#0f1622,#0f1622) padding-box, conic-gradient(#ff8ec3,#ffd36e,#9ee0ff,#ff8ec3) border-box; }

.scta-copy { text-align:center; }
.btn-row.center { justify-content:center; }

@media (max-width:960px){ .scta-grid{ grid-template-columns:1fr; } }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .team-orb::before { animation: none; }
  .orb-1, .orb-2, .orb-3 { animation: none; }
}
/* Positions for decorative pings without inline styles */
.map-card[data-map="hydration"] .ping--1 { --x: 18%; --y: 40%; }
.map-card[data-map="hydration"] .ping--2 { --x: 62%; --y: 28%; }
.map-card[data-map="hydration"] .ping--3 { --x: 78%; --y: 66%; }

.map-card[data-map="signage"] .ping--1   { --x: 34%; --y: 55%; }
.map-card[data-map="signage"] .ping--2   { --x: 70%; --y: 32%; }