/* Sabina Digital — дизайн-система «Редакционная смелость» 4.0.
   Токены взяты из ~/Sync/sabina-digital-design-system/index.html, раздел 17.
   Правила: прямой угол, теней нет, градиентов нет, чистые белый и чёрный запрещены. */

:root{
  --color-bg-primary:#F2F1ED; --color-bg-secondary:#E9E7E1; --color-surface:#FAF9F6;
  --color-surface-sand:#E2DFD5; --color-surface-stone:#C4C1B7;
  --color-bg-inverse:#1A1A18; --color-bg-inverse-deep:#121210;
  --color-text-primary:#1A1A18; --color-text-secondary:#5C5C57; --color-text-muted:#6E6E68;
  --color-text-on-dark:#F2F1ED; --color-text-on-dark-muted:#A8A79F;
  --color-line:#DEDCD4; --color-line-strong:#C4C1B7; --color-line-dark:#33332F;
  --color-accent:#E23D22; --color-accent-text:#C2331A; --color-accent-active:#9E2814;
  --color-accent-on-dark:#F0512F; --color-accent-soft:#FBE7E1;
  --color-success:#276B4E; --color-success-soft:#E4EDE8;
  --color-error:#A32B12; --color-error-soft:#F7E4DF;

  --font-display:'Unbounded','Tenor Sans','Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-text:'Onest','Golos Text',system-ui,-apple-system,'Segoe UI','Helvetica Neue',sans-serif;

  --size-display-xl:clamp(52px,9vw,116px); --size-display:clamp(38px,6vw,76px);
  --size-h1:clamp(32px,4.4vw,54px); --size-h2:clamp(26px,3.2vw,38px);
  --size-h3:clamp(21px,2.2vw,27px); --size-h4:19px;
  --size-lead:clamp(18px,1.6vw,21px); --size-body:16px; --size-caption:13px; --size-eyebrow:12px;

  --lh-display:1.06; --lh-heading:1.14; --lh-snug:1.35; --lh-body:1.62;
  --ls-display:-0.03em; --ls-heading:-0.02em; --ls-eyebrow:0.18em;

  --space-2xs:8px; --space-xs:12px; --space-sm:16px; --space-md:24px;
  --space-lg:32px; --space-xl:48px; --space-2xl:64px; --space-3xl:96px; --space-4xl:128px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--color-bg-primary);color:var(--color-text-primary);
  font-family:var(--font-text);font-size:var(--size-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--color-accent-text);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--color-accent-text);outline-offset:3px
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--space-md)}
.wrap--narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-md);top:var(--space-md);z-index:100;background:var(--color-surface);padding:var(--space-2xs) var(--space-sm)}

/* — Типографика — */
.display{font-family:var(--font-display);font-weight:700;font-size:var(--size-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:0 0 var(--space-md)}
.display-xl{font-family:var(--font-display);font-weight:700;font-size:var(--size-display-xl);
  line-height:1.02;letter-spacing:var(--ls-display);color:var(--color-accent);margin:0}
.h1{font-family:var(--font-display);font-weight:700;font-size:var(--size-h1);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 var(--space-sm)}
.h2{font-family:var(--font-display);font-weight:700;font-size:var(--size-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 var(--space-lg)}
.h3{font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);line-height:var(--lh-heading);margin:0 0 var(--space-2xs)}
.h4{font-size:var(--size-h4);font-weight:600;line-height:var(--lh-snug);margin:0 0 var(--space-2xs)}
.lead{font-size:var(--size-lead);line-height:var(--lh-snug);color:var(--color-text-secondary);margin:0 0 var(--space-md)}
.muted{color:var(--color-text-muted);margin:0 0 var(--space-2xs)}
.eyebrow{font-size:var(--size-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--color-accent-text);margin-bottom:var(--space-sm)}
.footer-label{font-size:var(--size-caption);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--color-text-muted);display:block;margin-bottom:var(--space-2xs)}

/* — Линейка и печать: фирменные приёмы — */
.rule{height:1px;background:var(--color-line);border:0;margin:var(--space-xl) 0 0}
.rule--open{height:2px;background:var(--color-text-primary);width:96px}
.stamp{width:56px;height:56px;border-radius:999px;background:var(--color-accent);color:var(--color-bg-primary);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
  font-size:17px;flex:0 0 auto}
.stamp--lg{width:84px;height:84px;font-size:32px;margin:0 auto var(--space-md)}

/* — Секции — */
.section{padding:var(--space-3xl) 0;border-top:1px solid var(--color-line)}
.section--tone{background:var(--color-bg-secondary)}
.section--center{text-align:center;padding:var(--space-4xl) 0}
.hero{padding:var(--space-4xl) 0 var(--space-3xl)}
.hero__lead{max-width:640px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)}

/* — Кнопки: один стиль главной, вторичная слабее — */
.btn{display:inline-block;font-family:var(--font-text);font-size:16px;font-weight:600;line-height:1;
  padding:16px 28px;border:1px solid transparent;border-radius:4px;cursor:pointer;text-align:center}
