/* ============================================================
   CITY-A2 SKIN — приводит 152 city/service-страницы (старая
   разметка + legacy CSS) к дизайну утверждённого черновика A2
   «Editorial White» (эталон = главная страница).
   Загружается ПОСЛЕДНИМ, перебивает legacy !important-правила
   тем же приёмом (!important + поздний порядок). Тексты и
   разметку не меняет — только визуальный слой.
   Дизайн-токены (--font-display и т.д.) приходят из main.css.
   ============================================================ */

/* ---------- 0. Переопределение legacy-шрифтовых переменных + зеркала ----------
   Legacy CSS красит шрифты через свои переменные и !important-правила.
   Здесь: (а) переменные переназначены на A2-шрифты (поздний :root побеждает),
   (б) каждый legacy-!important-селектор отзеркален с A2-значением. */
:root, body {
  --page-roman: 'Cormorant Garamond', Georgia, serif;
  --page-italic: 'Cormorant Garamond', Georgia, serif;
  --m-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --m-sans: 'Tenor Sans', sans-serif;
  --m-mono: 'Tenor Sans', sans-serif;
  --gallery-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --gallery-ui: 'Tenor Sans', sans-serif;
}
*, *::before, *::after { font-family: var(--font-serif) !important; }
h1, h2, h3, .section-title, .editorial-headline, [class*=-headline], [class*=-title],
h2.section-title, .team-seo-note h3, .hero-copy-box h1,
.video-chip strong, .video-caption strong, .pull-quote::before {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: .002em !important;
  font-stretch: normal !important;
}
em, i, .editorial-em, [class*=italic], .pretty-amp,
h1 em, h1 i, h2 em, h2 i, h3 em, h3 i, p em, p i, li em, li i,
h2.section-title em, h2.section-title i {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
}
.amp {
  font-family: var(--font-serif) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.eyebrow, [class*=eyebrow], [class*=meta], .menu, .nav-item, [class*=-tag], [class*=-num],
.menu a, .video-chip, .brand-subtitle, .shorts-counter,
#musik-jenny .section-eyebrow, #wedding-media .section-eyebrow,
.city-cloud a, .footer-legal a, .fdetails summary, .fcol-title, .footer-eyebrow,
button, select {
  font-family: var(--font-ui) !important;
}
input, textarea { font-family: var(--font-serif) !important; }

/* ---------- 1. Типографика: убить Noto Serif/Fahkwang/Bricolage ---------- */
body, p, li, dt, dd, blockquote, figcaption, .copy, .lede,
.trio-intro, .team-seo-note, .media-feature-copy, .editorial-copy,
.migration-structured-content, .migration-page-intro, .faq-item p,
.video-caption span, .form-note p, .trust-list li {
  font-family: var(--font-serif) !important;
  font-style: normal !important;
}
h1, h2, h3, h4, h5, h6,
.section-title, .hero-copy-box h1, .editorial-headline,
.video-caption strong, .form-note strong, .media-feature-copy strong,
.person-meta strong {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  letter-spacing: .002em !important;
  color: var(--ink);
  line-height: 1.18;
}
.section-title em, h1 em, h2 em, h3 em {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rose-warm) !important;
}
.eyebrow, .section-eyebrow, .hero-kicker, .mini-label, .tag,
label, legend, .field-label, .check-group legend,
button, input, textarea, select,
.menu a, .shorts-counter, .video-chip span, .local-audio-label,
.local-audio-artist, .local-audio-time, .contact-meta, .brand-subtitle {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}
.eyebrow, .section-eyebrow, .hero-kicker, .mini-label {
  font-size: var(--fs-label) !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--rose-deep) !important;
  font-weight: 400 !important;
}
.hero .eyebrow, .hero-kicker, .hero .section-eyebrow { color: var(--rose) !important; }

