/* Page sections — composed from tokens + components */

/* ---------- Section 1 · Hero (Figma node 1:49) ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--page-inset);
  max-width: var(--page-max);
  min-height: 720px;
  min-height: max(640px, 100svh); /* fills the first screen, so the next section starts below the fold */
  margin: 0 auto;
  padding: var(--page-inset);
}

/* Left: profile + headline over the animated palm */
.hero__intro {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-20) var(--space-20) 36px;
  border-radius: var(--radius-20);
  background: var(--surface-section);
  isolation: isolate;
}

/* Lottie palm — Figma frame 941×1062 at (-576, -94); the Lottie art is pre-faded, so no extra opacity */
.hero__palm {
  position: absolute;
  z-index: -1;
  left: -576px;
  top: -94px;
  width: 941px;
  height: 1062px;
  pointer-events: none;
}

.hero__profile {
  width: 429px;
  max-width: 100%;
  margin-top: auto; /* profile sits at the bottom */
  padding-top: var(--space-40);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 516px;
  max-width: 100%;
  margin-top: var(--space-24); /* headline leads the panel, close to the top */
  text-align: center;
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
/* Bigger than Figma's 36px so the headline leads the page */
.hero__title {
  font-size: clamp(34px, calc(4.3vw - 4px), 84px); /* desktop: ~58px at 1440 */
  line-height: 1;
  margin-bottom: var(--space-12);
}
@media (min-width: 901px) {
  .hero__content { width: 100%; } /* headline may use the full panel width */
  .hero__title { white-space: nowrap; } /* two clean lines: "Жить качественно" / "несмотря ни на что" */
  .hero__text p { max-width: 516px; margin: 0 auto; }
}

/* Right: photo with navigation and socials */
.hero__media {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-40) var(--space-40) var(--space-40) 38px;
  border-radius: var(--radius-20);
  background: var(--surface-subtle);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Extra photos swapped in when a nav button is hovered (data-hero-image ↔ data-hero-photo) */
.hero__photo { transition: opacity 0.6s ease; }
.hero__photo--alt { opacity: 0; }
.hero__media[data-active] .hero__photo:not(.hero__photo--alt) { opacity: 0; }
.hero__media[data-active="nutrition"] [data-hero-photo="nutrition"],
.hero__media[data-active="psychology"] [data-hero-photo="psychology"],
.hero__media[data-active="about"] [data-hero-photo="about"],
.hero__media[data-active="contacts"] [data-hero-photo="contacts"] { opacity: 1; }
.hero__media > :not(.hero__photo) {
  position: relative;
}

@media (max-width: 1100px) {
  .hero__intro { padding-top: var(--space-20); }
  .hero__palm { left: -640px; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Phone: panel sized to its content (no forced full screen), text and profile grouped with tighter gaps */
  .hero__content { margin-top: 0; gap: var(--space-24); }
  .hero__text { gap: var(--space-12); }
  .hero__profile { margin-top: 0; padding-top: 0; }
  .hero__intro {
    gap: var(--space-40);
    padding: var(--space-40) var(--space-16);
  }
  .hero__palm { left: -620px; top: -40px; }
  .hero__media {
    min-height: 560px;
    padding: var(--space-20);
  }
}

@media (max-width: 640px) {
  .hero .profile__text p { white-space: normal; }
  .hero__content .hero__title { font-size: clamp(34px, 11vw, 64px); text-wrap: balance; } /* phone: big, even lines */
  .hero__media { min-height: 460px; }
  .hero .nav-stack { width: auto; }
}

/* ---------- Section 2 · About (Figma node 1:79) ---------- */

.about {
  position: relative;
  overflow: hidden;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 100px var(--space-20) 50px; /* Figma: photo 110px below the hero panels */
  isolation: isolate;
}

/* Palms — both Lotties have their Figma rotation baked in, so they sit at the rotated bounding boxes */
.about__palm {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.about__palm--left {   /* node 1:88 */
  left: calc(50% - 720px - 253px);
  top: 253px;
  width: 926px;
  height: 1046px;
}
.about__palm--right {  /* node 1:91 */
  left: calc(50% - 720px + 981px);
  top: -224px;
  width: 674px;
  height: 705px;
}

.about__hero {
  display: grid;
  grid-template-columns: 1fr 344px 1fr;
  align-items: center;
}
.about__caption {
  color: var(--text-accent);
  white-space: nowrap;
}
.about__caption--left { justify-self: end; margin-right: 35px; }
.about__caption--right { justify-self: start; margin-left: 35px; }

.about__photo {
  width: 344px;
  height: 438px;
  border-radius: var(--radius-20);
  object-fit: cover;
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  max-width: 1058px;
  margin: var(--space-32) auto 0;
  text-align: center;
}
.about__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-16);
}

@media (max-width: 900px) {
  .about { padding-top: 64px; }
  .about__hero {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-20);
  }
  .about__caption--left,
  .about__caption--right { justify-self: center; margin: 0; }
  .about__caption--right { order: 1; }
  .about__palm--left { left: -500px; top: 400px; }
  .about__palm--right { left: auto; right: -420px; top: -260px; }
}

@media (max-width: 640px) {
  .about { padding: 48px var(--space-16) 48px; }
  .about__photo { width: 100%; max-width: 344px; height: auto; aspect-ratio: 344 / 438; }
  .about__hero { grid-template-columns: minmax(0, 1fr); }
  .about__body .t-body-lg { font-size: 17px; }
}

/* ---------- Section 3 · Services (Figma node 1:97) ---------- */

/* Panels stay inside the 2000px page and keep the 10px side inset */
.panel {
  max-width: calc(var(--page-max) - 2 * var(--page-inset));
  margin-inline: max(var(--page-inset), (100% - var(--page-max)) / 2 + var(--page-inset));
}

.services {
  padding: 50px var(--space-20) 50px;
}
.services__title {
  text-align: center;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 305px));
  justify-content: center;
  align-items: start;
  gap: var(--space-20);
  margin: 72px 0 0; /* title top 50 → grid top 171 */
  padding: 0;
  list-style: none;
}
.services__grid .service-card {
  width: auto;
}
.services__decor .decor-circle {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 305px)); }
  .services__title { font-size: 36px; }
}

