/* ═══════════════════════════════════════════════════════════
   СЕНС — бьюти клаб. Публичная часть.
   Светлая основа, кофейные тёмные блоки, зелёный — точечно.
   ═══════════════════════════════════════════════════════════ */

:root{
  --milk:      #F7F2EA;
  --cream:     #EFE6D8;
  --sand:      #E0D3BF;
  --sand-soft: rgba(224,211,191,.6);

  --coffee:    #2B211A;
  --coffee-3:  #4A3B2F;
  --forest:    #24382C;
  --forest-3:  #3C5646;

  --gold:      #A8853F;
  --gold-deep: #8A6A34;
  --gold-lt:   #DCC08A;
  --ink:       #2B211A;
  --ink-soft:  #6A5B4C;
  --milk-soft: rgba(247,242,234,.66);

  --serif-thin: "Cormorant Garamond", "Times New Roman", serif;
  --serif-head: "Prata", "Times New Roman", serif;
  /* У Archivo Black нет кириллицы: русские буквы берутся из жирного Manrope */
  --slab:       "Archivo Black", "Manrope", "Arial Black", sans-serif;
  --sans:       "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(18px, 4.5vw, 64px);
  --sec-y: clamp(48px, 7vw, 100px);
  --maxw: 1240px;
  --hdr-h: 74px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--milk);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,.95vw,16px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--milk); }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--coffee); color:var(--milk); padding:12px 20px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

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

.grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ═══════════ ТИПОГРАФИКА ═══════════
   светлый фон → Prata, тёмный фон → тонкий Cormorant, логотип → Cormorant */

.disp{
  font-family:var(--serif-head); font-weight:400;
  font-size:clamp(30px,5vw,70px); line-height:1.1;
  letter-spacing:-.01em; margin:0; color:var(--ink);
}
.disp em{ font-style:normal; color:var(--gold-deep); }

.disp--light{
  font-family:var(--serif-thin); font-weight:300;
  font-size:clamp(32px,5.4vw,76px); line-height:1.06;
  letter-spacing:0; color:var(--milk);
}

.shead{ margin-bottom:clamp(28px,3.4vw,52px); max-width:980px; }
.shead--center{ margin-inline:auto; text-align:center; }

/* ═══════════ КНОПКИ ═══════════ */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500;
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  padding:14px 26px; border:1px solid transparent; min-height:46px;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn--gold{ background:var(--gold-deep); color:var(--milk); border-color:var(--gold-deep); }
.btn--gold:hover{ background:transparent; color:var(--gold-deep); }
.btn--ghost{ border-color:var(--sand); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
.btn--ghost-light{ border-color:var(--forest-3); color:var(--milk); }
.btn--ghost-light:hover{ border-color:var(--gold-lt); color:var(--gold-lt); }

/* ═══════════ ШАПКА ═══════════ */

.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-block:12px;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.hdr.is-stuck{
  background:rgba(247,242,234,.95); backdrop-filter:blur(10px);
  padding-block:8px; box-shadow:0 1px 0 var(--sand);
}
.hdr__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:24px;
}

/* Логотип уже содержит надпись «СЕНС бьюти клаб» — текстового дубля рядом нет */
.mark{ text-decoration:none; display:block; flex:0 0 auto; }
.mark__logo{ width:clamp(42px,4.4vw,54px); height:auto; }

.nav{ margin-left:auto; display:flex; gap:clamp(14px,1.9vw,28px); }
.nav a{
  font-size:.78rem; letter-spacing:.08em; text-decoration:none;
  color:var(--ink-soft); transition:color .3s ease;
}
.nav a:hover{ color:var(--gold-deep); }
.nav a[aria-current="page"]{ color:var(--gold-deep); border-bottom:1px solid var(--gold-deep); }

.hdr__cta{ padding:10px 20px; font-size:.68rem; min-height:0; }

.burger{
  display:none; margin-left:auto;
  width:46px; height:46px; padding:0; position:relative;
  background:none; border:1px solid var(--sand); cursor:pointer;
}
.burger span{
  position:absolute; left:13px; width:20px; height:1px;
  background:var(--ink); transition:transform .3s ease;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ═══════════ ГЕРОЙ ═══════════ */

.hero{
  position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(115% 78% at 50% 4%, #FCF8F1 0%, var(--milk) 46%, var(--cream) 100%);
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hdr-h) + clamp(30px,7vh,80px)) 0 clamp(40px,7vh,72px);
}
/* Фон первого экрана — настоящий <img>, а не style-атрибут: так его разрешает CSP */
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.28;
}
.hero--photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(247,242,234,.55), rgba(247,242,234,.85));
}
.hero__in{
  position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
  flex:1; display:flex; flex-direction:column; justify-content:center;
}

