/* ==================================================
PROJECT: ShoreShine Detail Co. — Main Stylesheet
FILE: css/style.css

НАЗНАЧЕНИЕ ФАЙЛА:
- Все визуальные стили сайта
- Цвета, кнопки, карточки, сетки, responsive
- Стили для booking wizard

ПРАВИЛО БЕЗОПАСНОГО РЕДАКТИРОВАНИЯ:
- Сначала делай backup перед крупными изменениями
- Не переименовывай классы, которые используются в HTML и JS
- Особенно осторожно с booking wizard классами:
  .wp, .active, .sel, .pstep, .done, .pkg-card, .addon-card, .faq-item

TODO НА БУДУЩЕЕ:
- После подключения Netlify Forms добавить стили для success/error states
- Позже можно разделить CSS на modules:
  base.css, layout.css, components.css, booking.css, responsive.css
- После появления реальных фото можно добавить отдельные стили для gallery/portfolio states
================================================== */

/* ==================================================
SECTION: ROOT / BRAND VARIABLES
НАЗНАЧЕНИЕ:
- Главные цвета бренда
- Шрифты
- Радиусы
- Тени
- Базовые переменные, которые используются по всему сайту

ВАЖНО:
- Это безопасное место для изменения общей палитры сайта
- Не удалять названия переменных, если они уже используются ниже
- Менять значения можно, но сами имена вроде --royal, --navy, --bg лучше не трогать
================================================== */
:root{
  --navy:#0D1B2A; --navy-mid:#132236;
  --royal:#1A3CA8; --royal-light:#2E5EE8;
  --gold:#B8860B; --gold-light:#D4A820; --gold-bright:#EDD060;
  --ice:#5BA8D4; --success:#1E9E5E;

  /* Chrome blue — SHORE */
  --cb:linear-gradient(155deg,#8AB4F8 0%,#1A3CA8 20%,#0A1E6E 45%,#1A3CA8 68%,#8AB4F8 85%,#1A3CA8 100%);
  /* Chrome gold — SHINE */
  --cg:linear-gradient(155deg,#F5D76E 0%,#B8860B 20%,#7A5500 45%,#C49A14 68%,#F5D76E 85%,#B8860B 100%);

  --bg:#FFFFFF; --bg-s:#F5F7FB; --bg-c:#FFFFFF;
  --bdr:#E2E8F2; --bdr-m:#C8D4E8;
  --t1:#0D1B2A; --t2:#4A5568; --t3:#8A9AB2;

  --r:10px; --r-lg:18px;
  --sh:0 4px 20px rgba(13,27,42,.09);
  --sh-lg:0 8px 40px rgba(13,27,42,.13);

  --fd:'Barlow Condensed',sans-serif;
  --fb:'Barlow',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--fb);
  background:var(--bg);
  color:var(--t1);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  height:auto;
}

button,
a,
input,
textarea{
  -webkit-tap-highlight-color:transparent;
}

button{
  font-family:inherit;
}

/* Safety: prevent accidental underline on button-style links */
.btn,
.btn:hover,
.nav-logo,
.nav-logo:hover,
.nav-cta,
.nav-cta:hover,
.hero-nav-btn,
.hero-nav-btn:hover,
.g-badge,
.g-badge:hover,
.float-text,
.float-text:hover,
.soc,
.soc:hover,
.foot-soc,
.foot-soc:hover{
  text-decoration:none;
}

/* Future-ready utility classes */
.hidden{display:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* ==================================================
SECTION: BRAND TEXT HELPERS
НАЗНАЧЕНИЕ:
- Chrome/gradient эффект для ShoreShine логотипа
- Общие стили для частей логотипа: Shore / Shine / Detail Co.

ВАЖНО:
- Эти классы используются в nav, hero, footer и booking summary
- Не переименовывать .shore, .shine, .co без обновления HTML
================================================== */
.shore{background:var(--cb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.shine{background:var(--cg);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.co{font-weight:400;font-size:.52em;letter-spacing:.14em;color:var(--t3);-webkit-text-fill-color:var(--t3);margin-left:5px;vertical-align:middle;}

/* ==================================================
SECTION: ANNOUNCEMENT BAR
НАЗНАЧЕНИЕ:
- Верхняя строка с короткими trust/sales сообщениями
- Сообщения меняются через JS rotator

ВАЖНО:
- Высота блока задана фиксировано через height:30px
- .ann-item.visible управляется JavaScript
- Не менять class names без обновления JS
================================================== */
#ann-bar{
  background:var(--navy);padding:7px 16px;text-align:center;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.8);
  letter-spacing:.04em;overflow:hidden;position:relative;height:30px;
}
.ann-item{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .5s;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
}
.ann-item.visible{opacity:1;}
.ann-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;}

/* ==================================================
SECTION: NAVIGATION
НАЗНАЧЕНИЕ:
- Sticky меню сайта
- Логотип
- Основные ссылки
- Соцсети
- CTA Book Now

ВАЖНО:
- nav закреплен сверху через position:sticky
- .nav-links скрываются на mobile через responsive section
- Не переименовывать nav-related классы без проверки HTML
================================================== */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bdr);height:60px;
  display:flex;align-items:center;padding:0 20px;
  box-shadow:0 1px 4px rgba(13,27,42,.06);
}
.nav-in{max-width:1060px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-logo{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:.01em;white-space:nowrap;flex-shrink:0;}
.nav-links{display:flex;gap:22px;align-items:center;flex-wrap:nowrap;}
.nav-links a{font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;transition:color .2s;}
.nav-links a:hover{color:var(--royal);}
.nav-socials{display:flex;gap:10px;align-items:center;}
.nav-soc{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .18s;color:var(--t3);}
.nav-soc:hover{background:var(--bg-s);color:var(--t1);}
.nav-soc svg{width:16px;height:16px;fill:currentColor;}
.nav-cta{background:var(--royal)!important;color:#fff!important;padding:8px 16px;border-radius:7px;font-weight:700!important;font-size:12px!important;letter-spacing:.06em!important;text-transform:uppercase;white-space:nowrap;transition:background .2s;}
.nav-cta:hover{background:var(--royal-light)!important;}

/* ==================================================
SECTION: REUSABLE BUTTONS
НАЗНАЧЕНИЕ:
- Общая кнопочная система сайта
- Primary / outline / gold / navigation / back / confirm / print

ВАЖНО:
- .btn базовый класс, остальные классы расширяют его
- Для новой кнопки сначала используй .btn + один из вариантов
- Не удалять :disabled, он нужен booking wizard
================================================== */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;font-family:var(--fd);font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r);transition:all .2s;}
.btn-p{background:var(--royal);color:#fff;font-size:17px;padding:14px 28px;box-shadow:0 4px 16px rgba(26,60,168,.28);}
.btn-p:hover{background:var(--royal-light);transform:translateY(-2px);box-shadow:0 6px 22px rgba(26,60,168,.36);}
.btn-o{background:transparent;color:var(--royal);font-size:17px;padding:13px 24px;border:2px solid var(--royal);}
.btn-o:hover{background:rgba(26,60,168,.06);}
.btn-g{background:var(--gold);color:#fff;font-size:15px;padding:12px 22px;box-shadow:0 4px 14px rgba(184,134,11,.25);}
.btn-g:hover{background:var(--gold-light);transform:translateY(-1px);}
.btn-n{background:var(--royal);color:#fff;font-size:15px;padding:11px 24px;}
.btn-n:hover{background:var(--royal-light);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,60,168,.28);}
.btn-n:disabled{background:var(--bdr);color:var(--t3);cursor:not-allowed;transform:none;box-shadow:none;}
.btn-back{background:none;border:1px solid var(--bdr);color:var(--t2);padding:10px 18px;border-radius:var(--r);font-family:var(--fb);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-back:hover{border-color:var(--t2);color:var(--t1);}
.btn-confirm{background:var(--success)!important;}
.btn-confirm:hover{background:#178a52!important;}
.btn-print{background:var(--navy)!important;}

/* Accessibility: visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(46,94,232,.35);
  outline-offset:3px;
}

/* ==================================================
SECTION: HERO
НАЗНАЧЕНИЕ:
- Первый экран сайта
- Главный оффер
- CTA кнопки
- Trust badges
- Hero image

ВАЖНО:
- Это самый важный продающий блок
- Не перегружать визуально
- .hero-img-w скрывается на mobile в responsive section
================================================== */
#hero{
  padding:80px 20px 64px;
  background:linear-gradient(165deg,#EEF2FF 0%,#FFFFFF 50%,#FBF8F0 100%);
  position:relative;overflow:hidden;
}
#hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 72% 40%,rgba(26,60,168,.05) 0%,transparent 70%),
  radial-gradient(ellipse 38% 40% at 18% 65%,rgba(184,134,11,.04) 0%,transparent 70%);}
.hero-in{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;}

.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(26,60,168,.08);border:1px solid rgba(26,60,168,.15);border-radius:100px;padding:5px 12px;margin-bottom:14px;font-size:11px;font-weight:700;color:var(--royal);letter-spacing:.08em;text-transform:uppercase;}
.hero-tag::before{content:'●';font-size:7px;color:var(--success);}

.hero-h1{font-family:var(--fd);font-size:clamp(38px,5vw,64px);font-weight:800;line-height:1.04;letter-spacing:.01em;margin-bottom:10px;}
.hero-wm{font-family:var(--fd);font-weight:800;font-size:inherit;letter-spacing:.01em;}

.hero-slogan{font-family:var(--fd);font-size:clamp(20px,2.5vw,26px);font-weight:700;color:var(--t2);letter-spacing:.04em;margin-bottom:16px;}

.hero-desc{font-size:clamp(14px,1.6vw,17px);font-weight:400;color:var(--t2);line-height:1.65;margin-bottom:24px;max-width:440px;}
.hero-desc strong{color:var(--t1);font-weight:600;}

.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}

.hero-trust{display:flex;flex-wrap:wrap;gap:7px;}
.htpill{display:inline-flex;align-items:center;gap:5px;background:var(--bg-s);border:1px solid var(--bdr);border-radius:100px;padding:5px 11px;font-size:11px;font-weight:600;color:var(--t2);}

/* SUBSECTION: HERO QUICK NAV BUTTONS
НАЗНАЧЕНИЕ:
- Быстрые кнопки перехода к ключевым секциям
- Работают через inline onclick в HTML
*/
.hero-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.hero-nav-btn{padding:9px 16px;border-radius:8px;border:1px solid var(--bdr);background:var(--bg-c);font-family:var(--fb);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:6px;}
.hero-nav-btn:hover{border-color:var(--royal);color:var(--royal);background:rgba(26,60,168,.04);}

/* SUBSECTION: HERO IMAGE SIDE
НАЗНАЧЕНИЕ:
- Большая картинка справа на desktop
- Статистика поверх изображения
*/
.hero-img-w{position:relative;}
.hero-img{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:4/3;box-shadow:var(--sh-lg);}
.hero-stat-card{position:absolute;bottom:-14px;left:-14px;background:var(--bg-c);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh);display:flex;gap:16px;border:1px solid var(--bdr);}
.stat-num{font-family:var(--fd);font-size:21px;font-weight:800;color:var(--royal);line-height:1;}
.stat-label{font-size:10px;color:var(--t3);letter-spacing:.05em;text-transform:uppercase;margin-top:2px;}