@media (max-width: 640px) {
  .services { padding: 40px var(--space-16); }
  .services__title { font-size: 28px; }
  .services__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-32);
    gap: var(--space-12);
  }
  .services__grid .service-card { min-height: 0; gap: var(--space-24); }
  .services__grid .service-card__body { min-height: 0; }
  .services__decor { display: none; }
}

/* ---------- Section 4 · Complex approach (Figma node 1:165) ---------- */

.approach {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px var(--space-20) 50px;
}
.approach__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  translate: -80px 0; /* whole heading nudged left of centre */
}
/* Second line is offset 270px to the right of centre in Figma */
.approach__title-shift {
  translate: 270px 0;
}

.approach__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 630px));
  justify-content: center;
  gap: var(--space-20);
  margin-top: 73px; /* line 2 ends at 198 → cards at 270 */
}
.approach__cards .feature-card {
  width: auto;
}
@media (min-width: 1101px) {
  /* side by side: pin both "Подробнее" buttons to the card bottom so they line up */
  .approach__cards .feature-card { display: flex; flex-direction: column; }
  .approach__cards .feature-card__content { flex: 1; }
  .approach__cards .feature-card .btn { margin-top: auto; }
}

@media (max-width: 1100px) {
  .approach__title-shift { translate: 120px 0; }
  .approach__cards { grid-template-columns: minmax(0, 630px); }
}

@media (max-width: 640px) {
  .approach { padding: 56px var(--space-16) 40px; }
  .approach__title { font-size: 28px; gap: 8px; translate: none; }
  .approach__title-shift { translate: none; }
  .approach__cards { margin-top: var(--space-32); gap: var(--space-12); }
  .approach .feature-card { min-height: 0; padding: 20px 20px 28px; }
  .approach .feature-card__num { font-size: 56px; }
  .approach .feature-card__content { margin-top: var(--space-16); }
  .approach .feature-card__title { font-size: 26px; }
}

/* ---------- Section 5 · My approach (Figma node 1:181) ---------- */

.philosophy {
  margin-top: 33px; /* Figma: 33px gap after section 4 */
  isolation: isolate;
}

.philosophy__palm {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.philosophy__palm--left {   /* node 1:182 */
  left: -30px;
  top: 240px;
  width: 941px;
  height: 1063px;
}
.philosophy__palm--right {  /* node 1:185 — pinned to the right edge */
  right: -384px;
  top: -58px;
  width: 929px;
  height: 841px;
}

/* Desktop: a 1420×683 "map" that scales with the panel; positions are % of the map */
.philosophy__map {
  position: relative;
  width: 100%;
  max-width: 1420px;
  aspect-ratio: 1420 / 683;
  margin: 0 auto;
  translate: 0 -3.7%; /* lift the whole diagram so the space above and below the bubbles is even */
}

.philosophy__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.philosophy__line {
  stroke: var(--border-brand);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.philosophy__line--reverse { stroke-dashoffset: -1; } /* draw from the end near the title */

.philosophy__title {
  position: absolute;
  left: 50%;
  top: calc(337.5 / 683 * 100%);
  translate: -50% -50%;
  white-space: nowrap;
}

.philosophy__bubbles {
  margin: 0;
  padding: 0;
  list-style: none;
}
.philosophy__bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
}

/* Animation: title → each line draws out from the title → its bubble appears → gentle float */
.js .philosophy__title { opacity: 0; transition: opacity 0.8s ease; }
.js .philosophy__bubble {
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.7s ease, scale 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.75s + var(--i) * 0.25s);
}
.js .philosophy__line {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(0.3s + var(--i) * 0.25s);
}
.philosophy__map.is-visible .philosophy__title { opacity: 1; }
.philosophy__map.is-visible .philosophy__line { stroke-dashoffset: 0; }
.philosophy__map.is-visible .philosophy__bubble {
  opacity: 1;
  scale: 1;
  animation: bubble-float 6s ease-in-out calc(2s + var(--i) * 0.7s) infinite;
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


/* Connectors only exist in the stacked (mobile) layout */
.philosophy__connector { display: none; }

/* Tablet & phone: zig-zag column — bubbles alternate left/right, joined by hand-drawn connectors */
@media (max-width: 1000px) {
  .philosophy { padding: 56px var(--space-16) 64px; }
  .philosophy__map { aspect-ratio: auto; translate: none; }
  .philosophy__lines { display: none; }
  .philosophy__title {
    position: static;
    translate: none;
    text-align: center;
  }

  .philosophy__bubbles {
    --shift: clamp(20px, 8vw, 110px);  /* how far each bubble leans left / right */
    --gap: 44px;                        /* vertical space the connector crosses */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    margin-top: 40px;
  }
  .philosophy__bubble {
    position: relative;
    left: auto;
    top: auto;
    width: 260px;
    height: 92px;
    translate: calc(var(--shift) * -1) 0;
  }
  .js .philosophy__bubble { transition-delay: calc(0.2s + var(--i) * 0.35s); }
  .philosophy__bubble:nth-child(even) { translate: var(--shift) 0; }
  .philosophy__bubble .approach-bubble__ring { width: 100%; height: 100%; }
  .philosophy__bubble .approach-bubble__content { gap: var(--space-8); width: auto; }
  .philosophy__bubble .approach-bubble__label { font-size: 15px; }
  .philosophy__map.is-visible .philosophy__bubble { animation-name: bubble-float-sm; }

  /* Connector: from this bubble's bottom to the next bubble's top, across 2 × shift */
  .philosophy__connector {
    display: block;
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    width: calc(var(--shift) * 2);
    height: calc(var(--gap) - 4px);
    overflow: visible;
  }
  .philosophy__bubble:nth-child(even) .philosophy__connector {
    left: auto;
    right: 50%;
    scale: -1 1; /* mirror: lean back to the left */
  }
  .philosophy__connector path {
    stroke: var(--border-brand);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }
  .js .philosophy__connector path {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(0.55s + var(--i) * 0.35s);
  }
  .philosophy__map.is-visible .philosophy__connector path { stroke-dashoffset: 0; }

  .philosophy__palm--left { left: -520px; top: auto; bottom: -520px; }
  .philosophy__palm--right { right: -560px; top: -200px; }
}

@keyframes bubble-float-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 640px) {
  .philosophy__title { font-size: 32px; }
}


