/* Б · Бумага — светлая база, тёмно-синие акценты, тёмные секции точечно */
:root{
  --bg:#F3F1EC; --fg:#111113; --muted:#4A4A4E;
  --line:rgba(17,17,19,.14); --accent:#1B2A41;
  --band-bg:#EAE7E0; --invert-bg:#1B2A41; --invert-fg:#F3F1EC;
}
section.inverted{background:#111113;color:#F3F1EC;
  --fg:#F3F1EC; --muted:#CFCCC4; --line:rgba(243,241,236,.14); --accent:#8FA0B8;
  --band-bg:#161618; --invert-bg:#F3F1EC; --invert-fg:#111113}
.hero{display:grid;grid-template-columns:1fr;min-height:100svh;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:.92fr 1.08fr}}
.hero .shot{position:relative;background:#E7E4DD;height:52svh;overflow:hidden;order:-1}
@media(min-width:900px){.hero .shot{height:100svh}}
.hero .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero .copy{padding:clamp(30px,5vw,72px) clamp(20px,5vw,72px)}
.hero h1{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,6.6vw,78px);line-height:1;margin:0 0 22px}
.hero h1::after{content:"";display:block;width:64px;height:2px;background:var(--accent);margin-top:22px}
.hero .role{font-size:clamp(15px,1.6vw,18px);color:#3B3B40;max-width:36ch;margin:22px 0 18px}
.hero .promise{font-family:"PT Serif",Georgia,serif;font-style:italic;
  font-size:clamp(16px,1.9vw,22px);color:var(--accent);max-width:30ch;margin:0 0 32px}
.hero .actions{margin-bottom:38px}
.btn-main{background:var(--accent);color:#F3F1EC;border-color:var(--accent)}
.btn-ghost{border-color:var(--accent);color:var(--accent)}
.btn-ghost:hover{background:var(--accent);color:#F3F1EC}
.nav{background:rgba(243,241,236,.92);border-bottom:1px solid var(--line)}
.nav.solid{background:#F3F1EC}
.h2{font-weight:600}

/* На телефоне светлая шапка не должна лежать поверх кадра — голова уходила под плашку.
   Делаем её sticky: занимает своё место в потоке, но остаётся видимой при прокрутке. */
@media(max-width:899px){
  .nav{position:sticky;top:0;background:#F3F1EC;border-bottom:1px solid var(--line)}
  .hero{min-height:auto}
  /* кадр показываем целиком, во всю ширину экрана: без обрезки и без полей.
     aspect-ratio вместе с max-height сжимал блок по ширине — отсюда полоса справа. */
  .hero .shot{width:100%;height:auto;max-height:none;aspect-ratio:auto}
  .hero .shot img{width:100%;height:auto;object-fit:contain}
}