/* ============================================================
   FONTS — local only, via @font-face. Drop the files into /fonts.
   Graceful fallbacks keep the demo readable without them.
   ============================================================ */
@font-face{
  font-family:"Unbounded";
  src:url("../fonts/Unbounded-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/Jost-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/Jost-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --accent:#D9622B;
  --accent-hover:#C25523;
  --accent-soft:#FCEDE4;
  --accent-on-dark:#E87A45;
  --bg:#FFFFFF;
  --surface:#FAF7F2;
  --border:#EDE7DE;
  --ink:#16120E;
  --ink-muted:#6E655B;
  --dark:#1A1613;

  /* radii */
  --r-btn:12px;
  --r-card:20px;
  --r-block:28px;

  /* type stacks */
  --font-head:"Unbounded","Segoe UI",system-ui,sans-serif;
  --font-body:"Jost","Segoe UI",system-ui,sans-serif;

  /* layout */
  --col:480px;
  --pad:20px;       /* mobile side field */
  --dock-h:72px;

  --ease:cubic-bezier(.25,.1,.25,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   COLUMN
   ============================================================ */
.page{
  width:100%;
  max-width:var(--col);
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
  position:relative;
  overflow:hidden;          /* keep dark full-width sections inside the card corners */
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.h2{
  font-family:var(--font-head);
  font-weight:500;
  font-size:24px;
  line-height:28px;
  letter-spacing:-.01em;
}
.caption{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  line-height:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border-radius:var(--r-btn);
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1;
  text-align:center;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn--primary{
  height:52px;
  background:var(--accent);
  color:#fff;
}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn--primary:active{background:var(--accent-hover);transform:translateY(0)}
.btn--secondary{
  height:48px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--border);
}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn--secondary:active{transform:translateY(0)}
.btn__ico{flex-shrink:0;transition:transform .25s var(--ease)}
.btn--primary:hover .btn__ico{transform:translateX(2px)}

/* единый линейный стиль иконок по всему сайту (2px, round) */
.acc__ico svg *,
.why__ico svg *,
.loc__ico svg *,
.iconbtn svg *,
.dock__call svg *,
.btn__ico *,
.modal__badge svg *,
.modal__ok svg *,
.modal__close svg *,
.ba__handle svg *{
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================
   PLACEHOLDERS — warm blocks with a caption
   ============================================================ */
.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  border:1px solid var(--border);
  color:var(--ink-muted);
  border-radius:var(--r-card);
  text-align:center;
}
.ph__label{
  font-size:13px;
  line-height:18px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ph--avatar{
  position:relative;
  width:120px;height:120px;
  border-radius:50%;
  border:2px solid var(--accent);
  overflow:hidden;
}
.ph--avatar .ph__label{font-size:11px;padding:0 8px}
.ph--avatar:has(> .hero__photo) .ph__label{display:none}  /* фото есть — прячем подпись */
.hero__photo{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  animation:photoIn .6s var(--ease) both;
}
@keyframes photoIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.ph--wide{
  aspect-ratio:16/10;
  width:100%;
}
.ph--map{
  aspect-ratio:16/9;
  width:100%;
  border-radius:var(--r-card);
}

/* ============================================================
   SECTION RHYTHM
   ============================================================ */
/* симметричный вертикальный ритм — равный воздух с обеих сторон,
   включая границы тёмных блоков (28+28 = 56 между блоками) */
.section{
  padding:28px var(--pad);
}
.section--first{padding-top:40px}         /* hero → первый блок = 40 */

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative;
  padding:40px var(--pad) 0;
  text-align:center;
}
.hero__avatar{
  position:relative;
  display:flex;
  justify-content:center;
  margin-bottom:24px;
}
.hero__avatar::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:120px;height:120px;
  border-radius:50%;
  border:2px solid var(--accent);
  transform:translate(-50%,-50%);
  opacity:0;
  animation:avatarRing 3.2s ease-out infinite;
  pointer-events:none;
}
@keyframes avatarRing{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.35}
  70%,100%{transform:translate(-50%,-50%) scale(1.32);opacity:0}
}
.hero__name{
  font-family:var(--font-head);
  font-weight:500;
  font-size:30px;
  line-height:34px;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.hero__role{
  font-size:16px;
  line-height:26px;
  color:var(--ink-muted);
  margin-bottom:8px;
}
.hero__slogan{
  font-size:16px;
  line-height:24px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:20px;
}

/* мягкий вход hero при загрузке */
@keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__name{animation:heroUp .55s var(--ease) both}
.hero__role{animation:heroUp .55s var(--ease) .08s both}
.hero__slogan{animation:heroUp .55s var(--ease) .14s both}
.chips{animation:heroUp .55s var(--ease) .2s both}
.hero > .btn--primary{animation:heroUp .55s var(--ease) .28s both}
.lang{animation:heroUp .5s var(--ease) both}

/* language switch */
.lang{
  position:absolute;
  top:16px;
  right:var(--pad);
  display:flex;
  align-items:center;
  padding:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-btn);
  z-index:20;
}
.lang__pill{
  position:absolute;
  top:4px;
  left:4px;
  width:40px;
  height:calc(100% - 8px);
  border-radius:9px;
  background:var(--accent-soft);
  transition:transform .28s var(--ease);
}
.lang[data-lang="ru"] .lang__pill{transform:translateX(40px)}
.lang__btn{
  position:relative;
  z-index:1;
  width:40px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink-muted);
  transition:color .2s var(--ease);
}
.lang__btn.is-active{color:var(--ink)}

/* chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:24px;
}
.chip{
  padding:8px 14px;
  background:var(--accent-soft);
  border-radius:999px;
  font-size:13px;
  line-height:18px;
  font-weight:500;
  color:var(--ink);
  transition:transform .2s var(--ease),background-color .2s var(--ease);
}
.chip:hover{transform:translateY(-1px);background:#F8E1D2}

/* ============================================================
   ACCORDION (services + faq)
   ============================================================ */
.h2 + .acc,
.h2 + .ba,
.h2 + .gal,
.h2 + .why,
.h2 + .loc{margin-top:24px}          /* H2 → content = 24 */

.acc__item{border-top:1px solid var(--border)}
.acc__item:last-child{border-bottom:1px solid var(--border)}
.acc--faq .acc__item:first-child{border-top:1px solid var(--border)}

.acc__head{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:12px;
  width:100%;
  padding:18px 0;
  text-align:left;
}
.acc--faq .acc__head{grid-template-columns:1fr auto}

.acc__ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.acc__main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.acc__num{
  font-family:var(--font-body);
  font-weight:500;
  font-size:12px;
  line-height:1;
  letter-spacing:.1em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.acc__item.is-open .acc__ico{background:var(--accent);color:#fff}
.acc__head:hover .acc__ico{transform:scale(1.07)}
.acc__title{transition:color .2s var(--ease)}
.acc__head:hover .acc__title{color:var(--accent)}
.acc__title{
  font-family:var(--font-head);
  font-weight:500;
  font-size:18px;
  line-height:24px;
  letter-spacing:-.01em;
}

/* plus → cross */
.acc__plus{
  position:relative;
  width:18px;height:18px;
  flex-shrink:0;
  transition:transform .25s var(--ease);
}
.acc__plus::before,
.acc__plus::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:16px;height:2px;
  border-radius:2px;
  background:var(--accent);
  transform:translate(-50%,-50%);
}
.acc__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc__item.is-open .acc__plus{transform:rotate(45deg)}

/* animated body via grid-rows */
.acc__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s var(--ease);
}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__inner{
  overflow:hidden;
  min-height:0;
}
/* services open = left accent bar + padded content */
.acc:not(.acc--faq) .acc__item.is-open{
  border-left:3px solid var(--accent);
  padding-left:17px;              /* 20 field − 3 bar = keeps text on the 20 grid */
  margin-left:-20px;              /* bar sits in the side field, text stays aligned */
  padding-right:0;
}
.acc:not(.acc--faq) .acc__item.is-open .acc__head{padding-left:20px}
.acc:not(.acc--faq) .acc__item.is-open .acc__inner{padding-left:20px}

.acc__inner{padding-top:0}
.acc__item.is-open .acc__inner{
  padding-top:16px;
  padding-bottom:20px;
}
.acc__text{
  font-size:16px;
  line-height:26px;
  color:var(--ink-muted);
  margin-bottom:16px;
}
.acc:not(.acc--faq) .acc__inner .ph--wide{margin-bottom:24px}
.acc--faq .acc__text{margin-bottom:0}
.acc__inner .btn{margin-bottom:0}

/* ============================================================
   03 · BEFORE / AFTER
   ============================================================ */
.ba__frame{
  position:relative;
  aspect-ratio:4/3;
  width:100%;
  border-radius:var(--r-block);
  overflow:hidden;
  border:1px solid var(--border);
  touch-action:none;
  user-select:none;
  cursor:ew-resize;
  margin-bottom:20px;
}
.ba__layer{position:absolute;inset:0}
.ba__layer .ph{
  width:100%;height:100%;
  border:none;border-radius:0;
}
.ba__before{
  clip-path:inset(0 calc(100% - var(--pos,50) * 1%) 0 0);
}
.ph--after{background:var(--accent-soft)}
.ph--before{background:#EFE7DD}
.ph--ba .ph__label{
  font-size:13px;
  letter-spacing:.1em;
  color:var(--ink-muted);
  background:rgba(255,255,255,.7);
  padding:6px 12px;
  border-radius:999px;
}
.ba__divider{
  position:absolute;top:0;bottom:0;
  left:calc(var(--pos,50) * 1%);
  width:2px;
  background:#fff;
  transform:translateX(-1px);
  pointer-events:none;
}
.ba__handle{
  position:absolute;top:50%;
  left:calc(var(--pos,50) * 1%);
  transform:translate(-50%,-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  animation:baPulse 2.6s var(--ease) infinite;
}
.ba__handle::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:2px solid var(--accent);
  opacity:.5;
  animation:baRing 2.6s ease-out infinite;
}
@keyframes baPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.07)}
}
@keyframes baRing{
  0%{transform:scale(1);opacity:.5}
  80%,100%{transform:scale(1.5);opacity:0}
}
.ba.is-touched .ba__handle{animation:none}
.ba.is-touched .ba__handle::after{display:none}