/* ==================================================
SECTION: SHARED SECTION STYLES
НАЗНАЧЕНИЕ:
- Общие стили для всех секций
- Контейнер .sec
- Заголовки .sec-label / .sec-title / .sec-sub

ВАЖНО:
- Эти классы используются почти во всех HTML-секциях
- Изменения здесь повлияют на весь сайт
================================================== */
section{padding:72px 20px;}
.sec{max-width:1060px;margin:0 auto;}
.sec-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--royal);margin-bottom:7px;}
.sec-title{font-family:var(--fd);font-size:clamp(26px,3.5vw,40px);font-weight:800;line-height:1.1;margin-bottom:10px;}
.sec-sub{font-size:15px;color:var(--t2);max-width:520px;line-height:1.65;}

/* ==================================================
SECTION: HOW IT WORKS
НАЗНАЧЕНИЕ:
- Блок с 4 шагами процесса
- Объясняет клиенту как работает заказ

ВАЖНО:
- .steps меняет количество колонок на mobile в responsive section
================================================== */
#how{background:var(--bg);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px;}
.step-c{text-align:center;padding:0 4px;}
.step-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--royal),var(--royal-light));color:#fff;font-family:var(--fd);font-size:21px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 13px rgba(26,60,168,.22);}
.step-title{font-family:var(--fd);font-size:17px;font-weight:700;margin-bottom:6px;}
.step-desc{font-size:14px;color:var(--t2);line-height:1.6;}