/* ---------- Section 6 · Reviews (Figma node 1:224) ---------- */

.reviews {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px 0 50px;
}
.reviews__title {
  padding: 0 var(--space-20);
  text-align: center;
}
.reviews__slider {
  max-width: 1280px;
  margin: 72px auto 0; /* title ends at 129 → cards at 201 */
}
.reviews__track {
  display: flex;
  gap: var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 4px; border-radius: var(--radius-20); }
.reviews__card {
  scroll-snap-align: start;
}
.reviews__arrows {
  justify-content: flex-end;
  margin-top: 17px;
}
/* Wide screens: exactly three cards in view (3 × 414 + gaps is 2px wider than the 1280 track, which clipped the last border) */
@media (min-width: 1100px) {
  .reviews__card { width: min(414px, (100% - 2 * var(--space-20)) / 3); }
}
/* Fewer than two reviews → no arrows */
.reviews__slider.is-static .reviews__arrows { visibility: hidden; }

@media (max-width: 1320px) {
  .reviews__slider { padding: 0 var(--space-20); }
  .reviews__track { scroll-padding-inline: var(--space-20); margin-inline: calc(var(--space-20) * -1); padding-inline: var(--space-20); }
}

@media (max-width: 640px) {
  .reviews { padding: 56px 0 40px; }
  .reviews__title { font-size: 28px; }
  .reviews__slider { margin-top: var(--space-32); padding: 0 var(--space-16); }
  .reviews__track { gap: var(--space-12); scroll-padding-inline: var(--space-16); margin-inline: calc(var(--space-16) * -1); padding-inline: var(--space-16); }
  .reviews__card { width: calc(100vw - 48px); gap: var(--space-32); padding: var(--space-32) var(--space-20); }
  .reviews__card .testimonial__avatar { width: 80px; height: 80px; }
  .reviews__arrows { justify-content: center; }
}

/* ---------- Section 7 · Footer (Figma node 1:256) ---------- */

.footer {
  --footer-pad: 70px;
  min-height: 699px;
  margin-bottom: var(--page-inset);
  padding: 50px var(--footer-pad) 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (hover: hover) {
  .footer__contact .contact__lines a:hover { color: var(--text-accent); }
}
.footer__contact address { font-style: normal; }

/* Motto: spans the full panel width; each word slides up out of its own mask */
.footer__motto-wrap {
  container-type: inline-size;
  align-self: stretch;
  margin: auto calc(var(--footer-pad) * -1) 0; /* pushed to the bottom, bleeds past the padding */
  pointer-events: none;
  user-select: none;
}
.footer__motto {
  display: flex;
  justify-content: space-between;
  padding: 0 2cqw;
  margin: 0;
  font-size: 11cqw; /* ≈156px at 1420px; words + gaps fill 96% of the panel */
  line-height: 1.1;
  color: var(--text-decorative);
  white-space: nowrap;
}
.footer__word {
  display: block;
  overflow: hidden;
}
.footer__word > span {
  display: block;
}
.js .footer__word > span {
  translate: 0 105%;
  transition: translate 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--w) * 0.15s);
}
.footer__motto-wrap.is-visible .footer__word > span { translate: 0 0; }


.footer__bottom {
  position: absolute;
  left: 70px;
  right: 70px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
}
@media (hover: hover) {
  .footer__bottom a:hover { color: var(--text-secondary); }
}

@media (max-width: 640px) {
  .footer { --footer-pad: var(--space-16); min-height: 0; padding: 40px var(--footer-pad) 0; }
  .footer__contact .contact__lines { font-size: 20px; }
  .footer__motto-wrap { margin-top: var(--space-32); }
  .footer__bottom {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) 0 var(--space-16);
  }
}

/* ---------- Inner page hero (Nutrition, Figma node 1:281) ---------- */

.page-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--page-inset);
  max-width: var(--page-max);
  min-height: 660px; /* 650px panels + 10px bottom inset */
  margin: 0 auto;
  padding: 0 var(--page-inset) var(--page-inset);
}

.page-hero__intro {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 78px var(--space-20) 37px; /* title at 79, content ends 38px from the bottom */
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-20);
  isolation: isolate;
}
.page-hero__palm {
  position: absolute;
  z-index: -1;
  left: -577px;
  top: -145px;
  width: 941px;
  height: 1062px;
  pointer-events: none;
}
.breadcrumbs {
  position: absolute;
  left: 68px;
  top: 18px;
  font-size: var(--fs-caption);
  color: var(--text-primary);
}
.breadcrumbs a { color: var(--text-muted); }
@media (hover: hover) {
  .breadcrumbs a:hover { color: var(--text-secondary); }
}

.page-hero__title {
  max-width: 414px;
  text-align: center;
}
.page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 516px;
  max-width: 100%;
  margin-top: auto;
  text-align: center;
}

.page-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-20);
  background: var(--surface-subtle);
}
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 94%; /* Figma crop: top -58.94% of a 162% tall image */
}

@media (max-width: 900px) {
  .page-hero { grid-template-columns: 1fr; min-height: 0; padding-top: var(--space-4); }
  .page-hero__intro { gap: var(--space-64); padding: 72px var(--space-16) var(--space-40); }
  .page-hero__palm { left: -620px; top: -60px; }
  .page-hero__media { min-height: 480px; }
}

@media (max-width: 640px) {
  .breadcrumbs { left: var(--space-20); }
  .page-hero__title { font-size: 32px; }
  .page-hero__media { min-height: 400px; }
}

/* ---------- Nutrition · Section 2 "Еда — это ресурс" (Figma node 1:310) ---------- */

.resource {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 796px;
}

.resource__about {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 50px 40px 114px; /* block centred vertically at x 114, links pinned to the bottom */
}
.resource__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  max-width: 546px;
  text-align: center;
}
.resource__signature { white-space: nowrap; }
.resource__links {
  position: absolute;
  left: 70px;
  right: 24px;
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-24);
}
.resource__link-right { text-align: right; }

