/* ==========================================================================
   Мастерская психологии — тема DIAFAN.CMS
   Палитра и типографика из лендинга: тёмно-синий #003f5c, глубокий #1a2e3a,
   голубой #6a90b4, золото #c4a882, кремовый #f8f6f1, шалфей #8a9a8c,
   терракота #c67b5c. Подключается последним после стилей темы.
   ========================================================================== */

:root {
  /* основные переменные DIAFAN переопределены под палитру мастерской */
  --color_main: 0, 63, 92;            /* #003f5c */
  --color_text: 26, 46, 58;           /* #1a2e3a */
  --color_white: 255, 255, 255;
  --color_bg: 248, 246, 241;          /* #f8f6f1 */
  --color_shadow: 26, 46, 58;
  --color_1: 198, 123, 92;            /* терракота */
  --color_2: 196, 168, 130;           /* золото */
  --color_3: 106, 144, 180;           /* голубой */

  --radius_1: 8px;
  --radius_2: 12px;
  --radius_blocks: 20px;
  --radius_btn: 999px;
  --content_width: 1240px;

  /* собственные токены */
  --ms-navy: #003f5c;
  --ms-deep: #1a2e3a;
  --ms-mid: #2a5a78;
  --ms-blue: #6a90b4;
  --ms-gold: #c4a882;
  --ms-cream: #f8f6f1;
  --ms-sage: #8a9a8c;
  --ms-terra: #c67b5c;
  --ms-line: rgba(26, 46, 58, .12);
  --ms-shadow: 0 18px 45px -30px rgba(26, 46, 58, .45);
  --ms-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ms-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------ база ----------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--ms-cream);
  color: var(--ms-deep);
  font-family: var(--ms-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ms-blue); color: #fff; }

h1, h2, h3, h4, h5, h6, .title {
  font-family: var(--ms-serif);
  color: var(--ms-deep);
  font-weight: 500;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.15; }
h2 { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; }
h3 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; }

p, li, td, th, label, input, textarea, select, button {
  font-family: var(--ms-sans);
}

a { color: var(--ms-navy); transition: color .2s; }
a:hover { color: var(--ms-terra); }

.text-silver, .text-gray { color: var(--ms-sage); }

hr, .separator { border-color: var(--ms-line); }

/* ----------------------------- кнопки --------------------------------- */
.btn, .btn-1, .btn-2, .btn-3, .btn-4 {
  font-family: var(--ms-sans);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius_btn);
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
}

.btn-1 {
  background-color: var(--ms-navy);
  border: 2px solid var(--ms-navy);
  color: #fff;
  padding: 11px 26px;
}
.btn-1:not([disabled]):hover {
  background-color: var(--ms-gold);
  border-color: var(--ms-gold);
  color: var(--ms-deep);
  transform: translateY(-1px);
}

.btn-2 {
  border: 1px solid rgba(0, 63, 92, .35);
  color: var(--ms-navy);
  background: transparent;
  padding: 11px 26px;
}
.btn-2:not([disabled]):hover {
  background-color: rgba(0, 63, 92, .07);
  border-color: var(--ms-navy);
}

.btn-3 {
  color: var(--ms-navy);
  background-color: rgba(196, 168, 130, .22);
}
.btn-3:not([disabled]):hover { background-color: var(--ms-gold); color: var(--ms-deep); }

.btn-4 {
  background: #fff;
  color: var(--ms-navy);
  border-color: #fff;
}
.btn-4:not([disabled]):hover { background: var(--ms-gold); border-color: var(--ms-gold); color: var(--ms-deep); }