/* ==================================================
SECTION: WHY SHORESHINE / DIFFERENCE CARDS
НАЗНАЧЕНИЕ:
- Карточки преимуществ
- Отстройка от конкурентов
- Trust-building section

ВАЖНО:
- .why-card можно переиспользовать как reusable card template
- .why-grid адаптируется в responsive section
================================================== */
#why{background:var(--bg-s);}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
.why-card{background:var(--bg-c);border-radius:var(--r-lg);padding:22px;border:1px solid var(--bdr);transition:all .2s;}
.why-card:hover{box-shadow:var(--sh);border-color:rgba(26,60,168,.2);transform:translateY(-2px);}
.why-icon{font-size:28px;margin-bottom:10px;}
.why-title{font-family:var(--fd);font-size:17px;font-weight:700;margin-bottom:6px;}
.why-desc{font-size:14px;color:var(--t2);line-height:1.6;}
.why-highlight{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--royal);letter-spacing:.04em;text-transform:uppercase;}

/* ==================================================
SECTION: ABOUT
НАЗНАЧЕНИЕ:
- Личная история
- Фото владельца
- Trust / local business feeling

ВАЖНО:
- Фото скрывается на mobile сейчас через .about-img-w{display:none}
- Если захочешь показывать фото на mobile, менять нужно responsive section
================================================== */
#about{background:var(--bg);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:36px;}
.about-img-w{position:relative;}
.about-img{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:3/4;box-shadow:var(--sh-lg);}
.about-mobile-inline{display:none;}

.about-badge{position:absolute;bottom:-14px;right:-14px;background:var(--navy);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh);}
.about-badge-text{font-family:var(--fd);font-size:14px;font-weight:700;color:#fff;line-height:1.3;}
.about-badge-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.about-text h3{font-family:var(--fd);font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.15;margin-bottom:16px;}
.about-text p{font-size:15px;color:var(--t2);line-height:1.75;margin-bottom:14px;}
.about-text p strong{color:var(--t1);font-weight:600;}
.about-text p:last-of-type{margin-bottom:22px;}
.about-sig{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--royal);display:flex;align-items:center;gap:8px;}

/* ==================================================
SECTION: PORTFOLIO / BEFORE & AFTER
НАЗНАЧЕНИЕ:
- Галерея работ
- Before/after карточки
- Визуальное доказательство качества

ВАЖНО:
- Заменять картинки лучше через images/portfolio или images/gallery
- .port-card можно использовать как reusable image card
================================================== */
#portfolio{background:var(--bg-s);}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;}
.port-card{border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--sh);cursor:pointer;}
.port-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s;}
.port-card picture{display:block;}
.port-card:hover img{transform:scale(1.04);}
.port-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(13,27,42,.85));padding:20px 14px 14px;color:#fff;font-family:var(--fd);font-size:14px;font-weight:700;letter-spacing:.03em;}
.port-tag{display:inline-block;padding:3px 8px;border-radius:4px;background:var(--royal);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.port-note{font-size:11px;color:rgba(255,255,255,.65);}

/* ==================================================
SECTION: REVIEWS
НАЗНАЧЕНИЕ:
- Отзывы клиентов
- Social proof
- Google review CTA

ВАЖНО:
- .rev-card можно использовать как reusable testimonial card
- Реальные отзывы лучше заменить перед production
================================================== */
#reviews{background:var(--bg);}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;}
.rev-card{background:var(--bg-c);border-radius:var(--r-lg);padding:20px;border:1px solid var(--bdr);transition:box-shadow .2s;}
.rev-card:hover{box-shadow:var(--sh);}
.rev-stars{color:#F5A200;font-size:14px;margin-bottom:8px;letter-spacing:2px;}
.rev-text{font-size:14px;color:var(--t2);line-height:1.65;margin-bottom:12px;font-style:italic;}
.rev-author{font-size:13px;font-weight:700;}
.rev-loc{font-size:11px;color:var(--t3);}
.g-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bg-c);border:1px solid var(--bdr);border-radius:100px;padding:8px 15px;margin-top:24px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;transition:box-shadow .2s;}
.g-badge:hover{box-shadow:var(--sh);}

/* ==================================================
SECTION: FAQ
НАЗНАЧЕНИЕ:
- Accordion с частыми вопросами
- Снимает возражения
- Поддерживает SEO

ВАЖНО:
- Состояние .faq-item.open управляется JavaScript
- Не переименовывать .faq-item, .faq-arr, .faq-a без обновления JS
================================================== */
#faq{background:var(--bg-s);}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:36px;
  align-items:start;
}
.faq-item{background:var(--bg-c);border-radius:var(--r);border:1px solid var(--bdr);overflow:hidden;transition:box-shadow .2s;}
.faq-item:hover{box-shadow:var(--sh);}
.faq-q{padding:16px 18px;font-size:15px;font-weight:700;color:var(--t1);cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;user-select:none;}
.faq-q:hover{color:var(--royal);}
.faq-arr{font-size:16px;color:var(--t3);transition:transform .25s;flex-shrink:0;margin-top:1px;}
.faq-item.open .faq-arr{transform:rotate(180deg);color:var(--royal);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14px;color:var(--t2);line-height:1.65;}
.faq-a-inner{padding:0 18px 16px;}
.faq-item.open .faq-a{max-height:300px;}