.resource__results {
  border-left: 1px solid var(--border-divider);
  padding: 80px 70px 40px 0;
}
.resource__title,
.resource__subtitle {
  margin-left: 60px;
}
.resource__subtitle { margin-top: 20px; }

.resource__list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-divider);
  font-size: var(--fs-body-lg);
}
.resource__list li {
  position: relative;
  padding: var(--space-24) 0 var(--space-24) 94px;
  border-bottom: 1px solid var(--border-divider);
}
.resource__list li:first-child { padding-top: var(--space-40); }
.resource__list li::before {
  content: "";
  position: absolute;
  left: 76px;
  top: calc(var(--space-24) + 0.6em);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.resource__list li:first-child::before { top: calc(var(--space-40) + 0.6em); }
.resource__list strong { font-weight: 600; }


@media (max-width: 1100px) {
  .resource__about { padding-left: 50px; }
  .resource__links { left: 50px; }
}

@media (max-width: 900px) {
  .resource { grid-template-columns: 1fr; min-height: 0; }
  .resource__about { padding: 56px var(--space-20) 40px; align-items: center; }
  .resource__links {
    position: static;
    margin-top: var(--space-40);
    width: 100%; /* full width so the first link stays on the same guide as the videos below */
  }
  .resource__results {
    border-left: 0;
    border-top: 1px solid var(--border-divider);
    padding: 48px var(--space-20) 40px;
  }
  .resource__title, .resource__subtitle { margin-left: 0; }
  .resource__list li { padding-left: 28px; }
  .resource__list li::before { left: 8px; }
}

@media (max-width: 640px) {
  .resource__intro .t-body-lg,
  .resource__list { font-size: 17px; }
  .resource__signature { font-size: 22px; white-space: normal; }
  .resource__title { font-size: 32px; }
  .resource__links { flex-direction: column; gap: var(--space-16); }
  .resource__link-right { text-align: left; }
  .t-link { font-size: 17px; }
}

/* ---------- Nutrition · Section 3 video slider (Figma node 1:331) ---------- */

.videos {
  /* Guide: the first card lines up with "Сертификаты и дипломы" in the section above
     (panel inset 10px + link offset 70px; 50px ≤1100px; 20px when stacked) */
  --gutter: calc(var(--page-inset) + 70px);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 50px 0;
  overflow: hidden;
}
.videos__track {
  display: flex;
  gap: var(--space-20);
  margin: 0;
  padding: 0 var(--gutter); /* full-bleed: cards slide out past the left edge instead of being cut at the guide */
  scroll-padding-inline: var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.videos__track::-webkit-scrollbar { display: none; }
.videos__track > li { scroll-snap-align: start; }
.videos__arrows {
  justify-content: flex-end;
  margin-top: var(--space-20);
  padding: 0 var(--gutter); /* right edge mirrors the guide */
}
/* Arrows row with the "Смотреть лекции" button in the middle (nutrition / psychology) */
.videos__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--space-20);
  padding: 0 var(--gutter);
}
.videos__footer .videos__cta { grid-column: 2; }
.videos__footer .videos__arrows { grid-column: 3; justify-self: end; margin-top: 0; padding: 0; }

@media (max-width: 1100px) {
  .videos { --gutter: calc(var(--page-inset) + 50px); }
}
@media (max-width: 900px) {
  .videos { --gutter: calc(var(--page-inset) + var(--space-20)); padding: 40px 0; }
}
@media (max-width: 640px) {
  .videos__track { gap: var(--space-12); }
  .videos__track .video-card { width: 240px; height: 386px; }
  .videos__arrows { justify-content: center; }
  /* Phones: arrows centred, button underneath */
  .videos__footer { grid-template-columns: 1fr; justify-items: center; row-gap: var(--space-20); }
  .videos__footer .videos__arrows { grid-column: 1; grid-row: 1; justify-self: center; }
  .videos__footer .videos__cta { grid-column: 1; grid-row: 2; }
}

/* Nutrition services: first row starts in column 2 (Figma leaves the first slot empty) */
.services__grid--offset > :first-child { grid-column-start: 2; }
@media (max-width: 1100px) {
  .services__grid--offset > :first-child { grid-column-start: auto; }
}
@media (max-width: 640px) {
  .services__grid .service-card--quote { min-height: 200px; }
}

/* ---------- Nutrition · Section 5 Articles (Figma node 1:387) ---------- */

.articles {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 50px var(--space-20);
}
.articles__title { text-align: center; }
.articles__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: var(--content-max);
  margin: 72px auto 0; /* title ends at 99 → list at 171 */
  padding: 0;
  list-style: none;
}
.articles__list > [hidden] { display: none; }
.articles__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}
.articles__more[hidden] { display: none; }

@media (max-width: 640px) {
  .articles { padding: 40px var(--space-16); }
  .articles__list { margin-top: var(--space-32); }
}

/* ---------- Nutrition · Section 6 "Что входит в консультацию" (Figma node 1:433) ---------- */

.consult { isolation: isolate; }
.consult__palm { position: absolute; z-index: -1; pointer-events: none; }
.consult__palm--left { left: -30px; top: 240px; width: 941px; height: 1063px; }
.consult__palm--right { right: -384px; top: -58px; width: 929px; height: 841px; }

/* Desktop (≥1300px): a 1420×716 map; items are placed by their centre in % of the map */
.consult__map {
  position: relative;
  width: 100%;
  max-width: 1420px;
  aspect-ratio: 1420 / 716;
  margin: 0 auto;
}
.consult__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.consult__line {
  stroke: var(--border-brand);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.consult__line--reverse { stroke-dashoffset: -1; }

.consult__title {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
  white-space: nowrap;
}

.consult__items { margin: 0; padding: 0; list-style: none; }
.consult-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 317px;
  text-align: center;
}
.consult-item__ring {
  position: absolute;
  z-index: -1;
  left: -75px;
  top: calc(50% + var(--ring-dy, 0px)); /* Figma ovals sit ~10px lower than the text block */
  width: 468px;
  height: var(--ring-h);
  translate: 0 -50%;
  max-width: none;
}
.consult-item__text {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
}
.consult-item__connector { display: none; }