.hero__eyebrow{
  margin:0 0 clamp(18px,3vh,34px);
  font-size:clamp(.6rem,1.7vw,.68rem);
  letter-spacing:clamp(.1em,.5vw,.26em);
  text-transform:uppercase; color:var(--ink-soft);
}

.hero__mark{
  margin:0; font-family:var(--serif-thin); font-weight:300;
  font-size:clamp(58px,22vw,300px); line-height:.88; color:var(--coffee);
  display:flex; justify-content:space-between; padding-inline:clamp(2px,1vw,14px);
}
.hero__mark span{ display:block; }

.hero__rule{ margin:clamp(16px,2.6vh,30px) 0 0; }
.hero__rule span{
  display:block; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
  transform-origin:center; transform:scaleX(0);
}
.is-loaded .hero__rule span{ transform:scaleX(1); transition:transform 1.4s cubic-bezier(.16,1,.3,1) .5s; }

.hero__latin{
  margin:16px 0 0; font-family:var(--slab); font-weight:700; font-synthesis:none;
  font-size:clamp(10px,1.2vw,15px); letter-spacing:.4em;
  text-transform:uppercase; color:var(--coffee); text-indent:.4em;
}
.hero__lead{
  margin:clamp(20px,3vh,32px) auto 0; max-width:44ch;
  color:var(--ink-soft); font-size:clamp(15px,1.05vw,17px);
}
.hero__cta{ margin-top:clamp(22px,3vh,34px); display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ═══════════ СЕКЦИИ ═══════════ */

.sec{ position:relative; padding-block:var(--sec-y); }
.sec--milk{ background:var(--milk); }
.sec--cream{ background:var(--cream); }
.sec--coffee{ background:var(--coffee); color:var(--milk); overflow:hidden; }
.sec--forest{ background:var(--forest); color:var(--milk); overflow:hidden; }
.sec--flush{ padding-block:0; background:var(--milk); }
.sec--coffee .wrap, .sec--forest .wrap{ position:relative; z-index:2; }

/* шапка внутренней страницы */
.phead{
  padding:calc(var(--hdr-h) + clamp(40px,7vw,90px)) 0 clamp(28px,4vw,56px);
  background:var(--cream); border-bottom:1px solid var(--sand);
}
.phead__note{ margin:16px 0 0; max-width:56ch; color:var(--ink-soft); font-size:.9rem; }

/* ═══════════ ПЛИТКА НАПРАВЛЕНИЙ ═══════════ */

.tiles{
  display:grid; gap:clamp(16px,1.8vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.tile{ background:var(--milk); border:1px solid var(--sand); display:flex; flex-direction:column; }
.tile__media{ display:block; text-decoration:none; overflow:hidden; }
.tile__media .ph__img{ width:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.tile__media:hover .ph__img{ transform:scale(1.04); }
.tile__body{ padding:clamp(20px,1.9vw,28px); display:flex; flex-direction:column; flex:1; }
.tile__t{
  font-family:var(--serif-head); font-weight:400;
  font-size:clamp(20px,1.8vw,26px); line-height:1.2; margin:0 0 12px;
}
.tile__d{ margin:0 0 16px; color:var(--ink-soft); font-size:.86rem; }
.tile__meta{
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--sand);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep);
}

/* заглушка и снимок */
.ph__img{ width:100%; object-fit:cover; }
.ph__img--landscape{ aspect-ratio:4/3; }
.ph__img--portrait{ aspect-ratio:4/5; }
.ph__img--tall{ aspect-ratio:3/4; }
/* Пока снимка нет, слот держит умеренную высоту — иначе пустота съедает экран */
.ph__slot{
  display:flex; align-items:center; justify-content:center; width:100%;
  aspect-ratio:4/3;
  background:var(--cream); border-bottom:1px dashed var(--sand);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.6;
}
.svc__media .ph__slot{ aspect-ratio:3/2; border:1px dashed var(--sand); }

/* ═══════════ О КЛУБЕ ═══════════ */

.club{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,72px); align-items:start; }
.club__r p{ margin:0 0 14px; max-width:46ch; color:var(--ink-soft); }
.facts{ margin:clamp(22px,3vw,38px) 0 0; }
.facts > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:13px 0; border-top:1px solid var(--sand);
}
.facts > div:last-child{ border-bottom:1px solid var(--sand); }
.facts dt{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
.facts dd{
  margin:0; text-align:right; font-family:var(--serif-head);
  font-size:clamp(17px,1.4vw,21px); color:var(--gold-deep);
}
.facts dd span{ font-family:var(--sans); font-size:.7rem; color:var(--ink-soft); margin-left:6px; }

/* ═══════════ ЛЕНТА ФОТО САЛОНА ═══════════ */

.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.strip__i{ display:block; overflow:hidden; aspect-ratio:1/1; }
.strip__i img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.strip__i:hover img{ transform:scale(1.05); }
.strip__i--empty{
  display:flex; align-items:center; justify-content:center;
  background:var(--cream); border:1px dashed var(--sand);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.6;
}
.strip__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-block:clamp(24px,3vw,40px);
}
.strip__foot p{ margin:0; color:var(--ink-soft); font-size:.88rem; }

