/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.75rem;
  background: var(--accent); color: var(--on-accent);
  font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none;
  border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:focus-visible { outline-offset: 3px; }
.btn-small { min-height: 2.5rem; padding: 0.5rem 1.25rem; font-size: var(--fs-small); }

/* Стекло (вариант 2: тонкая светлая рамка). Только поверх цветного поля или тёмного фона */
.btn-glass {
  min-height: 3.25rem; padding: 0.85rem 1.9rem;
  color: var(--glass-ink); background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 0 1px var(--glass-outline), 0 14px 30px -16px var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.btn-glass:hover { background: var(--glass-bg-hover); border-color: var(--glass-border); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-glass { background: var(--glass-fallback); }
}

/* Цветное поле: два мягких пятна, края растворяются сами, без обрезки */
.field {
  position: absolute; z-index: -1; pointer-events: none; filter: blur(32px); opacity: var(--field-opacity, 1);
  background:
    radial-gradient(closest-side, var(--field-1), transparent) var(--f1-pos, 30% 40%) / var(--f1-size, 60% 70%) no-repeat,
    radial-gradient(closest-side, var(--field-2), transparent) var(--f2-pos, 70% 62%) / var(--f2-size, 55% 65%) no-repeat;
}

.text-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link:hover { border-bottom-width: 2px; }

/* ---------- Шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.header-bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
.logo-mark { display: block; height: 1.5rem; width: auto; }

/* мобильное меню */
.burger {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; cursor: pointer; font-size: var(--fs-small); font-weight: 500;
}
.burger-icon { position: relative; display: block; width: 1.25rem; height: 0.875rem; }
.burger-icon::before, .burger-icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.burger-icon::before { top: 0.1875rem; }
.burger-icon::after { top: 0.6875rem; }
.site-header.is-open .burger-icon::before { top: 0.4375rem; transform: rotate(45deg); }
.site-header.is-open .burger-icon::after { top: 0.4375rem; transform: rotate(-45deg); }

.site-nav {
  display: none;
  position: fixed; inset: var(--header-h) 0 0 0; overflow-y: auto;
  background: var(--bg); padding: var(--space-3) var(--gutter) var(--space-5);
}
.site-header.is-open .site-nav { display: block; }
.site-nav .btn { margin-top: var(--space-4); width: 100%; }

.menu-item { position: relative; border-bottom: 1px solid var(--line); }
.menu-link { display: block; padding: var(--space-2) 0; font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.2; text-decoration: none; }
.menu-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

.panel-toggle {
  position: absolute; right: 0; top: 0.5rem; width: 2.75rem; height: 2.75rem;
  background: none; border: 0; cursor: pointer;
}
.panel-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg); transition: transform var(--t-med) var(--ease);
}
.panel-toggle[aria-expanded="true"]::after { transform: translate(-50%, -30%) rotate(-135deg); }

.panel { display: none; padding-bottom: var(--space-2); }
.panel-toggle[aria-expanded="true"] ~ .panel { display: block; }
.panel-inner { padding-inline: 0; }
.panel-lead { display: none; }
.panel-link { display: block; padding: var(--space-1) 0; text-decoration: none; }
.panel-link-title { display: block; font-weight: 500; }
.panel-link-caption { display: block; color: var(--muted); font-size: var(--fs-small); }


/* десктоп: тонкая строка + раскрывающаяся панель */
@media (min-width: 900px) {
  .burger { display: none; }
  .site-nav, .site-header.is-open .site-nav {
    display: flex; align-items: center; gap: var(--space-4);
    position: static; inset: auto; overflow: visible; background: none; padding: 0;
  }
  .site-nav .btn { margin-top: 0; width: auto; }
  .menu { display: flex; align-items: center; gap: var(--space-4); }
  .menu-item { border: 0; }
  .menu-link { padding: var(--space-3) 0; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; text-decoration: none; position: relative; }
  .menu-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.125rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
  .menu-link:hover::after, .menu-link[aria-current="page"]::after, .has-panel.is-open .menu-link::after { transform: scaleX(1); }
  .menu-link[aria-current="page"] { text-decoration: none; }

  .menu-item.has-panel { position: static; display: flex; align-items: center; }
  .panel-toggle { position: relative; top: auto; right: auto; width: 1.75rem; height: 2rem; }

  .panel {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--space-5) 0 var(--space-6);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .has-panel.is-open .panel {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  .panel-inner { display: grid; grid-template-columns: 1fr 2.4fr; gap: var(--space-5); padding-inline: var(--gutter); }
  .panel-lead { display: block; }
  .panel-title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; margin-bottom: var(--space-2); }
  .panel-all { font-size: var(--fs-small); font-weight: 500; }
  .panel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
  .panel-link { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
  .panel-link:hover .panel-link-title { text-decoration: underline; text-underline-offset: 0.2em; }
  .panel-link-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.125rem; }

}