.ba__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:16px;
}
.ba__dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--border);
  transition:background-color .2s var(--ease),width .2s var(--ease);
}
.ba__dot.is-active{background:var(--accent);width:20px;border-radius:999px}
.ba__cap{
  text-align:center;
  font-size:16px;
  line-height:26px;
  color:var(--ink-muted);
}

/* ============================================================
   03b · ISHLARIM — до/после галерея
   ============================================================ */
.gal__track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-x;
  user-select:none;
}
.gal__track::-webkit-scrollbar{height:0;display:none}
.gal__track.is-drag{
  cursor:grabbing;
  scroll-behavior:auto;
  scroll-snap-type:none;
}
.gal__track.is-drag img,
.gal__track.is-drag .gal__card{pointer-events:none}
.gal__card{
  flex:0 0 82%;
  scroll-snap-align:start;
  margin:0;
}
.gal__pair{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  aspect-ratio:4/3;
  border-radius:var(--r-card);
  overflow:hidden;
  border:1px solid var(--border);
  margin-bottom:12px;
}
.gal__pair::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:2px;
  background:#fff;
  transform:translateX(-1px);
}
.gal__half{
  display:flex;
  align-items:flex-start;
}
.gal__half--before{background:#EFE7DD;justify-content:flex-start}
.gal__half--after{background:var(--accent-soft);justify-content:flex-end}
.gal__tag{
  margin:10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink-muted);
  background:rgba(255,255,255,.75);
  padding:4px 8px;
  border-radius:999px;
}
.gal__cap{
  font-size:16px;
  line-height:26px;
  color:var(--ink-muted);
}
.gal__hint{
  text-align:center;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-muted);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.js .reveal,