/* Animation: title → lines draw out from the title → each oval appears → gentle float */
.js .consult__title { opacity: 0; transition: opacity 0.8s ease; }
.js .consult-item {
  opacity: 0;
  scale: 0.94;
  transition: opacity 0.7s ease, scale 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.75s + var(--i) * 0.25s);
}
.js .consult__line {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(0.3s + var(--i) * 0.25s);
}
.consult__map.is-visible .consult__title { opacity: 1; }
.consult__map.is-visible .consult__line { stroke-dashoffset: 0; }
.consult__map.is-visible .consult-item {
  opacity: 1;
  scale: 1;
  animation: bubble-float 6s ease-in-out calc(2s + var(--i) * 0.7s) infinite;
}


/* Below 1300px the text-heavy ovals no longer fit around the title → zig-zag column with connectors */
@media (max-width: 1299px) {
  .consult { padding: 56px var(--space-16) 72px; }
  .consult__map { aspect-ratio: auto; max-width: 760px; }
  .consult__lines { display: none; }
  .consult__title { position: static; translate: none; }
  .consult__items {
    --shift: clamp(8px, 6vw - 6px, 120px); /* ~16px on a 375px phone, so the ovals stay inside the panel */
    --ring-x: 45px;   /* how far the oval reaches left/right of the text */
    --ring-y: 44px;   /* … and above/below it */
    --gap: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    margin-top: 96px;
  }
  .consult-item {
    position: relative;
    left: auto;
    top: auto;
    width: min(300px, 100% - var(--ring-x) * 2 - var(--shift) * 2); /* oval + zig-zag offset stay inside the panel */
    gap: var(--space-12);
    translate: calc(var(--shift) * -1) 0;
  }
  .consult-item:nth-child(even) { translate: var(--shift) 0; }
  .js .consult-item { transition-delay: calc(0.2s + var(--i) * 0.35s); }
  .consult-item__ring {
    left: calc(var(--ring-x) * -1);
    top: calc(var(--ring-y) * -1);
    width: calc(100% + var(--ring-x) * 2);
    height: calc(100% + var(--ring-y) * 2);
    translate: none;
  }
  .consult-item__text { font-size: 16px; }
  .consult__map.is-visible .consult-item { animation-name: bubble-float-sm; }

  .consult-item__connector {
    display: block;
    position: absolute;
    top: calc(100% + var(--ring-y) + 2px);
    left: 50%;
    width: calc(var(--shift) * 2);
    height: calc(var(--gap) - var(--ring-y) * 2 - 4px);
    overflow: visible;
  }
  .consult-item:nth-child(even) .consult-item__connector { left: auto; right: 50%; scale: -1 1; }
  .consult-item__connector path {
    stroke: var(--border-brand);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }
  .js .consult-item__connector path {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(0.55s + var(--i) * 0.35s);
  }
  .consult__map.is-visible .consult-item__connector path { stroke-dashoffset: 0; }

  .consult__palm--left { left: -520px; top: auto; bottom: -520px; }
  .consult__palm--right { right: -560px; top: -200px; }
}
@media (max-width: 640px) {
  .consult__title { font-size: 32px; }
  .consult-item__text { font-size: 15px; }
  .consult__items { --shift: 10px; } /* phone: ovals nearly centred */
}

/* ---------- Nutrition · Section 7 "Готовы наладить отношения с едой?" (Figma node 1:473) ---------- */

.first-step {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 50px var(--space-20);
}
.first-step__title { text-align: center; }
.first-step__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-40);
  max-width: var(--content-max);
  margin: 72px auto 0;
  padding: 0 112px 0 2px; /* Figma: 1166px row from x 82 to 1248 inside the 1280px content */
}
.first-step__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  max-width: 520px;
}
.first-step__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.first-step__photo {
  flex-shrink: 0;
  width: 277px;
  height: 315px;
  border-radius: var(--radius-20);
  object-fit: cover;
}

@media (max-width: 1100px) {
  .first-step__title { font-size: 36px; }
  .first-step__row { padding: 0 var(--space-20); }
}
@media (max-width: 760px) {
  .first-step { padding: 48px var(--space-16); }
  .first-step__title { font-size: 28px; }
  .first-step__row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-32);
    margin-top: var(--space-32);
    padding: 0;
  }
  .first-step__photo { width: 100%; height: auto; aspect-ratio: 277 / 315; max-width: 360px; align-self: center; }
  .first-step__text .t-heading-hero { font-size: 28px; }
  .first-step__text .t-body-lg { font-size: 17px; }
}

/* ---------- Article page (CMS template, Figma frame 1:512) ---------- */

.article {
  max-width: calc(var(--content-max) + 2 * var(--space-20));
  margin: 0 auto;
  padding: 20px var(--space-20) 50px;
}
.breadcrumbs--static {
  position: static;
  display: flex;
  min-width: 0;
  white-space: nowrap;
}
.breadcrumbs--static > * { flex-shrink: 0; }
.breadcrumbs__current {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1 !important;
  min-width: 0;
}

.article__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-40);
  margin-top: 27px; /* breadcrumbs at 80 → head row at 124 */
}
.article__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 542px;
  padding: 18px 0;
}
.article__date {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
}
.article__cover {
  flex-shrink: 0;
  width: 522px;
  height: 311px;
  border-radius: var(--radius-20);
  object-fit: cover;
  background: var(--surface-subtle);
}

.article__body { max-width: 800px; margin: 40px auto 0; } /* centred reading column */
.article__signature {
  max-width: 800px;
  margin: 24px auto 0; /* starts on the left edge of the centred text column */
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .article__cover { width: 44%; height: auto; aspect-ratio: 522 / 311; }
}
@media (max-width: 760px) {
  .article { padding: 16px var(--space-16) 40px; }
  .article__head { flex-direction: column; align-items: stretch; gap: var(--space-24); margin-top: var(--space-20); }
  .article__intro { padding: 0; gap: var(--space-16); }
  .article__title { font-size: 30px; }
  .article__cover { width: 100%; }
  .article__body { margin-top: var(--space-32); }
  .article__signature { white-space: normal; }
}