/* ---------- Главный экран ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(2rem, 7vh, 5rem) clamp(3rem, 9vh, 7rem); }
/* поле лежит под кнопкой и текстом, но не поверх заголовка */
.hero-cta { position: relative; }
.hero-title { position: relative; z-index: 1; }
.field--hero { inset: -9rem -30% -11rem -35%; --f1-pos: 22% 38%; --f1-size: 62% 72%; --f2-pos: 72% 64%; --f2-size: 58% 66%; }
.hero-title { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.025em; max-width: 24ch; }
.hero-row { display: grid; gap: var(--space-4); margin-top: clamp(1.75rem, 5vh, 3.5rem); }
.hero-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.hero-note { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-small); max-width: 46ch; }

@media (min-width: 900px) {
  .hero-row { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--space-5); }
}

/* ---------- Блок и список услуг ---------- */
.block { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.block-title { font-size: var(--fs-h2); margin-bottom: var(--space-5); }
@media (min-width: 900px) { .block { padding-block: var(--space-7); } }

.service-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--line); text-decoration: none;
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.service-caption { grid-column: 1; grid-row: 2; color: var(--muted); }
.service-arrow { grid-column: 2; grid-row: 1; transition: transform var(--t-med) var(--ease); }
.service-row:hover .service-arrow, .service-row:focus-visible .service-arrow { transform: translateX(6px); }
.service-row:hover .service-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (min-width: 900px) {
  .service-row { grid-template-columns: 5fr 6fr auto; padding: var(--space-4) 0; gap: 0 var(--space-4); }
  .service-caption { grid-column: 2; grid-row: 1; }
  .service-arrow { grid-column: 3; }
}
.services-foot { margin-top: var(--space-4); }

/* ---------- Заготовки страниц ---------- */
.page-head { padding-block: var(--space-6) var(--space-7); }
.page-title { font-size: var(--fs-h2); }
.page-lead { margin-top: var(--space-3); color: var(--muted); font-size: var(--fs-lead); max-width: 40ch; }

/* ---------- Подвал ---------- */
/* Подвал всегда тёмный */
.site-footer { background: var(--s-footer); color: var(--on-dark); padding-block: var(--space-6); font-size: var(--fs-small); }
.site-footer :focus-visible { outline-color: var(--on-dark); }
.footer-inner { display: grid; gap: var(--space-3); }
.footer-name .logo-mark { height: 1.25rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.footer-note { color: var(--on-dark-soft); }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1fr auto auto; align-items: baseline; gap: var(--space-5); } }

/* ---------- Появление при загрузке (только CSS, без JS) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 700ms var(--ease) both; }
.rise-2 { animation-delay: 120ms; }
.rise-3 { animation-delay: 240ms; }

/* ---------- Как проходит работа (sticky-прокрутка) ---------- */
.process { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.process-title { font-size: var(--fs-h2); max-width: 12ch; }
.process-nav { margin-top: var(--space-4); display: none; }
.process-nav a { display: block; padding: 0.35rem 0 0.35rem var(--space-2); border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; }
.process-nav a:hover { color: var(--ink); }

.process-steps { margin-top: var(--space-4); counter-reset: none; }
.process-step { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.step-num { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; letter-spacing: -0.04em; }
.step-title { font-size: var(--fs-h3); margin-top: var(--space-2); }
.step-text { margin-top: var(--space-1); color: var(--muted); max-width: 38ch; }

@media (min-width: 900px) {
  .process { padding-block: var(--space-7); }
  .process-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); }
  .process-sticky { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .process-nav { display: block; }
  .process-steps { margin-top: 0; }
  .process-step { min-height: 30vh; padding-block: var(--space-4); display: flex; flex-direction: column; justify-content: flex-start; }
  .step-num { font-size: clamp(6rem, 13vw, 11rem); }
  .step-title { margin-top: var(--space-3); }
  .step-text { font-size: var(--fs-lead); }

  /* «живой» режим включает скрипт: нет запроса на уменьшение движения */
  .process.is-live .process-step { opacity: 0.6; /* не ниже 0.6: иначе текст неактивных шагов не проходит контраст 4.5:1 */ transition: opacity 400ms var(--ease); }
  .process.is-live .process-step.is-active { opacity: 1; }
  .process.is-live .process-nav a { transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), padding-left var(--t-med) var(--ease); }
  .process.is-live .process-nav a[aria-current="step"] { color: var(--ink); border-left-color: var(--ink); padding-left: var(--space-3); }
}

/* без анимаций: блок ведёт себя как обычный список */
@media (prefers-reduced-motion: reduce) {
  .process-sticky { position: static; }
  .process-step { min-height: 0; }
}