/* ==================================================
SECTION: BOOKING WIZARD
НАЗНАЧЕНИЕ:
- Главная интерактивная форма бронирования
- Шаги выбора услуги, add-ons, даты, данных клиента и подтверждения
- Расчет стоимости

ВАЖНО:
- Много классов связаны с JavaScript
- Не переименовывать .wp, .active, .pstep, .done, .sel без проверки JS
- Любые изменения сначала тестировать локально
================================================== */
#book{background:var(--bg);}
.prog{display:flex;align-items:center;max-width:580px;margin:30px 0 38px;}
.pstep{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;position:relative;}
.pstep:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--bdr);z-index:0;transition:background .3s;}
.pstep.done:not(:last-child)::after{background:var(--royal);}
.pcircle{width:28px;height:28px;border-radius:50%;background:var(--bdr);border:2px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--t3);position:relative;z-index:1;transition:all .3s;}
.pstep.active .pcircle{background:var(--royal);border-color:var(--royal);color:#fff;}
.pstep.done .pcircle{background:var(--success);border-color:var(--success);color:#fff;}
.plabel{font-size:10px;font-weight:600;color:var(--t3);text-align:center;}
.pstep.active .plabel{color:var(--royal);}
.pstep.done .plabel{color:var(--success);}

.wp{display:none;animation:fu .3s ease;}
.wp.active{display:block;}
@keyframes fu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* SUBSECTION: BOOKING STEP 1 — SERVICE PACKAGES
НАЗНАЧЕНИЕ:
- Карточки выбора пакета
- Full / Interior / Exterior detail
- Раскрытие included lists
*/
.pkg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;}
.pkg-card{background:var(--bg-c);border-radius:var(--r-lg);border:2px solid var(--bdr);padding:22px 18px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.pkg-card:hover{border-color:var(--royal);transform:translateY(-2px);box-shadow:var(--sh);}
.pkg-card.sel{border-color:var(--royal);box-shadow:0 0 0 3px rgba(26,60,168,.1);}
.pkg-card.sel .pchk{opacity:1;}
.pchk{position:absolute;top:12px;right:12px;width:20px;height:20px;background:var(--royal);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;font-size:10px;color:#fff;}
.pico{font-size:24px;margin-bottom:8px;}
.pname{font-family:var(--fd);font-size:21px;font-weight:800;margin-bottom:5px;}
.pdesc{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:12px;}
.ptog{font-size:12px;font-weight:700;color:var(--royal);cursor:pointer;border:none;background:none;padding:2px 0;line-height:1.4;text-decoration:none;}
.pinc{display:none;margin-top:8px;}
.pinc.open{display:block;}
.pinc ul{
  list-style:none;
}

.pinc li{
  position:relative;
  display:block;
  font-size:15px;
  line-height:1.65;
  color:var(--t2);
  padding:4px 0 4px 18px;
  overflow-wrap:normal;
  word-break:normal;
}

.pinc li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:4px;
  color:var(--success);
  font-weight:700;
}

.pinc strong{
  font-weight:700;
  color:var(--t1);
}
.pdiv{border:none;border-top:1px solid var(--bdr);margin:12px 0;}
.pfrom{font-size:11px;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;}
.pprice{font-family:var(--fd);font-size:26px;font-weight:800;color:var(--royal);}

/* SUBSECTION: BOOKING STEP 1 — VEHICLE TYPE
НАЗНАЧЕНИЕ:
- Выбор типа автомобиля
- От этого зависит цена и время
*/
.vsel{margin-top:22px;background:var(--bg-c);border-radius:var(--r);border:1px solid var(--bdr);padding:18px;}
.vsel h3{font-family:var(--fd);font-size:17px;font-weight:700;margin-bottom:12px;}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.vbtn{padding:12px 6px;border-radius:8px;border:2px solid var(--bdr);background:var(--bg-s);cursor:pointer;transition:all .18s;text-align:center;font-size:12px;font-weight:600;color:var(--t2);}
.vbtn:hover{border-color:var(--royal);color:var(--royal);}
.vbtn.sel{border-color:var(--royal);background:rgba(26,60,168,.06);color:var(--royal);}
.vemoji{font-size:18px;display:block;margin-bottom:3px;}
.pdisp{margin-top:14px;padding:14px 17px;background:linear-gradient(135deg,var(--royal),#0D2478);border-radius:var(--r);display:flex;justify-content:space-between;align-items:center;}
.pd-label{font-size:11px;color:rgba(255,255,255,.65);}
.pd-amount{font-family:var(--fd);font-size:30px;font-weight:800;color:var(--gold-bright);}
.pd-time{font-size:10px;color:rgba(255,255,255,.45);margin-top:1px;}

/* SUBSECTION: BOOKING STEP 2 — ADD-ONS
НАЗНАЧЕНИЕ:
- Дополнительные услуги
- Карточки add-ons
- Running total
*/
.addon-sec{margin-bottom:28px;}
.addon-st{font-family:var(--fd);font-size:17px;font-weight:700;margin-bottom:12px;padding-bottom:7px;border-bottom:2px solid var(--bdr);display:flex;align-items:center;gap:6px;}
.addon-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.addon-card{background:var(--bg-c);border-radius:var(--r);border:2px solid var(--bdr);padding:12px;cursor:pointer;transition:all .18s;display:flex;gap:10px;align-items:flex-start;}
.addon-card:hover{border-color:var(--royal);}
.addon-card.sel{border-color:var(--royal);background:rgba(26,60,168,.04);}
.achk{width:18px;height:18px;border-radius:4px;flex-shrink:0;border:2px solid var(--bdr);background:var(--bg);display:flex;align-items:center;justify-content:center;transition:all .18s;font-size:10px;color:#fff;}
.addon-card.sel .achk{background:var(--royal);border-color:var(--royal);}
.ainfo{flex:1;min-width:0;}
.aname{font-size:13px;font-weight:700;margin-bottom:1px;}
.adesc{font-size:12.5px;color:var(--t2);line-height:1.45;}
.aprice{font-family:var(--fd);font-size:16px;font-weight:800;color:var(--royal);white-space:nowrap;}

.tbar{background:var(--bg-c);border:1px solid var(--bdr);border-radius:var(--r);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;}
.tbar-label{font-size:12px;color:var(--t2);}
.tbar-amt{font-family:var(--fd);font-size:21px;font-weight:800;color:var(--royal);}

/* SUBSECTION: BOOKING STEP 3 — DATE & TIME
НАЗНАЧЕНИЕ:
- Календарь
- Выбор даты
- Выбор time slot
*/
.dt-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cw h3,.tw h3{font-family:var(--fd);font-size:17px;font-weight:700;margin-bottom:12px;}
.cal{background:var(--bg-c);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;}
.cal-hdr{background:var(--navy);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;}
.cal-hdr h4{font-family:var(--fd);font-size:14px;font-weight:700;color:#fff;}
.cal-nav{background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;font-size:16px;padding:0 4px;transition:color .2s;}
.cal-nav:hover{color:#fff;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--navy-mid);padding:5px 3px;}
.cdow{text-align:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.04em;}
.cdow.av{color:var(--ice);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:5px 3px 9px;gap:2px;}
.cc{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;border-radius:6px;cursor:not-allowed;color:var(--bdr);}
.cc.av{cursor:pointer;color:var(--t1);font-weight:700;background:rgba(26,60,168,.06);transition:all .18s;}
.cc.av:hover{background:var(--royal);color:#fff;}
.cc.sel{background:var(--royal)!important;color:#fff!important;}
.cc.today{outline:2px solid var(--ice);}
.date-note{margin-top:10px;padding:10px 12px;background:rgba(91,168,212,.09);border-radius:8px;border-left:3px solid var(--ice);font-size:12px;color:var(--t2);line-height:1.55;}
.tslots{display:flex;flex-direction:column;gap:8px;}
.tslot{padding:12px 15px;border-radius:var(--r);border:2px solid var(--bdr);background:var(--bg-c);cursor:pointer;transition:all .18s;display:flex;gap:10px;align-items:center;}
.tslot:hover{border-color:var(--royal);}
.tslot.sel{border-color:var(--royal);background:rgba(26,60,168,.05);}
.ts-ico{font-size:18px;}
.ts-name{font-size:14px;font-weight:700;}
.ts-desc{font-size:12px;color:var(--t2);}

/* SUBSECTION: BOOKING STEP 4 — CLIENT INFO FORM
НАЗНАЧЕНИЕ:
- Данные клиента
- Телефон, email, автомобиль, адрес
- Позже сюда подключается Netlify Forms
*/
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;max-width:560px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg.full{grid-column:1/-1;}
.fg label{font-size:12px;font-weight:700;color:var(--t2);letter-spacing:.06em;text-transform:uppercase;}
.fg input,.fg textarea{padding:11px 12px;border-radius:var(--r);border:2px solid var(--bdr);background:var(--bg-c);font-family:var(--fb);font-size:15px;color:var(--t1);transition:border-color .18s, box-shadow .18s;outline:none;}
.fg input:focus,.fg textarea:focus{border-color:var(--royal);}
.fg textarea{resize:vertical;min-height:68px;}
.opt{font-size:10px;color:var(--t3);font-weight:400;text-transform:none;}

/* SUBSECTION: BOOKING STEP 5 — ORDER SUMMARY
НАЗНАЧЕНИЕ:
- Итоговая карточка заявки
- Цена
- Дата/время
- Контактные данные
- Confirmation message
*/
.sum-card{background:var(--bg-c);border-radius:var(--r-lg);border:1px solid var(--bdr);overflow:hidden;max-width:560px;box-shadow:var(--sh);}
.sum-hdr{background:var(--navy);padding:19px 22px;}
.sum-logo{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:.01em;}
.sum-logo .co{color:rgba(255,255,255,.28);-webkit-text-fill-color:rgba(255,255,255,.28);}
.sum-sub{font-size:11px;color:rgba(255,255,255,.38);margin-top:2px;}
.sum-body{padding:20px 22px;}
.ssec{margin-bottom:15px;}
.ssec-t{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:7px;}
.srow{display:flex;justify-content:space-between;align-items:flex-start;padding:4px 0;}
.sname{font-size:13px;color:var(--t2);}
.sprice{font-size:13px;font-weight:700;}
.sdiv{border:none;border-top:1px solid var(--bdr);margin:12px 0;}
.stotal{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:var(--bg-s);border-radius:var(--r);}
.stotal-l{font-family:var(--fd);font-size:16px;font-weight:700;}
.stotal-a{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--royal);}
.snote{font-size:10px;color:var(--t3);text-align:right;margin-top:2px;}
.sigrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.siitem{font-size:12px;color:var(--t2);}
.siitem strong{color:var(--t1);display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1px;}
.conf-box{background:rgba(30,158,94,.07);border:1px solid rgba(30,158,94,.22);border-radius:var(--r);padding:24px 20px;margin-top:20px;text-align:center;}
.conf-ico{font-size:40px;margin-bottom:8px;}
.conf-t{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--success);margin-bottom:5px;}
.conf-txt{font-size:14px;color:var(--t2);line-height:1.7;}

.wnav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:18px;border-top:1px solid var(--bdr);}

/* ==================================================
SECTION: SERVICE AREA
НАЗНАЧЕНИЕ:
- Города обслуживания
- Local SEO
- Карта / Google Maps placeholder

ВАЖНО:
- Хороший блок для локального SEO
- Не прятать полностью local-seo текст через display:none
================================================== */
#area{background:var(--navy);padding:72px 20px;}
#area .sec-label{color:var(--ice);}
#area .sec-title{color:#fff;}
#area .sec-sub{color:rgba(255,255,255,.54);}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;align-items:start;}
.area-cities{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.acity{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:12px;transition:background .18s;}
.acity:hover{background:rgba(255,255,255,.09);}
.acity-n{font-family:var(--fd);font-size:16px;font-weight:700;color:#fff;margin-bottom:1px;}
.acity-s{font-size:11px;color:rgba(255,255,255,.35);}
.map-ph{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:rgba(255,255,255,.25);font-size:12px;}

/* SUBSECTION: LOCAL SEO TEXT
НАЗНАЧЕНИЕ:
- Текст для локальных запросов: Mandeville, Covington, New Orleans
- Видимый пользователю, но визуально не перегружает секцию

ВАЖНО:
- Не использовать display:none, чтобы не портить SEO
*/
.local-seo{font-size:13px;color:var(--t2);line-height:1.7;margin-top:20px;padding:16px;background:rgba(255,255,255,.04);border-radius:var(--r);}
.local-seo p{color:rgba(255,255,255,.4);font-size:12px;line-height:1.7;margin-bottom:6px;}
.local-seo p:last-child{margin-bottom:0;}

/* ==================================================
SECTION: CONTACT
НАЗНАЧЕНИЕ:
- Контакты
- Быстрая связь
- Social links
- CTA на бронирование

ВАЖНО:
- Телефон и email должны совпадать с HTML и Schema
================================================== */
#contact{background:var(--bg);}
.con-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:30px;align-items:start;}
.con-item{display:flex;gap:12px;margin-bottom:18px;align-items:flex-start;}
.con-ico{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--royal),var(--royal-light));display:flex;align-items:center;justify-content:center;font-size:16px;}
.con-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);}
.con-val{font-size:14px;font-weight:600;margin-top:1px;}
.con-val a{color:var(--royal);transition:color .2s;}
.con-val a:hover{color:var(--royal-light);}
.socials{display:flex;gap:8px;margin-top:4px;}
.soc{width:36px;height:36px;border-radius:8px;background:var(--bg-s);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .18s;cursor:pointer;}
.soc:hover{background:var(--navy);border-color:var(--navy);}

/* ==================================================
SECTION: FOOTER
НАЗНАЧЕНИЕ:
- Нижняя навигация
- Соцсети
- Copyright
- Финальное закрепление бренда

ВАЖНО:
- Дублирует важные ссылки
- Иконки соцсетей используются как SVG в HTML
================================================== */
footer{background:var(--navy);padding:32px 20px;border-top:1px solid rgba(255,255,255,.06);}
.foot-in{max-width:1060px;margin:0 auto;text-align:center;}
.foot-logo{font-family:var(--fd);font-size:24px;font-weight:800;letter-spacing:.01em;margin-bottom:5px;}
.foot-logo .co{color:rgba(255,255,255,.26);-webkit-text-fill-color:rgba(255,255,255,.26);}
.foot-tag{font-size:12px;color:rgba(255,255,255,.32);margin-bottom:16px;}
.foot-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.foot-links a{font-size:12px;color:rgba(255,255,255,.34);transition:color .2s;}
.foot-links a:hover{color:rgba(255,255,255,.8);}
.foot-copy{font-size:11px;color:rgba(255,255,255,.17);}
.foot-socials{display:flex;justify-content:center;gap:12px;margin-bottom:14px;}
.foot-soc{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:all .18s;color:rgba(255,255,255,.5);}
.foot-soc:hover{background:rgba(255,255,255,.14);color:#fff;}
.foot-soc svg{width:15px;height:15px;fill:currentColor;}

/* ==================================================
SECTION: FLOATING MOBILE TEXT BUTTON
НАЗНАЧЕНИЕ:
- Быстрая SMS-кнопка на мобильных
- Показывается только на mobile через responsive section

ВАЖНО:
- Не должна перекрывать важные элементы booking wizard
================================================== */
.float-text{
  display:none;
  position:fixed;bottom:20px;right:16px;z-index:200;
  background:var(--success);color:#fff;
  width:52px;height:52px;border-radius:50%;
  align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(30,158,94,.4);
  border:none;cursor:pointer;font-size:22px;
  transition:all .2s;
}
.float-text:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(30,158,94,.5);}

/* ==================================================
SECTION: PRINT STYLES
НАЗНАЧЕНИЕ:
- Настройки печати booking summary
- Скрывает лишние секции при печати

ВАЖНО:
- Нужен для кнопки Print в booking summary
- Не удалять без замены логики печати
================================================== */
@media print{nav,#ann-bar,.prog,.wnav,#how,#why,#about,#portfolio,#reviews,#faq,#area,#contact,footer,.float-text{display:none!important;}#book{padding:0;background:#fff;}.sum-card{max-width:100%;box-shadow:none;}}

/* ==================================================
SECTION: RESPONSIVE / MOBILE LAYOUT
НАЗНАЧЕНИЕ:
- Адаптация сайта под tablets и phones
- Скрытие desktop nav
- Изменение grid layouts
- Mobile floating text button

ВАЖНО:
- Это главный блок для правок mobile версии
- Любые изменения проверять на ширинах 820px и 480px
================================================== */
@media(max-width:820px){
  nav{padding:0 14px;}
  .nav-links{display:none;}
  .float-text{display:flex;}
  .hero-in{grid-template-columns:1fr;gap:0;}
  .hero-img-w{display:none;}
  .pkg-cards,.why-grid,.rev-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
  .about-img-w{display:none;}
  .port-grid{grid-template-columns:1fr 1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .vgrid{grid-template-columns:repeat(2,1fr);}
  .addon-cards{grid-template-columns:1fr;}
  .dt-grid{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr;}
  .area-grid,.con-grid{grid-template-columns:1fr;}
  .sigrid{grid-column:1fr;}
  section{padding:54px 16px;}
  #hero{padding:70px 16px 52px;}
}
@media(max-width:480px){
  .port-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero-nav{gap:6px;}
  .hero-nav-btn{font-size:12px;padding:8px 12px;}
}

/* ==================================================
SECTION UPDATE: V3 RESPONSIVE / MOBILE COLLAPSE / UX
НАЗНАЧЕНИЕ:
- Улучшает hero на разных экранах
- Добавляет mobile-only collapsible sections
- Добавляет CTA blocks
- Добавляет error states для формы
- Добавляет summary remove / confirmation actions
================================================== */
.nav-logo{display:inline-flex;align-items:center;}
.hero-h1{font-size:clamp(34px,4.2vw,58px);max-width:560px;}
.hero-slogan{max-width:560px;}
.hero-desc{max-width:520px;}
.hero-trust{max-width:620px;}
.hero-nav{max-width:640px;}
.mobile-collapse-btn{display:none;margin-top:18px;border:1px solid rgba(26,60,168,.18);background:linear-gradient(135deg,#fff,#F5F7FB);border-radius:var(--r);padding:13px 16px;font-family:var(--fb);font-size:13px;font-weight:800;color:var(--royal);cursor:pointer;box-shadow:var(--sh);text-align:center;}
.section-cta{margin-top:28px;padding:20px;border:1px solid var(--bdr);border-radius:var(--r-lg);background:var(--bg-c);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--sh);}
.section-cta p{font-family:var(--fd);font-size:20px;font-weight:800;color:var(--t1);margin:0;}
.err-msg{display:none;color:#B00020;font-size:11px;line-height:1.35;margin-top:3px;}
.fg input.invalid,.fg textarea.invalid{border-color:#B00020!important;box-shadow:0 0 0 3px rgba(176,0,32,.08)!important;}
.summary-remove{margin-left:8px;border:none;background:transparent;color:#B00020;font-size:10px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;}
.summary-remove:hover{text-decoration:underline;}
.conf-actions{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.pstep{cursor:pointer;}
.pstep:hover .pcircle{box-shadow:0 0 0 3px rgba(26,60,168,.1);}

@media(max-width:1180px){
  .nav-links{gap:14px;}
  .nav-links a{font-size:12px;}
  .hero-in{gap:34px;}
  .hero-h1{font-size:clamp(34px,4.5vw,52px);}
}
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:28px;}
  .hero-img-w{max-width:640px;}
}
@media(max-width:820px){
  .mobile-collapse-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:14px;}
  .mobile-collapsible-section .mobile-collapse-content{display:block;max-height:390px;overflow:hidden;position:relative;}
  .mobile-collapsible-section .mobile-collapse-content::after{content:'';position:absolute;left:0;right:0;bottom:0;height:92px;background:linear-gradient(to bottom,rgba(245,247,251,0),var(--bg-s) 82%);pointer-events:none;}
  #portfolio.mobile-collapsible-section .mobile-collapse-content::after{background:linear-gradient(to bottom,rgba(245,247,251,0),var(--bg-s) 82%);}
  .mobile-collapsible-section .mobile-collapse-content.open{max-height:none;overflow:visible;}
  .mobile-collapsible-section .mobile-collapse-content.open::after{display:none;}
  .section-cta{align-items:flex-start;}
  .section-cta .btn{width:100%;justify-content:center;}
  .hero-h1{font-size:clamp(34px,10vw,46px);}
  .hero-slogan{font-size:clamp(19px,5.5vw,24px);}
  .hero-desc{font-size:15px;}
  .hero-trust .htpill{font-size:11px;}
  .hero-img-w{display:block;}
  .nav-socials{display:none;}
  .about-mobile-inline{display:block;float:right;width:118px;height:150px;object-fit:cover;border-radius:14px;margin:4px 0 10px 14px;box-shadow:var(--sh);}
}
@media(max-width:520px){
  .hero-ctas .btn{width:100%;justify-content:center;}
  .hero-nav-btn{flex:1 1 calc(50% - 6px);justify-content:center;}
  .hero-stat-card{position:static;margin-top:10px;justify-content:space-between;}
  .conf-actions .btn{width:100%;justify-content:center;}
}

@media print{
  body *{visibility:hidden!important;}
  #printable-summary,#printable-summary *{visibility:visible!important;}
  #printable-summary{position:absolute;left:0;top:0;width:100%;box-shadow:none!important;border:none!important;}
  .summary-remove,.wnav,.conf-actions{display:none!important;}
}
/* ==================================================
SECTION: GALLERY MODAL / CAROUSEL
НАЗНАЧЕНИЕ:
- Popup carousel для portfolio gallery
- Работает с HTML блоком #gallery-modal
- Управляется JS: openGallery(), closeGallery(), galleryNext(), galleryPrev()

ВАЖНО:
- Не переименовывать .gallery-modal.open без обновления JS
================================================== */

.gallery-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.gallery-modal.open{
  display:flex;
}

.gallery-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,27,42,.78);
  backdrop-filter:blur(6px);
}

.gallery-modal-box{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  background:var(--bg-c);
  border-radius:var(--r-lg);
  box-shadow:0 18px 70px rgba(0,0,0,.35);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
}

.gallery-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:rgba(13,27,42,.85);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.gallery-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--bdr);
}

.gallery-kicker{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--royal);
  margin-bottom:2px;
}

.gallery-modal-header h3{
  font-family:var(--fd);
  font-size:24px;
  line-height:1;
  margin:0;
}

.gallery-count{
  font-size:12px;
  font-weight:700;
  color:var(--t3);
  white-space:nowrap;
}

.gallery-img-wrap{
  position:relative;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
}

.gallery-img-wrap img{
  width:100%;
  max-height:72vh;
  object-fit:contain;
  display:block;
}

.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  font-size:34px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--sh);
  transition:all .18s;
}