/* ---------- Psychology page tweaks ---------- */
.page-hero__title--wide { max-width: 486px; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-20);
  max-width: var(--content-max);
  margin: 34px auto 0; /* title ends at 99 → chips at 133 */
}
.filter-chips:not(:has(.chip)) { display: none; } /* no tagged articles yet */
.articles__list--filtered { margin-top: 40px; } /* chips end at 170 → list at 210 */
.articles__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: var(--content-max);
  margin: var(--space-40) auto 0;
  padding: 56px var(--space-20);
  border-top: 1px solid var(--border-divider);
  border-bottom: 1px solid var(--border-divider);
  text-align: center;
}
.articles__empty[hidden] { display: none; }
.articles__empty-title { font-size: var(--fs-body-lg); color: var(--text-primary); }
.articles__empty-text { color: var(--text-secondary); }
.articles__empty .btn { margin-top: var(--space-12); }

@media (max-width: 640px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: var(--space-24) calc(var(--space-16) * -1) 0;
    padding: 0 var(--space-16) 4px;
    gap: var(--space-8);
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .articles__list--filtered { margin-top: var(--space-24); }
}

/* ---------- FAQ (psychology / nutrition) ---------- */
.faq {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 50px var(--space-20);
}
.faq__title { text-align: center; }
.faq__list {
  max-width: 900px;
  margin: var(--space-40) auto 0;
  border-top: 1px solid var(--border-divider);
}
.faq-item { border-bottom: 1px solid var(--border-divider); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-24) 0;
  font-size: var(--fs-body-lg);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 4px; }
/* "+" that turns into "×" when open */
.faq-item__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.2s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  translate: -50% -50%;
}
.faq-item__icon::after { rotate: 90deg; }
.faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--surface-subtle); }
.faq-item__a {
  max-width: 760px;
  padding: 0 52px var(--space-24) 0;
  color: var(--text-secondary);
}
.faq-item__a p + p { margin-top: var(--space-12); }
.faq-item__list { margin-top: var(--space-12); padding: 0; list-style: none; }
.faq-item__list li + li { margin-top: var(--space-8); }
.faq-item__list a { color: var(--text-primary); white-space: nowrap; }
@media (hover: hover) {
  .faq-item__q:hover .faq-item__icon { background: var(--surface-subtle); }
}

@media (max-width: 640px) {
  .faq { padding: 40px var(--space-16); }
  .faq__list { margin-top: var(--space-24); }
  .faq-item__q { padding: var(--space-20) 0; font-size: var(--fs-body-sm); }
  .faq-item__a { padding-right: 0; }
}

/* ---------- About page hero (Figma node 1:842): left-aligned intro ---------- */
.page-hero__intro--left { align-items: flex-start; padding-left: 68px; padding-right: 46px; }
.page-hero__content--left {
  align-items: flex-start;
  gap: var(--space-20);
  width: 590px;
  text-align: left;
}
.page-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}
@media (max-width: 900px) {
  .page-hero__intro--left { padding-left: var(--space-16); padding-right: var(--space-16); }
}
@media (max-width: 640px) {
  .page-hero__content--left .t-heading-section { font-size: 32px; }
}

/* About page · "С чем я работаю" list under the photo (Figma node 1:864) */
.focus-list {
  max-width: 1058px;
  margin: var(--space-32) auto 0;
  text-align: center;
}
.focus-list__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 29px; /* Figma: an empty 24px line before the list */
}
.focus-list ul {
  margin: 0;
  padding: 0;
  list-style: disc inside;
  font-size: var(--fs-body-lg);
}
.focus-list strong { font-weight: 600; }
@media (max-width: 640px) {
  .focus-list__title { font-size: 20px; margin-bottom: var(--space-16); }
  .focus-list ul { font-size: 17px; }
  .focus-list li + li { margin-top: 6px; }
}

/* ---------- About · Section 3 "Моя Миссия" (Figma node 1:869) ---------- */
.mission {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 539px;
  padding: 29px var(--space-20);
}
.mission__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mission__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 665px;
  max-width: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background: var(--surface-page);
  text-align: center;
}
.mission__image {
  width: 100%;
  height: 220px;
  border-radius: 6px;
  object-fit: cover;
}
.mission__title { font-size: 24px; font-weight: 600; }
.mission__text { max-width: 592px; }
@media (max-width: 640px) {
  .mission { min-height: 0; padding: var(--space-16); }
  .mission__card { padding: var(--space-12) var(--space-12) var(--space-20); }
  .mission__image { height: 160px; }
  .mission__title { font-size: 20px; }
  .mission__text { font-size: 17px; }
}

/* ---------- About · Section 4 "Образование и квалификация" (Figma node 1:875) ---------- */
/* Reuses the nutrition "resource" two-column layout, but full width (no panel) and without links */
.resource--plain {
  max-width: var(--page-max);
  min-height: 795px;
  margin: 0 auto;
}
.resource--plain .resource__about { padding: 40px 50px 40px 124px; }
.resource--plain .resource__results { padding: 80px 80px 50px 0; } /* list ends at x 1360 */
.resource__list--flush { margin-top: 16px; border-top: 0; }
@media (max-width: 1100px) {
  .resource--plain .resource__about { padding-left: 50px; }
}
@media (max-width: 900px) {
  .resource--plain { min-height: 0; }
  .resource--plain .resource__about { padding: 56px var(--space-20) 40px; }
  .resource--plain .resource__results { padding: 48px var(--space-20) 40px; }
}

/* ---------- About · Section 5 certificates slider (Figma node 1:894) — reuses .videos ---------- */
#certificates .videos__track { align-items: center; }
.videos__track > li { flex-shrink: 0; }
@media (max-width: 640px) {
  .videos__track .cert-card { --cert-h: 380px; --cert-max-w: calc(100vw - 2 * var(--gutter)); }
}