.btn--primary{background:var(--color-accent-text);color:var(--color-bg-primary);border-color:var(--color-accent-text)}
.btn--primary:hover{background:var(--color-accent-active);border-color:var(--color-accent-active);border-bottom-color:var(--color-accent-active)}
.btn--ghost{background:transparent;color:var(--color-text-secondary);border-color:var(--color-line-strong)}
.btn--ghost:hover{border-color:var(--color-text-secondary);border-bottom-color:var(--color-text-secondary)}
.btn--sm{padding:11px 18px;font-size:14px}

/* — Шапка — */
.site-header{position:sticky;top:0;z-index:50;background:rgba(242,241,237,.94);
  backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid var(--color-line)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-md);min-height:68px}
.brand{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.02em;
  color:var(--color-text-primary);margin-right:auto}
.brand--footer{font-size:20px;margin-bottom:var(--space-2xs)}
.nav{display:flex;gap:var(--space-md)}
.nav a{color:var(--color-text-secondary);font-size:15px}
.nav a:hover{color:var(--color-text-primary)}
.nav-toggle,.nav-burger{display:none}

/* — Сетки и карточки — */
.grid{display:grid;gap:var(--space-md)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--color-surface);border:1px solid var(--color-line);padding:var(--space-lg)}
.card--muted{background:var(--color-surface-sand)}
.card--work .card__media{height:180px;background:var(--color-bg-secondary);border:1px dashed var(--color-line-strong);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md);font-size:var(--size-caption);text-align:center;padding:var(--space-sm)}
.section--tone .card{background:var(--color-surface)}

/* — Услуги — */
.service--lead{display:flex;gap:var(--space-lg);align-items:flex-start;
  background:var(--color-surface);border:1px solid var(--color-line);padding:var(--space-xl);margin-bottom:var(--space-md)}
.service__title{margin-bottom:var(--space-xs)}
.service__meta{font-size:var(--size-caption);color:var(--color-text-muted);margin:var(--space-2xs) 0 0}
.service-grid{margin-bottom:var(--space-md)}
.onrequest{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-md);
  padding:var(--space-md) 0;border-top:1px solid var(--color-line);margin-bottom:var(--space-md)}
.onrequest__item{font-size:15px;color:var(--color-text-secondary)}

/* — Таблица цен — */
.table-scroll{overflow-x:auto;margin-bottom:var(--space-md)}
.price{width:100%;border-collapse:collapse;min-width:560px}
.price th{text-align:left;font-size:var(--size-caption);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--color-text-muted);font-weight:600;padding:0 var(--space-md) var(--space-2xs) 0;border-bottom:2px solid var(--color-text-primary)}
.price td{padding:var(--space-sm) var(--space-md) var(--space-sm) 0;border-bottom:1px solid var(--color-line);vertical-align:top}
.price tr td:first-child{font-weight:600}

/* — Шаги — */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{display:flex;gap:var(--space-md);padding:var(--space-md) 0;border-top:1px solid var(--color-line)}
.step:first-child{border-top:0}
.step__n{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--color-accent-text);flex:0 0 48px}

/* — Обо мне — */
.about{display:grid;grid-template-columns:280px 1fr;gap:var(--space-xl);align-items:start}
.about__photo{aspect-ratio:3/4;background:var(--color-surface);border:1px dashed var(--color-line-strong);
  display:flex;align-items:center;justify-content:center;font-size:var(--size-caption);text-align:center;padding:var(--space-sm)}

/* — Списки с тик-марками — */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:22px;margin-bottom:var(--space-2xs);color:var(--color-text-secondary)}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;background:var(--color-accent)}
.ticks--minus li::before{background:var(--color-line-strong)}

/* — Форма — */
.form{margin-top:var(--space-lg)}
.field{display:block;margin-bottom:var(--space-md)}
.field__label{display:block;font-size:var(--size-caption);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--color-text-muted);margin-bottom:var(--space-2xs)}
.field__hint{display:block;font-size:var(--size-caption);color:var(--color-text-muted);margin-top:6px}
.field input,.field textarea{width:100%;font-family:var(--font-text);font-size:16px;line-height:1.5;
  padding:14px var(--space-sm);background:var(--color-surface);color:var(--color-text-primary);
  border:1px solid var(--color-line-strong);border-radius:4px}
.field textarea{resize:vertical}
.consent{display:flex;gap:var(--space-xs);align-items:flex-start;margin-bottom:var(--space-lg);
  font-size:15px;color:var(--color-text-secondary)}
.consent input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--color-accent-text)}
.form__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{background:var(--color-error-soft);border-left:3px solid var(--color-error);
  color:var(--color-error);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}

/* — Документы — */
.doc h2{font-family:var(--font-display);font-size:var(--size-h2);margin:var(--space-xl) 0 var(--space-sm)}
.doc h3{font-family:var(--font-display);font-size:var(--size-h3);margin:var(--space-lg) 0 var(--space-2xs)}
.doc p,.doc li{color:var(--color-text-secondary)}
.doc__version{font-size:var(--size-caption);margin-top:var(--space-xl)}

