:root {
  --dark: #172228;
  --sea: #79b8c5;
  --sea-dark: #4b99aa;
  --white: #ffffff;
  --gray: #f2f5f5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--dark);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
}

/* Шапка */
.header {
  position: relative;
  z-index: 10;
  height: 104px;
  padding: 0 clamp(24px, 10vw, 160px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}
.logo {
  display: flex;
  align-items: center;
  gap: 13px;
}
.logo-text { display: flex; flex-direction: column; }
.logo-text strong {
  font: 400 20px/1.05 Georgia, serif;
  letter-spacing: 0.02em;
}
.logo-text small {
  margin-top: 4px;
  color: #758086;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-mark {
  position: relative;
  width: 46px;
  height: 46px;
  display: block;
  border: 1px solid rgba(75, 153, 170, 0.55);
  border-radius: 50%;
  color: var(--dark);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.logo-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  right: 7px;
  height: 1px;
  background: var(--sea);
  transform: rotate(-38deg);
}

.logo-mark span {
  position: absolute;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.logo-mark span:first-child {
  top: 5px;
  left: 9px;
}

.logo-mark span:last-child {
  right: 8px;
  bottom: 5px;
}

.logo:hover .logo-mark {
  color: var(--sea-dark);
  border-color: var(--sea-dark);
  transform: rotate(5deg);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.logo-text small {
  margin-top: 6px;
  color: #758086;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.21em;
  text-transform: uppercase;
}
.menu { display: flex; gap: clamp(22px, 2.8vw, 48px); font-size: 13px; }
.menu a {
  position: relative;
  padding: 14px 0;
  transition: color 0.25s ease;
}

.menu,
.button {
  font-weight: 500;
  letter-spacing: 0.04em;
}

.menu a:hover {
  color: var(--sea-dark);
}

/* Главный баннер */
.hero {
  position: relative;
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: white;
  background: url("img/5.jpg") 50% 42% / cover no-repeat;
}
.hero-darkening {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.35) 13%,
      rgba(255, 255, 255, 0) 32%
    ),
    linear-gradient(
      90deg,
      rgba(10, 23, 28, 0.68) 0%,
      rgba(10, 23, 28, 0.38) 46%,
      rgba(10, 23, 28, 0.08) 78%
    );
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin-left: clamp(24px, 10vw, 160px);
  padding: 70px 0 110px;
}
.subtitle {
  margin: 0 0 27px;
  color: #d5edf1;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(58px, 7vw, 112px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.035em;
}
.description {
  margin: 28px 0 36px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding: 18px 22px 18px 26px;
  background: var(--sea);
  color: #10242a;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: 0.25s ease;
}
.button span { font-size: 18px; }
.button:hover {
  background: var(--white);
  color: var(--sea-dark);
  transform: translateY(-2px);
}
.scroll-down {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 5vw, 80px);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-down i { width: 35px; height: 1px; background: var(--sea); }

/* Заготовка следующего раздела */
.about-preview h2 {
  margin: 24px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px, 5.5vw, 80px);
  font-weight: 500;
  line-height: 0.95;
}
.about-preview p {
  color: var(--sea-dark);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.about-preview h2 {
  margin: 24px 0 0;
  font: 400 clamp(36px, 5vw, 72px)/1.05 Georgia, serif;
}

/* Адаптация под телефон */
@media (max-width: 800px) {
  .header {
  height: 82px;
  padding: 0 20px;
}

/* Минималистичный фотографический логотип */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.photo-logo {
  position: relative;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
}

/* Уголки кадра */
.photo-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--sea-dark), var(--sea-dark)) left top / 13px 1px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) left top / 1px 13px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) right top / 13px 1px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) right top / 1px 13px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) left bottom / 13px 1px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) left bottom / 1px 13px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) right bottom / 13px 1px no-repeat,
    linear-gradient(var(--sea-dark), var(--sea-dark)) right bottom / 1px 13px no-repeat;
}

/* Объектив */
.photo-logo-lens {
  width: 23px;
  height: 23px;
  border: 1px solid var(--dark);
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.photo-logo-lens::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  margin: 5px;
  border: 1px solid var(--sea-dark);
  border-radius: 50%;
}

.photo-logo-lens::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  margin: 9px;
  background: var(--dark);
  border-radius: 50%;
}

.logo:hover .photo-logo-lens {
  transform: rotate(90deg) scale(1.08);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 0.95;
}

.logo-text small {
  margin-top: 6px;
  color: #758086;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
  .menu { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary {
    width: 40px;
    height: 40px;
    padding: 9px 5px;
    display: grid;
    align-content: center;
    gap: 7px;
    list-style: none;
    cursor: pointer;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { height: 1px; background: var(--dark); }
  .mobile-menu summary span:last-child { width: 20px; justify-self: end; }
  .mobile-menu nav {
    position: absolute;
    top: 58px;
    right: -20px;
    width: 100vw;
    padding: 22px;
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 16px 25px rgba(18, 34, 39, 0.08);
  }
  .mobile-menu nav a {
    padding: 13px 0;
    border-bottom: 1px solid #edf0f0;
    font: 18px Georgia, serif;
  }
  .hero {
    min-height: calc(100svh - 76px);
    align-items: flex-end;
    background-position: 55% center;
  }
.hero-darkening {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0) 25%
    ),
    linear-gradient(
      0deg,
      rgba(8, 20, 24, 0.76) 0%,
      rgba(8, 20, 24, 0.08) 75%
    );
}
  .hero-content { margin: 0; padding: 0 22px 100px; }
  .subtitle { margin-bottom: 18px; font-size: 9px; }
  h1 { font-size: clamp(46px, 15vw, 68px); }
  .description { margin: 20px 0 28px; font-size: 14px; }
  .button { width: 100%; justify-content: space-between; }
  .scroll-down { display: none; }
  .about-preview { min-height: 330px; padding: 70px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.hero-darkening {
  position: absolute;
  inset: 0;
  background:
    /* Белый градиент сверху */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.35) 13%,
      rgba(255, 255, 255, 0) 32%
    ),

    /* Белый градиент снизу */
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.65)
      rgba(255, 255, 255, 0.25) 12%,
      rgba(255, 255, 255, 0) 30%
    ),

    /* Затемнение слева для текста */
    linear-gradient(
      90deg,
      rgba(10, 23, 28, 0.68) 0%,
      rgba(10, 23, 28, 0.38) 46%,
      rgba(10, 23, 28, 0.08) 78%
    );
}
/* Убираем стандартный синий цвет и подчёркивание ссылок */
a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/* Убираем кнопку-треугольник на компьютере */
.mobile-menu {
  display: none;
}

/* Виды съёмок */
.shooting-types {
  padding: 120px clamp(24px, 10vw, 160px) 150px;
  background: #ffffff;
}

.section-heading {
  margin-bottom: 65px;
}

.section-heading p {
  margin: 0 0 15px;
  color: var(--sea-dark);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 6vw, 86px);
  font-weight: 500;
  line-height: 0.9;
}

.shooting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(25px, 3vw, 55px);
  align-items: start;
}

.shooting-card-down {
  margin-top: 90px;
}

.shooting-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #eef1f1;
}

.shooting-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.shooting-card:hover .shooting-image img {
  transform: scale(1.035);
}

.shooting-info {
  position: relative;
  padding: 25px 0 0 37px;
}

.shooting-info > span {
  position: absolute;
  top: 31px;
  left: 0;
  color: var(--sea-dark);
  font-size: 9px;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

.shooting-info h3 {
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 500;
  line-height: 1;
}

.shooting-info p {
  max-width: 310px;
  margin: 0 0 19px;
  color: #667277;
  font-size: 14px;
  line-height: 1.7;
}

.shooting-info a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sea);
  font-size: 13px;
}

.shooting-info a i {
  font-style: normal;
  transition: transform 0.25s ease;
}

.shooting-info a:hover i {
  transform: translateX(5px);
}

/* Рамка подчёркивает плёночный характер фотографии */
.creative-card {
  margin-top: 25px;
}

.creative-frame {
  padding: 14px;
  background: #f4f3f0;
  box-shadow: 0 18px 45px rgba(23, 34, 40, 0.08);
  transform: rotate(1.2deg);
  transition: transform 0.4s ease;
}

.creative-frame .shooting-image {
  aspect-ratio: 3 / 4;
}

.creative-card:hover .creative-frame {
  transform: rotate(0);
}

/* Портфолио */
.portfolio {
  padding: 130px clamp(24px, 5vw, 80px) 150px;
  background: #f2f5f5;
}

.portfolio-heading {
  max-width: 1530px;
  margin: 0 auto 70px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.portfolio-heading p {
  margin: 0 0 15px;
  color: var(--sea-dark);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.portfolio-heading h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(55px, 7vw, 105px);
  font-weight: 500;
  line-height: 0.8;
}

.portfolio-heading > span {
  color: #748085;
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
}

.portfolio-grid {
  max-width: 1530px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.5vw, 25px);
  align-items: start;
}

.portfolio-item {
  position: relative;
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  background: #dfe4e4;
}

.portfolio-item.portrait {
  aspect-ratio: 3 / 4;
}

.portfolio-item.landscape {
  aspect-ratio: 4 / 3;
}