/* ---------- Фирменные моменты анимации (показаны на /demo-motion/) ---------- */
/* 1. Строки заголовка поднимаются из-под маски */
.mask { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.mask > span { display: block; transform: translateY(108%); }
.play .mask > span { animation: line-up 900ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes line-up { to { transform: none; } }

/* 2. Линия строки услуги прорисовывается слева направо */
.service-row--draw { position: relative; }
.service-row--draw::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease);
}
.service-row--draw .service-title { transition: transform 360ms var(--ease); }
.service-row--draw:hover::before, .service-row--draw:focus-visible::before { transform: scaleX(1); }
.service-row--draw:hover .service-title, .service-row--draw:focus-visible .service-title { transform: translateX(10px); text-decoration: none; }

.demo-note { color: var(--muted); font-size: var(--fs-small); margin-top: var(--space-2); max-width: 52ch; }
.demo-stage { padding-block: var(--space-5) var(--space-6); }

/* ---------- Ритм главной: секции ---------- */
/* секция с цветным полем: поле не обрезается по вертикали, горизонтальный вылет срезан */
.field-host { position: relative; isolation: isolate; overflow-x: clip; }
.field-host > .container { position: relative; z-index: 1; }

.section-tint { background: var(--s-tint); border-top: 0; }
.field--svc { inset: 15% auto -5% -22%; width: 58%; --f1-pos: 34% 38%; --f1-size: 80% 60%; --f2-pos: 52% 74%; --f2-size: 62% 52%; }

/* Тёмный блок процесса: плоский фон, тонкие линии, стеклянные плашки с тонкой светлой рамкой */
.section-dark { background: var(--s-dark); color: var(--on-dark); }
.section-dark .process { border-top: 0; }
.section-dark .process-title, .section-dark .step-title { color: var(--on-dark); }
.section-dark .step-text { color: var(--on-dark-muted); }
.section-dark .process-step { border-top-color: var(--on-dark-line); }
.section-dark .process-nav a { border-left-color: var(--on-dark-line); color: var(--on-dark-soft); }
.section-dark .process-nav a:hover { color: var(--on-dark); }
.section-dark .process.is-live .process-nav a[aria-current="step"] { color: var(--on-dark); border-left-color: var(--on-dark); }
.section-dark :focus-visible { outline-color: var(--on-dark); }
.section-dark .step-num {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-width: 5.25rem; padding: 0.15em 0.4em; border-radius: 1.5rem; color: #ffffff;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  background: var(--plate-bg); border: 1px solid var(--plate-border);
  box-shadow: 0 0 0 1px var(--plate-outline);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
/* Вариант (б): очень слабое холодное свечение только за плашкой */
.process--glow .step-num::before {
  content: ""; position: absolute; z-index: -1; inset: -60% -45%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--plate-glow), transparent); filter: blur(10px);
}

/* Работы */
.work-card { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: 24px; background: var(--card-bg); }
.work-card .work-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -0.02em; }
.work-card p { color: var(--muted); max-width: 46ch; }
.work-status { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; margin-top: var(--space-2); padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-small); }
.work-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; opacity: 0.5; }
@media (min-width: 900px) { .work-card { grid-template-columns: 5fr 7fr; align-items: end; padding: var(--space-5); } }
.section-works { background: var(--s-works); }

/* Финальная полоса с полем и стеклянной кнопкой */
.cta-strip { background: var(--s-cta); padding-block: var(--space-6) var(--space-7); }
.cta-strip h2 { font-size: var(--fs-h2); max-width: 20ch; }
.cta-strip p { margin-top: var(--space-2); color: var(--muted); max-width: 40ch; font-size: var(--fs-lead); }
.cta-strip .btn { margin-top: var(--space-4); }
.cta-inner { position: relative; isolation: isolate; }
.field--cta { inset: -5rem -30% -6rem -18%; --f1-pos: 12% 78%; --f1-size: 52% 72%; --f2-pos: 48% 62%; --f2-size: 52% 66%; }
@media (min-width: 900px) { .cta-strip { padding-block: var(--space-7) var(--space-8); } }

/* Переключатель темы (пока только на прототипе /demo-theme/) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle [data-icon] { display: none; }
:root:not([data-theme]) .theme-toggle [data-icon="system"],
:root[data-theme="light"] .theme-toggle [data-icon="light"],
:root[data-theme="dark"] .theme-toggle [data-icon="dark"] { display: block; }
.header-bar .theme-toggle { margin-left: auto; margin-right: var(--space-2); }
@media (min-width: 900px) {
  .header-bar .theme-toggle { order: 3; margin: 0 0 0 var(--space-3); }
  .header-bar .site-nav { order: 2; margin-left: auto; }
}

/* Тонкая линия между секциями: видна только в тёмной теме, чтобы ритм читался и на слабых экранах */
.section-tint, .section-dark, .section-works, .cta-strip, .site-footer { border-top: 1px solid var(--section-sep); }

/* Черновик политики */
.notice { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: 16px; max-width: 60ch; }
.legal { max-width: 46rem; }
.legal-list { counter-reset: legal; display: grid; gap: var(--space-4); }
.legal-list li { counter-increment: legal; }
.legal-list h2 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.legal-list h2::before { content: counter(legal) ". "; color: var(--muted); }
.legal-list p { max-width: 60ch; }
.legal-list .todo { color: var(--muted); font-style: italic; }