/* ----------------------------- шапка ---------------------------------- */
header { background: #fff; }

.header-top-background {
  background: var(--ms-deep);
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}
.header-top-background a { color: rgba(255, 255, 255, .8); }
.header-top-background a:hover { color: var(--ms-gold); }

.header-middle-background {
  background: #fff;
  border-bottom: 1px solid var(--ms-line);
  box-shadow: 0 10px 30px -26px rgba(26, 46, 58, .5);
}
.header-middle { padding: 14px 0; }

header .logo img, .header-logo img { max-height: 54px; width: auto; }

/* пункты меню */
header nav a,
.header-middle a,
.header-bottom a {
  font-family: var(--ms-sans);
  font-size: 14px;
  letter-spacing: .02em;
}
header nav a:hover { color: var(--ms-terra); }

/* телефон в шапке */
.header-middle p { color: var(--ms-deep); }

/* ------------------------- контент и блоки ---------------------------- */
.section-content { max-width: var(--content_width); }

.block-1 {
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: var(--radius_blocks);
  box-shadow: 0 14px 34px -30px rgba(26, 46, 58, .5);
  transition: box-shadow .25s, transform .25s;
}
.block-1:hover { box-shadow: var(--ms-shadow); }

/* карточки товаров/статей/услуг */
.shop-row-block, .shop_list, .clauses-list, .news-list { border-radius: var(--radius_blocks); }

.shop-photo-label-action,
.shop-photo-label-new,
.shop-photo-label-hit {
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.shop-photo-label-action { background: var(--ms-terra); color: #fff; }
.shop-photo-label-new { background: var(--ms-gold); color: var(--ms-deep); }
.shop-photo-label-hit { background: var(--ms-navy); color: #fff; }

/* формы */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  font-family: var(--ms-sans);
  font-size: 15px;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  background: #fff;
  color: var(--ms-deep);
  padding: 12px 16px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ms-blue);
  box-shadow: 0 0 0 3px rgba(106, 144, 180, .18);
  outline: none;
}

/* крошки */
.breadcrumb, .breadcrumbs { font-size: 13px; color: var(--ms-sage); }
.breadcrumb a, .breadcrumbs a { color: var(--ms-sage); }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--ms-navy); }

/* заголовок страницы */
.section-content > h1 { margin: 0 0 18px; }

/* --------------------- секции главной мастерской ---------------------- */
.ms-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ms-deep);
  color: #fff;
  padding: clamp(34px, 6vw, 78px) clamp(22px, 5vw, 64px);
  margin-top: 26px;
}
.ms-hero__bg { position: absolute; inset: 0; }
.ms-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.ms-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 63, 92, .94), rgba(0, 63, 92, .72) 55%, rgba(26, 46, 58, .38));
}
.ms-hero__inner { position: relative; z-index: 2; max-width: 720px; }
.ms-hero__eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ms-gold);
  margin-bottom: 14px;
}
.ms-hero h1 { color: #fff; margin: 0 0 16px; font-size: clamp(28px, 4.4vw, 50px); }
.ms-hero p { color: rgba(255, 255, 255, .78); font-size: clamp(15px, 1.4vw, 18px); max-width: 56ch; }
.ms-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ms-hero__actions .btn-4 { background: #fff; color: var(--ms-deep); }
.ms-hero__actions .btn-2 { color: #fff; border-color: rgba(255, 255, 255, .45); }
.ms-hero__actions .btn-2:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ms-section { padding: clamp(34px, 5vw, 64px) 0; }
.ms-section__head { max-width: 720px; margin-bottom: 26px; }
.ms-section__eyebrow {
  display: inline-block;
  font-family: var(--ms-serif);
  font-style: italic;
  color: var(--ms-blue);
  font-size: 15px;
  margin-bottom: 8px;
}
.ms-section__lead { color: var(--ms-sage); font-size: 15.5px; margin-top: 10px; }

.ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ms-card {
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: var(--radius_blocks);
  padding: 24px;
  box-shadow: 0 14px 34px -30px rgba(26, 46, 58, .5);
  transition: transform .25s, box-shadow .25s;
}
.ms-card:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow); }
.ms-card h3 { margin: 0 0 8px; color: var(--ms-deep); }
.ms-card p { color: var(--ms-sage); font-size: 14.5px; line-height: 1.6; }
.ms-card__price {
  display: block;
  margin-top: 14px;
  font-family: var(--ms-serif);
  font-size: 22px;
  color: var(--ms-navy);
}

.ms-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.ms-list li { position: relative; padding-left: 24px; color: var(--ms-deep); font-size: 15px; }
.ms-list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ms-gold);
}