.js .reveal-group > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.js .reveal.is-in,
.js .reveal-group > *.is-in{
  opacity:1;
  transform:none;
}

/* ============================================================
   04 · NEGA MEN (dark)
   ============================================================ */
.section--dark{background:var(--dark)}
.section--dark .caption{color:rgba(255,255,255,.55)}
.section--dark .h2{color:#fff}

.why{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.why__card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-card);
  padding:20px;
  transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.why__card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.07);
  border-color:rgba(232,122,69,.35);
}
.why__ico{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  margin-bottom:16px;
  transition:transform .25s var(--ease);
}
.why__card:hover .why__ico{transform:scale(1.08)}
.why__h{
  font-family:var(--font-head);
  font-weight:500;
  font-size:18px;
  line-height:24px;
  color:#fff;
  margin-bottom:8px;
}
.why__t{
  font-size:16px;
  line-height:26px;
  color:rgba(255,255,255,.7);
}

/* ============================================================
   05 · QABUL MANZILI
   ============================================================ */
.loc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-block);
  padding:20px;
}
.loc .ph--map{margin-bottom:24px}
.loc__row{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:start;
  margin-bottom:16px;
}
.loc__row--last{margin-bottom:24px}
.loc__ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
}
.loc__addr{
  font-size:16px;
  line-height:26px;
  font-weight:500;
  margin-bottom:4px;
}
.loc__sub{
  font-size:16px;
  line-height:26px;
  color:var(--ink-muted);
}
.loc .btn{margin-bottom:0}