/* ---------- Контакты и форма ---------- */
.contact-top { padding-block: var(--space-6) var(--space-5); }
.contact-lead { max-width: 46ch; color: var(--muted); }
.channels { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; column-gap: clamp(0.5rem, 3.2vw, 1.5rem); margin-top: var(--space-4); }
.channel { display: grid; justify-items: center; gap: 0.5rem; min-width: 4.5rem; text-decoration: none; color: var(--ink); }
.channel-plate {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1.5rem;
  color: var(--glass-ink); background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: 0 0 0 1px var(--glass-outline), 0 14px 30px -16px var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transition: background-color var(--t-med) var(--ease), color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .channel-plate { background: var(--glass-fallback); } }
.channel-icon { width: 1.875rem; height: 1.875rem; }
.channel-label { font-size: var(--fs-small); font-weight: 500; }
.channel:hover .channel-plate, .channel:focus-visible .channel-plate { background: var(--glass-bg-hover); transform: translateY(-2px); }
.channel--telegram:hover .channel-plate, .channel--telegram:focus-visible .channel-plate { color: var(--brand-telegram); }
.channel--whatsapp:hover .channel-plate, .channel--whatsapp:focus-visible .channel-plate { color: var(--brand-whatsapp); }
.channel--viber:hover .channel-plate, .channel--viber:focus-visible .channel-plate { color: var(--brand-viber); }
.channel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 1.5rem; }
.contact-top { overflow: clip; }
.field--contact { inset: 30% -20% 0 0; --f1-pos: 4% 66%; --f1-size: 44% 64%; --f2-pos: 40% 56%; --f2-size: 46% 58%; filter: blur(26px); }

.form-layout { display: grid; gap: var(--space-4); }
.form-sub { color: var(--muted); max-width: 36ch; font-size: var(--fs-lead); }
@media (min-width: 900px) { .form-layout { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }

.lead-form { display: grid; gap: var(--space-3); max-width: 40rem; }
.form-fields { display: grid; gap: var(--space-3); }
.field-row { display: grid; gap: 0.375rem; }
.field-row label { font-weight: 500; }
.field-row input[type="text"], .field-row textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 16px; padding: 0.8rem 1rem;
}
.field-row textarea { resize: vertical; min-height: 9rem; }
.field-row input::placeholder, .field-row textarea::placeholder { color: transparent; }
.field-row input:focus-visible, .field-row textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field-row [aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.hint { color: var(--muted); font-size: var(--fs-small); }
.err { font-size: var(--fs-small); font-weight: 500; }
.err::before { content: "! "; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; font-weight: 400; cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--ink); }
.consent-row .err { margin-left: 2.25rem; }
.submit-wrap { position: relative; isolation: isolate; justify-self: start; padding: 0.25rem 0; }
.field--submit { inset: -2.25rem -4rem -2.25rem -3rem; --f1-pos: 15% 50%; --f1-size: 60% 90%; --f2-pos: 78% 50%; --f2-size: 55% 90%; filter: blur(20px); }
.submit[disabled] { opacity: 0.6; cursor: progress; }

.form-status { padding: var(--space-3); border: 1px solid var(--input-border); border-radius: 16px; font-size: var(--fs-lead); }
.form-status[data-kind="error"] { border-width: 2px; border-color: var(--ink); }
.form-status:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Работы: карточка проекта ---------- */
.work-card .work-caption { margin-top: var(--space-1); }
.work-side { display: grid; gap: var(--space-2); justify-items: start; }
.work-side .btn { margin-top: 0; }
.work-note { font-size: var(--fs-small); color: var(--muted); max-width: 40ch; }
.work-items { display: grid; gap: var(--space-1); color: var(--muted); }

/* ---------- Услуги ---------- */
.svc-top { padding-block: var(--space-6) var(--space-5); overflow: clip; }
.svc-lead { max-width: 46ch; color: var(--muted); }
.field--svc-top { inset: 20% -20% 0 28%; --f1-pos: 30% 60%; --f1-size: 55% 70%; --f2-pos: 70% 50%; --f2-size: 48% 60%; filter: blur(28px); }