/* ═══════════ ЗАБОТА ═══════════ */

.std{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,36px); }
.std__i{ border-top:1px solid var(--coffee-3); padding-top:18px; }
.std__i h3{
  margin:0 0 10px; font-family:var(--serif-thin); font-weight:400;
  font-size:clamp(19px,1.6vw,24px); color:var(--gold-lt);
}
.std__i p{ margin:0; color:var(--milk-soft); font-size:.83rem; }

/* ═══════════ СТРАНИЦА УСЛУГ ═══════════ */

.svc{
  display:grid; grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(24px,3.4vw,56px); align-items:start;
  padding-block:clamp(32px,4vw,60px); border-top:1px solid var(--sand);
}
.svc:first-of-type{ border-top:0; padding-top:0; }
.svc--plain{ grid-template-columns:1fr; }
.svc__media{ position:sticky; top:calc(var(--hdr-h) + 20px); }
.svc__t{ font-family:var(--serif-head); font-weight:400; font-size:clamp(24px,2.6vw,38px); margin:0 0 12px; }
.svc__d{ margin:0 0 10px; color:var(--ink-soft); max-width:52ch; }
.svc__meta{
  margin:0 0 24px; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-deep);
}
.svc__btn{ margin-top:24px; }

.rows{ list-style:none; margin:0; padding:0; }
.rows li{
  display:flex; align-items:baseline; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--sand-soft);
}
.rows li:last-child{ border-bottom:0; }
.rn{ font-size:.87rem; line-height:1.35; display:flex; flex-direction:column; }
.rn em{ font-style:normal; margin-top:1px; font-size:.72rem; color:var(--ink-soft); }
.rd{ flex:1 1 auto; min-width:20px; border-bottom:1px dotted var(--sand); transform:translateY(-4px); }
.rp{
  font-weight:600; font-size:.87rem; white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums; color:var(--gold-deep);
  min-width:106px; text-align:right;
}
.panel__note{
  margin:18px 0 0; font-size:.78rem; color:var(--ink-soft);
  padding-left:14px; border-left:2px solid var(--gold-deep);
}

/* ═══════════ ГАЛЕРЕЯ ═══════════ */

.grid{ display:grid; gap:clamp(10px,1.2vw,18px); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.grid__i{ margin:0; }
.grid__i img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.grid__i figcaption{ margin-top:8px; font-size:.76rem; color:var(--ink-soft); }
.grid__i--empty{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/5;
  background:var(--cream); border:1px dashed var(--sand);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.6;
}
.sec--cream .grid__i--empty{ background:var(--milk); }

/* ═══════════ КОНТАКТЫ ═══════════ */

.visit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,72px); align-items:start; }
.visit__lead{ margin:20px 0 0; max-width:42ch; color:var(--milk-soft); font-size:.9rem; }
.visit__cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.visit__r > div{
  display:grid; grid-template-columns:120px 1fr; gap:18px;
  padding:16px 0; border-top:1px solid var(--forest-3);
}
.visit__r > div:last-child{ border-bottom:1px solid var(--forest-3); }
.visit__r dt{ font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--gold-lt); }
.visit__r dd{ margin:0; font-size:.88rem; }
.visit__r dd span{ color:var(--milk-soft); font-size:.8rem; }
.visit__r dd a{ text-decoration:none; border-bottom:1px solid var(--forest-3); }
.visit__r dd a:hover{ color:var(--gold-lt); border-color:var(--gold-lt); }