/* ============================================================
   07 · FOOTER (dark)
   ============================================================ */
.footer{
  background:var(--dark);
  padding:28px var(--pad);
  text-align:center;
}
.footer__name{
  font-family:var(--font-head);
  font-weight:500;
  font-size:18px;
  line-height:24px;
  color:#fff;
  margin-bottom:8px;
}
.footer__role{
  font-size:16px;
  line-height:26px;
  color:rgba(255,255,255,.6);
  margin-bottom:24px;
}
.footer__social{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:24px;
}
.iconbtn{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:var(--r-btn);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.iconbtn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.footer__credit{
  font-size:13px;
  line-height:18px;
  color:rgba(255,255,255,.5);
}
.footer__credit a{color:var(--accent-on-dark);font-weight:500}

/* ============================================================
   ЗАКРЕПЛЁННАЯ ПАНЕЛЬ
   ============================================================ */
.dock{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translate(-50%,120%);
  width:100%;
  max-width:var(--col);
  background:var(--bg);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(22,18,14,.08);
  padding-bottom:env(safe-area-inset-bottom);
  transition:transform .3s var(--ease);
  z-index:50;
}
.dock.is-visible{transform:translate(-50%,0)}
.dock__inner{
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--dock-h);
  padding:12px;
}
.dock__cta{flex:1}
.dock__call{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  flex-shrink:0;
  border-radius:var(--r-btn);
  background:var(--accent-soft);
  color:var(--accent);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.dock__call:hover{background:var(--accent);color:#fff}

/* ============================================================
   POP-UP: qabulga yozilish
   ============================================================ */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s var(--ease);
}
.modal.is-open{opacity:1;visibility:visible}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(22,18,14,.5);
}
.modal__card{
  position:relative;
  width:100%;
  max-width:var(--col);
  background:var(--bg);
  border-radius:28px 28px 0 0;
  padding:32px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(28px);
  transition:transform .28s var(--ease);
}
.modal.is-open .modal__card{transform:none}
.modal__card.shake{animation:shake .3s var(--ease)}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.modal__close{
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--surface);
  color:var(--ink-muted);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.modal__close:hover{background:var(--border);color:var(--ink)}
.modal__view{text-align:center}
.modal__badge,
.modal__ok{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
}
.modal__ok{animation:okPop .35s var(--ease) both}
@keyframes okPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.modal__title{
  font-family:var(--font-head);
  font-weight:500;
  font-size:24px;
  line-height:28px;
  margin-bottom:8px;
}
.modal__sub{
  font-size:16px;
  line-height:26px;
  color:var(--ink-muted);
  margin-bottom:24px;
}
#bookForm{text-align:left}
.field{margin-bottom:16px}
.field__label{
  display:block;
  font-size:13px;
  line-height:18px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink-muted);
  margin-bottom:8px;
}
.field__input{
  width:100%;
  height:52px;
  padding:0 16px;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-btn);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field__input::placeholder{color:var(--ink-muted);opacity:.6}
.field__input:focus{
  border-color:var(--accent);
  background:var(--bg);
}
.field__input.is-error{border-color:var(--accent)}
.field__err{
  font-size:13px;
  line-height:18px;
  color:var(--accent);        /* активное состояние — accent разрешён */
  margin-bottom:16px;
}
#bookForm .btn{margin-bottom:0}
.modal__view[data-view="ok"] .btn{width:auto;padding:0 24px;margin:0 auto}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:768px){
  :root{--pad:24px}
  body{background:var(--surface)}
  .page{
    margin:24px auto;
    border-radius:var(--r-block);
    min-height:auto;
    box-shadow:0 1px 2px rgba(22,18,14,.03);
  }
  .section{padding:32px var(--pad)}
  .section--first{padding-top:40px}
  .footer{padding:32px var(--pad)}

  .modal{align-items:center}
  .modal__card{
    max-width:420px;
    margin:0 20px;
    border-radius:28px;
    padding:32px 24px;
  }
  .modal__card{transform:translateY(0) scale(.96)}
  .modal.is-open .modal__card{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}