/* ---------- About · Section 6 "В каких подходах я работаю" (Figma node 1:905) ---------- */
.methods { padding: 80px var(--space-20) 50px; text-align: center; }
.methods__lead { max-width: 1058px; margin: 10px auto 0; }
.methods__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  max-width: var(--content-max);
  margin: 44px auto 0; /* lead ends at 187 → cards at 231 */
  padding: 0;
  list-style: none;
  text-align: left;
}
@media (max-width: 900px) {
  .methods { padding: 56px var(--space-16) 40px; }
  .methods__title { font-size: 32px; }
  .methods__grid { grid-template-columns: 1fr; gap: var(--space-12); margin-top: var(--space-32); }
}
@media (max-width: 640px) {
  .methods__lead { font-size: 17px; }
}

/* ---------- About · Section 7 "Я в соц сетях" (Figma node 1:931) ---------- */
.socials-big { padding: 50px var(--space-20); text-align: center; }
.socials-big__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-40) var(--space-64);
  margin: 48px 0 0; /* title ends at 99 → icons at 147 */
  padding: 0;
  list-style: none;
}
.social-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 128px;
  font-family: var(--font-serif);
  font-size: 24px; /* Design / Label / Social */
  color: var(--text-accent);
}
.social-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border: 1px solid var(--surface-section); /* border/soft */
  border-radius: 64px;
  background: var(--surface-card);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.3s ease;
}
.social-tile__icon img { width: 44px; height: 44px; }
@media (hover: hover) {
  .social-tile:hover .social-tile__icon {
    transform: translateY(-4px);
    border-color: var(--border-brand);
    box-shadow: 0 12px 24px rgba(120, 111, 57, 0.12);
  }
}
.social-tile:focus-visible { outline: none; }
.social-tile:focus-visible .social-tile__icon { outline: 2px solid var(--border-accent); outline-offset: 3px; }
@media (max-width: 640px) {
  .socials-big { padding: 40px var(--space-16); }
  .socials-big__list { gap: var(--space-24); margin-top: var(--space-32); }
  .social-tile { width: 96px; font-size: 20px; }
  .social-tile__icon { width: 96px; height: 96px; }
  .social-tile__icon img { width: 36px; height: 36px; }
}

/* Psychology / nutrition closing block sits on a tile (after the FAQ) */
.first-step--tile {
  margin: 50px max(var(--page-inset), (100% - var(--page-max)) / 2 + var(--page-inset)) var(--page-inset);
  padding: 72px var(--space-20) 80px;
}
@media (max-width: 760px) {
  .first-step--tile { margin-top: 40px; padding: 48px var(--space-16); }
}

/* About closing block: wider text column (624px) */
.first-step__text--wide { max-width: 624px; }

/* ---------- Contacts page (Figma frame 1:991) ---------- */
.contacts-page {
  max-width: calc(var(--content-max) + 2 * var(--space-20));
  margin: 0 auto;
  padding: 40px var(--space-20) 0; /* header 60 → card at 100 */
}
/* Full-height page: header on top, the card stretches to fill the screen, captions at the bottom */
.page-fill {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.page-fill .site-header { flex-shrink: 0; width: 100%; }
.page-fill .contacts-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.page-fill .contacts-card { flex: 1; }

.contacts-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 469px;
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-20);
  isolation: isolate;
}
.contacts-card__palm { /* the hero palm at 76% size */
  position: absolute;
  z-index: -1;
  left: -409px;
  top: -116px;
  width: 720px;
  height: 813px;
  pointer-events: none;
}
.contacts-card .breadcrumbs { left: 38px; }
.contacts-card__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-20);
  padding: 40px var(--space-24) 40px 38px;
}
.contacts-card__lines {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.contact-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-serif);
  font-size: 24px; /* Design / Label / Social */
  color: var(--text-primary);
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .contact-line:hover { color: var(--text-accent); }
}
.contact-line__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
}
.contacts-card__legal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-20);
  padding: 40px var(--space-40) 40px 39px;
  border-left: 1px solid var(--border-divider);
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
}
.contacts-page__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 28px 0 18px; /* card ends 569 → captions at 597 */
}
@media (hover: hover) {
  .contacts-page__bottom a:hover { color: var(--text-secondary); }
}
.contacts-card .icon-btn { background: var(--surface-section); } /* Figma: surface/section here */
@media (hover: hover) {
  .contacts-card .icon-btn:hover { background: var(--surface-subtle); }
}

@media (max-width: 900px) {
  .contacts-card { grid-template-columns: 1fr; }
  .contacts-card__main { padding: 72px var(--space-20) 40px; }
  .contacts-card__legal { border-left: 0; border-top: 1px solid var(--border-divider); padding: 32px var(--space-20) 40px; }
  .contacts-card__palm { left: -460px; }
}
/* ---------- 404 page (404.html, uses the contacts page frame) ---------- */
.not-found {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  min-height: 469px;
  padding: 64px var(--space-24);
  border-radius: var(--radius-20);
  background: var(--surface-section);
  text-align: center;
  isolation: isolate;
}
.not-found__palm { position: absolute; z-index: -1; pointer-events: none; }
.not-found__palm--left { left: -520px; bottom: -560px; width: 926px; height: 1046px; }
.not-found__palm--right { right: -380px; top: -300px; width: 674px; height: 705px; }
.not-found__code {
  font-family: var(--font-serif);
  font-size: clamp(120px, 22vw, 260px);
  line-height: 0.8;
  color: var(--text-decorative);
}
.not-found__text { max-width: 460px; margin-bottom: var(--space-12); }
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
}
.not-found__links .btn--nav { background: var(--surface-control); } /* stand out on the panel */
@media (hover: hover) {
  .not-found__links .btn--nav:hover { background: #e6e6d0; }
}

@media (max-width: 640px) {
  .not-found { padding: 56px var(--space-16); }
  .not-found__title { font-size: 32px; }
  .not-found__palm--left { left: -600px; }
  .not-found__palm--right { right: -480px; }
}

@media (max-width: 640px) {
  .contacts-page { padding: var(--space-16) var(--space-16) 0; }
  .contacts-card .breadcrumbs { left: var(--space-20); }
  .contact-line { font-size: 20px; }
  .contacts-card__legal { font-size: 16px; gap: var(--space-12); }
  .contacts-page__bottom { flex-direction: column; align-items: center; gap: var(--space-4); }
}

/* ---------- Legal pages (privacy.html, consent.html, consent-publication.html) ---------- */
.legal__head,
.legal__body { max-width: 800px; margin-left: auto; margin-right: auto; }
.legal__head { display: flex; flex-direction: column; gap: var(--space-16); margin-top: 40px; }
.legal__date { font-size: var(--fs-body-lg); color: var(--text-muted); }
.legal__body { margin-top: 40px; }
.legal__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: calc(var(--content-max) + 2 * var(--space-20));
  margin: 0 auto;
  padding: 28px var(--space-20) 18px;
  border-top: 1px solid var(--border-divider);
}
@media (hover: hover) {
  .legal__bottom a:hover { color: var(--text-secondary); }
}
@media (max-width: 640px) {
  .legal__head { margin-top: var(--space-20); }
  .legal__head .t-heading-section { font-size: 30px; }
  .legal__body { margin-top: var(--space-32); }
  .legal__bottom { flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-16); }
}