.ms-quote {
  font-family: var(--ms-serif);
  font-style: italic;
  color: var(--ms-blue);
  font-size: 17px;
  line-height: 1.6;
}

.ms-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ms-contact-card {
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: var(--radius_blocks);
  padding: 26px;
  box-shadow: var(--ms-shadow);
}
.ms-contact-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 0; }
.ms-contact-row + .ms-contact-row { border-top: 1px solid var(--ms-line); }
.ms-contact-row b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ms-sage); margin-bottom: 2px; }
.ms-contact-row span, .ms-contact-row a { font-size: 15px; color: var(--ms-deep); }
.ms-contact-row svg { color: var(--ms-gold); margin-top: 2px; }
.ms-text { columns: 2; column-gap: 32px; color: var(--ms-sage); font-size: 15px; line-height: 1.7; }
.ms-text h2, .ms-text h3 { column-span: all; }

.ms-map { border-radius: var(--radius_blocks); overflow: hidden; border: 1px solid var(--ms-line); background: #fff; }
.ms-map iframe { width: 100%; height: 360px; border: 0; display: block; }

/* ------------------------------ подвал -------------------------------- */
footer {
  background: var(--ms-deep);
  color: rgba(255, 255, 255, .66);
  margin-top: clamp(30px, 5vw, 60px);
  padding: clamp(30px, 4vw, 54px) 0 22px;
}
footer, footer p, footer li, footer span, footer a { font-family: var(--ms-sans);     color: rgba(255, 255, 255, .6); }
footer a { color: rgba(255, 255, 255, .72); }
footer a:hover { color: var(--ms-gold); }
footer .text-silver { color: rgba(255, 255, 255, .5); }
footer h3, footer .footer-title {
  color: #fff;
  font-family: var(--ms-serif);
  font-size: 18px;
  margin-bottom: 14px;
}
.footer-separator { background: rgba(255, 255, 255, .14); height: 1px; }
.footer-social a { color: var(--ms-gold); }
.footer-bottom, .footer-copyright { color: rgba(255, 255, 255, .45); font-size: 12.5px; }
.footer-made { color: rgba(255, 255, 255, .45); font-size: 12.5px; }
.footer-made a { color: var(--ms-gold); }

footer .ms-footer-brand { max-width: 320px; }
footer .ms-footer-brand img { max-height: 48px; margin-bottom: 14px; }
footer .ms-footer-brand p { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .6); }
footer .ms-footer-nav { display: grid; gap: 9px; font-size: 14.5px; }
footer .ms-footer-contacts { display: grid; gap: 12px; font-size: 14.5px; }
footer .ms-footer-contacts .ms-label {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); margin-bottom: 2px; display: block;
}
footer .ms-footer-bottom {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-size: 12.5px; color: rgba(255, 255, 255, .45);
}
footer .ms-footer-bottom a { color: rgba(255, 255, 255, .62); }
footer .ms-footer-bottom a:hover { color: var(--ms-gold); }

/* ------------------------------ адаптив -------------------------------- */
@media (max-width: 1023px) {
  .ms-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .ms-cards { grid-template-columns: 1fr; }
  .ms-text { columns: 1; }
  .ms-hero { border-radius: 20px; padding: 28px 20px; }
  .ms-section { padding: 30px 0; }
  footer .ms-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------- логотип -------------------------------- */
.ms-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ms-logo__mark {
  position: relative; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%; background: var(--ms-navy);
}
.ms-logo__mark::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 1.5px solid rgba(248, 246, 241, .45);
}
.ms-logo__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--ms-gold);
}
.ms-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.ms-logo__name { font-family: var(--ms-serif); font-size: 20px; color: var(--ms-deep); }
.ms-logo__slogan {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ms-sage); margin-top: 3px; max-width: 260px; line-height: 1.3;
}
.ms-logo__img { max-height: 52px; width: auto; }

@media (max-width: 680px) {
  .ms-logo__mark { width: 38px; height: 38px; }
  .ms-logo__name { font-size: 17px; }
  .ms-logo__slogan { display: none; }
}
footer   { 
    color: rgba(255, 255, 255, .6);
}