.gallery-arrow:hover{
  background:#fff;
  transform:translateY(-50%) scale(1.06);
}

.gallery-prev{left:14px;}
.gallery-next{right:14px;}

@media(max-width:640px){
  .gallery-modal{
    padding:10px;
  }

  .gallery-modal-header{
    padding:14px 16px;
  }

  .gallery-modal-header h3{
    font-size:20px;
  }

  .gallery-img-wrap{
    min-height:300px;
  }

  .gallery-arrow{
    width:36px;
    height:36px;
    font-size:28px;
  }
}

/* ==================================================
MOBILE FIX: HERO TRUST PILLS
НАЗНАЧЕНИЕ:
- Делает верхние trust-плашки на телефоне ровными
- Первые две идут в 2 колонки
- Третья растягивается на всю ширину

ВАЖНО:
- Только mobile
================================================== */

@media(max-width:640px){
  .hero-trust{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hero-trust .htpill{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hero-trust .htpill:nth-child(3){
    grid-column:1 / -1;
  }
}

/* ==================================================
FUTURE MODULE: BACK TO TOP BUTTON
НАЗНАЧЕНИЕ:
- Готовые стили для будущей кнопки Back to Top
- HTML/JS можно добавить позже без переписывания CSS
================================================== */
.back-to-top{
  position:fixed;
  right:16px;
  bottom:84px;
  z-index:190;
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  box-shadow:var(--sh);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s, opacity .18s;
}
.back-to-top.visible{display:flex;}
.back-to-top:hover{transform:translateY(-2px);}

/* ==================================================
FUTURE MODULE: MOBILE DRAWER / BURGER MENU
НАЗНАЧЕНИЕ:
- Заготовка под мобильное меню
- Пока не влияет на сайт, если HTML/JS drawer ещё не добавлены
================================================== */
.burger-btn{display:none;}
.mobile-drawer{display:none;}
.mobile-drawer.open{display:block;}

@media(max-width:820px){
  .burger-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid var(--bdr);
    border-radius:8px;
    background:var(--bg-c);
    color:var(--t1);
    cursor:pointer;
  }
}


/* ==================================================
ADD-ON WARNING / LIABILITY NOTICE
НАЗНАЧЕНИЕ:
- Показывает предупреждение для деликатных add-ons
- Сейчас используется для Headliner Cleaning
================================================== */
.addon-warning{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--r);
  border:1px solid rgba(176,0,32,.22);
  background:rgba(176,0,32,.055);
  max-width:720px;
}
.addon-warning-title{
  font-family:var(--fd);
  font-size:18px;
  font-weight:800;
  color:#B00020;
  margin-bottom:4px;
}
.addon-warning-text{
  font-size:13px;
  line-height:1.6;
  color:var(--t2);
  margin-bottom:10px;
}
.addon-warning-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
  color:var(--t1);
  cursor:pointer;
}
.addon-warning-check input{margin-top:3px;}