.portfolio-item.wide {
  grid-column: span 8;
  aspect-ratio: 16 / 9;
}

.portfolio-item.offset {
  margin-top: 65px;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform 0.8s ease,
    filter 0.5s ease;
}

.portfolio-item:hover img {
  transform: scale(1.035);
  filter: brightness(0.78);
}

.portfolio-item figcaption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.portfolio-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Индивидуальное кадрирование */
.portfolio-item:nth-child(1) img {
  object-position: center 25%;
}

.portfolio-item:nth-child(2) img {
  object-position: center;
}

.portfolio-item:nth-child(3) img {
  object-position: center 30%;
}

.portfolio-item:nth-child(4) img {
  object-position: center 28%;
}

.portfolio-item:nth-child(5) img {
  object-position: center 40%;
}

.portfolio-item:nth-child(9) img {
  object-position: center 25%;
}

/* Мобильное меню показываем только на телефоне */
@media (max-width: 800px) {
  .mobile-menu {
    display: block;
  }

.photo-logo {
  width: 38px;
  height: 38px;
}

.photo-logo-lens {
  width: 20px;
  height: 20px;
}

.photo-logo-lens::before {
  width: 10px;
  height: 10px;
  margin: 4px;
}

.photo-logo-lens::after {
  margin: 8px;
}

.logo-text strong {
  font-size: 20px;
}

  .mobile-menu summary {
    list-style: none;
  }

  .mobile-menu summary::marker {
    content: "";
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

.shooting-types {
  padding: 80px 22px 100px;
}

.section-heading {
  margin-bottom: 42px;
}

.shooting-grid {
  grid-template-columns: 1fr;
  gap: 65px;
}

.shooting-card-down,
.creative-card {
  margin-top: 0;
}

.shooting-image {
  aspect-ratio: 4 / 5;
}

.shooting-info {
  padding-top: 22px;
}

.creative-frame {
  padding: 10px;
  transform: rotate(0.7deg);
}

.portfolio {
  padding: 85px 14px 100px;
}

.portfolio-heading {
  margin: 0 8px 45px;
  align-items: flex-start;
}

.portfolio-heading > span {
  display: none;
}

.portfolio-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.portfolio-item,
.portfolio-item.wide {
  grid-column: span 1;
}

.portfolio-item.portrait {
  aspect-ratio: 3 / 4;
}

.portfolio-item.landscape,
.portfolio-item.wide {
  aspect-ratio: 3 / 4;
}

.portfolio-item.offset {
  margin-top: 35px;
}

.portfolio-item figcaption {
  display: none;
}

.portfolio-item.full-width,
.portfolio-item.half-width {
  grid-column: span 1;
  aspect-ratio: 3 / 4;
}

@media (max-width: 800px) {
  .portfolio-item:nth-child(n) {
    transform: none;
  }

  .portfolio-item:nth-child(even) {
    transform: translateY(18px) rotate(0.4deg);
  }

  .portfolio-item:nth-child(odd) {
    transform: rotate(-0.4deg);
  }
}

/* Плёночное оформление зернистых кадров */
.film-photo {
  padding: 12px 12px 42px;
  overflow: visible;
  background: #f5f2ec;
  box-shadow: 0 20px 45px rgba(23, 34, 40, 0.13);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.film-photo::after {
  content: "35 mm · Владивосток";
  position: absolute;
  left: 15px;
  bottom: 14px;
  color: #778084;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.film-photo img {
  height: 100%;
  filter: none;
}

.film-left {
  transform: rotate(-1deg);
}

.film-right {
  transform: rotate(1deg);
}

.film-photo:hover {
  z-index: 2;
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 28px 55px rgba(23, 34, 40, 0.18);
}

.film-photo:hover img {
  filter: brightness(0.85);
}

.film-photo {
  padding: 7px 7px 29px;
}

.film-photo::after {
  left: 9px;
  bottom: 9px;
  font-size: 6px;
}

.film-left {
  transform: rotate(-0.6deg);
}

.film-right {
  transform: rotate(0.6deg);
}

}

/* Увеличиваем пункты меню */
.menu {
  gap: clamp(32px, 3.5vw, 64px);
  font-size: 18px;
  font-weight: 400;
}

.menu a {
  padding: 16px 0;
}
body,
.logo-text strong,
.logo-text small,
.menu,
.mobile-menu,
.subtitle,
.description,
.button,
.scroll-down,
h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.button span {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.button:hover span {
  transform: translateX(4px);
}
/* Белая кнопка */
a.button,
a.button:visited {
  background-color: #ffffff;
  color: #172228;
  border: 1px solid #ffffff;
  text-decoration: none;
}

/* Морская при наведении */
a.button:hover {
  background-color: #79b8c5;
  color: #172228;
  border-color: #79b8c5;
}

/* Плёночные фотографии */
.portfolio-item:has(img[src*="portfolio-01"]),
.portfolio-item:has(img[src*="portfolio-03"]),
.portfolio-item:has(img[src*="portfolio-05"]) {
  padding: 12px 12px 42px !important;
  overflow: visible !important;
  background: #f5f2ec !important;
  box-shadow: 0 20px 45px rgba(23, 34, 40, 0.16);
}

.portfolio-item:has(img[src*="portfolio-01"]),
.portfolio-item:has(img[src*="portfolio-05"]) {
  transform: rotate(-1deg);
}

.portfolio-item:has(img[src*="portfolio-03"]) {
  transform: rotate(1deg);
}

.portfolio-item:has(img[src*="portfolio-01"])::after,
.portfolio-item:has(img[src*="portfolio-03"])::after,
.portfolio-item:has(img[src*="portfolio-05"])::after {
  content: "35 mm · Владивосток";
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: #778084;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Большая фотография на всю ширину */
.portfolio-item.full-width {
  grid-column: span 12;
  aspect-ratio: 16 / 7;
}

/* Две симметричные фотографии в последней строке */
.portfolio-item.half-width {
  grid-column: span 6;
  aspect-ratio: 4 / 5;
}

/* Ровная сетка портфолио 3 × 3 */
.portfolio-grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.portfolio-item,
.portfolio-item.wide,
.portfolio-item.full-width,
.portfolio-item.half-width,
.portfolio-item.landscape {
  grid-column: span 1;
  aspect-ratio: 3 / 4;
  margin-top: 0;
}

.portfolio-item img {
  object-fit: cover;
}

/* Рамки для плёночных кадров */
.portfolio-item:has(img[src*="portfolio-01"]),
.portfolio-item:has(img[src*="portfolio-03"]),
.portfolio-item:has(img[src*="portfolio-05"]),
.portfolio-item:has(img[src*="portfolio-08"]),
.portfolio-item:has(img[src*="portfolio-11"]) {
  padding: 10px 10px 36px !important;
  overflow: visible !important;
  background: #f5f2ec !important;
  box-shadow: 0 18px 40px rgba(23, 34, 40, 0.14);
}

.portfolio-item:has(img[src*="portfolio-01"])::after,
.portfolio-item:has(img[src*="portfolio-03"])::after,
.portfolio-item:has(img[src*="portfolio-05"])::after,
.portfolio-item:has(img[src*="portfolio-08"])::after,
.portfolio-item:has(img[src*="portfolio-11"])::after {
  content: "35 mm · Владивосток";
  position: absolute;
  left: 13px;
  bottom: 12px;
  color: #778084;
  font-size: 7px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

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

  .portfolio-item,
  .portfolio-item.wide,
  .portfolio-item.full-width,
  .portfolio-item.half-width,
  .portfolio-item.landscape {
    grid-column: span 1;
    aspect-ratio: 3 / 4;
  }
}

/* Подписи на плёночных фотографиях */
.film-photo figcaption {
  z-index: 3;
  left: 20px;
  bottom: 52px;
  padding: 6px 10px;
  background: rgba(23, 34, 40, 0.7);
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  backdrop-filter: blur(4px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.film-photo:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.film-photo::after {
  z-index: 3;
  color: #59656a !important;
}

/* Отступ после блока «Виды съёмок» */
.shooting-types {
  padding-bottom: 210px;
}

/* Отступ между видами съёмок и портфолио */
.shooting-types {
  padding-bottom: 210px;
}

/* Отступ на телефоне */
@media (max-width: 800px) {
  .shooting-types {
    padding-bottom: 130px;
  }
}

@media (max-width: 800px) {
  .section-heading p,
  .benefits-heading > p {
    font-size: 13px;
  }

  .shooting-info p,
  .benefit-card p {
    font-size: 17px;
  }

  .shooting-info a {
    font-size: 15px;
  }

  .benefits-heading > span {
    font-size: 17px;
  }
}

/* Кнопка Telegram под портфолио */
.portfolio-footer {
  margin-top: 75px;
  display: flex;
  justify-content: center;
}

.telegram-button {
  min-width: 310px;
  padding: 18px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  border: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.telegram-button span {
  font-size: 21px;
  transition: transform 0.3s ease;
}

.telegram-button:hover {
  background: var(--sea);
  color: var(--dark);
  border-color: var(--sea);
}

.telegram-button:hover span {
  transform: translateX(5px);
}

@media (max-width: 800px) {
  .portfolio-footer {
    margin-top: 50px;
  }

  .telegram-button {
    width: 100%;
    min-width: 0;
  }
}

/* Опускаем блок портфолио ниже */
.portfolio {
  margin-top: 80px;
}

/* Опускаем кнопку под фотографиями */
.portfolio-footer {
  margin-top: 110px;
}


/* Лёгкая небрежность в портфолио */
.portfolio-item {
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

.portfolio-item:nth-child(1) {
  transform: rotate(-0.8deg) translateY(12px);
}

.portfolio-item:nth-child(2) {
  transform: rotate(0.6deg) translateY(-18px);
}

.portfolio-item:nth-child(3) {
  transform: rotate(-0.4deg) translateY(22px);
}

.portfolio-item:nth-child(4) {
  transform: rotate(0.7deg) translateY(-8px);
}

.portfolio-item:nth-child(5) {
  transform: rotate(-0.6deg) translateY(25px);
}

.portfolio-item:nth-child(6) {
  transform: rotate(0.5deg) translateY(-15px);
}

.portfolio-item:nth-child(7) {
  transform: rotate(-0.5deg) translateY(18px);
}

.portfolio-item:nth-child(8) {
  transform: rotate(0.8deg) translateY(-12px);
}

.portfolio-item:nth-child(9) {
  transform: rotate(-0.7deg) translateY(20px);
}

.portfolio-item:hover {
  z-index: 5;
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow: 0 25px 55px rgba(23, 34, 40, 0.18);
}

/* Более спокойная анимация портфолио */
.portfolio-item:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.007);
  box-shadow: 0 14px 30px rgba(23, 34, 40, 0.12);
}

.portfolio-item:hover img {
  transform: scale(1.015);
}

/* Морской переход между блоками */
.sea-divider {
  position: relative;
  z-index: 4;
  min-height: 100px;
  padding: 25px clamp(24px, 10vw, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #ffffff;
  color: var(--sea-dark);
}

.sea-divider-line {
  width: clamp(45px, 7vw, 110px);
  height: 1px;
  background: rgba(75, 153, 170, 0.45);
}

.sea-anchor {
  display: inline-block;
  font-size: 23px;
  transition: transform 0.35s ease;
}

.sea-divider-text {
  color: #68757a;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sea-divider:hover .sea-anchor {
  transform: translateY(4px);
}

/* Фотоаппарат и якорь в логотипе */
.brand-symbol {
  position: relative;
  width: 54px;
  height: 42px;
  flex: 0 0 54px;
}

.brand-camera {
  position: absolute;
  top: 5px;
  left: 0;
  width: 39px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sea-dark);
  border-radius: 4px;
}

.brand-camera::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 7px;
  width: 13px;
  height: 5px;
  border: 1px solid var(--sea-dark);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.brand-lens {
  width: 14px;
  height: 14px;
  border: 1px solid var(--dark);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #ffffff;
}

.brand-anchor {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: #ffffff;
  color: var(--sea-dark);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.35s ease;
}

.logo:hover .brand-anchor {
  transform: translateY(3px) rotate(5deg);
}

.site-logo {
  width: clamp(196px, 19.6vw, 273px);
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  .site-logo {
    width: 168px;
  }
}


.anchor-transition {
  min-height: 110px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  background: #ffffff;
}

.anchor-transition img {
  width: 26px;
  height: auto;
  transition: transform 0.3s ease;
}

.anchor-transition span {
  width: clamp(45px, 7vw, 100px);
  height: 1px;
  background: rgba(75, 153, 170, 0.4);
}

.anchor-transition small {
  color: #65757a;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.anchor-transition:hover img {
  transform: translateY(4px);
}

/* Лёгкий морской фон блока «Виды съёмок» */
.shooting-types {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 15% 10%,
      rgba(121, 184, 197, 0.12),
      transparent 35%
    ),
    #ffffff;
}

/* Тонкие линии волн */
.shooting-types::before {
  content: "";
  position: absolute;
  left: -5%;
  bottom: 35px;
  width: 110%;
  height: 150px;
  pointer-events: none;
  opacity: 0.22;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      transparent 61%,
      #79b8c5 62%,
      transparent 63%
    );

  background-size: 180px 80px;
  background-repeat: repeat-x;
}

/* Якорь-водяной знак в портфолио */
.portfolio {
  position: relative;
  overflow: hidden;
}

.portfolio::before {
  content: "";
  position: absolute;
  top: 80px;
  right: -25px;
  width: 190px;
  height: 230px;
  background: url("img/anchor-element.svg") center / contain no-repeat;
  opacity: 0.035;
  transform: rotate(8deg);
  pointer-events: none;
}

/* Контент остаётся над декором */
.shooting-types > *,
.portfolio > * {
  position: relative;
  z-index: 1;
}

/* Убираем тёмный фон у подписей */
.portfolio-item figcaption,
.film-photo figcaption {
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}


/* Отступ после кнопки Telegram */
.portfolio-footer {
  padding-bottom: 70px;
}

@media (max-width: 800px) {
  .portfolio-footer {
    padding-bottom: 50px;
  }
}


/* Крупнее второстепенные надписи в блоке «Виды съёмок» */
.section-heading p {
  font-size: 15px;
}

.shooting-info > span {
  font-size: 13px;
}

.shooting-info p {
  font-size: 17px;
  line-height: 1.65;
}

.shooting-info a {
  font-size: 16px;
}


/* =========================================================
   ОБО МНЕ — чистая редакционная композиция
   ========================================================= */
.about {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 10vw, 155px) max(24px, calc((100% - 1500px) / 2));
  background: #dcecef;
  color: #172228;
}

/* Финальные размеры и плавающая навигация */
@media (min-width:801px) {
  .site-logo { width:clamp(202px,16.9vw,273px); }
  .header { padding-left:max(24px,calc((100% - 1500px)/2)); padding-right:max(24px,calc((100% - 1500px)/2)); }
}

/* Компактнее финальные фотографии в контактах */
.contact-photo-stack { width:min(500px,48vw); height:158px; margin:-28px auto 12px; }
.contact-mini-photo-one { top:28px; width:142px; height:104px; }
.contact-mini-photo-two { width:154px; height:116px; }
.contact-mini-photo-three { top:30px; width:142px; height:102px; }

/* Убираем полосы в футере */
.footer-socials,
.footer-bottom { border-top:0; border-bottom:0; }
.footer-bottom { margin-top:10px; padding-top:6px; }

.back-to-top {
  position:fixed;
  z-index:40;
  left:20px;
  bottom:20px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(23,34,40,.18);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(23,34,40,.1);
  color:#172228;
  font:400 23px/1 Manrope,sans-serif;
  backdrop-filter:blur(8px);
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.back-to-top:hover { background:#79b8c5; border-color:#79b8c5; transform:translateY(-3px); }

.side-navigation {
  position:fixed;
  z-index:40;
  top:50%;
  right:18px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid rgba(23,34,40,.14);
  border-radius:22px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 26px rgba(23,34,40,.09);
  backdrop-filter:blur(9px);
  transform:translateY(-50%);
}
.side-navigation a { position:relative; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#657277; font:500 9px/1 Manrope,sans-serif; transition:background .25s ease,color .25s ease; }
.side-navigation a::before { content:attr(data-label); position:absolute; right:36px; padding:7px 10px; background:#fff; border:1px solid rgba(23,34,40,.14); color:#172228; white-space:nowrap; opacity:0; visibility:hidden; transform:translateX(5px); transition:.25s ease; }
.side-navigation a:hover { background:#79b8c5; color:#172228; }
.side-navigation a:hover::before { opacity:1; visibility:visible; transform:translateX(0); }

@media (max-width:800px) {
  .contact-photo-stack { width:min(92%,330px); height:118px; margin:-10px auto 10px; }
  .contact-mini-photo-one { width:92px; height:74px; }
  .contact-mini-photo-two { width:105px; height:82px; }
  .contact-mini-photo-three { width:92px; height:73px; }
  .side-navigation { display:none; }
  .back-to-top { left:14px; bottom:14px; width:40px; height:40px; }
}

/* Финальная компоновка шапки, контактов и футера */
@media (min-width: 801px) {
  .header { padding-left:clamp(24px,5vw,90px); padding-right:clamp(24px,5vw,90px); gap:25px; }
  .site-logo { width:clamp(155px,13vw,210px); }
  .menu { gap:clamp(10px,1.35vw,25px); white-space:nowrap; }
  .menu a { font-size:14px; }
}

.contact { grid-template-columns:1.15fr .85fr; }
.contact-photo-stack { grid-column:1/-1; position:relative; width:min(720px,65vw); height:230px; margin:-45px auto 20px; }
.contact-mini-photo { position:absolute; margin:0; padding:7px 7px 19px; background:#fff; box-shadow:0 12px 28px rgba(23,34,40,.15); }
.contact-mini-photo::before { content:""; position:absolute; z-index:2; top:-9px; left:50%; width:64px; height:19px; background:rgba(218,201,164,.78); clip-path:polygon(2% 8%,98% 0,100% 90%,96% 100%,1% 94%,0 12%); transform:translateX(-50%) rotate(-3deg); }
.contact-mini-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.contact-mini-photo-one { left:0; top:37px; width:205px; height:150px; transform:rotate(-5deg); }
.contact-mini-photo-two { left:50%; top:3px; z-index:2; width:220px; height:165px; transform:translateX(-50%) rotate(2.5deg); }
.contact-mini-photo-three { right:0; top:42px; width:205px; height:148px; transform:rotate(-3deg); }

.footer { display:block; padding:25px max(24px,calc((100% - 1500px)/2)) 20px; }
.footer-main { display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; }
.footer-brand img { width:165px; }
.footer-main nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; }
.footer-main nav a { color:rgba(255,255,255,.72); font-size:13px; }
.footer-socials { display:flex; gap:7px; }
.footer-socials a { width:32px; height:32px; }
.footer-bottom { margin-top:18px; padding-top:14px; display:flex; justify-content:space-between; gap:30px; border-top:1px solid rgba(255,255,255,.12); }

@media (max-width:800px) {
  .contact-photo-stack { width:min(110%,410px); height:165px; margin:-20px auto 20px -5%; }
  .contact-mini-photo { padding:5px 5px 14px; }
  .contact-mini-photo-one { width:112px; height:93px; }
  .contact-mini-photo-two { width:130px; height:105px; }
  .contact-mini-photo-three { width:112px; height:92px; }
  .footer { padding:25px 22px 20px; }
  .footer-main { grid-template-columns:1fr auto; gap:20px; }
  .footer-main nav { grid-column:1/-1; justify-content:flex-start; }
  .footer-bottom { display:block; }
}

/* Последние правки: кадрирование, контакты и компактный футер */
.pricing-mini-photo-three img { object-position: center 22%; }
.pricing-mini-photo-three img { object-position: center 42%; }

.contact-card-head { margin-bottom:28px; display:flex; justify-content:space-between; gap:25px; align-items:baseline; }
.contact-card-head p { margin:0; font:500 31px/1 "Cormorant Garamond",Georgia,serif; }
.contact-card-head span { color:#718085; font-size:13px; }
.contact-compact-links { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.contact-compact-links a { padding:15px 10px; border:1px solid rgba(23,34,40,.14); text-align:center; color:#172228; font-size:14px; transition:background .3s ease,border-color .3s ease; }
.contact-compact-links a:hover { background:#79b8c5; border-color:#79b8c5; }
.contact-call { margin-top:26px; padding-top:22px; display:flex; justify-content:space-between; align-items:baseline; gap:25px; border-top:1px solid rgba(23,34,40,.14); color:#172228; }
.contact-call span { color:#718085; font-size:13px; }
.contact-call b { font:500 19px/1 Manrope,sans-serif; letter-spacing:.04em; }

.footer { padding:36px max(24px,calc((100% - 1500px)/2)); grid-template-columns:auto 1fr auto; gap:25px 50px; }
.footer-brand img { width:clamp(155px,14vw,215px); }
.footer-socials { grid-column:auto; padding:0; border:0; gap:9px; }
.footer-socials a { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; transition:border-color .25s ease,background .25s ease; }
.footer-socials a:hover { border-color:#79b8c5; background:#79b8c5; }
.footer-socials svg { width:18px; height:18px; fill:currentColor; }
.footer-socials svg rect,
.footer-socials svg circle { fill:none; stroke:currentColor; stroke-width:1.8; }
.footer-socials svg .fill-dot { fill:currentColor; stroke:none; }

/* Футер в два уровня: основная строка и юридическая строка */
.footer {
  padding-top: 28px;
  padding-bottom: 24px;
  grid-template-columns: auto 1fr auto;
  gap: 22px 38px;
}

.footer nav {
  justify-content: center;
  gap: 10px 20px;
}

.footer-bottom {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.13);
}

@media (max-width:800px) {
  .contact-card-head { display:block; }
  .contact-card-head span { display:block; margin-top:9px; }
  .contact-compact-links { grid-template-columns:1fr; }
  .contact-call { align-items:flex-start; flex-direction:column; gap:10px; }
  .footer { padding:35px 22px; grid-template-columns:1fr auto; gap:27px; }
  .footer nav { grid-column:1/-1; }
  .footer-bottom { grid-column:1/-1; }
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 110 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  background-size: 110px 110px;
}

.about-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(380px, 1.15fr);
  grid-template-areas: "title photo" "story photo" "quote quote" "approach action";
  gap: 54px clamp(55px, 8vw, 130px);
  align-items: start;
}

.about-title { grid-area: title; padding-top: 20px; }
.about-kicker,
.benefits-kicker {
  margin: 0 0 22px;
  color: #397b89;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.about-title h2 {
  margin: 0 0 34px;
  font: 500 clamp(68px, 8vw, 126px)/.76 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -.035em;
}
.about-lead { margin: 0; max-width: 590px; color: #263b42; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5; }

.about-photo { grid-area: photo; position: relative; margin: 0; }
.about-photo {
  width: calc((80vw - 2 * clamp(16px, 1.7vw, 28px)) / 3);
  max-width: 500px;
  justify-self: center;
  align-self: start;
}

/* Финальный размер портрета в блоке «Обо мне»: как одна карточка «Видов съёмок» */
@media (min-width: 801px) {
  .about .about-photo {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  .about .about-photo img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
  }
}

@media (max-width: 800px) {
  .about .about-photo {
    width: 100% !important;
    max-width: none !important;
  }

  .about .about-photo img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }
}
.about-photo img {
  aspect-ratio: 3 / 4;
}
.about-photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(57,123,137,.45); }
.about-photo img { position: relative; width: 100%; aspect-ratio: 4/5; display: block; object-fit: cover; object-position: center top; filter: contrast(1.04); }
.about-photo figcaption { position: absolute; left: -1px; bottom: 24px; padding: 11px 16px; background: #fff; color: #172228; font: 600 12px/1 Manrope, sans-serif; letter-spacing: .17em; text-transform: uppercase; }

.about-story { grid-area: story; color: #455b62; font-size: 18px; line-height: 1.78; }
.about-story p { margin: 0 0 25px; }
.about-quote { grid-area: quote; max-width: 1120px; margin: 35px auto 15px; text-align: center; color: #172228; font: 500 clamp(38px, 5vw, 74px)/1 "Cormorant Garamond", Georgia, serif; }
.about-approach { grid-area: approach; padding: 32px 0 0; border-top: 1px solid rgba(57,123,137,.35); }
.about-approach span { display: block; margin-bottom: 17px; color: #397b89; font: 600 13px/1 Manrope, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.about-approach p,
.about-action p { margin: 0; color: #455b62; font-size: 18px; line-height: 1.7; }
.about-action { grid-area: action; padding: 32px 0 0; border-top: 1px solid rgba(57,123,137,.35); }
.about-button { margin-top: 28px; min-width: 290px; padding: 18px 22px; display: inline-flex; justify-content: space-between; align-items: center; gap: 34px; background: #fff; border: 1px solid #fff; color: #172228; font: 500 15px/1.2 Manrope, sans-serif; transition: .3s ease; }
.about-button span { font-size: 22px; transition: transform .3s ease; }
.about-button:hover { background: #8fc9d3; border-color: #8fc9d3; }
.about-button:hover span { transform: translateX(5px); }

/* =========================================================
   ПОЧЕМУ Я — светлый контрастный блок
   ========================================================= */
.benefits {
  position: relative;
  overflow: hidden;
  padding: clamp(75px, 8vw, 115px) max(24px, calc((100% - 1500px) / 2));
  background: #f7f8f7;
  color: #172228;
}
.benefits::before,
.benefits::after { content: ""; position: absolute; border: 1px solid rgba(75,153,170,.2); border-radius: 50%; pointer-events: none; }
.benefits::before { width: 520px; height: 520px; right: -270px; top: -240px; }
.benefits::after { width: 290px; height: 290px; left: -160px; bottom: -130px; }
.benefits-intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr .6fr; column-gap: 65px; align-items: end; margin-bottom: 48px; }
.benefits-kicker { grid-column: 1/-1; color: #397b89; }
.benefits-intro h2 { margin: 0; font: 500 clamp(52px, 6vw, 88px)/.84 "Cormorant Garamond", Georgia, serif; letter-spacing: -.035em; }
.benefits-lead { margin: 0; max-width: 470px; color: #53666b; font-size: 18px; line-height: 1.7; }
.benefits-intro-side { width: 100%; max-width: 500px; justify-self: end; }
.benefits-photo-stack { position: relative; width: calc(100% + 190px); height: 220px; margin: 0 0 22px -190px; }
.benefits-mini-photo { position: absolute; margin: 0; padding: 7px 7px 19px; background: #fff; box-shadow: 0 12px 28px rgba(23,34,40,.14); }
.benefits-mini-photo::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 62px; height: 19px; background: rgba(218,201,164,.78); clip-path: polygon(2% 8%,98% 0,100% 90%,96% 100%,1% 94%,0 12%); transform: translateX(-50%) rotate(-3deg); }
.benefits-mini-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.benefits-mini-photo-one { left: 0; top: 30px; width: 154px; height: 174px; transform: rotate(-6deg); }
.benefits-mini-photo-one img { object-position: center; }
.benefits-mini-photo-two { left: 31%; top: 3px; z-index: 2; width: 178px; height: 151px; transform: rotate(3deg); }
.benefits-mini-photo-two img { object-position: center; }
.benefits-mini-photo-three { right: 0; top: 36px; width: 164px; height: 141px; transform: rotate(-2deg); }
.benefits-mini-photo-three img { object-position: center; }
.benefits-list { position: relative; z-index: 1; border-top: 1px solid rgba(23,34,40,.18); }
.benefit-card { min-height: 145px; padding: 28px 0; display: grid; grid-template-columns: 72px 1fr; border-bottom: 1px solid rgba(23,34,40,.18); transition: padding .35s ease, background .35s ease; }
.benefit-card:hover { padding-left: 24px; padding-right: 24px; background: rgba(255,255,255,.7); }
.benefit-number { padding-top: 9px; color: #397b89; font: 600 14px/1 Manrope, sans-serif; letter-spacing: .15em; }
.benefit-card > div { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(300px,1.15fr); gap: 38px; align-items: start; }
.benefit-card h3 { margin: 0; font: 500 clamp(32px,3.2vw,51px)/1 "Cormorant Garamond", Georgia, serif; }
.benefit-card p { max-width: 600px; margin: 4px 0 0; color: #53666b; font-size: 18px; line-height: 1.7; }
.benefits-cta { position: relative; z-index: 1; margin-top: 42px; padding: 25px 32px; display: flex; justify-content: space-between; align-items: center; gap: 30px; background: #a9d2da; color: #172228; }
.benefits-cta p { margin: 0; font: 500 clamp(26px,3vw,42px)/1 "Cormorant Garamond", Georgia, serif; }
.benefits-cta a { display: inline-flex; align-items: center; gap: 28px; color: #172228; font: 600 14px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.benefits-cta a span { font-size: 22px; transition: transform .3s ease; }
.benefits-cta a:hover span { transform: translateX(6px); }

@media (max-width: 800px) {
  .about { padding: 78px 22px; }
  .benefits { padding: 68px 22px; }
  .about-shell { grid-template-columns: 1fr; grid-template-areas: "title" "photo" "story" "quote" "approach" "action"; gap: 42px; }
  .about-title { padding-top: 0; }
  .about-title h2 { font-size: clamp(65px, 22vw, 92px); }
  .about-photo::before { inset: 12px -8px -12px 8px; }
  .about-story,
  .about-approach p,
  .about-action p { font-size: 17px; }
  .about-quote { margin: 15px 0 0; text-align: left; font-size: 42px; }
  .about-button { width: 100%; min-width: 0; }
  .benefits-intro { display: block; margin-bottom: 48px; }
  .benefits-intro h2 { margin-bottom: 30px; font-size: clamp(55px, 18vw, 78px); }
  .benefits-lead { font-size: 17px; }
  .benefits-intro-side { max-width: none; }
  .benefits-photo-stack { width: min(100%,390px); height: 166px; margin: 8px auto 27px; }
  .benefits-mini-photo { padding: 5px 5px 14px; }
  .benefits-mini-photo-one { left: 1%; width: 105px; height: 125px; }
  .benefits-mini-photo-two { left: 32%; width: 126px; height: 109px; }
  .benefits-mini-photo-three { right: 1%; width: 112px; height: 101px; }
  .benefit-card { min-height: 0; padding: 32px 0; grid-template-columns: 45px 1fr; }
  .benefit-card:hover { padding-left: 10px; padding-right: 10px; }
  .benefit-card > div { display: block; }
  .benefit-card h3 { margin-bottom: 16px; font-size: 34px; }
  .benefit-card p { font-size: 17px; }
  .benefits-cta { margin-top: 45px; padding: 27px 24px; display: block; }
  .benefits-cta p { margin-bottom: 24px; font-size: 31px; }
}

/* Спокойное чередование фонов без полукруглого декора */
.shooting-types {
  background: #f7f8f7;
}

.shooting-types::before {
  display: none;
}

.portfolio {
  background: #ffffff;
}

/* =========================================================
   Плотные переходы между основными блоками
   ========================================================= */
.anchor-transition {
  min-height: 62px;
  padding: 12px 24px;
}

.shooting-types {
  padding-top: 72px;
  padding-bottom: 92px;
}

.portfolio {
  margin-top: 0;
  padding-top: 88px;
  padding-bottom: 88px;
}

.portfolio-footer {
  margin-top: 72px;
  padding-bottom: 0;
}

/* Белый переход сверху к нежному морскому фону */
.about {
  background:
    linear-gradient(to bottom, #ffffff 0, #f7f7f6 10%, #eeeeec 25%, #eeeeec 100%);
}

@media (max-width: 800px) {
  .anchor-transition {
    min-height: 48px;
    padding: 8px 18px;
  }

  .anchor-transition small {
    display: none;
  }

  .shooting-types {
    padding-top: 56px;
    padding-bottom: 68px;
  }

  .portfolio {
    margin-top: 0;
    padding-top: 65px;
    padding-bottom: 70px;
  }

  .portfolio-footer {
    margin-top: 58px;
    padding-bottom: 0;
  }

  .about {
    background:
      linear-gradient(to bottom, #ffffff 0, #f5f5f4 10%, #eeeeec 22%, #eeeeec 100%);
  }
}

/* =========================================================
   КАК ПРОХОДИТ СЪЁМКА
   ========================================================= */
.process { padding: clamp(85px,9vw,135px) max(24px,calc((100% - 1500px)/2)); background:#fff; color:#172228; }
.process-heading { margin-bottom:60px; display:grid; grid-template-columns:1.25fr .75fr; gap:65px; align-items:end; }
.process-heading > p { grid-column:1/-1; margin:0 0 -38px; color:#59666b; font:600 14px/1 Manrope,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.process-heading h2 { margin:0; font:500 clamp(56px,7vw,100px)/.82 "Cormorant Garamond",Georgia,serif; letter-spacing:-.035em; }
.process-heading > span { max-width:450px; color:#586a70; font-size:18px; line-height:1.7; }
.process-heading-side { width:100%; max-width:500px; justify-self:end; }
.process-heading-side > span { display:block; color:#586a70; font-size:18px; line-height:1.7; }
.process-photo-stack { position:relative; width:calc(100% + 190px); height:220px; margin:0 0 22px -190px; }
.process-mini-photo { position:absolute; margin:0; padding:7px 7px 19px; background:#fff; box-shadow:0 12px 28px rgba(23,34,40,.14); }
.process-mini-photo::before { content:""; position:absolute; z-index:2; top:-9px; left:50%; width:62px; height:19px; background:rgba(218,201,164,.78); clip-path:polygon(2% 8%,98% 0,100% 90%,96% 100%,1% 94%,0 12%); transform:translateX(-50%) rotate(-3deg); }
.process-mini-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.process-mini-photo-one { left:0; top:30px; width:154px; height:174px; transform:rotate(-6deg); }
.process-mini-photo-two { left:31%; top:3px; z-index:2; width:178px; height:151px; transform:rotate(3deg); }
.process-mini-photo-three { right:0; top:36px; width:164px; height:141px; transform:rotate(-2deg); }
.process-list { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(23,34,40,.17); border-left:1px solid rgba(23,34,40,.17); }
.process-step { min-height:280px; padding:clamp(32px,4vw,54px); display:grid; grid-template-columns:46px 1fr; column-gap:24px; border-right:1px solid rgba(23,34,40,.17); border-bottom:1px solid rgba(23,34,40,.17); }
.process-step > span { grid-row:1/3; color:#59666b; font:600 13px/1 Manrope,sans-serif; letter-spacing:.12em; padding-top:8px; }
.process-step h3 { margin:0 0 20px; font:500 clamp(32px,3vw,46px)/1 "Cormorant Garamond",Georgia,serif; }
.process-step p { margin:0; max-width:560px; color:#596b70; font-size:18px; line-height:1.7; }

/* =========================================================
   КОНТАКТЫ
   ========================================================= */
.contact { padding:clamp(90px,10vw,155px) max(24px,calc((100% - 1500px)/2)); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(60px,9vw,145px); align-items:end; background:linear-gradient(to bottom,#fff 0,#f8f8f7 8%,#f1f1ef 20%,#f1f1ef 100%); color:#172228; }
.contact-copy > p { margin:0 0 22px; color:#59666b; font:600 14px/1 Manrope,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.contact-copy h2 { margin:0 0 35px; font:500 clamp(60px,7vw,108px)/.82 "Cormorant Garamond",Georgia,serif; letter-spacing:-.035em; }
.contact-copy > span { display:block; max-width:700px; color:#53666b; font-size:19px; line-height:1.75; }
.contact-actions { padding:clamp(28px,4vw,48px); background:#fff; border:1px solid rgba(23,34,40,.16); }
.contact-label { margin:0 0 24px; color:#59666b; font:600 12px/1 Manrope,sans-serif; letter-spacing:.17em; text-transform:uppercase; }
.contact-primary { width:100%; margin-bottom:8px; padding:21px 24px; display:flex; justify-content:space-between; align-items:center; border:1px solid #172228; background:#fff; color:#172228; font:500 16px/1.2 Manrope,sans-serif; transition:background .3s ease,border-color .3s ease; }
.contact-primary:hover { background:#79b8c5; border-color:#79b8c5; }
.contact-primary span { font-size:23px; }
.contact-row { padding:17px 3px; display:flex; justify-content:space-between; gap:25px; border-bottom:1px solid rgba(23,34,40,.13); color:#172228; font-size:15px; }
.contact-row b { font-weight:400; color:#59666b; }
.contact-row:hover b { color:#172228; }

/* =========================================================
   ПОДВАЛ
   ========================================================= */
.footer { padding:58px max(24px,calc((100% - 1500px)/2)); display:grid; grid-template-columns:1fr auto; gap:38px 70px; align-items:center; background:#252b2e; color:#fff; }
.footer-brand img { width:clamp(190px,18vw,270px); height:auto; display:block; filter:brightness(0) invert(1); }
.footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px 28px; }
.footer nav a { color:rgba(255,255,255,.72); font-size:14px; transition:color .25s ease; }
.footer nav a:hover { color:#fff; }
.footer-socials { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px 30px; padding:24px 0; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.footer-socials a { color:#fff; font-size:15px; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:40px; color:rgba(255,255,255,.48); font-size:12px; line-height:1.5; }
.footer-bottom p { margin:0; }
.footer-bottom p:last-child { max-width:720px; text-align:right; }

@media (max-width:800px) {
  .process,
  .contact { padding:70px 22px; }
  .process-heading { display:block; margin-bottom:42px; }
  .process-heading > p { margin:0 0 20px; }
  .process-heading h2 { margin-bottom:27px; font-size:clamp(54px,18vw,76px); }
  .process-heading > span { display:block; font-size:17px; }
  .process-heading-side { max-width:none; }
  .process-heading-side > span { font-size:17px; }
  .process-photo-stack { width:min(110%,420px); height:166px; margin:8px auto 27px -5%; }
  .process-mini-photo { padding:5px 5px 14px; }
  .process-mini-photo-one { left:1%; width:105px; height:125px; }
  .process-mini-photo-two { left:32%; width:126px; height:109px; }
  .process-mini-photo-three { right:1%; width:112px; height:101px; }
  .process-list { grid-template-columns:1fr; }
  .process-step { min-height:0; padding:32px 24px; grid-template-columns:37px 1fr; gap:15px; }
  .process-step h3 { font-size:34px; }
  .process-step p { font-size:17px; }
  .contact { grid-template-columns:1fr; gap:45px; }
  .contact-copy h2 { font-size:clamp(54px,18vw,78px); }
  .contact-copy > span { font-size:17px; }
  .footer { padding:45px 22px; grid-template-columns:1fr; }
  .footer nav { justify-content:flex-start; gap:14px 24px; }
  .footer-bottom { display:block; }
  .footer-bottom p:last-child { margin-top:14px; text-align:left; }
}

/* =========================================================
   Фотография «приклеена» пластырями
   ========================================================= */
.about-photo {
  isolation: isolate;
  transform: rotate(1.8deg);
  transform-origin: center;
}

/* Убираем прежнюю рамку за фотографией */
.about-photo::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -17px;
  left: 16%;
  width: 126px;
  height: 38px;
  border: 0;
  border-radius: 1px 3px 2px 1px;
  background: rgba(224, 207, 166, 0.78);
  box-shadow: 0 2px 5px rgba(23, 34, 40, 0.1);
  opacity: 0.8;
  transform: rotate(-7deg);
  clip-path: polygon(2% 5%, 98% 0, 100% 92%, 96% 100%, 1% 94%, 0 10%);
}

.about-photo::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 12%;
  bottom: -14px;
  width: 120px;
  height: 37px;
  border-radius: 2px 1px 3px 1px;
  background: rgba(224, 207, 166, 0.76);
  box-shadow: 0 2px 5px rgba(23, 34, 40, 0.1);
  opacity: 0.78;
  transform: rotate(6deg);
  clip-path: polygon(1% 2%, 97% 6%, 100% 88%, 96% 98%, 2% 94%, 0 12%);
}

.about-photo img {
  background: #ffffff;
  filter: none;
  box-shadow: 0 22px 48px rgba(23, 34, 40, 0.16);
}

.about-photo figcaption {
  transform: rotate(-1.8deg);
  transform-origin: left bottom;
}

/* Убираем полукруги и линии-декор из блока «Почему выбирают меня» */
.benefits::before,
.benefits::after {
  content: none;
  display: none;
}

@media (max-width: 800px) {
  .about-photo {
    transform: rotate(1.1deg);
  }

  .about-photo {
    width: 100%;
    max-width: none;
  }

  .about-photo img {
    aspect-ratio: 4 / 5;
  }

  .about-photo::before {
    top: -13px;
    left: 12%;
    width: 96px;
    height: 30px;
  }

  .about-photo::after {
    right: 9%;
    bottom: -11px;
    width: 92px;
    height: 29px;
  }

  .about-photo figcaption {
    transform: rotate(-1.1deg);
  }
}

/* =========================================================
   Чередование нейтральных фонов
   ========================================================= */
.shooting-types { background: #f1f1ef; }
.portfolio { background: #ffffff; }
.benefits { background: #ffffff; }

/* =========================================================
   СТОИМОСТЬ
   ========================================================= */
.pricing {
  padding: clamp(85px, 9vw, 135px) max(24px, calc((100% - 1500px) / 2));
  background: #f1f1ef;
  color: #172228;
}
.pricing-heading { margin-bottom: 58px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 65px; align-items: end; }
.pricing-heading > p { grid-column: 1/-1; margin: 0 0 -38px; color: #397b89; font: 600 14px/1 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.pricing-heading h2 { margin: 0; font: 500 clamp(56px, 7vw, 100px)/.82 "Cormorant Garamond", Georgia, serif; letter-spacing: -.035em; }
.pricing-heading > span { max-width: 450px; color: #586a70; font-size: 18px; line-height: 1.7; }
.pricing-heading-side { max-width: 470px; }
.pricing-heading-side > span { display: block; color: #586a70; font-size: 18px; line-height: 1.7; }
.pricing-photo-stack { position: relative; width: 100%; height: 175px; margin: 0 0 30px; }
.pricing-mini-photo { position: absolute; margin: 0; padding: 7px 7px 20px; background: #fff; box-shadow: 0 12px 28px rgba(23,34,40,.14); }
.pricing-mini-photo::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 61px; height: 19px; background: rgba(218,201,164,.78); clip-path: polygon(2% 8%,98% 0,100% 90%,96% 100%,1% 94%,0 12%); transform: translateX(-50%) rotate(-3deg); }
.pricing-mini-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pricing-mini-photo-one { left: 3%; top: 18px; width: 132px; height: 118px; transform: rotate(-6deg); }
.pricing-mini-photo-one img { object-position: center 70%; }
.pricing-mini-photo-two { left: 34%; top: 4px; z-index: 2; width: 146px; height: 128px; transform: rotate(3deg); }
.pricing-mini-photo-two img { object-position: center; }
.pricing-mini-photo-three { right: 1%; top: 23px; width: 124px; height: 132px; transform: rotate(-2deg); }
.pricing-mini-photo-three img { object-position: center 64%; }
.pricing-card { display: grid; grid-template-columns: minmax(330px,.75fr) minmax(520px,1.25fr); border: 1px solid rgba(23,34,40,.17); background: #fff; }
.pricing-main { padding: clamp(38px,5vw,68px); background: #252b2e; color: #fff; }
.pricing-label,
.pricing-column-title { margin: 0 0 32px; font: 600 13px/1 Manrope, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.pricing-label { color: #c7c9c8; }
.pricing-price { margin-bottom: 34px; }
.pricing-price strong { display: block; font: 500 clamp(65px,7vw,103px)/.85 "Cormorant Garamond", Georgia, serif; }
.pricing-price span { display: block; margin-top: 14px; color: rgba(255,255,255,.65); font-size: 17px; }
.pricing-description { max-width: 500px; margin: 0 0 38px; color: rgba(255,255,255,.76); font-size: 18px; line-height: 1.7; }
.pricing-button { width: 100%; padding: 19px 22px; display: inline-flex; justify-content: space-between; align-items: center; gap: 35px; background: #fff; color: #172228; font: 500 15px/1.2 Manrope, sans-serif; transition: background .3s ease, transform .3s ease; }
.pricing-button span { font-size: 23px; transition: transform .3s ease; }
.pricing-button:hover { background: #d8e9ec; transform: translateY(-3px); }
.pricing-button:hover span { transform: translateX(6px); }
.pricing-details { padding: clamp(38px,5vw,68px); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,5vw,76px); }
.pricing-column-title { padding-bottom: 18px; border-bottom: 1px solid rgba(23,34,40,.18); color: #397b89; }
.pricing-list,
.pricing-genres { margin: 0; padding: 0; list-style: none; }
.pricing-list li,
.pricing-genres li { position: relative; padding: 13px 0 13px 28px; border-bottom: 1px solid rgba(23,34,40,.1); color: #445960; font-size: 17px; line-height: 1.5; }
.pricing-list li::before { content: "✓"; position: absolute; top: 13px; left: 0; color: #397b89; font-weight: 600; }
.pricing-genres { counter-reset: genres; }
.pricing-genres li { counter-increment: genres; }
.pricing-genres li::before { content: "0" counter(genres); position: absolute; top: 16px; left: 0; color: #397b89; font: 500 11px/1 Manrope, sans-serif; }
.pricing-notes { margin-top: 27px; padding-top: 21px; border-top: 1px solid rgba(23,34,40,.18); }
.pricing-notes p { margin: 0 0 9px; color: #69787c; font-size: 14px; line-height: 1.55; }

@media (max-width: 800px) {
  .pricing { padding: 70px 22px; }
  .pricing-heading { display: block; margin-bottom: 42px; }
  .pricing-heading > p { margin: 0 0 20px; }
  .pricing-heading h2 { margin-bottom: 26px; font-size: clamp(54px,18vw,76px); }
  .pricing-heading > span { display: block; font-size: 17px; }
  .pricing-heading-side { max-width: none; }
  .pricing-heading-side > span { font-size: 17px; }
  .pricing-photo-stack { width: min(100%, 390px); height: 150px; margin: 12px auto 28px; }
  .pricing-mini-photo { padding: 5px 5px 15px; }
  .pricing-mini-photo-one { left: 1%; width: 105px; height: 98px; }
  .pricing-mini-photo-two { left: 32%; width: 116px; height: 106px; }
  .pricing-mini-photo-three { right: 1%; width: 100px; height: 108px; }
  .pricing-card { grid-template-columns: 1fr; }
  .pricing-main,
  .pricing-details { padding: 37px 24px; }
  .pricing-details { grid-template-columns: 1fr; gap: 45px; }
  .pricing-description,
  .pricing-list li,
  .pricing-genres li { font-size: 17px; }
}

/* =========================================================
   Нейтральная палитра; морской цвет только при наведении
   ========================================================= */
.section-heading p,
.portfolio-heading p,
.about-kicker,
.about-approach span,
.benefits-kicker,
.benefit-number,
.pricing-heading > p,
.pricing-column-title,
.pricing-list li::before,
.pricing-genres li::before {
  color: #59666b;
}

.shooting-info > span {
  color: #59666b;
}

/* Новый спокойный призыв после преимуществ */
.benefits-cta {
  background: #ededeb;
  border: 1px solid rgba(23, 34, 40, 0.14);
}

.benefits-cta a,
.benefits-cta a:visited {
  padding: 14px 18px;
  border: 1px solid #172228;
  color: #172228;
  transition: background-color .3s ease, border-color .3s ease;
}

.benefits-cta a:hover {
  background: #79b8c5;
  border-color: #79b8c5;
  color: #172228;
}

/* Светлая ценовая часть вместо чёрной */
.pricing-main {
  background: #e3e3e0;
  color: #172228;
  border-right: 1px solid rgba(23, 34, 40, 0.14);
}

.pricing-label,
.pricing-price span,
.pricing-description {
  color: #59666b;
}

.pricing-button,
.pricing-button:link,
.pricing-button:visited,
.pricing-button:active {
  background: #ffffff;
  border: 1px solid #172228;
  color: #172228 !important;
  opacity: 1;
}

.pricing-button:hover {
  background: #79b8c5;
  border-color: #79b8c5;
  color: #172228 !important;
}

/* Морской цвет появляется только при наведении на кнопки */
.about-button:hover,
.telegram-button:hover,
.button:hover {
  background: #79b8c5;
  border-color: #79b8c5;
  color: #172228;
}

@media (max-width: 800px) {
  .pricing-main {
    border-right: 0;
    border-bottom: 1px solid rgba(23, 34, 40, 0.14);
  }
}

/* Компактный якорь между разделами */
.section-anchor {
  position: relative;
  z-index: 5;
  height: 54px;
  margin: -27px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}

.section-anchor span {
  display: none;
}

.section-anchor img {
  width: 26px;
  height: auto;
  display: block;
  padding: 0;
  background: transparent;
  border-radius: 0;
  filter: none;
  opacity: 1;
  pointer-events: auto;
  transition: transform .3s ease, opacity .3s ease;
}

.section-anchor:hover img {
  opacity: 1;
  transform: translateY(3px);
}

/* Серые блоки начинаются белым градиентом */
.shooting-types,
.pricing {
  background:
    linear-gradient(
      to bottom,
      #ffffff 0,
      #f8f8f7 7%,
      #f1f1ef 18%,
      #f1f1ef 100%
    );
}

/* Коллаж стоимости растянут так же, как в «Работа со мной» */
.pricing-heading-side {
  width: 100%;
  max-width: 500px;
  justify-self: end;
}

.pricing-photo-stack {
  width: calc(100% + 190px);
  height: 220px;
  margin: 0 0 22px -190px;
}

.pricing-mini-photo-one {
  left: 0;
  top: 30px;
  width: 154px;
  height: 174px;
}

.pricing-mini-photo-two {
  left: 31%;
  top: 3px;
  width: 178px;
  height: 151px;
}

.pricing-mini-photo-three {
  right: 0;
  top: 36px;
  width: 164px;
  height: 141px;
}

@media (max-width: 800px) {
  .benefits-photo-stack {
    width: min(110%, 420px);
    margin-left: -5%;
  }

  .section-anchor {
    height: 44px;
    margin: -22px auto;
  }

  .section-anchor img {
    width: 24px;
    height: auto;
  }

  .shooting-types,
  .pricing {
    background:
      linear-gradient(
        to bottom,
        #ffffff 0,
        #f7f7f6 8%,
        #f1f1ef 20%,
        #f1f1ef 100%
      );
  }

  .pricing-photo-stack {
    width: min(110%, 420px);
    height: 166px;
    margin: 8px auto 27px -5%;
  }

  .pricing-mini-photo-one {
    left: 1%;
    width: 105px;
    height: 125px;
  }

  .pricing-mini-photo-two {
    left: 32%;
    width: 126px;
    height: 109px;
  }

  .pricing-mini-photo-three {
    right: 1%;
    width: 112px;
    height: 101px;
  }
}

/* Логотип на одной линии с текстом баннера */
@media (min-width: 801px) {
  .header {
    padding-left: clamp(24px, 10vw, 160px);
  }

  .site-logo {
    width: clamp(263px, 22vw, 355px);
  }
}

/* Навигация справа */
.side-navigation {
  right: 20px;
  padding: 13px 10px;
  gap: 10px;

  border: 0;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 25px rgba(23, 34, 40, 0.08);
  backdrop-filter: blur(10px);
}

.side-navigation a {
  width: 13px;
  height: 13px;

  display: block;

  border: 1px solid rgba(23, 34, 40, 0.35);
  border-radius: 50%;
  background: #ffffff;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* Убираем номера */
.side-navigation a span {
  display: none;
}

/* Убираем всплывающие подписи */
.side-navigation a::before {
  display: none;
}

/* Текущий раздел */
.side-navigation a.is-active {
  border-color: #79b8c5;
  background: #79b8c5;
  transform: scale(1.18);
}

.side-navigation a:hover {
  border-color: #79b8c5;
  background: #79b8c5;
}

/* Фотографии ближе к тексту контактов */
.contact {
  row-gap: 16px;
}

.contact-photo-stack {
  margin-bottom: -8px;
}

@media (max-width: 800px) {
  .contact {
    row-gap: 12px;
  }

  .contact-photo-stack {
    margin-bottom: -4px;
  }
}

/* Логотип меньше на 15% */
@media (min-width: 801px) {
  .site-logo {
    width: clamp(224px, 18.7vw, 302px);
  }
}

/* Боковая навигация меньше на 30% */
.side-navigation {
  right: 14px;
  padding: 9px 7px;
  gap: 7px;
  border-radius: 21px;
}

.side-navigation a {
  width: 9px;
  height: 9px;
}

.side-navigation a.is-active {
  transform: scale(1.15);
}

/* =========================================================
   УЗКИЙ ФУТЕР
   ========================================================= */

.footer {
  padding: 22px max(24px, calc((100% - 1600px) / 2));
  background: #252b2e;
  color: #ffffff;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo menu socials"
    "meta meta meta";
  align-items: center;
  gap: 16px 40px;
}

.footer-brand {
  grid-area: logo;
}

.footer-brand img {
  width: 148px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.footer-menu {
  grid-area: menu;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 20px;
}

.footer-menu a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  white-space: nowrap;

  transition: color 0.25s ease;
}

.footer-menu a:hover {
  color: #ffffff;
}

.footer-socials {
  grid-area: socials;

  display: flex;
  gap: 7px;
  padding: 0;
  border: 0;
}

.footer-socials a {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #ffffff;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.footer-socials a:hover {
  border-color: #79b8c5;
  background: #79b8c5;
  color: #172228;
}

.footer-socials svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.footer-socials svg rect,
.footer-socials svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.footer-socials svg .fill-dot {
  fill: currentColor;
  stroke: none;
}

.footer-meta {
  grid-area: meta;

  padding-top: 12px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
}

.footer-meta span {
  flex: 0 0 auto;
  font-size: 11px;
}

.footer-meta small {
  max-width: 760px;
  margin-left: auto;
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

@media (max-width: 800px) {
  .footer {
    padding: 25px 22px;
  }

  .footer-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo socials"
      "menu menu"
      "meta meta";

    gap: 20px;
  }

  .footer-brand img {
    width: 138px;
  }

  .footer-menu {
    justify-content: flex-start;
    gap: 11px 18px;
  }

  .footer-meta {
    display: block;
  }

  .footer-meta small {
    display: block;
    margin: 10px 0 0;
    text-align: left;
  }
}

/* Логотип в футере больше на 15% */
.footer-brand img {
  width: 170px;
}

@media (max-width: 800px) {
  .footer-brand img {
    width: 159px;
  }
}

/* Скрываем последнюю фотографию только на телефоне */
@media (max-width: 800px) {
  .portfolio-item:nth-child(9) {
    display: none;
  }

  /* Возвращаем нормальный отступ кнопки */
  .portfolio-footer {
    margin-top: 70px;
  }
}

/* Отступы после портфолио на телефоне */
@media (max-width: 800px) {
  /* Последняя фотография скрыта */
  .portfolio-item:nth-child(9) {
    display: none;
  }

  /* Кнопка ниже двух последних фотографий */
  .portfolio-footer {
    margin-top: 230px;
    padding-bottom: 0px;
  }

  /* Якорь после портфолио */
  .portfolio + .section-anchor {
    margin-top: 0;
    margin-bottom: -22px;
  }
}

@media (max-width: 800px) {
  .portfolio {
    padding-bottom: 45px;
  }

  .portfolio + .section-anchor {
    margin-top: -22px;
  }
}

/* Номер телефона меньше на 20% */
.contact-call b {
  font-size: 15px;
}

/* Увеличение только мелкого текста */
.eyebrow,
.section-kicker,
.hero-kicker,
.logo-subtitle,
.card-label,
.photo-caption,
.portfolio-caption,
.price-note,
.contact-note,
.footer-note,
.footer-copy,
.meta,
small {
  font-size: max(14px, 0.9rem) !important;
  line-height: 1.5 !important;
}

/* На телефонах */
@media (max-width: 768px) {
  .eyebrow,
  .section-kicker,
  .hero-kicker,
  .logo-subtitle,
  .card-label,
  .photo-caption,
  .portfolio-caption,
  .price-note,
  .contact-note,
  .footer-note,
  .footer-copy,
  .meta,
  small {
    font-size: 14px !important;
  }
}

[style*="font-size: 10px"],
[style*="font-size: 11px"],
[style*="font-size: 12px"],
[style*="font-size: 13px"] {
  font-size: 14px !important;
}

/* Компактный блок отзывов */

.reviews {
  overflow: hidden;
  padding: 65px 24px 75px;
  color: #172329;
  background:
    linear-gradient(
      to bottom,
      #fff 0,
      #f6f6f4 14%,
      #efefec 100%
    );
}

.reviews-container {
  width: min(1250px, 100%);
  margin: 0 auto;
}

.reviews-heading {
  display: grid;
  grid-template-columns: 0.65fr 1.15fr 0.8fr;
  align-items: end;
  gap: 28px;
  margin-bottom: 52px;
}

.reviews-kicker {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reviews-heading h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(52px, 5vw, 78px);
  font-weight: 400;
  line-height: 0.88;
}

.reviews-description {
  max-width: 330px;
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

.reviews-board {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 24px;
  padding: 18px 10px 30px;
}

.review-photo {
  position: relative;
  padding: 9px;
  background: #fff;
  box-shadow: 0 13px 28px rgba(20, 30, 35, 0.13);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.review-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.review-photo:hover {
  z-index: 5;
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 19px 38px rgba(20, 30, 35, 0.18);
}

.review-tape {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 78px;
  height: 25px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(221, 213, 190, 0.75);
}

/* Более плотная композиция */

.review-photo-1 {
  grid-column: 1 / span 4;
  transform: rotate(-1.3deg);
}

.review-photo-2 {
  grid-column: 5 / span 5;
  margin-top: 20px;
  transform: rotate(0.8deg);
}

.review-photo-3 {
  grid-column: 10 / span 3;
  margin-top: 4px;
  transform: rotate(-0.7deg);
}

.review-photo-4 {
  grid-column: 1 / span 4;
  margin-top: 5px;
  transform: rotate(0.8deg);
}

.review-photo-5 {
  grid-column: 5 / span 3;
  margin-top: 28px;
  transform: rotate(-0.7deg);
}

.review-photo-6 {
  grid-column: 8 / span 5;
  margin-top: 4px;
  transform: rotate(1deg);
}

.reviews-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(400px, 100%);
  min-height: 64px;
  margin: 22px auto 0;
  padding: 0 25px;
  border: 1px solid #172329;
  color: #172329;
  font-size: 14px;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.reviews-button:hover {
  border-color: #78bac8;
  background: #78bac8;
  color: #102329;
}

.reviews-button-arrow {
  font-size: 21px;
  transition: transform 0.25s ease;
}

.reviews-button:hover .reviews-button-arrow {
  transform: translateX(5px);
}

/* Телефон */

@media (max-width: 800px) {
  .reviews {
    padding: 55px 16px 65px;
  }

  .reviews-heading {
    display: block;
    margin-bottom: 42px;
  }

  .reviews-heading h2 {
    margin: 13px 0 19px;
    font-size: clamp(50px, 15vw, 68px);
  }

  .reviews-description {
    font-size: 16px;
  }

  .reviews-board {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 12px 3px 24px;
  }

  .review-photo,
  .review-photo-1,
  .review-photo-2,
  .review-photo-3,
  .review-photo-4,
  .review-photo-5,
  .review-photo-6 {
    grid-column: 1;
    width: 100%;
    margin: 0;
  }

  .review-photo-1 {
    transform: rotate(-0.5deg);
  }

  .review-photo-2 {
    transform: rotate(0.5deg);
  }

  .review-photo-3 {
    transform: rotate(-0.4deg);
  }

  .review-photo-4 {
    transform: rotate(0.5deg);
  }

  .review-photo-5,
  .review-photo-6 {
    display: none;
  }

  .review-tape {
    top: -11px;
    width: 68px;
    height: 22px;
  }

  .reviews-button {
    min-height: 60px;
    margin-top: 12px;
    font-size: 13px;
  }
}

/* Компактное меню в шапке */

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(13px, 1.35vw, 27px);
  white-space: nowrap;
}

.nav a {
  font-size: clamp(13px, 0.9vw, 16px);
  letter-spacing: 0.01em;
}

@media (max-width: 1250px) {
  .nav {
    gap: 13px;
  }

  .nav a {
    font-size: 13px;
  }
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 23px;
}

.footer-nav a {
  font-size: 14px;
  white-space: nowrap;
}

/* =========================================================
   КОМПАКТНАЯ ВЕРСИЯ — только расстояния и размеры блоков
   ========================================================= */
@media (min-width: 801px) {
  .shooting-types,
  .portfolio,
  .about,
  .benefits,
  .pricing,
  .process,
  .reviews,
  .contact {
    padding-top: clamp(62px, 6vw, 92px) !important;
    padding-bottom: clamp(62px, 6vw, 92px) !important;
  }

  .types-heading,
  .portfolio-heading,
  .about-intro,
  .benefits-intro,
  .pricing-heading,
  .process-heading,
  .reviews-heading {
    margin-bottom: clamp(35px, 4vw, 55px) !important;
  }

  .shooting-grid,
  .types-grid,
  .portfolio-grid,
  .benefits-grid,
  .process-list,
  .reviews-board {
    gap: clamp(16px, 1.7vw, 28px) !important;
  }

  .portfolio-footer,
  .benefits-cta,
  .pricing-notes,
  .reviews-button {
    margin-top: 24px !important;
  }

  .benefit-card {
    min-height: 118px;
    padding-top: 21px;
    padding-bottom: 21px;
  }

  .pricing-main,
  .pricing-details {
    padding: clamp(32px, 3.5vw, 50px);
  }

  .process-step {
    min-height: 225px;
    padding: clamp(27px, 3vw, 42px);
  }

  .contact {
    gap: clamp(38px, 5vw, 75px);
  }

  .contact-copy h2 {
    margin-bottom: 24px;
  }

  .contact-actions {
    padding: clamp(25px, 3vw, 37px);
  }

  .section-anchor {
    height: 42px;
    margin-top: -21px;
    margin-bottom: -21px;
  }

  .footer {
    padding-top: 17px;
    padding-bottom: 17px;
  }
}

@media (max-width: 800px) {
  .shooting-types,
  .portfolio,
  .about,
  .benefits,
  .pricing,
  .process,
  .reviews,
  .contact {
    padding-top: 50px !important;
    padding-bottom: 55px !important;
  }

  .types-heading,
  .portfolio-heading,
  .about-intro,
  .benefits-intro,
  .pricing-heading,
  .process-heading,
  .reviews-heading {
    margin-bottom: 34px !important;
  }

  .shooting-grid,
  .types-grid,
  .portfolio-grid,
  .benefits-grid,
  .reviews-board {
    gap: 24px !important;
  }

  .benefit-card {
    padding-top: 23px;
    padding-bottom: 23px;
  }

  .process-step {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .contact-actions {
    padding: 24px 19px;
  }

  .section-anchor {
    height: 34px;
    margin-top: -17px;
    margin-bottom: -17px;
  }

  .footer {
    padding-top: 21px;
    padding-bottom: 21px;
  }
}