/* Viking Motors - общая обвязка: сброс, переменные, шапка, меню, футер, кнопки.
   Подключается ВСЕМИ страницами. Правила одинаковы во всех 7 файлах.
   @keyframes shimmer унифицирован по варианту renkaanvaihto (-50%%->150%%). */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --black: #111111;
    --blue: #22b8f0;
    --blue-dark: #1a9fd4;
    --white: #ffffff;
    --gray-light: #f5f5f5;
    --gray: #888888;
}
body { font-family: 'Montserrat', sans-serif; color: var(--black); background: var(--white); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
.top-header { background: #000000; padding: 15px 0; }
.logo img { height: 120px; width: auto; }
.header-contacts { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: flex-end; }
.header-contact-item { display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 14px; }
.header-contact-item i { color: var(--blue); font-size: 18px; width: 20px; text-align: center; }
.header-contact-item a { color: var(--white); transition: color 0.3s; }
.header-contact-item a:hover { color: var(--blue); }
.header-socials { display: flex; gap: 12px; margin-left: 10px; }
.header-socials a { color: var(--white); font-size: 20px; transition: color 0.3s; }
.header-socials a:hover { color: var(--blue); }
.main-nav { background: var(--white); border-bottom: 3px solid var(--blue); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.main-nav .container { display: flex; align-items: center; justify-content: center; max-width: 1280px; margin: 0 auto; padding: 0 20px; position: relative; }
.nav-links { display: flex; list-style: none; align-items: center; gap: 0; }
.nav-links li a:hover, .nav-links li a.active { color: var(--blue); }
.nav-links li a:hover::after, .nav-links li a.active::after { width: 100%; }
.nav-cta { margin-left: 15px; }
.nav-cta a::after { display: none !important; }
.nav-cta a:hover { background: var(--blue-dark); color: var(--white) !important; transform: scale(1.07); }
/* DROPDOWN SUBMENU */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: none !important; }
.nav-dropdown .dropdown-arrow { font-size: 10px; margin-left: 4px; }
.nav-dropdown .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 6px; padding: 0; z-index: 100; list-style: none; overflow: hidden; }
@media (min-width: 901px) { .nav-dropdown:hover .dropdown-menu { display: block; } }
.dropdown-menu li a { display: block; padding: 10px 20px !important; font-size: 13px !important; color: #333 !important; white-space: nowrap; transition: background 0.2s; }
.dropdown-menu li a:hover { background: #f0f0f0; }
.dropdown-menu li a::after { display: none !important; }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; color: var(--black); cursor: pointer; padding: 15px; }
.nav-mini-logo { display: none; align-items: center; padding: 6px 0; }
.nav-mini-logo img { height: 36px; width: auto; display: block; }
.section-heading { background: var(--blue); color: var(--white); text-align: center; padding: 18px 20px; }
.section-heading h2 { font-size: 22px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.footer { background: var(--black); color: #aaa; text-align: center; padding: 30px 20px; font-size: 13px; }
.footer a { color: var(--blue); }
/* Запас снизу под плавающие кнопки: обе 60x60 и стоят bottom:24px
   (.callback-float-btn слева — floating-buttons.blade.php и своя копия в
   home.blade.php; кнопка WhatsApp справа — инлайн-стили там же). Кнопки
   position:fixed с z-index 9999, то есть висят поверх футера и накрывали
   последнюю строку «Tietosuojaseloste | Evästekäytäntö».
   ≤900px: 24 + 60 = 84px занимает кнопка, берём 104px — запас 20px.
   Текст футера центрирован, и на узких ширинах строка идёт во всю ширину,
   упираясь в обе кнопки; на десктопе она до углов не достаёт, поэтому там
   хватает меньшего. Кнопки не трогаем: правится только отступ футера. */
.footer { padding-bottom: 56px; }
@media (max-width: 900px) {
  .footer { padding-bottom: 104px; }
}
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 4px;
    font-family: inherit; font-size: 14px; transition: border-color 0.3s; background: var(--white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); }
.form-group textarea { resize: vertical; min-height: 100px; }
@keyframes nav-pulse { 0% { box-shadow: 0 0 0 0 rgba(41,182,246,0.7); } 70% { box-shadow: 0 0 0 10px rgba(41,182,246,0); } 100% { box-shadow: 0 0 0 0 rgba(41,182,246,0); } }
@keyframes shimmer { 0% { left: -50%; } 100% { left: 150%; } }

/* Раскладка кнопки «Soita meille ma-pe 8-17» на /ajanvaraus: блок фиксированной
   ширины по центру, на узком экране во всю ширину. Только геометрия строки —
   вид кнопки даёт .btn-cta .btn-cta--call (блок Buttons ниже).
   Сам класс .btn-call удалён в CSS-3, остался только этот модификатор. */
.btn-call--block{display:block;width:320px;margin:0 auto}
@media (max-width:600px){
  .btn-call--block{width:100%}
}

/* Стрелочная ссылка. В site.css, а не в content.css: нужна и на главной,
   которая content.css не подключает (секция «Tietoa meistä»). */
.link-arrow{font-weight:700;color:#22B8F0;text-decoration:none}


/* Каскадная надпись Sijaisauto: баннер главной (#sijaisauto) и баннер
   страницы услуги (.page-banner, services.hero_text в несколько строк).
   Перенесено из инлайна home.blade.php (Задача T2, 31.08.2026) — значения
   не менялись, иначе главная поехала бы. В site.css, а не в content.css:
   главная content.css не подключает. */
.sa-text{position:absolute;top:50%;left:65%;transform:translate(-50%,-50%);text-shadow:2px 2px 6px rgba(255,255,255,0.8);z-index:2;pointer-events:none}
.sa-lines{font-size:clamp(18px,3.5vw,42px);font-weight:bold;line-height:1.1}
.sa-l2{margin-left:3ch;color:#22B8F0}
.sa-l3{margin-left:11ch;color:#22B8F0}
.sa-spacer{height:1.5em}
/* Страница услуги: каскад уводим в левую часть полосы, на пустую стену:
   базовый left:65% клал его на самокат, велосипед и белую машину (02.09.2026).
   Только `.page-banner`: базовое правило общее с баннером главной (#sijaisauto),
   трогать его нельзя. На ≤600px работает белая плашка ниже — туда не лезем.
   left — левый край блока (transform только по Y), каскад растёт вправо от него.
   Отступы урезаны (было 3ch/11ch): с исходными третья строка «polkupyörä»
   доставала до 44 % кадра, где начинается самокат (замер по файлу:
   чистая стена до ~34 %, шов 34-43 %, самокат с 44 %). */
@media (min-width:601px){
  .page-banner .sa-text{left:5%;transform:translateY(-50%)}
  .page-banner .sa-l2{margin-left:1.5ch}
  .page-banner .sa-l3{margin-left:4ch}
}
/* 601-900px: картинка ещё десктопная, но полоса фиксированной высоты 260px
   (content.css), поэтому cover режет её по бокам и кадр виден увеличенным:
   доля стены в видимой части меньше. Шрифт каскада здесь мельче. */
@media (min-width:601px) and (max-width:900px){
  .page-banner .sa-lines{font-size:clamp(17px,2.9vw,28px)}
}
/* Картинка баннера главной: на странице услуги её рисует .page-banner .rv-img.
   Кнопка «LUE LISÄÄ» переехала на общий .btn-lue — блок Buttons в конце файла. */
#sijaisauto .sa-img{width:100%;display:block;object-fit:cover;aspect-ratio:1715/450}
/* lueSpin нужен и баннеру #renkaanvaihto-banner на главной — держать глобально. */
@keyframes lueSpin{to{transform:rotate(1turn)}}
/* Плашка под текст, когда картинка переключается на квадрат.
   Брейкпоинты РАЗНЫЕ намеренно: на главной <source media> стоит на 900px,
   у .page-banner — на 600px (palvelu.blade.php). Значения плашки общие. */
@media (max-width:900px){
  #sijaisauto .sa-img{aspect-ratio:auto}
  #sijaisauto .sa-text{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;text-shadow:none;background:rgba(255,255,255,0.9);padding:24px 22px;border-radius:12px;width:auto}
  #sijaisauto .sa-l2,#sijaisauto .sa-l3{margin-left:0}
  #sijaisauto .sa-lines{font-size:clamp(26px,7vw,40px)}
  #sijaisauto .sa-lines span[style*="black"]{color:#111 !important}
  #sijaisauto .sa-spacer{height:1em}
}
@media (max-width:600px){
  .page-banner .sa-text{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;text-shadow:none;background:rgba(255,255,255,0.9);padding:24px 22px;border-radius:12px;width:auto}
  .page-banner .sa-l2,.page-banner .sa-l3{margin-left:0}
  .page-banner .sa-lines{font-size:clamp(26px,7vw,40px)}
  .page-banner .sa-lines span[style*="black"]{color:#111 !important}
}

/* ---- Buttons (consolidated CSS-2) ---- */
/* На сайте два стиля кнопок, и объявлены они ТОЛЬКО здесь:
   .btn-cta — любое действие (Varaa aika, Pyydä maksuton kustannusarvio/tarjous,
   Kaikki palvelut), .btn-lue — «Lue lisää» с бегущей рамкой.
   В инлайновых <style> шаблонов и в content.css их больше нет — не заводить заново.
   Отдельные кнопки, которые сюда НЕ относятся: .nav-cta (VARAA AIKA в шапке),
   .callback-float-btn (плавающая), .btn-submit (формы). Телефонная кнопка —
   не отдельный класс, а .btn-cta + модификатор .btn-cta--call (см. ниже). */
.btn-cta{display:inline-block;background:var(--blue);color:#fff !important;padding:14px 30px;border-radius:4px;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;text-align:center;border:none;cursor:pointer;font-family:inherit;transition:background .3s,transform .3s}
.btn-cta:hover{background:var(--blue-dark);transform:translateY(-2px)}
/* На узком экране длинный текст должен переноситься и центрироваться,
   а не вылезать за край. Крупные кнопки (--lg) не ужимаются: до CSS-2 они
   были 16px/40px на любой ширине, правило ниже это поведение возвращает. */
@media (max-width:600px){
  .btn-cta{padding:14px 22px;font-size:14px;letter-spacing:.5px;max-width:100%}
}
/* Крупный вариант — кнопки главной, которые до CSS-2 брали .btn-primary из
   инлайнового <style> home.blade.php: hero «VARAA AIKA NYT», второй блок
   «VARAA AIKA NYT» и две «Kaikki palvelut →». Объявлен после медиазапроса
   намеренно — иначе на ≤600px база ужала бы их до 14px/22px. */
.btn-cta--lg{font-size:16px;padding:16px 40px}
/* Узкий вариант: только боковой padding, вертикальный и шрифт остаются от
   .btn-cta, поэтому высота кнопки не меняется. Нужен там, где кнопка делит
   фиксированную ширину с полем ввода (строка соттопююнто на /ajanvaraus):
   освободившиеся 24px уходят полю. Объявлен после медиазапроса — иначе на
   ≤600px база вернула бы боковые 22px. */
.btn-cta--compact{padding-left:18px;padding-right:18px}
/* Блик. @keyframes shimmer объявлен выше в этом же файле — не дублировать. */
.shimmer-btn{position:relative;overflow:hidden}
.shimmer-btn::after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2.5s infinite}
/* «Lue lisää» с бегущей рамкой — без привязки к родителю, работает на любой
   странице. pointer-events:auto обязателен на баннерах главной: .rv-text и
   .sa-text гасят клики через pointer-events:none.
   @keyframes lueSpin объявлен выше — не дублировать. */
.btn-lue{position:relative;display:inline-block;border-radius:10px;padding:3px;overflow:hidden;background:#22B8F0;pointer-events:auto}
.btn-lue::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0deg,transparent 210deg,rgba(255,255,255,0.95) 285deg,#cdf1ff 320deg,transparent 360deg);animation:lueSpin 3s linear infinite}
.btn-lue__inner{position:relative;z-index:1;display:block;background:#22B8F0;color:#fff;border-radius:7px;padding:14px 30px;font-weight:700;font-size:14px;text-decoration:none}
/* Телефонная кнопка «Soita meille ma-pe 8-17»: та же геометрия и типографика,
   что у .btn-cta (класс ставится вместе с ним), отличается только hover —
   зелёный #25d366, тот же, которым залита плавающая кнопка WhatsApp
   (partials/floating-buttons.blade.php). Шиммер сюда не вешать.
   Базовых отличий нет, поэтому объявлен только :hover. */
.btn-cta--call:hover{background:#25d366}
/* WhatsApp-кнопка блока контактов на /ajanvaraus: геометрия, высота и шрифт —
   общие из .btn-cta, отличается только фирменным зелёным #25D366. Это тот же
   цвет, что стоял у неё в инлайновом стиле; на hover он сохраняется —
   синий --blue-dark из .btn-cta:hover для неё не подходит. */
.btn-cta--wa{background:#25D366}
.btn-cta--wa:hover{background:#25D366}
/* Кнопка отправки формы. Эталон — «LÄHETÄ» формы бронирования на /ajanvaraus,
   оттуда правило и переехало сюда: тем же классом набраны обе кнопки блока
   YHTEYSTIEDOT («JÄTÄ SOITTOPYYNTÖ» и «LÄHETÄ»), а блок продублирован в семи
   шаблонах. В инлайновых <style> её больше не объявлять. */
.btn-submit{background:var(--blue);color:var(--white);border:none;padding:14px 40px;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:4px;cursor:pointer;transition:background .3s}
.btn-submit:hover{background:var(--blue-dark)}
/* Узкий вариант кнопки отправки: она стоит в одной строке с полем телефона
   в блоке YHTEYSTIEDOT, поэтому геометрия у неё своя — та же, что была до
   перевода на общий класс (padding 10px 20px, 14px, letter-spacing .5px,
   nowrap). Цвет, шрифт, скругление и hover приходят из .btn-submit, то есть
   совпадают с кнопкой «LÄHETÄ». Базовый .btn-submit не трогать. */
.btn-submit--inline{padding:10px 20px;font-size:14px;letter-spacing:.5px;white-space:nowrap}

/* F2, 02.09.2026: полоска «PYYDÄ SOITTOA» в блоке YHTEYSTIEDOT.
   Раньше эти же значения стояли инлайном в 7 копиях блока (home, hinnasto,
   palvelut, eramaksu, meista, ukk, palvelu) — теперь один partial
   partials/form-callback-inline.blade.php с классом .callback-strip.
   Значения перенесены один в один, вид на экране прежний. Вариант этой же
   полоски на /ajanvaraus — .callback-inline, её стили ниже в этом же файле (C1). */
.callback-strip{display:flex;align-items:center;gap:10px}
.callback-strip input[type="tel"]{width:150px;padding:10px 14px;border:1px solid #ddd;border-radius:4px;font-family:inherit;font-size:14px}

/* Сообщение об ошибке валидации под полем. До F2 ошибки не выводились нигде. */
.form-error{display:block;margin-top:4px;font-size:13px;color:#c62828}

/* F3, 02.09.2026: GDPR-чекбокс, honeypot и подсказки под полями.
   F4, 02.09.2026: чекбокс убран из обеих форм обратного звонка — просьба
   перезвонить это запрос самого субъекта данных, отдельное согласие не нужно,
   хватает информирования (.form-consent-note). Вместе с ним откачены
   .callback-strip{flex-wrap:wrap} и .callback-strip .form-consent{flex-basis:100%}:
   из-за них ряд «поле + кнопка» ломался на две строки. Общее правило
   .form-consent ОСТАВЛЕНО — им пользуются формы бронирования и контактная.

   .hp-field — ловушка для ботов: поле уводится за левый край экрана, а НЕ
   display:none — часть ботов такие поля пропускает, а нам нужно, чтобы бот
   его заполнил. Человек его не видит и табом в него не попадёт (tabindex="-1").

   .form-consent-note — строка-информирование. У полосок стоит ПОСЛЕ </form>
   (внутри стала бы лишним flex-элементом), в модалке — внутри формы,
   между телефоном и кнопкой: модалка не flex-строка. */
.form-hint{display:block;margin-top:4px;font-size:13px;color:#666}
.form-consent{display:flex;align-items:flex-start;gap:8px;margin:12px 0;font-size:13px;line-height:1.4}
.form-consent input{margin-top:2px;flex-shrink:0}
.form-consent-note{margin:8px 0 0;font-size:12px;line-height:1.4;color:#666}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Модалка обратного звонка (C1, 02.09.2026) ----
   Переехало из <style> home.blade.php (228-263) и partials/floating-buttons.blade.php
   (38-73): 36 строк лежали в двух побайтово одинаковых копиях. Разметка модалки
   с F2 живёт в одном partials/form-callback-modal.blade.php, скрипт там же —
   его НЕ трогаем, здесь только CSS. Значения перенесены дословно. */
.callback-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center;
}
.callback-modal-overlay.active { display: flex; }
.callback-modal {
    background: #fff; border-radius: 12px; padding: 32px; max-width: 420px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative;
    animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.callback-modal-close {
    position: absolute; top: 12px; right: 16px; background: none; border: none;
    font-size: 24px; color: #999; cursor: pointer; transition: color 0.3s;
}
.callback-modal-close:hover { color: #333; }
.callback-modal h3 { font-size: 20px; font-weight: 800; color: var(--blue); margin-bottom: 6px; text-transform: uppercase; }
.callback-modal p { font-size: 14px; color: var(--gray); margin-bottom: 18px; }
.callback-modal .cb-field { margin-bottom: 14px; }
.callback-modal .cb-field input {
    width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 6px;
    font-family: inherit; font-size: 14px; transition: border-color 0.3s;
}
.callback-modal .cb-field input:focus { outline: none; border-color: var(--blue); }
.callback-modal .cb-submit {
    width: 100%; background: var(--blue); color: #fff; border: none; padding: 14px;
    font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: background 0.3s;
}
.callback-modal .cb-submit:hover { background: var(--blue-dark); }
.callback-modal .cb-success {
    text-align: center; padding: 20px 0;
}
.callback-modal .cb-success i { font-size: 48px; color: #28a745; margin-bottom: 12px; }
.callback-modal .cb-success h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.callback-modal .cb-success p { color: #555; }

/* ---- Плавающая кнопка-трубка (C1, 02.09.2026) ----
   Переехало из <style> partials/floating-buttons.blade.php (2-37) и его копии
   в home.blade.php (192-227): у главной своя разметка кнопки и партиал она не
   подключает (floating => false), но CSS был один и тот же. Блок целиком:
   кнопка, hover, иконка, тултип с ::after, переключение подписи на 900px,
   пульсирующее кольцо и @keyframes pulse-ring. Значения перенесены дословно.
   На /ajanvaraus кнопки нет вовсе — там floating => false и своей копии нет. */
.callback-float-btn {
    position: fixed; bottom: 24px; left: 24px; z-index: 9999;
    width: 60px; height: 60px; background: var(--blue); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s; border: none;
}
.callback-float-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.callback-float-btn i { color: #fff; font-size: 26px; }
.callback-float-btn i { transform: scaleX(-1); }
.callback-float-btn .tooltip-text {
    visibility: hidden; opacity: 0;
    position: absolute; left: 72px; top: 50%; transform: translateY(-50%);
    background: #333; color: #fff; padding: 6px 14px; border-radius: 6px;
    font-size: 13px; white-space: nowrap; font-weight: 600;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}
.callback-float-btn .tooltip-text::after {
    content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: #333;
}
.callback-float-btn:hover .tooltip-text { visibility: visible; opacity: 1; }
.callback-float-btn .tip-mobile { display: none; }
@media (max-width: 900px) {
    .callback-float-btn .tip-desktop { display: none; }
    .callback-float-btn .tip-mobile { display: inline; }
}
.callback-float-btn .pulse-ring {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    border: 3px solid var(--blue); animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ---- Плавающая кнопка WhatsApp (C1, 02.09.2026) ----
   Переехало из инлайн-стилей <a> в home.blade.php (709) и
   partials/floating-buttons.blade.php (95) — теги были побайтово одинаковы.
   Значения перенесены один в один. Ховер раньше делали обработчики
   onmouseover/onmouseout, которые писали transform и boxShadow прямо в
   элемент; они убраны, вместо них :hover теми же значениями — по образцу
   .callback-float-btn:hover выше. Геометрия парная кнопке-трубке:
   те же 60x60 и bottom:24px, только справа. Меняя их, пересчитать
   .footer{padding-bottom} — он рассчитан от 24+60. */
.whatsapp-float-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    width: 60px; height: 60px; background: #25d366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.3s, box-shadow 0.3s; text-decoration: none;
}
.whatsapp-float-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

/* ---- Полоска callback и сноска на /ajanvaraus (C1, 02.09.2026) ----
   Переехало из <style> ajanvaraus.blade.php (62-72, 73-84, 90-92). Правила
   страничные, но конкурентов у них нет ни здесь, ни в content.css, а
   .page-intro .form-consent-note (0,2,0) сильнее .page-intro p (0,1,1),
   которое осталось в <style> страницы — специфичность решается раньше
   порядка файлов, поэтому переезд безопасен. Медиа-блок на 600px переехал
   вместе с базовым правилом: без него полоска теряет полную ширину. */
/* Строка «телефон + SOITTOPYYNTÖ» в блоке контактов.
   Ширина строки повторяет .btn-call--block соседних кнопок (320px, на
   ≤600px во всю ширину) — иначе четыре элемента блока стоят разной ширины.
   Одна строка на любой ширине: flex-wrap:nowrap, кнопка не сжимается
   (flex:0 0 auto), сжимается поле (flex:1 1 auto + min-width:0 — без
   min-width поле не ужалось бы меньше своего контента и вытолкнуло кнопку).
   align-items:stretch тянет поле по высоте кнопки — высоту и шрифт кнопки
   не переопределяем, они приходят из базового .btn-cta. */
.callback-inline { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 320px; max-width: 100%; margin: 0 auto; }
.callback-inline input[type="tel"] { flex: 1 1 auto; min-width: 0; padding: 0 14px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px; }
.callback-inline .btn-cta { flex: 0 0 auto; }
@media (max-width: 600px) {
    .callback-inline { width: 100%; }
}
/* F5, 02.09.2026: строка информирования под полоской «SOITTOPYYNTÖ».
   Типографику здесь НЕ переопределяем: `.page-intro p` (0,1,1)
   специфичнее `.form-consent-note` (0,1,0) из site.css, и на этой
   странице сноска намеренно наследует от соседних абзацев 16px/1.8/#555.
   font-size/line-height/color в правило ниже не дописывать.
   Ширина ограничена 42ch и колонка центрирована margin:auto — во всю
   ширину .page-intro (800px) сноска вытягивалась в одну длинную строку
   и выбивалась из ритма соседних абзацев. text-wrap:balance разбивает
   её на ровные по длине строки; старые браузеры свойство игнорируют,
   тогда переносы обычные. На /ukk и остальных страницах .page-intro
   нет — там сноска остаётся мелкой, 12px/#666 из site.css. */
.page-intro .form-consent-note { max-width: 42ch; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; }

/* ---- Страницы ошибок (M1, 02.09.2026) ----
   Каркас в resources/views/errors/_page.blade.php: шапка, полоса заголовка,
   этот блок, футер. Ширина колонки и центрирование повторяют .page-intro
   с /ajanvaraus, чтобы страницы ошибок не выбивались из ритма сайта.
   Кнопки свои не заводим — .btn-cta и .btn-cta--call объявлены выше. */
.error-page { max-width: 800px; margin: 0 auto; padding: 40px 20px 60px; text-align: center; }
.error-page p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 24px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* A3, 03.09.2026: H1 на /hinnasto и /ajanvaraus. Свойства скопированы
   у .section-heading h2 (строка 47) + margin:0 — без него h1 берёт
   браузерный дефолт (2em и вертикальные отступы) и шапка разъезжается. */
.section-heading h1 { font-size: 22px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
/* A4, 03.09.2026: ряд из двух CTA в hero главной (VARAA AIKA NYT +
   SOITA 0400 377 517). Свойства — копия .palvelu-actions из content.css
   (строка 165 и медиаблок 180-181); объявлено здесь, потому что главная
   грузит только site.css и content.css ей недоступен. Кнопки свои не
   заводим: вид даёт .btn-cta .btn-cta--lg (+ .btn-cta--call у телефонной). */
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin:24px 0 8px}
@media (max-width:600px){
  .hero-actions{flex-direction:column;align-items:stretch;text-align:center}
}