/* ==================================================
MODULE: MOBILE DRAWER / BURGER MENU
НАЗНАЧЕНИЕ:
- Мобильное меню навигации
- Используется с .mobile-menu-toggle и #mobile-drawer в HTML
================================================== */
.mobile-menu-toggle{
  display:none;
  width:40px;
  height:40px;
  border:1px solid var(--bdr);
  border-radius:9px;
  background:var(--bg-c);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  transition:all .18s;
}
.mobile-menu-toggle span{
  width:18px;
  height:2px;
  border-radius:99px;
  background:var(--navy);
  display:block;
}
.mobile-menu-toggle:hover{border-color:var(--royal);box-shadow:var(--sh);}
.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:450;
  display:none;
}
.mobile-drawer.open{display:block;}
.mobile-drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,27,42,.55);
  backdrop-filter:blur(4px);
}
.mobile-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(340px,88vw);
  height:100%;
  background:var(--bg-c);
  box-shadow:-12px 0 40px rgba(13,27,42,.2);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mobile-drawer-logo{font-family:var(--fd);font-size:20px;font-weight:800;white-space:nowrap;}
.mobile-drawer-close{
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:var(--bg-s);
  color:var(--navy);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.mobile-drawer-links{display:flex;flex-direction:column;gap:8px;}
.mobile-drawer-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border:1px solid var(--bdr);
  border-radius:var(--r);
  font-size:15px;
  font-weight:700;
  color:var(--t1);
  text-decoration:none;
}
.mobile-drawer-links a:hover{border-color:var(--royal);color:var(--royal);background:rgba(26,60,168,.04);}
.mobile-drawer-cta{background:var(--royal)!important;color:#fff!important;border-color:var(--royal)!important;justify-content:center!important;text-transform:uppercase;letter-spacing:.05em;}

@media(max-width:820px){
  .mobile-menu-toggle{display:inline-flex;}
}

/* ==================================================
UPDATE: DESKTOP FAQ PREVIEW
Purpose:
- Keeps FAQ from becoming too long even on desktop
- Shows the strongest questions first, then invites users to expand
================================================== */
@media(min-width:821px){
  #faq.mobile-collapsible-section .mobile-collapse-content{
    display:block;
    max-height:430px;
    overflow:hidden;
    position:relative;
  }
  #faq.mobile-collapsible-section .mobile-collapse-content::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:105px;
    background:linear-gradient(to bottom,rgba(245,247,251,0),var(--bg-s) 82%);
    pointer-events:none;
  }
  #faq.mobile-collapsible-section .mobile-collapse-content.open{
    max-height:none;
    overflow:visible;
  }
  #faq.mobile-collapsible-section .mobile-collapse-content.open::after{
    display:none;
  }
  #faq .mobile-collapse-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:560px;
    min-height:48px;
    margin:18px auto 0;
  }
}