/* Тёмная полоса с призывом: стекло на тёмном, поле одно */
.band-dark { padding-block: var(--space-6) var(--space-7); --glass-ink: #ffffff; --glass-bg: rgba(255,255,255,0.07); --glass-bg-hover: rgba(255,255,255,0.14); --glass-border: rgba(255,255,255,0.42); --glass-outline: rgba(0,0,0,0.4); --glass-shadow: rgba(0,0,0,0.6); --glass-fallback: rgba(32,38,41,0.96); --field-1: #1F6B5F; --field-2: #5E6B26; --field-opacity: 0.6; }
.band-title { font-size: var(--fs-h2); max-width: 22ch; color: var(--on-dark); }
.band-text { margin-top: var(--space-2); color: var(--on-dark-muted); font-size: var(--fs-lead); max-width: 40ch; }
.band-dark .btn { margin-top: var(--space-4); }
.field--band { inset: 30% -20% -20% 0; --f1-pos: 14% 62%; --f1-size: 44% 60%; --f2-pos: 46% 58%; --f2-size: 44% 54%; filter: blur(30px); }
@media (min-width: 900px) { .band-dark { padding-block: var(--space-7) var(--space-8); } }

/* страница «Работы»: карточка сразу под вступлением, заголовок карточки спокойнее */
.page-head + .section-works { border-top: 0; padding-top: var(--space-3); }
.work-card .work-title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
@media (min-width: 900px) { .work-card { grid-template-columns: 6fr 6fr; align-items: center; } }

/* «Что сделано»: пункты с тонкими линиями, как на странице услуг */
.work-done { grid-column: 1 / -1; margin-top: var(--space-3); }
.work-done-title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.work-done-list li { padding-block: var(--space-2); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .work-done-list li { padding-right: 28%; } }
.work-done-list li:last-child { border-bottom: 1px solid var(--line); }

/* Подвал: ссылки не меньше 44 px по высоте; на телефоне снизу запас под плашку Netlify */
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 899px) { .site-footer { padding-bottom: calc(var(--space-6) + 4.5rem); } }

/* Страница 404 */
.nf { padding-block: var(--space-7) var(--space-8); }
.nf .btn { margin-top: var(--space-4); }
.nf-link { margin-left: var(--space-3); }

/* ---------- Калькулятор стоимости ---------- */
.calc-head { padding-block: var(--space-6) var(--space-4); }
.calc-wrap { padding-bottom: var(--space-6); }
.calc-noscript { margin-bottom: var(--space-4); }
.calc-disclaimer { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }

/* шаги сверху: порядок важен, поэтому с номерами */
.calc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); border-bottom: 1px solid var(--line); }
.calc-step {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); font-size: var(--fs-small); font-weight: 500; text-align: left; cursor: pointer;
}
.calc-step-num {
  display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--input-border); font-size: 0.875rem;
}
.calc-step[aria-current="step"] { color: var(--ink); border-bottom-color: var(--ink); }
.calc-step[aria-current="step"] .calc-step-num { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.calc-step:hover:not([disabled]) { color: var(--ink); }
.calc-step[disabled] { cursor: not-allowed; opacity: 0.55; }
@media (max-width: 599px) {
  .calc-step { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.2; }
}

.calc-panel { padding-top: var(--space-5); }
.calc-title { font-size: var(--fs-h3); }
.calc-title:focus { outline: none; }
.calc-title:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.calc-hint { margin-top: var(--space-1); color: var(--muted); }
.calc-fieldset, .calc-svc, .calc-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-fieldset { margin-top: var(--space-3); }
.calc-grid { display: grid; gap: var(--space-2); }
@media (min-width: 600px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc-list { display: grid; gap: var(--space-1); }

/* вариант выбора: настоящий input скрыт визуально, но остаётся в фокусе клавиатуры */
.calc-opt { position: relative; display: block; cursor: pointer; }
.calc [hidden] { display: none; }
.calc-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.calc-box {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-2); row-gap: 0.25rem; align-content: start;
  height: 100%; min-height: 3rem; padding: var(--space-2) 1.25rem; border: 1px solid var(--line); border-radius: 20px; background: var(--card-bg);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.calc-mark { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.calc-opt-title { grid-column: 1; grid-row: 1; font-weight: 500; line-height: 1.35; }
.calc-opt-text { grid-column: 1; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.calc-opt-meta { grid-column: 1; font-size: var(--fs-small); font-weight: 500; }
.calc-opt:hover .calc-box { border-color: var(--input-border); }
.calc-input:checked + .calc-box { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--s-tint); }
.calc-input:focus-visible + .calc-box { outline: 2px solid var(--ink); outline-offset: 3px; }
.calc-input:disabled + .calc-box { cursor: default; box-shadow: none; border-color: var(--line); }
.calc-input:disabled + .calc-box .calc-mark { opacity: 0.55; }
.calc-opt--card .calc-opt-title { font-family: var(--font-serif); font-size: 1.25rem; }

/* значки: флажок, кружок, переключатель */
.calc-mark--checkbox, .calc-mark--radio { position: relative; width: 1.5rem; height: 1.5rem; margin-top: 0.125rem; border: 1.5px solid var(--input-border); background: var(--bg); }
.calc-mark--checkbox { border-radius: 0.5rem; }
.calc-mark--radio { border-radius: 50%; }
.calc-input:checked + .calc-box .calc-mark--checkbox { background: var(--ink); border-color: var(--ink); }
.calc-input:checked + .calc-box .calc-mark--checkbox::after {
  content: ""; position: absolute; left: 0.47rem; top: 0.2rem; width: 0.4rem; height: 0.75rem;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.calc-input:checked + .calc-box .calc-mark--radio { border-color: var(--ink); }
.calc-input:checked + .calc-box .calc-mark--radio::after { content: ""; position: absolute; inset: 0.25rem; border-radius: 50%; background: var(--ink); }
.calc-mark--switch { position: relative; width: 2.75rem; height: 1.625rem; margin-top: 0.0625rem; border-radius: 999px; border: 1.5px solid var(--input-border); background: var(--bg); transition: background-color var(--t-fast) var(--ease); }
.calc-mark--switch::after { content: ""; position: absolute; left: 0.1875rem; top: 50%; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--input-border); transform: translateY(-50%); transition: transform var(--t-med) var(--ease), background-color var(--t-fast) var(--ease); }
.calc-input:checked + .calc-box .calc-mark--switch { background: var(--ink); border-color: var(--ink); }
.calc-input:checked + .calc-box .calc-mark--switch::after { background: var(--bg); transform: translate(1.0625rem, -50%); }

/* шаг 2: блок на каждый выбранный пункт */
.calc-svc { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.calc-svc-title { float: left; width: 100%; padding: 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; }
.calc-svc-title + * { clear: both; }
.calc-svc-text { padding-top: var(--space-2); max-width: 56ch; }
.calc-group { padding-top: var(--space-3); }
.calc-group-title { float: left; width: 100%; padding: 0 0 var(--space-1); font-weight: 500; color: var(--muted); font-size: var(--fs-small); }
.calc-group-title + * { clear: both; }
.calc-note { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 900px) {
  .calc-svc { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--space-5); }
  .calc-svc > .calc-svc-title { grid-column: 1; }
  .calc-svc > :not(.calc-svc-title) { grid-column: 2; }
  .calc-svc > .calc-group:first-of-type, .calc-svc > .calc-svc-text { padding-top: 0; }
}

/* счётчик автоматизаций */
.calc-opt--counter { display: grid; gap: var(--space-2); padding: var(--space-2) 1.25rem; border: 1px solid var(--line); border-radius: 20px; cursor: default; }
.calc-opt--counter .calc-box { display: grid; grid-template-columns: 1fr; padding: 0; border: 0; min-height: 0; background: none; }
.calc-stepper { display: inline-flex; align-items: center; gap: var(--space-1); }
.calc-step-btn {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--input-border); background: var(--bg); color: var(--ink); font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.calc-step-btn:hover:not([disabled]) { border-color: var(--ink); }
.calc-step-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.calc-count {
  width: 4rem; height: 3rem; text-align: center; font: inherit; font-weight: 500; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 14px; -moz-appearance: textfield;
}
.calc-count::-webkit-outer-spin-button, .calc-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (min-width: 600px) { .calc-opt--counter { grid-template-columns: 1fr auto; align-items: center; } }

.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.calc-actions .btn { min-height: 3rem; min-width: 9rem; }
.calc-back { min-height: 3rem; padding: 0 0.25rem; background: none; border: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; cursor: pointer; }
.calc-back:hover { text-decoration-thickness: 2px; }
.calc-error { margin-top: var(--space-2); font-weight: 500; }
.calc-error:empty { display: none; }
.calc-error::before { content: "! "; font-weight: 700; }

/* закреплённая сумма на шагах 2 и 3 */
.calc-bar {
  position: sticky; bottom: 0; z-index: 20; margin-top: var(--space-5); margin-inline: calc(var(--gutter) * -1);
  padding: 0.875rem var(--gutter); background: var(--s-footer); color: var(--on-dark); border-top: 1px solid var(--on-dark-line);
}
.calc-bar-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem var(--space-2); }
.calc-bar-label { width: 100%; color: var(--on-dark-soft); font-size: 0.8125rem; }
.calc-bar-sum { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.calc-bar-days { color: var(--on-dark-muted); font-size: var(--fs-small); }
@media (min-width: 900px) { .calc-bar { margin-inline: 0; border-radius: 20px 20px 0 0; padding-inline: var(--space-4); } }

/* шаг 4: тёмная плашка с итогом, одно цветное поле под кнопкой */
.calc-result {
  margin-top: var(--space-3); padding: var(--space-4) var(--space-3); border-radius: 24px;
  background: var(--s-footer); color: var(--on-dark); border: 1px solid var(--section-sep);
  --glass-ink: #ffffff; --glass-bg: rgba(255,255,255,0.07); --glass-bg-hover: rgba(255,255,255,0.14); --glass-border: rgba(255,255,255,0.42); --glass-outline: rgba(0,0,0,0.4); --glass-shadow: rgba(0,0,0,0.6); --glass-fallback: rgba(32,38,41,0.96);
  --field-1: #1F6B5F; --field-2: #5E6B26; --field-opacity: 0.6;
}
.calc-result :focus-visible { outline-color: var(--on-dark); }
.calc-result-label { color: var(--on-dark-soft); font-size: var(--fs-small); }
.calc-result-label + .calc-total, .calc-result-label + .calc-days { margin-top: 0.25rem; }
.calc-total { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.875rem, 1.2rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; margin-bottom: var(--space-3); }
.calc-days { font-size: var(--fs-lead); }
.calc-days-note { margin-top: 0.25rem; color: var(--on-dark-muted); font-size: var(--fs-small); }
.calc-notes { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--on-dark-line); display: grid; gap: 0.5rem; color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 60ch; }
.calc-send { position: relative; isolation: isolate; margin-top: var(--space-4); }
.field--calc { inset: -2.5rem -2rem -2rem -3rem; width: min(30rem, 100%); --f1-pos: 22% 40%; --f1-size: 60% 80%; --f2-pos: 70% 55%; --f2-size: 55% 70%; filter: blur(24px); }
.calc-send-note { margin-top: var(--space-2); color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 46ch; }
@media (min-width: 900px) { .calc-result { padding: var(--space-5); } }

.calc-sum-title { margin-top: var(--space-5); font-size: var(--fs-h3); }
.calc-summary { margin-top: var(--space-2); }
.calc-summary li { display: grid; gap: 0.25rem; padding-block: var(--space-2); border-top: 1px solid var(--line); }
.calc-summary li:last-child { border-bottom: 1px solid var(--line); }
.calc-summary-name { font-weight: 500; }
.calc-summary-lines { display: grid; gap: 0.125rem; color: var(--muted); }
@media (min-width: 900px) { .calc-summary li { grid-template-columns: 4fr 8fr; gap: var(--space-5); } }

/* Контакты: пометка, что расчёт подставлен в форму */
.calc-filled { margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--input-border); border-radius: 16px; max-width: 36ch; }
@media (max-width: 599px) {
  .calc-bar { padding-block: 0.625rem; }
  .calc-bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .calc-bar-sum { font-size: 1.0625rem; }
  .calc-result { padding-inline: 1.25rem; }
  .calc-result .btn { padding-inline: 1.25rem; }
}

/* Телефон: панель суммы поднята на 80 px от нижнего края, чтобы плашка Netlify её не закрывала */
@media (max-width: 899px) {
  .calc-bar { bottom: 80px; margin-bottom: 80px; border-radius: 16px; margin-inline: 0; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
}

/* Стоимость: «Услуги», главная, подсказка в калькуляторе */
.svc-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); max-width: 56ch; }
.cta-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cta-link:hover { text-decoration-thickness: 2px; }
.calc-send-link { display: inline-flex; align-items: center; min-height: 3rem; margin-top: var(--space-1); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.site-nav .menu { flex-wrap: nowrap; }

/* ---------- Услуги: подробные блоки (details) ---------- */
.svc-list { padding-block: var(--space-5); }
.svc { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
.svc:first-of-type { border-top: 0; }
.svc-summary {
  display: grid; grid-template-columns: 1fr 2.75rem; column-gap: var(--space-2); row-gap: 0.25rem; align-items: start;
  padding-block: var(--space-4); cursor: pointer; list-style: none; min-height: 3rem;
}
.svc-summary::-webkit-details-marker { display: none; }
.svc-summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.svc-title { grid-column: 1; font-size: var(--fs-h2); }
.svc-desc { grid-column: 1; max-width: 38ch; font-size: var(--fs-lead); line-height: 1.4; }
.svc-base { grid-column: 1; color: var(--muted); font-size: var(--fs-small); }
.svc-base-label { font-weight: 500; color: var(--ink); }
.svc-chevron { grid-column: 2; grid-row: 1; position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; transition: border-color var(--t-fast) var(--ease); }
.svc-chevron::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg); transition: transform var(--t-med) var(--ease);
}
.svc[open] .svc-chevron::after { transform: translate(-50%, -30%) rotate(-135deg); }
.svc-summary:hover .svc-chevron { border-color: var(--ink); }
.svc-summary:hover .svc-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.svc-body { padding-bottom: var(--space-4); }
.svc-block { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.svc-sub { font-size: var(--fs-h3); line-height: 1.2; }
.svc-block p, .svc-items, .svc-steps { max-width: 56ch; }
.svc-items { display: grid; gap: var(--space-1); }
.svc-steps { display: grid; gap: var(--space-1); counter-reset: svcstep; }
.svc-steps li { counter-increment: svcstep; display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; }
.svc-steps li::before { content: counter(svcstep); color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-block--action { padding-bottom: 0; }
.svc-calc { justify-self: start; min-height: 3rem; }
.svc-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); max-width: 56ch; }
@media (min-width: 900px) {
  .svc-list { padding-block: var(--space-6); }
  .svc-summary { grid-template-columns: 5fr 5fr 1fr; column-gap: var(--space-5); align-items: start; }
  .svc-title { grid-column: 1; grid-row: 1 / span 2; }
  .svc-desc { grid-column: 2; grid-row: 1; }
  .svc-base { grid-column: 2; grid-row: 2; }
  .svc-chevron { grid-column: 3; justify-self: end; }
  .svc-block { grid-template-columns: 5fr 6fr; column-gap: var(--space-5); padding-block: var(--space-3); }
  .svc-body { padding-left: 0; padding-bottom: var(--space-5); }
}