/* — Подвал — */
.site-footer{background:var(--color-bg-inverse);color:var(--color-text-on-dark);padding:var(--space-2xl) 0 var(--space-lg);margin-top:var(--space-3xl)}
.site-footer a{color:var(--color-accent-on-dark)}
.site-footer .muted,.site-footer .footer-label{color:var(--color-text-on-dark-muted)}
.site-footer .brand{color:var(--color-text-on-dark)}
.site-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl)}
.site-footer__bottom{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--color-line-dark);font-size:var(--size-caption)}

/* — Cookie — */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--color-surface);border-top:2px solid var(--color-text-primary)}
.cookie__inner{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;padding-top:var(--space-xs);padding-bottom:var(--space-xs)}
.cookie__text{flex:1 1 420px;margin:0;font-size:14px;line-height:1.45;color:var(--color-text-secondary)}
.cookie__actions{display:flex;gap:var(--space-2xs)}

/* — Телефон — */
@media (max-width:900px){
  .grid--2,.grid--3{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about__photo{max-width:240px}
  .service--lead{flex-direction:column;gap:var(--space-md);padding:var(--space-lg)}
  .site-footer__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
  .section{padding:var(--space-2xl) 0}
  .hero{padding:var(--space-2xl) 0}

  /* Бургер на чистом CSS: без JavaScript */
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;cursor:pointer}
  .nav-burger span{display:block;height:2px;background:var(--color-text-primary)}
  .nav{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:var(--space-sm)}
  .nav a{padding:var(--space-2xs) 0;border-bottom:1px solid var(--color-line)}
  .nav-toggle:checked ~ .nav{display:flex}
  /* Одна строка: логотип слева, бургер и кнопка справа. Меню раскрывается ниже.
     Размеры подобраны так, чтобы всё помещалось в 360 px без переноса. */
  .site-header__inner{flex-wrap:wrap;gap:var(--space-2xs);min-height:60px}
  .brand{margin-right:auto;font-size:16px}
  .nav-burger{order:1;width:32px;height:32px;gap:4px}
  .site-header__cta{order:2}
}
@media (max-width:520px){
  .site-footer__grid{grid-template-columns:1fr}
  /* Кнопки в потоке страницы — во всю ширину, но не кнопка в шапке:
     она должна оставаться компактной рядом с логотипом. */
  .hero__actions .btn,.form__actions .btn,.section .btn{width:100%}
  .site-header__cta{width:auto;padding:10px 14px;font-size:13px}
  .hero__actions .muted{width:100%}
  .cookie__actions{width:100%}
  .cookie__actions .btn{flex:1 1 auto;padding:12px 14px}
  .cookie__text{font-size:13px}
}

/* Кнопка в конце блока «Кому подойду» — последняя точка перед формой */
.komu__cta{margin-top:var(--space-lg);margin-bottom:0}

/* Блок «Обо мне» без фотографии — текст на всю ширину, без пустой рамки */
.about--no-photo{grid-template-columns:1fr;max-width:760px}
.about__photo img{width:100%;height:100%;object-fit:cover}

/* ——— Плавное появление блоков при прокрутке + подсветка карточек ——— */
/* Прячем только когда JS активен (иначе контент виден всегда) и движение не отключено. */
@media (prefers-reduced-motion: no-preference){
  .js :is(.section .wrap > .eyebrow, .section .wrap > .h2, .card, .service--lead,
          .step, .about, .table-scroll, .onrequest, .komu__cta, .form){
    opacity:0; transform:translateY(24px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .js :is(.section .wrap > .eyebrow, .section .wrap > .h2, .card, .service--lead,
          .step, .about, .table-scroll, .onrequest, .komu__cta, .form).in{
    opacity:1; transform:none;
  }
}
/* Карточка при наведении: заметный подъём + мягкая тень + тонкая красная обводка. */
.card{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s ease}
.js .card{transition:opacity .6s cubic-bezier(.2,.7,.2,1),
          transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s ease}
.card:hover{
  border-color:var(--color-accent);
  /* чёткая яркая обводка по скруглённым углам (доп. 1px акцентной линии) + мягкая тень подъёма */
  box-shadow:
    0 0 0 1px var(--color-accent),
    0 20px 42px -22px rgba(26,26,24,.28),
    0 8px 18px -12px rgba(26,26,24,.16);
}
/* Подъём. !important обязателен: список :is(...) в правиле .in раздувает его
   специфичность (из-за «.section .wrap > .eyebrow»), и без !important сброс
   transform:none перебивал подъём — оставалась только тень. Вот почему не поднималось. */
.card:hover{transform:translateY(-14px) !important}

/* Скругление углов блоков — мягче, ближе к референсу (Material ~16px) */
.card{border-radius:16px}
.service--lead{border-radius:16px}