/* ---------- Course program: modules, second section of Nutrition / Psychology ---------- */

.topics {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 50px var(--space-20) 60px;
}
.topics__title { text-align: center; }
.topics__lead {
  max-width: 560px;
  margin: var(--space-20) auto 0;
  text-align: center;
  color: var(--text-secondary);
}
.topics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 630px));
  justify-content: center;
  gap: var(--space-20);
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.topics__grid--3 { grid-template-columns: repeat(3, minmax(0, 413px)); }

.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 100%;
  padding: var(--space-24) var(--space-24) var(--space-32);
  border-radius: var(--radius-20);
  background: var(--surface-section);
}
.topic-card__num {
  font-family: var(--font-hand);
  font-size: var(--fs-handwritten);
  color: var(--text-accent);
}
.topic-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-heading-name);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}
.topic-card__text {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.topic-card__list {
  margin: 0;
  padding: var(--space-8) 0 0;
  list-style: none;
}
.topic-card__list li {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-divider);
  font-size: var(--fs-body-sm);
}
.topic-card__list strong { font-weight: 600; }
.topic-card__list span { color: var(--text-secondary); }

/* Last cell of an odd grid: handwritten note + CTA */
.topic-card--note {
  justify-content: center;
  align-items: center;
  background: var(--surface-card-muted);
  text-align: center;
}
.topic-card--note .service-card__note { color: var(--text-inverse); }
.topic-card--wide { grid-column: span 2; }
.topic-card--wide .service-card__note { max-width: 420px; }

@media (max-width: 1100px) {
  .topics__grid,
  .topics__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topics__title { font-size: 36px; }
}

@media (max-width: 640px) {
  .topics { padding: 40px var(--space-16); }
  .topics__title { font-size: 28px; }
  .topics__lead { font-size: var(--fs-body-sm); }
  .topics__grid,
  .topics__grid--3 { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-32); gap: var(--space-12); }
  .topic-card { padding: var(--space-20) var(--space-20) var(--space-24); }
  .topic-card__title { font-size: 24px; }
  .topic-card--note { min-height: 200px; }
  .topic-card--wide { grid-column: auto; }
}

/* ---------- About · Section 4 Education: head row + one column per document type ---------- */

.education {
  max-width: calc(var(--content-max) + 2 * var(--space-20));
  margin: 0 auto;
  padding: 80px var(--space-20) 60px;
}
.education__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-40);
  padding-bottom: var(--space-40);
  border-bottom: 1px solid var(--border-divider);
}
.education__intro {
  max-width: 420px;
}
.education__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.edu-group {
  padding: var(--space-32) var(--space-32) 0;
  border-left: 1px solid var(--border-divider);
}
.edu-group:first-child { padding-left: 0; border-left: 0; }
.edu-group:last-child { padding-right: 0; }
.edu-group__title { color: var(--text-accent); }
.edu-group__list {
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
.edu-entry {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--border-divider);
}
.edu-entry:first-child { border-top: 0; padding-top: var(--space-8); }
.edu-entry__uni {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.edu-entry__specs {
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-sm);
}
.edu-entry__specs li + li { margin-top: var(--space-12); }
.edu-entry__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

/* Full-width row under the two columns (certificates). The --wide entry takes two thirds with its
   specs in two columns; the other entries stack in the last third. */
.edu-group--wide {
  grid-column: 1 / -1;
  margin-top: var(--space-32);
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--border-divider);
}
.edu-group--wide .edu-group__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  column-gap: var(--space-32);
}
.edu-group--wide .edu-entry { grid-column: 3; }
.edu-group--wide .edu-entry:nth-child(2) { border-top: 0; padding-top: var(--space-8); }
.edu-group--wide .edu-entry--wide {
  grid-column: 1 / span 2;
  grid-row: 1 / span 20;
  padding-right: var(--space-32);
  border-right: 1px solid var(--border-divider);
}
.edu-group--wide .edu-entry--wide .edu-entry__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--space-32);
}
.edu-group--wide .edu-entry--wide .edu-entry__specs li + li { margin-top: 0; }

@media (max-width: 1100px) {
  .edu-group--wide .edu-group__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-group--wide .edu-entry { grid-column: 2; }
  .edu-group--wide .edu-entry--wide { grid-column: 1; }
  .edu-group--wide .edu-entry--wide .edu-entry__specs { grid-template-columns: 1fr; gap: 0; }
  .edu-group--wide .edu-entry--wide .edu-entry__specs li + li { margin-top: var(--space-12); }
}

@media (max-width: 760px) {
  .education { padding: 56px var(--space-16) 40px; }
  .education__head { flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-bottom: var(--space-32); }
  .education__title { font-size: 32px; }
  .education__intro .t-body-lg { font-size: 17px; }
  .education__groups { grid-template-columns: 1fr; }
  .edu-group,
  .edu-group--wide { padding: var(--space-24) 0 0; border-left: 0; margin-top: 0; }
  .edu-group--wide .edu-group__list { display: block; }
  .edu-group--wide .edu-entry--wide { padding-right: 0; border-right: 0; }
  .edu-group--wide .edu-entry:nth-child(2) { border-top: 1px solid var(--border-divider); padding-top: var(--space-20); }
  .edu-group + .edu-group { border-top: 1px solid var(--border-divider); margin-top: var(--space-24); }
}