/* итог: строка оплаты в месяц под разовой частью */
.calc-total--month { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--on-dark-line); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.calc-total + .calc-days { margin-top: calc(var(--space-3) * -0.5); }
.calc-currency { margin-top: var(--space-2); color: var(--on-dark-soft); font-size: var(--fs-small); }

/* ---------- Переключатель языка «RU | EN» ---------- */
.lang-switch { display: flex; align-items: center; margin-top: var(--space-4); font-size: var(--fs-small); font-weight: 500; }
.lang-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.5rem;
  color: var(--muted); text-decoration: none; border-radius: 999px;
}
.lang-link + .lang-link::before { content: "|" / ""; display: inline-block; margin-right: 0.5rem; margin-left: -0.5rem; color: var(--muted); font-weight: 400; } /* inline-block: подчёркивание активного языка не заходит на разделитель */
.lang-link:hover { color: var(--ink); }
.lang-link[aria-current="true"] { color: var(--ink); }
.lang-link[aria-current="true"] > span[aria-hidden] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
@media (min-width: 900px) { .lang-switch { margin-top: 0; } }

/* Служебная страница учёта визитов */
.owner { display: grid; gap: var(--space-2); justify-items: start; }
.owner > * { max-width: 40rem; }
.owner-host { white-space: nowrap; }
.owner-status { font-weight: 600; }
.owner-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Страницы услуг: хлебные крошки, разделы, пакеты, вопросы, соседние услуги */
.crumbs { margin-bottom: var(--space-3); font-size: var(--fs-small); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.crumbs a { display: inline-block; padding-block: 0.25rem; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.crumbs a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.crumbs [aria-current] { display: inline-block; padding-block: 0.25rem; color: var(--ink); }

.sp-hero { padding-bottom: var(--space-6); }
.sp-section { padding-block: var(--space-5); }
.sp-row { display: grid; gap: var(--space-3); }
.sp-h { font-size: var(--fs-h3); line-height: 1.2; }
.sp-content { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.sp-content > p, .sp-list, .sp-steps, .sp-note { max-width: 56ch; }
.sp-list { display: grid; }
.sp-list li { padding-block: var(--space-2); border-top: 1px solid var(--line); }
.sp-list li:first-child { border-top: 0; padding-top: 0; }
.sp-note { color: var(--muted); }

.sp-pkgs { display: grid; }
.sp-pkg { display: grid; gap: 0.25rem var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.sp-pkg:first-child { border-top: 0; padding-top: 0; }
.sp-pkg-title { font-size: var(--fs-h3); line-height: 1.2; }
.sp-pkg-text { max-width: 44ch; }
.sp-pkg-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
.sp-price { font-size: var(--fs-lead); font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-term { color: var(--muted); }

.sp-sub { margin-top: var(--space-3); font-size: 1.25rem; line-height: 1.3; }
.sp-addons { display: grid; max-width: 56ch; }
.sp-addons li { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--line); }
.sp-addons li:first-child { border-top: 0; padding-top: 0; }
.sp-addon-name { font-weight: 500; }
.sp-addon-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-addon-text, .sp-addon-note { grid-column: 1; color: var(--muted); font-size: var(--fs-small); }

.sp-qa { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--line); max-width: 56ch; }
.sp-qa:first-child { border-top: 0; padding-top: 0; }
.sp-q { font-family: var(--font-serif); font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 500; line-height: 1.3; }

.sp-others { padding-block: var(--space-5); }
.sp-others-title { margin-bottom: var(--space-2); font-size: var(--fs-h3); line-height: 1.2; }
.sp-others-list { display: grid; gap: var(--space-2) var(--space-5); }
.sp-dir { display: block; color: var(--muted); font-size: var(--fs-small); }
.sp-others-list a, .svc-more { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; border-bottom: 0; padding-bottom: 0; }
.sp-others-list a:hover, .svc-more:hover { text-decoration-thickness: 2px; border-bottom: 0; }
.sp-actions { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }

.svc-block--action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }

@media (min-width: 900px) {
  .sp-section { padding-block: var(--space-6); }
  .sp-row { grid-template-columns: 5fr 7fr; column-gap: var(--space-5); }
  .sp-pkg { grid-template-columns: 1fr auto; align-items: baseline; }
  .sp-pkg-title, .sp-pkg-text { grid-column: 1; }
  .sp-pkg-meta { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
  .sp-others-list { grid-auto-flow: column; justify-content: start; align-items: end; }
}