.req{ margin:0; max-width:760px; }
.req > div{
  display:grid; grid-template-columns:190px 1fr; gap:18px;
  padding:13px 0; border-top:1px solid var(--sand);
}
.req > div:last-child{ border-bottom:1px solid var(--sand); }
.req dt{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
.req dd{ margin:0; font-size:.9rem; font-variant-numeric:tabular-nums; }

/* полоса призыва */
.band__in{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.band__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ═══════════ ЮРИДИЧЕСКИЕ СТРАНИЦЫ И ОШИБКИ ═══════════ */

.legal{ max-width:760px; }
.legal h2{
  font-family:var(--serif-head); font-weight:400;
  font-size:clamp(20px,1.8vw,26px); margin:36px 0 10px;
}
.legal p{ margin:0 0 12px; color:var(--ink-soft); }

.phead--error{ min-height:70vh; display:flex; align-items:center; }
.error__actions{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.error__logo{ width:64px; height:auto; margin-bottom:28px; }

.grid__i a{ display:block; }

/* ═══════════ ПОДВАЛ ═══════════ */

.foot{ background:var(--coffee); color:var(--milk); padding-block:clamp(34px,4vw,60px); }
.foot__in{ text-align:center; }
.foot__logo{ width:56px; height:auto; margin:0 auto 18px; color:var(--gold-lt); }
.foot__row{
  margin:0 0 20px; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--milk-soft);
}
.foot__row i, .foot__req i{ font-style:normal; color:var(--gold-lt); margin-inline:6px; }
.foot__nav{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.foot__nav a{ font-size:.8rem; color:var(--milk-soft); text-decoration:none; }
.foot__nav a:hover{ color:var(--gold-lt); }
.foot__req{ margin:0 0 8px; font-size:.74rem; color:var(--milk-soft); }
.foot__fine{ margin:0; font-size:.7rem; color:rgba(247,242,234,.4); }

/* ═══════════ ПОЯВЛЕНИЕ ═══════════ */

.r{ opacity:0; transform:translateY(18px); }
.is-in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.hero .r{ transition-delay:calc(var(--d,0) * 1ms); }

/* ═══════════ АДАПТИВ ═══════════ */

@media (max-width:1080px){
  .std{ grid-template-columns:repeat(2,1fr); }
  .strip{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  :root{ --hdr-h:66px; }
  .club, .visit{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; }
  .svc__media{ position:static; max-width:420px; }
  .hero__mark{ letter-spacing:0; }

  .hdr__cta{ display:none; }
  .burger{ display:block; }

  .nav{
    position:fixed; inset:0 0 auto; top:0; margin:0;
    padding:calc(var(--hdr-h) + 24px) var(--pad) 36px;
    flex-direction:column; gap:0; background:var(--milk);
    transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
    z-index:-1; box-shadow:0 20px 40px rgba(43,33,26,.08);
  }
  .nav.is-open{ transform:none; }
  .nav a{
    font-size:1.4rem; font-family:var(--serif-head); font-weight:400;
    color:var(--ink); padding:14px 0; border-bottom:1px solid var(--sand);
  }
  .nav a[aria-current="page"]{ color:var(--gold-deep); }
  .hdr.is-menu{ background:var(--milk); }
}

@media (max-width:640px){
  .ph__slot, .svc__media .ph__slot{ aspect-ratio:16/9; }
  .std{ grid-template-columns:1fr; }
  .visit__r > div, .req > div{ grid-template-columns:1fr; gap:5px; }
  .facts > div{ flex-direction:column; align-items:flex-start; gap:2px; }
  .facts dd{ text-align:left; }
  .rows li{ flex-wrap:wrap; }
  .rd{ display:none; }
  .rn{ flex:1 1 60%; }
  .rp{ min-width:0; margin-left:auto; }
  .strip__foot{ flex-direction:column; align-items:flex-start; }
  .band__in{ flex-direction:column; align-items:flex-start; }
  .mark__logo{ width:40px; }
  .btn{ padding:14px 20px; font-size:.72rem; }
  .hero__cta .btn, .band__cta .btn, .visit__cta .btn{ flex:1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  .r{ opacity:1 !important; transform:none !important; }
  .hero__rule span{ transform:scaleX(1) !important; transition:none !important; }
  *{ transition-duration:.01ms !important; }
}