/* ==================================================
SECTION: BOOKING CONSENT + CALENDAR + PERFORMANCE HELPERS
НАЗНАЧЕНИЕ:
- Consent checkboxes для SMS/email communications
- Small nested inclusions inside Full Detail
- Calendar buttons on confirmation screen
- Lightweight rendering improvements
================================================== */
.consent-box{
  max-width:560px;
  margin:18px 0 20px;
  padding:14px;
  border:1px solid var(--bdr);
  border-radius:var(--r);
  background:var(--bg-s);
}
.consent-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  color:var(--t2);
  line-height:1.55;
  margin-bottom:10px;
  cursor:pointer;
}
.consent-check:last-child{margin-bottom:0;}
.consent-check input{margin-top:3px;flex-shrink:0;accent-color:var(--royal);}
.mini-inclusion-toggle{
  margin-top:9px;
  padding:7px 10px;
  border:1px solid var(--bdr);
  background:var(--bg-s);
  color:var(--royal);
  border-radius:7px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.nested-inclusions{
  margin-top:6px;
  margin-left:6px;
  border-left:3px solid rgba(26,60,168,.14);
  padding-left:10px;
}
.addon-helper{
  font-size:12px;
  color:var(--t2);
  background:rgba(26,60,168,.055);
  border:1px solid rgba(26,60,168,.12);
  border-radius:var(--r);
  padding:9px 11px;
  margin:8px 0 12px;
  line-height:1.55;
}
.conf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.conf-actions .btn{white-space:normal;text-align:center;justify-content:center;}
picture{display:block;}
.hero-img-w picture,
.about-img-w picture,
.port-card picture{height:100%;}
@supports (content-visibility:auto){
  #how,#why,#about,#portfolio,#reviews,#faq,#area,#contact,footer{
    content-visibility:auto;
    contain-intrinsic-size:1px 700px;
  }
}