/* ============================================================
   МОРЖ — сеть барбершопов, Санкт-Петербург
   Направление: клуб зимнего плавания, а не «тёмный барбершоп».
   Холодная палитра, ватерлиния как сквозной приём,
   дуотон на фото, длительность вместо порядковых номеров.
   ============================================================ */

/* ---------- ШРИФТЫ ---------- */
@font-face{font-family:'Unbounded';font-weight:800;font-style:normal;font-display:swap;
  src:url('assets/fonts/unbounded-800-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Unbounded';font-weight:800;font-style:normal;font-display:swap;
  src:url('assets/fonts/unbounded-800-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122;}

@font-face{font-family:'Golos';font-weight:400;font-style:normal;font-display:swap;
  src:url('assets/fonts/golos-text-400-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos';font-weight:400;font-style:normal;font-display:swap;
  src:url('assets/fonts/golos-text-400-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122;}
@font-face{font-family:'Golos';font-weight:500;font-style:normal;font-display:swap;
  src:url('assets/fonts/golos-text-500-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos';font-weight:500;font-style:normal;font-display:swap;
  src:url('assets/fonts/golos-text-500-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122;}
@font-face{font-family:'Golos';font-weight:700;font-style:normal;font-display:swap;
  src:url('assets/fonts/golos-text-700-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos';font-weight:700;font-style:normal;font-display:swap;
  src:url('assets/fonts/golos-text-700-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122;}

/* ---------- ТОКЕНЫ ---------- */
:root{
  --deep:    oklch(0.215 0.048 233);   /* балтийская глубина */
  --night:   oklch(0.155 0.038 235);   /* подвал */
  --ice:     oklch(0.962 0.012 220);   /* бумага-лёд */
  --foam:    oklch(0.995 0.004 220);   /* пена, форма */
  --cyan:    oklch(0.820 0.130 205);   /* акцент на тёмном */
  --cyan-d:  oklch(0.640 0.115 218);   /* акцент на светлом */
  --ink:     oklch(0.215 0.030 235);
  --ink-2:   oklch(0.520 0.022 235);
  --line:    oklch(0.885 0.014 222);
  --line-d:  oklch(1 0 0 / 0.14);
  --err:     oklch(0.560 0.180 25);
  --ok:      oklch(0.560 0.115 165);

  --d: 'Unbounded', 'Arial Black', sans-serif;
  --t: 'Golos', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{margin:0;background:var(--ice);color:var(--ink);
  font:400 17px/1.55 var(--t);overflow-x:hidden;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none !important}

h1,h2,h3{margin:0;font-family:var(--d);font-weight:800;
  letter-spacing:-0.03em;line-height:0.94;text-wrap:balance}
h1{font-size:clamp(3.1rem, 12.5vw, 10.5rem)}
h2{font-size:clamp(1.9rem, 4.6vw, 3.4rem)}
h3{font-size:1.05rem;letter-spacing:-0.01em;line-height:1.15}

:focus-visible{outline:2px solid var(--cyan-d);outline-offset:3px;border-radius:2px}
.sec--deep :focus-visible,.hero :focus-visible,.hdr :focus-visible,.foot :focus-visible{
  outline-color:var(--cyan)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

.mark{display:flex;align-items:center;gap:10px;
  font:500 12px/1 var(--t);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-d)}
.mark::before{content:'';width:22px;height:1px;background:currentColor;flex:none}
.sec--deep .mark,.hero .mark{color:var(--cyan)}

/* ---------- КНОПКИ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cyan);color:oklch(0.155 0.038 235);
  font:700 15px/1 var(--t);
  box-shadow:0 1px 2px oklch(0.215 0.048 233 / .18), 0 8px 22px -12px oklch(0.215 0.048 233 / .5);
  transition:background .18s var(--ease), scale .12s var(--ease), box-shadow .18s var(--ease)}
.btn:hover{background:oklch(0.872 0.118 203);
  box-shadow:0 1px 2px oklch(0.215 0.048 233 / .2), 0 12px 28px -12px oklch(0.215 0.048 233 / .55)}
.btn:active{scale:0.96}
.btn--full{width:100%}
.btn--line{background:transparent;color:var(--ice);border:1px solid var(--line-d);box-shadow:none}
.btn--line:hover{background:oklch(1 0 0 / .08);box-shadow:none}

/* ---------- ШАПКА ---------- */
.hdr{position:sticky;top:0;z-index:70;background:oklch(0.215 0.048 233 / .92);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-d);color:var(--ice)}
.hdr__in{display:flex;align-items:center;gap:22px;min-height:66px}
.logo{font-family:var(--d);font-weight:800;font-size:21px;letter-spacing:-0.02em;flex:none}
.logo span{color:var(--cyan)}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font:400 15px/1 var(--t);color:oklch(0.962 0.012 220 / .82);
  transition:color .16s var(--ease)}
.nav a:hover{color:var(--cyan)}
.hdr__act{display:flex;align-items:center;gap:16px;margin-left:auto}
.hdr__tel{font:700 16px/1 var(--t);white-space:nowrap;transition:color .16s var(--ease)}
.hdr__tel:hover{color:var(--cyan)}
.burger{display:none;width:44px;height:44px;padding:11px;margin-left:auto;
  border:0;background:none;cursor:pointer}
.burger i{display:block;height:2px;background:var(--ice);border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s var(--ease)}
.burger i+i{margin-top:6px}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- ПЕРВЫЙ ЭКРАН ---------- */
/* Подпись страницы: кадр обрывается ватерлинией, ниже — глубина. */
.hero{position:relative;background:var(--deep);color:var(--ice);overflow:hidden;
  padding-top:clamp(40px,6vw,80px)}
.hero h1{margin:16px 0 0}
.hero h1 i{font-style:normal;color:var(--cyan)}
.hero__sub{max-width:34ch;margin:22px 0 0;color:oklch(0.962 0.012 220 / .9);font-size:18px}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;margin:30px 0 0}

.hero__shot{position:relative;margin-top:clamp(32px,5vw,56px);
  aspect-ratio:21/8;min-height:220px;overflow:hidden;border-radius:6px 6px 0 0}
.hero__shot::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,oklch(0.215 0.048 233 / .12) 0%,
    transparent 45%,oklch(0.215 0.048 233 / .55) 100%)}

/* холодный дуотон */
.duo{position:absolute;inset:0;background:var(--deep);overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(1.32);
  mix-blend-mode:luminosity}
.duo::after{content:'';position:absolute;inset:0;z-index:1;
  background:var(--cyan);mix-blend-mode:color;opacity:.34}

.waterline{height:1px;background:var(--cyan);position:relative;z-index:3}

.facts{display:flex;flex-wrap:wrap;gap:clamp(22px,5vw,64px);
  padding:28px 0 clamp(46px,6vw,72px)}
.facts div{min-width:96px}
.facts b{display:block;font:800 clamp(1.6rem,3.4vw,2.4rem)/1 var(--d);
  letter-spacing:-0.03em;color:var(--cyan);font-variant-numeric:tabular-nums}
.facts span{font-size:14px;color:oklch(0.962 0.012 220 / .8)}

/* ---------- СЕКЦИИ ---------- */
.sec{padding:clamp(58px,7.5vw,104px) 0}
.sec--deep{background:var(--deep);color:var(--ice)}
.sec--foam{background:var(--foam)}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38ch);
  gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(32px,4vw,54px)}
.sec__head p{margin:0;color:var(--ink-2)}
.sec--deep .sec__head p{color:oklch(0.962 0.012 220 / .84)}
.sec__head h2{margin-top:14px}

/* ---------- ПРАЙС: реестр, не карточки ---------- */
.price{border-top:1px solid var(--line)}
.sec--deep .price{border-color:var(--line-d)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 100px 140px;
  gap:clamp(12px,2.5vw,30px);align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
  transition:background .16s var(--ease)}
.sec--deep .row{border-color:var(--line-d)}
.row:hover{background:oklch(0.640 0.115 218 / .06)}
.row__name{font:500 clamp(1.05rem,2vw,1.35rem)/1.2 var(--t);letter-spacing:-0.01em}
.row__desc{display:block;margin-top:6px;font:400 14.5px/1.45 var(--t);
  color:var(--ink-2);max-width:52ch}
.row__time{font:400 14px/1 var(--t);color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.row__price{font:800 clamp(1.3rem,2.6vw,1.9rem)/1 var(--d);letter-spacing:-0.035em;
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.price__note{margin:22px 0 0;font-size:14.5px;color:var(--ink-2)}

/* ---------- ПРОЦЕСС: минуты вместо порядковых номеров ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:clamp(18px,3vw,34px);border-top:1px solid var(--line-d);padding-top:30px}
.step__t{display:block;font:800 1.45rem/1 var(--d);letter-spacing:-0.03em;color:var(--cyan);
  font-variant-numeric:tabular-nums;margin-bottom:15px}
.step h3{margin-bottom:9px}
.step p{margin:0;font-size:15px;color:oklch(0.962 0.012 220 / .84)}

/* ---------- ГАЛЕРЕЯ ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px}
.shot{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:4px;margin:0;
  outline:1px solid oklch(0 0 0 / 0.1);outline-offset:-1px}
.shot .duo img{transition:scale .5s var(--ease)}
.shot:hover .duo img{scale:1.04}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 16px 14px;
  background:linear-gradient(180deg,transparent 10%,oklch(0.155 0.038 235 / .9));
  color:var(--ice);font:500 14.5px/1.3 var(--t)}

/* ---------- ФИЛИАЛЫ ---------- */
.spots{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
  gap:1px;background:var(--line-d);border:1px solid var(--line-d);
  border-radius:4px;overflow:hidden}
.spot{background:var(--deep);padding:26px 22px 24px}
.spot__metro{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  font:500 12px/1 var(--t);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.spot__metro::before{content:'';width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:none}
.spot address{font-style:normal;font:500 17px/1.35 var(--t);margin-bottom:8px}
.spot__hours{font-size:14.5px;color:oklch(0.962 0.012 220 / .8);
  font-variant-numeric:tabular-nums;margin-bottom:18px}
.spot__map{display:inline-block;font-size:14.5px;color:var(--cyan);
  border-bottom:1px solid oklch(0.820 0.130 205 / .35);padding-bottom:2px;
  transition:border-color .16s var(--ease)}
.spot__map:hover{border-bottom-color:var(--cyan)}

/* ---------- ЗАПИСЬ ---------- */
.book__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:clamp(30px,5vw,72px);align-items:start}
.book__lead{max-width:36ch;color:oklch(0.962 0.012 220 / .88);margin-top:18px}
.book__why{margin:26px 0 0}
.book__why li{position:relative;padding-left:26px;margin-bottom:12px;font-size:15.5px;
  color:oklch(0.962 0.012 220 / .88)}
.book__why li::before{content:'';position:absolute;left:2px;top:8px;width:8px;height:8px;
  border-radius:50%;border:1.5px solid var(--cyan)}
.book__tel{display:inline-block;margin-top:28px;
  font:800 clamp(1.4rem,3vw,1.95rem)/1 var(--d);letter-spacing:-0.035em;color:var(--cyan);
  font-variant-numeric:tabular-nums}

/* внешний радиус 16 = внутренний 8 + отступ 8 */
.form{position:relative;background:var(--foam);color:var(--ink);
  border-radius:16px;padding:clamp(22px,3vw,30px);
  box-shadow:0 1px 2px oklch(0.155 0.038 235 / .2), 0 18px 44px -22px oklch(0.155 0.038 235 / .55)}
.form h3{font-family:var(--t);font-weight:700;font-size:1.15rem;letter-spacing:-0.01em}
.form__note{margin:7px 0 22px;font-size:14px;color:var(--ink-2)}
.field{margin-bottom:15px}
.field label{display:block;margin-bottom:7px;font:500 13.5px/1 var(--t)}
.field input,.field select{width:100%;padding:13px 14px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font:400 16px/1.4 var(--t);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease)}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan-d);
  box-shadow:0 0 0 3px oklch(0.640 0.115 218 / .16)}
.field--err input,.field--err select{border-color:var(--err)}
.field__err{display:none;margin-top:6px;font-size:13px;color:var(--err)}
.field--err .field__err{display:block}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form__agree{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;
  font-size:13px;color:var(--ink-2)}
.form__agree input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--cyan-d)}

.ok{position:absolute;inset:0;z-index:4;background:var(--foam);border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:34px 26px}
.ok__ico{width:56px;height:56px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;margin-bottom:4px}
.ok h3{font-size:1.25rem}
.ok p{margin:0;max-width:30ch;font-size:15px;color:var(--ink-2)}
.ok button{margin-top:12px;padding:0 0 3px;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--ink-2);font:400 14px/1 var(--t);cursor:pointer}
.ok button:hover{color:var(--ink)}

/* ---------- ПОДВАЛ ---------- */
.foot{background:var(--night);color:oklch(0.962 0.012 220 / .8);
  padding:52px 0 32px;font-size:14.5px}
.foot__in{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between}
.foot__col h4{margin:0 0 14px;font:500 12px/1 var(--t);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice)}
.foot__col a,.foot__col p{display:block;margin:0 0 8px;color:inherit;
  transition:color .16s var(--ease)}
.foot__col a:hover{color:var(--cyan)}
.foot__bottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-d);
  font-size:13px;color:oklch(0.962 0.012 220 / .76)}

/* ---------- АДАПТИВ ---------- */
@media (max-width:940px){
  .sec__head{grid-template-columns:1fr;align-items:start}
  .book__in{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;gap:0;
    position:absolute;top:66px;left:0;right:0;
    background:var(--deep);border-bottom:1px solid var(--line-d);padding:6px var(--pad) 16px}
  .nav.open a{padding:14px 0;border-bottom:1px solid var(--line-d);font-size:16px}
  .burger{display:block}
  .hdr__act{margin-left:0;order:3}
  .hdr__in{gap:14px}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero__shot{aspect-ratio:4/3;min-height:0}
  .row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .row__time{grid-column:1;grid-row:2}
  .row__price{grid-column:2;grid-row:1/3;align-self:center}
  .facts{gap:20px 30px}
  .facts div{min-width:calc(50% - 30px)}
  .btn{width:100%}
  .hero__cta{flex-direction:column;align-items:stretch}
  .form__two{grid-template-columns:1fr}
  .foot__in{flex-direction:column;gap:26px}
  /* четыре портретных кадра в столбик растягивают страницу — кладём по два */
  .grid3{grid-template-columns:1fr 1fr;gap:10px}
  .shot figcaption{padding:12px 12px 11px;font-size:13.5px}
}