/* ---------- 2. Поверхности: белый фон, паспарту-рамки, без скруглений/теней ---------- */
body { background: #fff !important; color: var(--ink) !important; }
main .card,
.media-feature, .trio-card, .person-card, .team-seo-note,
.migration-structured-content, .equipment-story-block, .media-editorial {
  background: var(--paper) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
main .card { border: 1px solid var(--hairline) !important; }
main .card .card, .video-card .card { border: 0 !important; }
.section-photo img, .media-feature img, .trio-card img, .person-card img,
.homepage-gallery-thumb img, .section-photo-story img, .section-photo-audio img {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.section-photo, .homepage-gallery-thumb, .section-photo-story, .section-photo-audio {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px !important;
}

/* ---------- 3. Кнопки: единая A2-система ---------- */
.button, .video-button, a.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-ui) !important;
  font-size: .8125rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid rgba(23,18,22,.3) !important;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.button:hover, .video-button:hover { border-color: var(--oxblood) !important; color: var(--oxblood) !important; }
.button-primary, .contact-form .button, button[type="submit"] {
  background: var(--oxblood) !important;
  color: var(--ivory) !important;
  border-color: var(--oxblood) !important;
}
.button-primary:hover, .contact-form .button:hover, button[type="submit"]:hover {
  background: var(--oxblood-deep) !important;
  border-color: var(--oxblood-deep) !important;
  color: var(--ivory) !important;
}
.hero .button-secondary, .on-dark .button-secondary,
.hero-actions .button-secondary {
  border-color: rgba(255,250,247,.38) !important;
  color: var(--ivory) !important;
  background: transparent !important;
}
.hero .button-secondary:hover { border-color: var(--ivory) !important; }
.video-button-secondary {
  border: 0 !important; padding: 8px 4px !important;
  color: var(--oxblood) !important;
  border-bottom: 1px solid transparent !important; border-radius: 0 !important;
}
.video-button-secondary:hover { border-bottom-color: var(--oxblood) !important; }

/* ---------- 4. Видео-блок: белые рамки, Shorts высотой с основной плеер ---------- */
.video-card, .wide-video-card {
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.video-card .section-title { color: var(--ink) !important; }
.video-card .video-copy p { color: var(--muted) !important; }
#video .video-stage, .video-stage {
  display: grid !important;
  /* (C1-28)*9/16 = (C2-28)*16/9 → высота Shorts == высоте основного плеера */
  grid-template-columns: minmax(0,1fr) calc((100% - 40px)*.2404 + 14.5px) !important;
  gap: 40px !important;
  align-items: start !important;
  justify-content: stretch !important;
}
#video .video-frame, .video-frame,
#video .shorts-frame, .shorts-frame {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
  overflow: visible !important;
}
.video-frame lite-youtube, .video-frame iframe,
#video .video-frame lite-youtube {
  display: block !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  aspect-ratio: 16/9 !important; height: auto !important;
  border-radius: 0 !important;
  background-size: cover !important; background-position: center !important;
}
.shorts-frame lite-youtube, .shorts-frame iframe,
#video .shorts-frame lite-youtube {
  display: block !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  aspect-ratio: 9/16 !important; height: auto !important;
  border-radius: 0 !important;
  background-size: cover !important; background-position: center !important;
}
/* отменить full-bleed выезд старой широкой видеокарты — на главной блок в контейнере */
.wide-video-card, #video.wide-video-card {
  width: auto !important;
  max-width: var(--container) !important;
  margin-left: auto !important; margin-right: auto !important;
  left: auto !important; right: auto !important;
  transform: none !important;
  border-radius: 0 !important;
}
#video .shorts-nav, .shorts-nav {
  position: static !important; inset: auto !important;
  display: flex !important; align-items: center; justify-content: center; gap: 14px !important;
  padding: 16px 6px 6px !important;
  background: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 0 !important; z-index: auto !important;
}
.shorts-nav-btn {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(23,18,22,.3) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.shorts-nav-btn:hover { border-color: var(--oxblood) !important; color: var(--oxblood) !important; transform: none !important; }
.shorts-counter { color: var(--muted) !important; font-size: .75rem !important; letter-spacing: .2em !important; }
.video-toolbar {
  background: none !important; border: 0 !important;
  border-top: 1px solid var(--hairline) !important;
  border-radius: 0 !important; box-shadow: none !important;
  margin-top: clamp(28px, 4vw, 44px) !important;
  padding: clamp(22px, 3vw, 32px) 0 0 !important;
}
.video-chip { background: none !important; border: 0 !important; padding: 0 !important; }
.video-chip span { letter-spacing: .3em !important; text-transform: uppercase; color: var(--rose-deep) !important; font-size: var(--fs-label) !important; }
.video-chip strong { font-family: var(--font-display) !important; color: var(--ink) !important; }
.video-chip small, #video .video-toolbar .video-chip span { color: var(--muted) !important; }
.video-caption strong { color: var(--ink) !important; }
.video-caption span { color: var(--muted) !important; }

/* ---------- 5. Аудио-плеер JENNY: как на главной ---------- */
.local-audio-player {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(12px, 1.6vw, 18px) !important;
}
.local-audio-now { border-bottom: 1px solid var(--hairline-soft) !important; padding-bottom: 10px !important; }
.local-audio-cover { border-radius: 0 !important; border: 1px solid var(--hairline) !important; }
.local-audio-label {
  font-size: var(--fs-label) !important; letter-spacing: .3em !important;
  text-transform: uppercase !important; color: var(--rose-deep) !important;
}
.local-audio-title { font-family: var(--font-display) !important; font-weight: 600 !important; color: var(--ink) !important; }
.local-audio-artist { font-size: .72rem !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--muted) !important; }
.local-audio-button {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(23,18,22,.3) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.local-audio-button:hover { border-color: var(--oxblood) !important; color: var(--oxblood) !important; }
.local-audio-button--primary {
  width: 40px !important; height: 40px !important;
  background: var(--oxblood) !important;
  border-color: var(--oxblood) !important;
  color: var(--ivory) !important;
}
.local-audio-button--primary:hover { background: var(--oxblood-deep) !important; color: var(--ivory) !important; }
.local-audio-time { color: var(--muted) !important; font-size: .75rem !important; }
.local-audio-seek { accent-color: var(--oxblood) !important; }
.local-audio-playlist { gap: 8px !important; }
.local-audio-track {
  background: transparent !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.local-audio-track:hover { border-color: var(--hairline-strong) !important; }
.local-audio-track.is-active { border-color: var(--oxblood) !important; background: rgba(107,35,51,.04) !important; }
.local-audio-track strong { font-family: var(--font-serif) !important; font-weight: 600 !important; color: var(--ink) !important; }
.local-audio-track span { font-family: var(--font-ui) !important; font-size: .66rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--muted) !important; }
.local-audio-status { font-family: var(--font-ui) !important; color: var(--muted) !important; }

/* ---------- 6. Аккордеоны: плоские, белые, волосяная рамка ---------- */
.elixir-bottom-accordion > summary {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
  font-size: .8rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 18px 20px !important;
}
.elixir-bottom-accordion > summary:hover,
.elixir-bottom-accordion > summary:focus-visible {
  background: #fff !important;
  border-color: var(--hairline-strong) !important;
}
.elixir-bottom-accordion > summary::after {
  background: transparent !important;
  border: 1px solid rgba(23,18,22,.3) !important;
  color: var(--ink) !important;
  border-radius: 50% !important;
}
.elixir-bottom-accordion[open] > summary::after {
  background: rgba(107,35,51,.06) !important;
  border-color: var(--oxblood) !important;
  color: var(--oxblood) !important;
}
.faq-item {
  background: none !important; border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.faq-item summary {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  background: none !important;
}
.faq-item summary:hover { color: var(--oxblood) !important; }

/* ---------- 7. Форма заявки: A2-поля ---------- */
.contact-form label, .contact-form legend, .form-note strong {
  color: var(--ink) !important;
  font-size: .72rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}
.form-note strong { font-family: var(--font-display) !important; font-size: 1.15rem !important; letter-spacing: .01em !important; text-transform: none !important; }
.contact-form input, .contact-form textarea, .contact-form select {
  background: #fff !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 16px !important;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--oxblood) !important;
  outline: none !important;
}
.option {
  background: transparent !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-serif) !important;
  color: var(--ink) !important;
}
.option:hover { border-color: var(--hairline-strong) !important; }
.option input { accent-color: var(--oxblood) !important; }
.contact-chip {
  background: transparent !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.contact-chip:hover { border-color: var(--oxblood) !important; color: var(--oxblood) !important; }

/* ---------- 8. Hero: типографика как на главной (раскладку не трогаем) ---------- */
.hero .hero-copy-box, .hero-copy-box {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero h1 { color: var(--ivory) !important; }
.hero p { color: rgba(247,236,230,.88) !important; }

/* плёночное зерно поверх мягкого hero-фото — как на главной */
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ---------- 9. Прочее ---------- */
.migration-trust-list li::marker { color: var(--rose-deep); }
::selection { background: var(--rose-soft); color: var(--oxblood); }
a { text-decoration: none; }
.team-seo-note { border-left: 2px solid var(--rose) !important; }

@media (max-width: 900px){
  #video .video-stage, .video-stage { grid-template-columns: 1fr !important; }
  #video .shorts-frame, .shorts-frame { max-width: 320px !important; margin: 0 auto !important; }
}

/* ---------- 10. Полировка после визуальной сверки ---------- */
/* hero: нормальная мера заголовка, как на главной */
.hero-copy-box { max-width: 680px !important; }
.hero-copy-box h1, .hero h1 {
  font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
  line-height: 1.16 !important;
}
/* шапка видео-секции: заголовок не в узкой колонке */
.video-copy { display: block !important; max-width: none !important; }
.video-copy .section-title, .wide-video-card .section-title {
  font-size: var(--fs-display-long) !important;
  line-height: 1.3 !important;
  max-width: 34ch !important;
}
.video-copy p { max-width: 54ch; }
/* футер на тёмном: заголовки цвета слоновой кости, 5 колонок в ряд */
footer.footer { color: var(--ivory) !important; }
footer.footer h1, footer.footer h2, footer.footer h3 { color: var(--ivory) !important; }
footer.footer .fcol-title, footer.footer .footer-eyebrow { color: var(--rose) !important; }
@media (min-width: 901px){
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(5, auto) !important;
    justify-content: space-between !important;
    gap: 12px 26px !important;
  }
}


/* fix: белая полоса справа при классическом скроллбаре (100vw-bleed) */
html, body { overflow-x: clip !important; }
/* fix: лого в футере видно отчётливо */
.footer-logo { width: 128px !important; height: auto !important; max-height: 80px !important; opacity: 1 !important; }

/* urgent footer compactness: keep A2 look, prevent the footer from dominating the page */
.footer{padding-block:clamp(30px,4vw,54px) clamp(22px,3vw,34px)!important}
.footer-head{gap:clamp(18px,3vw,38px)!important;padding-bottom:clamp(18px,2.6vw,30px)!important;margin-bottom:clamp(18px,2.6vw,30px)!important}
.footer-grid{gap:14px 28px!important;margin-bottom:clamp(18px,3vw,28px)!important}
.footer-cities{padding-top:18px!important;margin-bottom:18px!important}
.footer-legal{padding-top:16px!important}
@media(max-width:760px){
  .footer{padding-block:28px 78px!important}
  .footer-head{gap:14px!important;padding-bottom:16px!important;margin-bottom:16px!important}
  .footer-head h2{font-size:1.24rem!important;line-height:1.24!important}
  .footer-summary{font-size:.9rem!important;line-height:1.45!important;margin-bottom:10px!important}
  .footer-cta-row{gap:6px!important;margin-top:8px!important}
  .footer-cta-row .btn{padding:7px 10px!important;font-size:.58rem!important;letter-spacing:.08em!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 10px!important;margin-bottom:14px!important}
  .fdetails summary{min-height:38px;font-size:.58rem!important;letter-spacing:.16em!important;line-height:1.25!important;padding-bottom:0!important}
  .footer-cities{padding-block:12px!important;margin-bottom:12px!important}
  .footer-city-note{display:none!important}
  .city-cloud{gap:5px!important;margin-top:8px!important;padding-top:0!important}
  .city-cloud a{font-size:.58rem!important;letter-spacing:.03em!important;padding:3px 6px!important}
  .footer-logo{width:96px!important;max-height:60px!important}
  .footer-legal{gap:10px!important;padding-top:12px!important}
  .footer-legal nav{gap:8px 12px!important}
  .footer-legal nav a{font-size:.58rem!important;letter-spacing:.08em!important}
}

/* final compact guard for the live footer */
.footer{padding-block:24px 20px!important}
.footer-head{padding-bottom:14px!important;margin-bottom:14px!important}
.footer-grid{margin-bottom:14px!important}
.footer-cities{padding-top:14px!important;margin-bottom:14px!important}
.footer-legal{padding-top:12px!important}
@media(min-width:901px){
  .footer-grid{grid-template-columns:repeat(5,minmax(0,auto))!important;justify-content:space-between!important}
}
@media(max-width:760px){
  .footer{padding-block:24px 24px!important}
  .footer-head{padding-bottom:12px!important;margin-bottom:12px!important}
  .footer-head h2{font-size:1.12rem!important}
  .footer-summary{font-size:.84rem!important;margin-bottom:8px!important}
  .footer-cta-row .btn-ghost{display:none!important}
  .footer-cta-row .btn-primary{width:100%;padding:9px 10px!important}
  .footer-grid{gap:7px 9px!important;margin-bottom:10px!important}
  .fdetails summary{min-height:34px!important}
  .footer-cities{padding-block:10px!important;margin-bottom:10px!important}
  .city-cloud a{font-size:.55rem!important;padding:2px 5px!important}
  .footer-logo{width:72px!important;max-height:46px!important}
  .footer-legal{padding-top:10px!important}
}