:root {
  --bg: #fffcef;
  --card: #e9d4c3;
  --text-dark: #0a3428;
  --text-main: #1e2b36;
  --emerald: #0a3428;
  --accent-wine: #660810;
  --line: #dccfbe;
  --white: #ffffff;
  --serif: "Forum", "Cormorant Garamond", Georgia, serif;
  --sans: "Onest", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  scroll-padding-top: 96px;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--text-main);
  background: var(--bg);
  font-family: var(--sans);
}

main {
  background: var(--bg);
}

a {
  color: inherit;
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(22px, 2.8vw, 42px);
  background:
    linear-gradient(90deg, rgba(220, 207, 190, 0.34) 1px, transparent 1px),
    linear-gradient(180deg, rgba(220, 207, 190, 0.24) 1px, transparent 1px),
    var(--bg);
  background-size: 25vw 100%, 100% 33.333%;
}

.site-header {
  position: fixed;
  z-index: 40;
  top: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  width: calc(100% - 88px);
  min-height: 50px;
  padding: 8px clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 18px;
  background: rgba(255, 252, 239, 0.68);
  box-shadow: 0 18px 52px rgba(48, 38, 28, 0.09);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  transform: translateX(-50%);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 252, 239, 0.76);
  box-shadow: 0 14px 36px rgba(48, 38, 28, 0.12);
  transform: translateX(-50%) translateY(-4px);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  width: max-content;
  color: var(--emerald);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(18px, 1.45vw, 26px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.95;
  text-decoration: none;
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(18px, 2.6vw, 46px);
  min-width: 0;
}

.site-nav a {
  color: rgba(10, 52, 40, 0.92);
  font-family: var(--sans);
  font-size: clamp(12px, 0.82vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.24s ease, opacity 0.24s ease;
}

.site-nav a:hover {
  color: var(--accent-wine);
}

.site-menu-toggle {
  display: none;
}

main section[id],
footer[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  main section[id], footer[id] { scroll-margin-top: 84px; }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: visible;
  }

  .site-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 38px;
    padding: 8px 12px;
    color: var(--emerald);
    background: transparent;
    border: 1px solid rgba(10, 52, 40, .28);
    border-radius: 999px;
    font: 700 11px/1 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    max-height: calc(100svh - 96px);
    padding: 8px;
    overflow-y: auto;
    background: rgba(255, 252, 239, .98);
    border: 1px solid rgba(10, 52, 40, .14);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(48, 38, 28, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .site-nav a {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(10, 52, 40, .1);
    font-size: 12px;
  }

  .site-nav a:last-child { border-bottom: 0; }
}

.portrait,
.photo-slot {
  position: absolute;
  overflow: hidden;
  background: var(--card);
}

.portrait--main {
  z-index: 8;
  left: 48.2%;
  top: 8.8%;
  width: min(326px, 18vw);
  height: min(422px, 35vh);
  min-width: 214px;
  min-height: 286px;
  border: 1px solid rgba(10, 52, 40, 0.08);
  box-shadow: 0 22px 46px rgba(60, 43, 30, 0.1);
  transform: translateY(-18px);
}

.portrait--main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.96) contrast(1.02);
}

.portrait-caption {
  position: absolute;
  z-index: 13;
  left: calc(48.2% + min(326px, 18vw) + 18px);
  top: 22%;
  margin: 0;
  color: var(--accent-wine);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photo-slot {
  z-index: 6;
  display: grid;
  place-items: center;
  border: 1px solid rgba(102, 8, 16, 0.16);
  box-shadow: 0 18px 34px rgba(60, 43, 30, 0.08);
}

.photo-slot::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  z-index: 2;
  pointer-events: none;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(0.98);
}

.photo-slot--right {
  right: clamp(28px, 4vw, 70px);
  top: 34%;
  width: min(310px, 16.8vw);
  height: min(342px, 34vh);
  border: 0;
  background: transparent;
  box-shadow: 0 24px 48px rgba(60, 43, 30, 0.16);
  transform: rotate(-3.5deg);
  transform-origin: 50% 82%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-slot--right:hover {
  transform: rotate(2.8deg) translateY(-5px);
}

.photo-slot--right img {
  object-position: center center;
}

.photo-slot--right::before {
  display: none;
}

.photo-slot--left {
  z-index: 9;
  left: clamp(28px, 4vw, 70px);
  bottom: clamp(24px, 3.4vh, 42px);
  width: min(170px, 10vw);
  aspect-ratio: 941 / 1672;
  height: auto;
  background: rgba(255, 252, 239, 0.88);
  border: 1px solid rgba(220, 207, 190, 0.62);
  box-shadow: 0 22px 44px rgba(60, 43, 30, 0.1);
}

.photo-slot--left::before {
  display: none;
}

.photo-slot--left img {
  object-fit: contain;
  object-position: 58% 42%;
}

.hero-copy {
  position: absolute;
  z-index: 10;
  left: clamp(36px, 6.6vw, 126px);
  top: 28.7%;
  width: min(610px, 34vw);
  max-width: 620px;
}

.hero h1 {
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.025em;
}

.hero h1 > span {
  display: block;
}

.hero-title-main {
  font-size: clamp(72px, 5.55vw, 98px);
  line-height: 0.86;
}

.hero-title-main:nth-child(2) {
  font-size: clamp(66px, 5.15vw, 92px);
}

.hero-title-subline {
  margin: 18px 0 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(28px, 2.15vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.clarity-word {
  display: inline-block;
  filter: blur(2.4px);
  letter-spacing: 0.05em;
  transform: translateX(-4px);
  animation: clarity-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

@keyframes clarity-in {
  to {
    filter: blur(0);
    letter-spacing: 0;
    transform: translateX(0);
  }
}

.hero-subtitle {
  position: absolute;
  z-index: 12;
  left: clamp(36px, 6.6vw, 126px);
  top: 50.4%;
  bottom: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 12px 0 12px 28px;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(23px, 1.72vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 1.05em;
  background: var(--accent-wine);
  transform: translateY(-50%);
}

.script-accent {
  position: relative;
  display: inline-block;
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: 1.34em;
  font-weight: 600;
  line-height: 0.86;
  transform: translateY(3px);
}

.script-accent::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 2%;
  bottom: -6px;
  height: 2px;
  background: var(--accent-wine);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.hero-tags {
  position: absolute;
  z-index: 12;
  left: clamp(265px, 18vw, 345px);
  bottom: 7.4%;
  width: min(820px, 47vw);
  height: 205px;
}

.hero-tags span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 14px 9px;
  border: 1px solid rgba(10, 52, 40, 0.1);
  border-radius: 9px;
  color: var(--emerald);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 24px rgba(60, 43, 30, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--sans);
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-r));
  animation: tag-settle 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.hero-tags span:hover {
  animation: none;
  box-shadow: 0 14px 28px rgba(60, 43, 30, 0.09);
  transform: translate(0, -3px) rotate(var(--final-r));
}

.hero-tags span:nth-child(1) {
  left: 4%;
  top: 18px;
  --final-r: -1deg;
  --from-x: 190px;
  --from-y: 78px;
  --from-r: -6deg;
  --collect-x: 210px;
  --collect-y: 82px;
  --collect-r: -1deg;
}

.hero-tags span:nth-child(2) {
  left: 32%;
  top: 2px;
  --final-r: 1deg;
  --from-x: 70px;
  --from-y: 104px;
  --from-r: 5deg;
  --collect-x: 18px;
  --collect-y: 98px;
  --collect-r: 1deg;
  animation-delay: 0.04s;
}

.hero-tags span:nth-child(3) {
  left: 58%;
  top: 26px;
  --final-r: -1deg;
  --from-x: -92px;
  --from-y: 82px;
  --from-r: -5deg;
  --collect-x: -142px;
  --collect-y: 76px;
  --collect-r: -1deg;
  animation-delay: 0.08s;
}

.hero-tags span:nth-child(4) {
  left: 78%;
  top: 34px;
  --final-r: -1deg;
  --from-x: -250px;
  --from-y: 38px;
  --from-r: 5deg;
  --collect-x: -278px;
  --collect-y: 22px;
  --collect-r: 1deg;
  animation-delay: 0.12s;
}

.hero-tags span:nth-child(5) {
  left: 0;
  top: 104px;
  --final-r: -1deg;
  --from-x: 126px;
  --from-y: 4px;
  --from-r: -4deg;
  --collect-x: 195px;
  --collect-y: -2px;
  --collect-r: 1deg;
  animation-delay: 0.16s;
}

.hero-tags span:nth-child(6) {
  left: 30%;
  top: 112px;
  --final-r: 1deg;
  --from-x: -46px;
  --from-y: -18px;
  --from-r: 5deg;
  --collect-x: -12px;
  --collect-y: -18px;
  --collect-r: -1deg;
  animation-delay: 0.2s;
}

.hero-tags span:nth-child(7) {
  left: 64%;
  top: 150px;
  --final-r: 1deg;
  --from-x: -226px;
  --from-y: -44px;
  --from-r: -5deg;
  --collect-x: -228px;
  --collect-y: -62px;
  --collect-r: 1deg;
  animation-delay: 0.24s;
}

.hero-tags span:nth-child(8) {
  left: 16%;
  top: 170px;
  --final-r: -1deg;
  --from-x: 78px;
  --from-y: -82px;
  --from-r: 5deg;
  --collect-x: 86px;
  --collect-y: -96px;
  --collect-r: -1deg;
  animation-delay: 0.28s;
}

@keyframes tag-settle {
  to {
    transform: translate(0, 0) rotate(var(--final-r));
  }
}

.hero-cta {
  position: absolute;
  z-index: 14;
  right: 23.5%;
  bottom: 18.2%;
  display: inline-grid;
  place-items: center;
  min-width: 226px;
  height: 52px;
  padding: 0 30px;
  border: 1px solid rgba(102, 8, 16, 0.12);
  border-radius: 15px;
  color: var(--white);
  background: var(--accent-wine);
  box-shadow: 0 12px 24px rgba(102, 8, 16, 0.12);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.bookmark {
  position: absolute;
  z-index: 11;
  right: clamp(154px, 14.6vw, 242px);
  top: 34.2%;
  width: 24px;
  height: 86px;
  border-radius: 5px 5px 2px 2px;
  background: var(--accent-wine);
  box-shadow: 0 18px 32px rgba(102, 8, 16, 0.16);
  transform: rotate(-3.5deg);
}

@media (prefers-reduced-motion: reduce) {
  .clarity-word,
  .photo-slot--right,
  .hero-tags span {
    animation: none;
    transition: none;
  }

  .clarity-word {
    filter: none;
    letter-spacing: 0;
    transform: none;
  }

  .hero-tags span {
    transform: none;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .about-story .about-story__deck {
    overflow: hidden;
  }
}

.bookmark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  border-right: 13px solid transparent;
  border-bottom: 18px solid var(--bg);
  border-left: 13px solid transparent;
}

.editorial-line {
  position: absolute;
  z-index: 1;
  background: var(--line);
}

.line-one {
  left: 50%;
  top: 31%;
  width: 1px;
  height: 42vh;
}

.line-two {
  left: 7%;
  bottom: 31%;
  width: 53vw;
  height: 1px;
}

.familiar {
  position: relative;
  height: 100svh;
  min-height: 720px;
  margin-top: clamp(72px, 8vw, 120px);
  padding: clamp(50px, 5vw, 72px) clamp(56px, 6.5vw, 100px) clamp(34px, 3.6vw, 52px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(220, 207, 190, 0.24) 1px, transparent 1px),
    var(--bg);
  background-size: 25vw 100%;
}

.familiar::before {
  content: "[02]";
  position: absolute;
  left: clamp(56px, 6.5vw, 100px);
  top: 24px;
  color: rgba(10, 52, 40, 0.58);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.familiar__intro {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 124px;
  padding: 0 24px;
}

.familiar__heading {
  width: 100%;
  text-align: left;
}

.familiar__script {
  width: max-content;
  max-width: 100%;
  margin: 0 0 5px;
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(38px, 3.2vw, 52px);
  font-weight: 500;
  line-height: 0.9;
  transform: rotate(-2deg);
}

.familiar h2 {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(44px, 3.75vw, 56px);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
  white-space: nowrap;
}

.approach {
  position: relative;
  min-height: 100svh;
  margin-top: clamp(96px, 11vw, 180px);
  padding: clamp(78px, 8vw, 120px) clamp(56px, 6.5vw, 100px)
    clamp(92px, 9vw, 140px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(220, 207, 190, 0.22) 1px, transparent 1px),
    var(--bg);
  background-size: 25vw 100%;
}

.approach__header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  column-gap: clamp(56px, 7vw, 108px);
  align-items: end;
}

.approach__marker {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(34px, 4vw, 58px);
  color: var(--emerald);
}

.approach__marker span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.approach__marker p {
  margin: 0;
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1;
}

.approach__header h2 {
  max-width: 760px;
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(54px, 5.3vw, 82px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  text-wrap: balance;
}

.approach__lead {
  align-self: end;
  max-width: 600px;
  padding-bottom: 5px;
}

.approach__lead p {
  margin: 0;
  color: rgba(30, 43, 54, 0.78);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
}

.approach__lead p:first-child {
  margin-bottom: 18px;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.2;
}

.approach__workspace {
  margin-top: clamp(72px, 8vw, 120px);
}

.approach__notes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: clamp(62px, 7vw, 104px) clamp(54px, 7vw, 108px);
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 24px clamp(12px, 3vw, 44px) 42px;
}

.approach__hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  margin: 0;
  color: rgba(102, 8, 16, 0.74);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-3deg);
}

.approach-note {
  --rotation: 0deg;
  --approach-x: 0px;
  --approach-y: 0px;
  --approach-opacity: 1;
  --approach-scale: 1;
  --approach-current-rotation: var(--rotation);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 250px;
  padding: 34px 36px 38px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    0 4%,
    2% 2%,
    4% 3.5%,
    6% 1.6%,
    8% 3.4%,
    10% 1.7%,
    12% 3.5%,
    14% 1.8%,
    16% 3.2%,
    18% 1.8%,
    20% 3.5%,
    22% 1.7%,
    24% 3.3%,
    26% 1.8%,
    28% 3.4%,
    30% 1.7%,
    32% 3.5%,
    34% 1.8%,
    36% 3.3%,
    38% 1.7%,
    40% 3.5%,
    42% 1.8%,
    44% 3.4%,
    46% 1.7%,
    48% 3.3%,
    50% 1.8%,
    52% 3.4%,
    54% 1.7%,
    56% 3.5%,
    58% 1.8%,
    60% 3.3%,
    62% 1.7%,
    64% 3.5%,
    66% 1.8%,
    68% 3.4%,
    70% 1.7%,
    72% 3.3%,
    74% 1.8%,
    76% 3.5%,
    78% 1.7%,
    80% 3.4%,
    82% 1.8%,
    84% 3.3%,
    86% 1.7%,
    88% 3.5%,
    90% 1.8%,
    92% 3.4%,
    94% 1.7%,
    96% 3.4%,
    98% 2%,
    100% 4%,
    100% 96%,
    98% 98.5%,
    95% 97.2%,
    92% 99%,
    89% 97.3%,
    86% 99%,
    83% 97.4%,
    80% 99%,
    77% 97.2%,
    74% 99%,
    71% 97.4%,
    68% 99%,
    65% 97.2%,
    62% 99%,
    59% 97.4%,
    56% 99%,
    53% 97.2%,
    50% 99%,
    47% 97.4%,
    44% 99%,
    41% 97.2%,
    38% 99%,
    35% 97.4%,
    32% 99%,
    29% 97.2%,
    26% 99%,
    23% 97.4%,
    20% 99%,
    17% 97.2%,
    14% 99%,
    11% 97.4%,
    8% 99%,
    5% 97.2%,
    2% 98.5%,
    0 96%
  );
  color: var(--emerald);
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(65, 55, 43, 0.055) 31.4%, transparent 32% 68%, rgba(65, 55, 43, 0.045) 68.4%, transparent 69%),
    linear-gradient(180deg, transparent 0 48%, rgba(65, 55, 43, 0.04) 48.4%, transparent 49%),
    linear-gradient(128deg, rgba(255, 255, 255, 0.78), rgba(241, 238, 228, 0.9));
  box-shadow: 0 24px 46px rgba(57, 45, 35, 0.12);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: var(--approach-opacity);
  transform:
    translate3d(var(--approach-x), var(--approach-y), 0)
    rotate(var(--approach-current-rotation))
    scale(var(--approach-scale));
  transition:
    transform 0.9s cubic-bezier(0.22, 0.72, 0.22, 1),
    opacity 0.55s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.approach-note::before {
  content: "";
  position: absolute;
  right: 27px;
  top: 28px;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(102, 8, 16, 0.74);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.approach-note::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  pointer-events: none;
}

.approach-note:hover {
  box-shadow: 0 27px 52px rgba(57, 45, 35, 0.14);
  transform:
    translate3d(var(--approach-x), calc(var(--approach-y) - 4px), 0)
    rotate(var(--approach-current-rotation))
    scale(var(--approach-scale));
}

.approach-note:focus-visible {
  outline: 2px solid var(--accent-wine);
  outline-offset: 6px;
}

.approach-note.is-active {
  z-index: 4;
  box-shadow: 0 30px 58px rgba(57, 45, 35, 0.16);
}

.approach-note__number {
  position: absolute;
  z-index: 1;
  right: 41px;
  top: 44px;
  color: var(--accent-wine);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.approach-note__title {
  align-self: flex-start;
  max-width: 80%;
  margin-top: auto;
  color: var(--text-main);
  font-family: var(--sans);
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 500;
  line-height: 1.15;
}

/* Единая печатная типографика для навигации и карточек */
.site-nav a,
.service-card,
.approach-note,
.useful-tab,
.useful-article,
.faq-item {
  font-family: var(--sans);
}

.approach-note--one {
  --rotation: -1.8deg;
}

.approach-note--two {
  --rotation: 1.3deg;
}

.approach-note--three {
  --rotation: 1deg;
}

.approach-note--four {
  --rotation: -1.2deg;
}

.approach-modal {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.36s ease, visibility 0.36s ease;
}

.approach-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.approach-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(39, 36, 30, 0.24);
  backdrop-filter: blur(10px) saturate(0.72);
  -webkit-backdrop-filter: blur(10px) saturate(0.72);
}

.approach-detail {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 48px));
  min-height: 500px;
  padding: clamp(52px, 5vw, 74px);
  clip-path: polygon(
    0 3%,
    3% 1.5%,
    6% 3%,
    9% 1.4%,
    12% 3%,
    15% 1.5%,
    18% 3%,
    21% 1.4%,
    24% 3%,
    27% 1.5%,
    30% 3%,
    33% 1.4%,
    36% 3%,
    39% 1.5%,
    42% 3%,
    45% 1.4%,
    48% 3%,
    51% 1.5%,
    54% 3%,
    57% 1.4%,
    60% 3%,
    63% 1.5%,
    66% 3%,
    69% 1.4%,
    72% 3%,
    75% 1.5%,
    78% 3%,
    81% 1.4%,
    84% 3%,
    87% 1.5%,
    90% 3%,
    93% 1.4%,
    96% 3%,
    100% 2%,
    100% 97%,
    96% 99%,
    92% 97.5%,
    88% 99%,
    84% 97.5%,
    80% 99%,
    76% 97.5%,
    72% 99%,
    68% 97.5%,
    64% 99%,
    60% 97.5%,
    56% 99%,
    52% 97.5%,
    48% 99%,
    44% 97.5%,
    40% 99%,
    36% 97.5%,
    32% 99%,
    28% 97.5%,
    24% 99%,
    20% 97.5%,
    16% 99%,
    12% 97.5%,
    8% 99%,
    4% 97.5%,
    0 99%
  );
  background:
    linear-gradient(90deg, transparent 0 32%, rgba(65, 55, 43, 0.055) 32.4%, transparent 33% 67%, rgba(65, 55, 43, 0.045) 67.4%, transparent 68%),
    linear-gradient(180deg, transparent 0 49%, rgba(65, 55, 43, 0.045) 49.4%, transparent 50%),
    linear-gradient(130deg, rgba(255, 255, 255, 0.96), rgba(241, 238, 228, 0.97));
  box-shadow: 0 34px 80px rgba(32, 25, 19, 0.22);
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  transition: opacity 0.38s ease, transform 0.48s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.approach-modal.is-open .approach-detail {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.approach-detail::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(102, 8, 16, 0.12);
  pointer-events: none;
}

.approach-detail.is-changing {
  opacity: 0.35;
  transform: translateY(8px) scale(0.98);
}

.approach-detail__close {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 32px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(10, 52, 40, 0.18);
  border-radius: 50%;
  color: var(--emerald);
  background: rgba(255, 252, 239, 0.72);
  font: inherit;
  cursor: pointer;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

.approach-detail__close:hover {
  border-color: rgba(102, 8, 16, 0.46);
  transform: rotate(4deg);
}

.approach-detail__close span {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.approach-detail__number {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  margin-bottom: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(102, 8, 16, 0.52);
  border-radius: 50%;
  color: var(--accent-wine);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.approach-detail h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  color: var(--text-main);
  font-family: var(--sans);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.08;
}

.approach-detail p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(30, 43, 54, 0.78);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.6;
}

body.has-approach-modal {
  overflow: hidden;
}

.familiar__body {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: clamp(52px, 6vw, 86px);
  height: clamp(470px, 54vh, 500px);
  margin-top: clamp(22px, 2.6vh, 30px);
}

.familiar__visual {
  justify-self: start;
  width: min(100%, 410px);
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f4f0ed;
}

.familiar__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.familiar__content {
  align-self: center;
  min-width: 0;
}

.familiar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(10, 52, 40, 0.2);
  counter-reset: familiar-item;
}

.familiar__list li {
  position: relative;
  min-height: 49px;
  padding: 13px 6px 13px 42px;
  border-bottom: 1px solid rgba(10, 52, 40, 0.2);
  color: rgba(30, 43, 54, 0.82);
  font-size: clamp(14px, 1.02vw, 17px);
  font-weight: 500;
  line-height: 1.28;
  counter-increment: familiar-item;
  transition: color 0.28s ease, padding-left 0.28s ease;
}

.familiar__list li::before {
  content: counter(familiar-item, decimal-leading-zero);
  position: absolute;
  left: 4px;
  top: 16px;
  color: rgba(102, 8, 16, 0.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.familiar__list li:hover {
  padding-left: 47px;
  color: var(--emerald);
}

.familiar__statement {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: clamp(20px, 2.5vh, 28px) 0 0 auto;
  padding: 0 0 12px 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(20px, 1.75vw, 28px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: right;
  text-transform: uppercase;
  white-space: normal;
}

.familiar__statement::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(240px, 28%);
  height: 2px;
  background: var(--accent-wine);
}

.clarity-frame {
  --clarity-shift: 0px;
  --clarity-text-opacity: 1;
  --clarity-text-y: 0px;
  --clarity-clip: 0%;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 28vh, 260px);
  margin-top: clamp(64px, 7vw, 108px);
  padding: 42px clamp(82px, 11vw, 180px);
  overflow: hidden;
  background: #70866a;
}

.clarity-frame__content {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  text-align: center;
}

.clarity-frame h2 {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: var(--bg);
  font-family: var(--serif);
  font-size: clamp(30px, 2.5vw, 40px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
}

.clarity-frame p {
  width: max-content;
  max-width: calc(100vw - 48px);
  margin: 18px auto 0;
  padding: 0.1em 0.22em 0.34em;
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.clarity-frame__bracket {
  position: absolute;
  top: 34px;
  bottom: 34px;
  width: 24px;
  border-color: rgba(255, 252, 239, 0.72);
  border-style: solid;
  will-change: transform;
}

.clarity-frame__bracket--left {
  left: clamp(24px, 6vw, 96px);
  border-width: 2px 0 2px 2px;
}

.clarity-frame__bracket--right {
  right: clamp(24px, 6vw, 96px);
  border-width: 2px 2px 2px 0;
}

.has-motion .clarity-frame {
  --clarity-shift: calc(50vw - clamp(24px, 6vw, 96px) - 24px);
  --clarity-text-opacity: 0;
  --clarity-text-y: 12px;
  --clarity-clip: 100%;
}

.has-motion .clarity-frame h2,
.has-motion .clarity-frame p {
  opacity: var(--clarity-text-opacity);
  transform: translateY(var(--clarity-text-y));
  clip-path: inset(0 var(--clarity-clip) 0 0);
  will-change: opacity, transform, clip-path;
}

.has-motion .clarity-frame__bracket--left {
  transform: translateX(var(--clarity-shift));
}

.has-motion .clarity-frame__bracket--right {
  transform: translateX(calc(-1 * var(--clarity-shift)));
}

.services {
  position: relative;
  padding: clamp(148px, 14vw, 220px) clamp(22px, 4vw, 64px) clamp(112px, 12vw, 180px);
  overflow: clip;
  background:
    linear-gradient(90deg, rgba(220, 207, 190, 0.22) 1px, transparent 1px),
    var(--bg);
  background-size: 25vw 100%;
  color: var(--emerald);
}

.services__header {
  display: grid;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 0.78fr);
  align-items: start;
  gap: clamp(28px, 5vw, 80px);
  width: min(100%, 1320px);
  margin: 0 auto clamp(104px, 11vw, 168px);
}

.services__marker {
  display: flex;
  align-items: center;
  gap: 16px;
}

.services__marker span {
  color: rgba(10, 52, 40, 0.68);
  font-size: 14px;
  font-weight: 700;
}

.services__marker p {
  margin: 0;
  color: var(--accent-wine);
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
}

.services__intro {
  max-width: 980px;
}

.services__header h2 {
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 68px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.services__groups {
  width: min(100%, 1320px);
  margin: 0 auto;
}

.services__group + .services__group {
  margin-top: clamp(120px, 14vw, 220px);
}

.services__group-title {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 0 0 clamp(40px, 5vw, 72px);
  color: var(--emerald);
  font: 500 clamp(38px, 4.5vw, 66px) / 0.95 var(--serif);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.services__group-title span {
  color: var(--accent-wine);
  font: 800 10px/1 var(--sans);
  letter-spacing: 0.1em;
}

.services__stack {
  padding-bottom: 12vh;
}

.services__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 7vw, 112px);
  width: min(100%, 1320px);
  margin: clamp(64px, 8vw, 120px) auto 0;
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid rgba(10, 52, 40, 0.2);
}

.services__footer p {
  max-width: 880px;
  margin: 0;
  color: rgba(30, 43, 54, 0.76);
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.2;
}

.services__footer p span {
  display: block;
  white-space: nowrap;
}

.services__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 224px;
  min-height: 54px;
  padding: 0 20px 0 24px;
  border-radius: 14px;
  background: var(--accent-wine);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(102, 8, 16, 0.16);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.services__cta:hover {
  background: #54070d;
  transform: translateY(-3px);
}

.service-card {
  position: sticky;
  top: calc(clamp(86px, 10vh, 112px) + var(--stack-offset, 0px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  min-height: clamp(430px, 68vh, 650px);
  margin-top: 26px;
  padding: clamp(28px, 3.8vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 -12px 34px rgba(10, 18, 15, 0.08),
    0 22px 58px rgba(10, 18, 15, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  isolation: isolate;
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.service-card::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.42)),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 100% 100%, 25% 100%;
  opacity: 1;
}

.service-card::after {
  inset: auto 0 0;
  height: 46%;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(15, 17, 16, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(0.68);
  backdrop-filter: blur(14px) saturate(0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card:first-child {
  margin-top: 0;
}

.service-card:nth-child(1) {
  --stack-offset: 0px;
  z-index: 1;
}

.service-card:nth-child(2) {
  --stack-offset: 10px;
  z-index: 2;
}

.service-card:nth-child(3) {
  --stack-offset: 20px;
  z-index: 3;
}

.service-card:nth-child(4) {
  --stack-offset: 30px;
  z-index: 4;
}

.service-card:nth-child(5) {
  --stack-offset: 40px;
  z-index: 5;
}

.service-card:nth-child(6) {
  --stack-offset: 50px;
  z-index: 6;
}

.service-card--dark {
  color: #f7f7f2;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.02), transparent 52%),
    #101010;
}

.service-card--light {
  border-color: rgba(255, 255, 255, 0.16);
  color: #f7f7f2;
  background: #101010;
}

.service-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(0.94) brightness(0.86);
  transition: filter 0.5s ease;
}

.service-card:hover .service-card__image {
  filter: grayscale(1) contrast(0.96) brightness(0.9);
}

.service-card__number {
  align-self: start;
  min-width: 42px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.62;
}

.service-card h4 {
  max-width: 760px;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(30px, 7.8vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 180px;
  min-height: 52px;
  padding: 0 18px 0 22px;
  border: 1px solid currentColor;
  border-radius: 12px;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.88;
  transition: transform 0.32s ease, opacity 0.32s ease, background-color 0.32s ease;
}

.service-card__cta span:last-child {
  font-size: 20px;
  line-height: 1;
}

.service-card--dark .service-card__cta:hover {
  background: rgba(255, 255, 255, 0.1);
}

.service-card--light .service-card__cta:hover {
  background: rgba(255, 255, 255, 0.1);
}

.service-card:hover .service-card__cta {
  opacity: 1;
  transform: translateY(-3px);
}

.diagnostic {
  position: relative;
  margin-top: clamp(110px, 12vw, 190px);
  padding: clamp(86px, 9vw, 136px) clamp(56px, 6.5vw, 100px)
    clamp(110px, 11vw, 170px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(10, 52, 40, 0.055) 1px, transparent 1px),
    var(--bg);
  background-size: 25vw 100%;
}

.diagnostic__header {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr);
  gap: clamp(58px, 8vw, 124px);
  align-items: end;
}

.diagnostic__marker {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: var(--emerald);
}

.diagnostic__marker span {
  font-size: 13px;
  font-weight: 800;
}

.diagnostic__marker p {
  margin: 0;
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1;
}

.diagnostic__heading {
  margin-top: clamp(48px, 5vw, 78px);
}

.diagnostic__heading h2 {
  max-width: 920px;
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(52px, 5.2vw, 80px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  text-wrap: balance;
}

.diagnostic__heading p {
  max-width: 760px;
  margin: 30px 0 0;
  color: rgba(30, 43, 54, 0.72);
  font-size: clamp(16px, 1.14vw, 19px);
  line-height: 1.6;
}

.diagnostic__benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(10, 52, 40, 0.2);
}

.diagnostic__benefits li {
  position: relative;
  padding: 18px 8px 18px 34px;
  border-bottom: 1px solid rgba(10, 52, 40, 0.2);
  color: rgba(30, 43, 54, 0.76);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.45;
}

.diagnostic__benefits li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  width: 12px;
  height: 2px;
  background: var(--accent-wine);
}

.diagnostic-book {
  --diagnostic-progress: 0;
  position: relative;
  width: min(1180px, 100%);
  margin: clamp(76px, 8vw, 124px) auto 0;
  padding-top: 34px;
  perspective: 1800px;
}

.diagnostic-book__topline {
  position: absolute;
  z-index: 6;
  left: 4%;
  right: 4%;
  top: 8px;
  height: 1px;
  background: rgba(10, 52, 40, 0.24);
}

.diagnostic-book__bookmark {
  position: absolute;
  left: calc(var(--diagnostic-progress) * 100%);
  top: -12px;
  width: 22px;
  height: 46px;
  border-radius: 2px 2px 0 0;
  background: var(--accent-wine);
  box-shadow: 0 8px 18px rgba(102, 8, 16, 0.18);
  transform: translateX(-50%);
  transition: left 0.72s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.diagnostic-book__bookmark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -11px;
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  border-top: 11px solid var(--accent-wine);
}

.diagnostic-book__spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  min-height: 620px;
  border: 1px solid rgba(10, 52, 40, 0.18);
  border-radius: 4px 4px 8px 8px;
  background: #6f7561;
  box-shadow:
    0 36px 90px rgba(38, 31, 23, 0.16),
    0 8px 24px rgba(38, 31, 23, 0.09);
  transform-style: preserve-3d;
}

.diagnostic-book__page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(42px, 4.5vw, 68px);
  overflow: hidden;
  color: var(--text-main);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(87, 71, 51, 0.035) 48.4%, transparent 49%),
    repeating-linear-gradient(180deg, transparent 0, transparent 44px, rgba(10, 52, 40, 0.055) 45px),
    #f5f0e4;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.72, 0.22, 1),
    opacity 0.38s ease;
}

.diagnostic-book__page--left {
  border-radius: 3px 0 0 6px;
  box-shadow: inset -22px 0 34px rgba(49, 39, 29, 0.08);
}

.diagnostic-book__page--right {
  border-radius: 0 3px 6px 0;
  box-shadow: inset 22px 0 34px rgba(49, 39, 29, 0.08);
  transform-origin: left center;
}

.diagnostic-book.is-turning .diagnostic-book__page--right {
  transform: rotateY(-7deg);
  opacity: 0.72;
}

.diagnostic-book__spine {
  position: relative;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(27, 24, 20, 0.14), rgba(255, 255, 255, 0.32), rgba(27, 24, 20, 0.16)),
    #d9cfbb;
  box-shadow: 0 0 18px rgba(35, 29, 22, 0.14);
}

.diagnostic-book__folio {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(10, 52, 40, 0.18);
  color: rgba(10, 52, 40, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.diagnostic-book__question {
  margin: auto 0;
}

.diagnostic-book__step {
  display: block;
  margin-bottom: 26px;
  color: var(--accent-wine);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagnostic-book__question h3 {
  max-width: 500px;
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(34px, 3.1vw, 48px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
}

.diagnostic-book__question p {
  max-width: 490px;
  margin: 26px 0 0;
  color: rgba(30, 43, 54, 0.66);
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.55;
}

.diagnostic-book__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 10px 0;
  border: 0;
  color: var(--emerald);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.diagnostic-book__back:disabled {
  opacity: 0.3;
  cursor: default;
}

.diagnostic-book__progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(10, 52, 40, 0.18);
  color: rgba(10, 52, 40, 0.58);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagnostic-book__progress strong {
  color: var(--accent-wine);
  font-size: 12px;
}

.diagnostic-book__answers {
  display: grid;
  gap: 14px;
  margin: auto 0;
}

.diagnostic-book__answers button {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 96px;
  padding: 16px 20px;
  border: 1px solid rgba(10, 52, 40, 0.14);
  border-radius: 4px;
  color: var(--text-main);
  background: rgba(255, 252, 239, 0.64);
  box-shadow: 0 10px 24px rgba(53, 44, 34, 0.055);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease;
}

.diagnostic-book__answers button:hover,
.diagnostic-book__answers button:focus-visible {
  border-color: rgba(102, 8, 16, 0.42);
  background: rgba(255, 252, 239, 0.92);
  box-shadow: 0 14px 28px rgba(53, 44, 34, 0.09);
  transform: translateX(-4px);
}

.diagnostic-book__answers button.is-selected {
  border-color: rgba(102, 8, 16, 0.62);
  background: rgba(233, 212, 195, 0.66);
}

.diagnostic-answer__index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(102, 8, 16, 0.3);
  border-radius: 50%;
  color: var(--accent-wine);
  font-family: var(--serif);
  font-size: 18px;
}

.diagnostic-book__answers strong,
.diagnostic-book__answers small {
  display: block;
}

.diagnostic-book__answers strong {
  color: var(--emerald);
  font-size: 15px;
  font-weight: 700;
}

.diagnostic-book__answers small {
  margin-top: 6px;
  color: rgba(30, 43, 54, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.diagnostic-book__note {
  margin: 0;
  color: rgba(30, 43, 54, 0.5);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  text-align: right;
}

.diagnostic-result {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(42px, 6vw, 84px);
  align-content: center;
  padding: clamp(48px, 5vw, 76px);
  border-radius: 4px;
  color: var(--text-main);
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(10, 52, 40, 0.1) 50%, transparent 50.5%),
    repeating-linear-gradient(180deg, transparent 0, transparent 44px, rgba(10, 52, 40, 0.045) 45px),
    #f5f0e4;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diagnostic-book.is-complete .diagnostic-book__page,
.diagnostic-book.is-complete .diagnostic-book__spine {
  opacity: 0;
  pointer-events: none;
}

.diagnostic-book.is-complete .diagnostic-result {
  opacity: 1;
  transform: translateY(0);
}

.diagnostic-result[hidden] {
  display: none;
}

.diagnostic-result__score {
  align-self: start;
}

.diagnostic-result__score > span {
  display: block;
  color: rgba(10, 52, 40, 0.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.diagnostic-result__score > strong {
  display: block;
  margin-top: 22px;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(82px, 9vw, 132px);
  font-weight: 400;
  line-height: 0.8;
}

.diagnostic-result__score small {
  margin-left: 4px;
  font-family: var(--sans);
  font-size: 18px;
}

.diagnostic-result__meter {
  grid-column: 1;
  align-self: end;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(10, 52, 40, 0.1);
}

.diagnostic-result__meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b87a80, var(--accent-wine), var(--emerald));
  transition: width 0.9s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.diagnostic-result__copy {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.diagnostic-result__label {
  margin: 0 0 16px;
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: clamp(24px, 2.3vw, 38px);
  line-height: 1;
}

.diagnostic-result__copy h3 {
  max-width: 700px;
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 500;
  line-height: 0.98;
}

.diagnostic-result__columns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  margin-top: 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(10, 52, 40, 0.18);
}

.diagnostic-result__columns h4 {
  margin: 0 0 14px;
  color: rgba(10, 52, 40, 0.56);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.diagnostic-result__columns ul,
.diagnostic-result__columns p {
  margin: 0;
  color: rgba(30, 43, 54, 0.78);
  font-size: 14px;
  line-height: 1.55;
}

.diagnostic-result__columns ul {
  padding-left: 18px;
}

.diagnostic-result__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.diagnostic-result__actions button,
.diagnostic-result__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(102, 8, 16, 0.35);
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.diagnostic-result__actions button {
  color: var(--accent-wine);
  background: transparent;
}

.diagnostic-result__actions a {
  border-color: var(--accent-wine);
  color: var(--white);
  background: var(--accent-wine);
}

.useful-mail {
  position: relative;
  min-height: min(740px, 82svh);
  margin-top: clamp(110px, 10vw, 180px);
  padding: clamp(44px, 5vw, 76px) clamp(30px, 6vw, 96px);
  overflow: hidden;
  color: var(--bg);
  background:
    linear-gradient(
      90deg,
      transparent 24.95%,
      rgba(255, 252, 239, 0.08) 25%,
      transparent 25.05%,
      transparent 49.95%,
      rgba(255, 252, 239, 0.08) 50%,
      transparent 50.05%,
      transparent 74.95%,
      rgba(255, 252, 239, 0.08) 75%,
      transparent 75.05%
    ),
    #70866a;
}

.useful-mail__marker {
  position: absolute;
  top: clamp(34px, 4vw, 58px);
  left: clamp(30px, 6vw, 96px);
  display: flex;
  gap: 16px;
  color: rgba(255, 252, 239, 0.78);
  font: 600 12px/1.2 var(--sans);
  text-transform: uppercase;
}

.useful-mail__marker p {
  margin: 0;
}

.useful-mail__eyebrow {
  position: absolute;
  top: clamp(36px, 5vw, 74px);
  right: clamp(30px, 6vw, 96px);
  margin: 0;
  font: italic 400 clamp(18px, 1.8vw, 28px) / 1.2 "Cormorant Garamond",
    serif;
}

.useful-mail h2 {
  position: absolute;
  left: clamp(30px, 6vw, 96px);
  bottom: clamp(44px, 5vw, 72px);
  z-index: 1;
  max-width: 780px;
  margin: 0;
  color: var(--bg);
  font: 400 clamp(44px, 4.2vw, 68px) / 0.92 var(--serif);
  letter-spacing: 0;
}

.useful-mail h2 span {
  display: block;
  white-space: nowrap;
}

.useful-mail h2 em {
  color: var(--accent-wine);
  font-style: normal;
}

.useful-mail__letters {
  position: absolute;
  inset: 92px clamp(28px, 5vw, 80px) 146px;
}

.useful-letter {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 14px;
  border: 0;
  color: var(--bg);
  background: transparent;
  font: italic 400 clamp(17px, 1.6vw, 25px) / 1.2 "Cormorant Garamond",
    serif;
  cursor: pointer;
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.useful-letter--prompts {
  top: 8%;
  left: 9%;
  transform: rotate(-5deg);
}

.useful-letter--canva {
  top: 32%;
  right: 3%;
  transform: rotate(4deg);
}

.useful-letter--stickers {
  right: 29%;
  bottom: 8%;
  transform: rotate(-3deg);
}

.useful-letter--support {
  top: 43%;
  left: 3%;
  transform: rotate(4deg);
}

.useful-letter--steps {
  top: 0;
  right: 11%;
  transform: rotate(-2deg);
}

.useful-letter__icon {
  position: relative;
  display: block;
  width: clamp(88px, 9vw, 150px);
  aspect-ratio: 1.25;
}

.useful-letter--prompts .useful-letter__icon {
  transform: scaleX(1.18);
}

.useful-letter--canva .useful-letter__icon {
  transform: scale(0.9, 1.08);
}

.useful-letter--stickers .useful-letter__icon {
  transform: scaleX(1.34);
}

.useful-letter--support .useful-letter__icon {
  transform: scale(0.86, 1.14);
}

.useful-letter--steps .useful-letter__icon {
  transform: scaleX(1.22);
}

.useful-letter--support .useful-letter__label,
.useful-letter--steps .useful-letter__label {
  color: var(--accent-wine);
  font-size: 0.84em;
}

.useful-letter__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}

.useful-letter__open {
  opacity: 0;
  transform: translateY(8px) scale(0.92);
}

.useful-letter:hover,
.useful-letter:focus-visible {
  transform: rotate(0) translateY(-6px);
}

.useful-letter:hover .useful-letter__closed,
.useful-letter:focus-visible .useful-letter__closed {
  opacity: 0;
  transform: translateY(-5px) scale(0.94);
}

.useful-letter:hover .useful-letter__open,
.useful-letter:focus-visible .useful-letter__open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.useful-letter:focus-visible {
  outline: 1px solid var(--bg);
  outline-offset: 5px;
}

.useful-letter__label {
  white-space: nowrap;
}

.useful-mail__signature {
  position: absolute;
  right: clamp(30px, 6vw, 96px);
  bottom: clamp(34px, 4vw, 58px);
  display: flex;
  align-items: flex-end;
  gap: 16px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.useful-mail__signature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.useful-mail__signature img {
  width: 150px;
  height: 190px;
  border: 1px solid rgba(255, 252, 239, 0.48);
  object-fit: cover;
  object-position: 50% 22%;
  box-shadow: 0 14px 34px rgba(26, 43, 32, 0.16);
  transform: rotate(1.5deg);
  transition:
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms ease;
}

.useful-mail__signature:hover img {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 0 22px 44px rgba(26, 43, 32, 0.2);
}

.useful-mail__signature p {
  order: -1;
  margin: 0 0 2px;
  color: rgba(255, 252, 239, 0.8);
  font: 500 12px/1.4 var(--sans);
  text-align: right;
  white-space: nowrap;
}

.useful-mail__heart {
  position: absolute;
  right: clamp(250px, 21vw, 380px);
  bottom: clamp(42px, 5vw, 74px);
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.8;
  transform: rotate(-8deg);
}

.useful-mail-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 320ms ease,
    visibility 320ms ease;
}

.useful-mail-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.useful-mail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 22, 19, 0.78);
  backdrop-filter: blur(7px);
}

.useful-mail-dialog {
  position: relative;
  z-index: 1;
  width: min(690px, 100%);
  min-height: 510px;
  padding: clamp(46px, 6vw, 82px);
  border: 1px solid rgba(10, 52, 40, 0.14);
  color: var(--emerald);
  background:
    linear-gradient(rgba(10, 52, 40, 0.06) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 46px, auto;
  box-shadow: 0 30px 90px rgba(9, 18, 14, 0.28);
  transform: translateY(22px) scale(0.98);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.useful-mail-modal.is-open .useful-mail-dialog {
  transform: translateY(0) scale(1);
}

.useful-mail-dialog__close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(10, 52, 40, 0.18);
  border-radius: 50%;
  color: var(--emerald);
  background: rgba(255, 255, 255, 0.42);
  font: 300 29px/1 var(--sans);
  cursor: pointer;
}

.useful-mail-dialog__number,
.useful-mail-dialog__caption {
  display: block;
  margin: 0;
  color: var(--accent-wine);
  font: 700 11px/1.3 var(--sans);
  text-transform: uppercase;
}

.useful-mail-dialog__caption {
  margin-top: 28px;
  color: rgba(10, 52, 40, 0.58);
}

.useful-mail-dialog h3 {
  max-width: 550px;
  margin: 14px 0 0;
  font: 400 clamp(50px, 6vw, 78px) / 0.95 var(--serif);
  letter-spacing: 0;
}

.useful-mail-dialog__text {
  max-width: 510px;
  margin: 28px 0 0;
  color: rgba(30, 43, 54, 0.78);
  font: 400 17px/1.6 var(--sans);
}

.useful-mail-dialog__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 240px;
  min-height: 54px;
  margin-top: 46px;
  padding: 0 18px;
  border: 1px solid var(--accent-wine);
  border-radius: 14px;
  color: var(--white);
  background: var(--accent-wine);
  font: 700 13px/1 var(--sans);
  text-decoration: none;
}

.useful-mail-dialog__action[hidden] {
  display: none;
}

body.has-useful-modal {
  overflow: hidden;
}

.work-process {
  position: relative;
  padding: clamp(170px, 14vw, 250px) clamp(34px, 6vw, 96px)
    clamp(130px, 11vw, 200px);
  color: var(--emerald);
  background:
    linear-gradient(rgba(10, 52, 40, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.05) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 100%, 25% 100%, auto;
}

.work-process__header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 0.24fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}

.work-process__marker {
  display: flex;
  gap: 16px;
  color: var(--accent-wine);
  font: 700 12px/1.25 var(--sans);
  text-transform: uppercase;
}

.work-process__marker p {
  margin: 0;
}

.work-process__heading {
  grid-column: 2;
}

.work-process__heading h2 {
  max-width: none;
  margin: 0;
  font: 400 clamp(64px, 6.2vw, 102px) / 0.9 var(--serif);
  letter-spacing: 0;
  white-space: nowrap;
}

.work-process__heading > p {
  max-width: none;
  margin: 34px 0 0;
  color: rgba(30, 43, 54, 0.72);
  font: 400 clamp(16px, 1.3vw, 20px) / 1.55 var(--sans);
  white-space: nowrap;
}

.work-process__aside {
  position: absolute;
  top: 100%;
  left: 50%;
  width: max-content;
  margin: 8px 0 0;
  color: var(--emerald);
  font: 500 clamp(17px, 1.35vw, 22px) / 1 "Snell Roundhand",
    "Apple Chancery", "Cormorant Garamond", serif;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-2deg);
}

.process-route {
  --process-progress: 0;
  --process-progress-percent: 0%;
  --process-x: 0px;
  --process-y: 0px;
  position: relative;
  max-width: 1600px;
  min-height: clamp(680px, 50vw, 800px);
  margin: clamp(96px, 8vw, 138px) auto 0;
}

.process-route__line {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.process-route__track,
.process-route__line .process-route__progress {
  fill: none;
  stroke: var(--accent-wine);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.process-route__line .process-route__progress {
  stroke: var(--accent-wine);
  stroke-width: 1.8;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--process-progress));
  display: none;
  transition: stroke-dashoffset 100ms linear;
}

.process-route__mobile-line {
  display: none;
}

.process-route__guide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: clamp(116px, 7.6vw, 144px);
  transform: translate3d(var(--process-x), var(--process-y), 0);
  transform-origin: 50% 100%;
  transition: transform 90ms linear;
  will-change: transform;
}

.process-route__kasper {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(10, 25, 18, 0.18));
}

.process-route__finish {
  position: absolute;
  left: 91.2%;
  top: 85.6%;
  z-index: 3;
  width: clamp(108px, 7.4vw, 140px);
  height: auto;
  filter: drop-shadow(0 14px 20px rgba(53, 44, 34, 0.16));
  transform: rotate(-7deg);
  pointer-events: none;
}

.process-route__steps {
  position: absolute;
  inset: 0;
}

.process-step {
  position: absolute;
  min-width: 0;
  max-width: min(470px, 29vw);
  padding: 0 0 0 clamp(18px, 1.5vw, 28px);
  border-left: 1px solid rgba(10, 52, 40, 0.36);
  opacity: 0.62;
  transform: translateY(8px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}

.process-step:nth-child(1) {
  top: 0;
  left: 0;
}

.process-step:nth-child(2) {
  top: 11%;
  left: 24%;
}

.process-step:nth-child(3) {
  top: 22%;
  left: 48%;
}

.process-step:nth-child(4) {
  top: 36%;
  left: 66%;
}

.process-step:nth-child(5) {
  top: 60%;
  right: 0;
  left: auto;
  max-width: min(430px, 23vw);
}

.process-step.is-active,
.process-step.is-complete {
  opacity: 1;
  transform: translateY(0);
}

.process-step__number {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-wine);
  font: 700 12px/1 var(--sans);
}

.process-step h3 {
  max-width: none;
  margin: 0;
  font: 400 clamp(23px, 1.65vw, 30px) / 1 var(--serif);
  letter-spacing: 0;
  white-space: nowrap;
}

.process-step p {
  max-width: none;
  margin: 18px 0 0;
  color: rgba(30, 43, 54, 0.75);
  font: 400 13px/1.55 var(--sans);
  white-space: nowrap;
}

.about-story {
  position: relative;
  min-height: 486svh;
  color: var(--emerald);
  background: var(--bg);
}

.about-story__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0 0 0 clamp(22px, 3.5vw, 58px);
  overflow: hidden;
}

.about-story__section-marker {
  position: absolute;
  top: clamp(70px, 8vh, 76px);
  left: clamp(22px, 3.5vw, 58px);
  z-index: 10;
  display: flex;
  gap: 16px;
  color: var(--accent-wine);
  font: 700 12px/1.25 var(--sans);
  text-transform: uppercase;
}

.about-story__section-marker p {
  margin: 0;
}

.about-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  gap: clamp(18px, 2.2vw, 34px);
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.about-story__deck {
  --stack-offset: clamp(26px, 3.5vh, 38px);
  position: relative;
  height: min(82vh, 790px);
  align-self: center;
  overflow: hidden;
  isolation: isolate;
}

.about-story__card {
  --card-progress: 0;
  --card-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  height: calc(100% - (var(--stack-offset) * 3));
  padding: clamp(34px, 3vw, 48px) clamp(34px, 3.2vw, 52px) clamp(76px, 9vh, 92px);
  overflow: hidden;
  border: 1px solid rgba(77, 62, 43, 0.1);
  border-radius: 3px;
  transform: translate3d(
    0,
    calc((1 - var(--card-progress)) * (100% + var(--stack-offset)) + var(--card-progress) * var(--card-index) * var(--stack-offset)),
    0
  );
  box-shadow: 0 -9px 28px rgba(55, 47, 37, 0.11);
  will-change: transform;
}

.about-story__card--intro {
  --card-progress: 1;
  background: #e8ddce;
}

.about-story__card--practice { background: #e8ddce; }
.about-story__card--visual { background: #e8ddce; }
.about-story__card--result { background: #e8ddce; }

.about-story__marker {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font: 700 11px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-story__card h2,
.about-story__card h3 {
  width: 100%;
  max-width: none;
  margin: clamp(34px, 5vh, 52px) 0 24px;
  font: 500 clamp(34px, 2.65vw, 40px) / 1.08 var(--serif);
  letter-spacing: -0.022em;
}

.about-story__card h2 span,
.about-story__card h3 span {
  display: block;
  white-space: nowrap;
}

.about-story__text {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
}

.about-story__card--intro .about-story__text {
  margin: clamp(54px, 8vh, 78px) 0 auto;
}

.about-story__text p {
  margin: 0;
  font: 400 clamp(15px, 1.05vw, 18px) / 1.48 var(--sans);
}

.about-story__photo {
  align-self: center;
  justify-self: start;
  width: calc(100% - clamp(20px, 2vw, 32px));
  height: calc(100svh - clamp(144px, 18vh, 176px));
  margin: clamp(72px, 9vh, 88px) clamp(20px, 2vw, 32px) clamp(72px, 9vh, 88px) 0;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 24px 64px rgba(44, 41, 35, 0.14);
}

.about-story__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.about-story__photo.is-fallback img {
  object-fit: cover;
  object-position: center 42%;
}

@media (max-width: 1100px) {
  .work-process__header {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .work-process__aside {
    position: static;
    grid-column: 2;
    margin: 12px 0 0;
  }

  .work-process__heading > p {
    white-space: normal;
  }

  .about-story__sticky {
    padding: 0 0 0 28px;
  }

  .about-story__layout {
    gap: 28px;
  }

  .about-story__card h2,
  .about-story__card h3 {
    font-size: clamp(32px, 3.25vw, 38px);
  }

  .about-story__photo {
    height: 100svh;
  }

  .hero {
    min-height: 100svh;
    padding: 22px;
    overflow-y: auto;
    background-size: 50vw 100%, 100% 25%;
  }

  .site-header {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    width: calc(100% - 44px);
    padding: 12px 16px;
  }

  .services__footer p span {
    white-space: normal;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 18px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .portrait--main {
    left: auto;
    right: 22px;
    top: 142px;
    width: 198px;
    height: 264px;
    min-width: 0;
    min-height: 0;
  }

  .portrait-caption {
    display: none;
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 354px;
    width: min(620px, 100%);
  }

  .hero h1 {
    line-height: 0.94;
  }

  .hero-title-main {
    font-size: clamp(48px, 10vw, 72px);
  }

  .hero-title-main:nth-child(2) {
    font-size: clamp(44px, 9.2vw, 66px);
  }

  .hero-title-subline {
    margin-top: 14px;
    font-size: clamp(25px, 5.8vw, 36px);
    white-space: normal;
  }

  .hero-tags,
  .hero-cta,
  .photo-slot {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .hero-subtitle {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(620px, 100%);
    margin-top: 18px;
    font-size: 16px;
    white-space: normal;
  }

  .script-accent {
    font-size: 1.28em;
  }

  .hero-tags {
    width: min(620px, 100%);
    height: auto;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-tags span {
    position: relative;
    left: auto;
    top: auto;
    min-height: 32px;
    font-size: 12px;
    transform: none;
    animation: none;
  }

  .hero-cta {
    width: auto;
    min-width: 178px;
    margin: 24px 0 0 auto;
  }

  .photo-slot {
    width: 150px;
    height: 160px;
  }

  .photo-slot--right {
    margin: 34px 0 0 auto;
    transform: rotate(-3deg);
    width: min(220px, 46vw);
    height: auto;
    aspect-ratio: 900 / 1164;
  }

  .photo-slot--left {
    display: none;
  }

  .bookmark {
    display: none;
  }

  .editorial-line {
    display: none;
  }

  .familiar {
    height: auto;
    min-height: auto;
    padding: 92px 34px 82px;
    background-size: 50vw 100%;
  }

  .familiar::before {
    left: 34px;
    top: 30px;
  }

  .familiar__intro {
    min-height: 136px;
  }

  .familiar__heading {
    max-width: 100%;
  }

  .familiar h2 {
    font-size: clamp(38px, 5.2vw, 54px);
  }

  .familiar__script {
    font-size: clamp(36px, 5vw, 46px);
  }

  .familiar__body {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    height: auto;
    gap: clamp(36px, 6vw, 72px);
    margin-top: 42px;
  }

  .familiar__visual {
    min-height: 500px;
  }

  .familiar__statement {
    font-size: clamp(21px, 2.5vw, 29px);
  }

  .approach {
    padding-right: 34px;
    padding-left: 34px;
    background-size: 50vw 100%;
  }

  .approach__header {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .approach__header h2 {
    max-width: 820px;
  }

  .approach__lead {
    max-width: 760px;
  }

  .approach__workspace {
    margin-top: 78px;
  }

  .approach__notes {
    gap: 54px 42px;
  }

  .approach-note {
    min-height: 220px;
    padding: 25px;
  }

  .diagnostic {
    padding-right: 34px;
    padding-left: 34px;
    background-size: 50vw 100%;
  }

  .diagnostic__header {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .diagnostic__heading {
    margin-top: 14px;
  }

  .diagnostic__heading h2,
  .diagnostic__heading p {
    max-width: 820px;
  }

  .diagnostic__benefits {
    max-width: 760px;
  }

  .diagnostic-book__page {
    padding: 42px 34px;
  }

  .diagnostic-book__answers button {
    min-height: 92px;
  }
}

@media (max-width: 760px) {
  .work-process {
    padding: 142px 20px 116px;
    background-size: 100% 100%, 50% 100%, auto;
  }

  .work-process__header {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .work-process__marker,
  .work-process__heading {
    grid-column: 1;
  }

  .work-process__heading h2 {
    font-size: clamp(36px, 9.5vw, 42px);
    line-height: 0.92;
  }

  .work-process__heading > p {
    margin-top: 26px;
    font-size: 15px;
  }

  .work-process__aside {
    width: 130px;
    margin-top: 4px;
    font-size: 17px;
    white-space: normal;
  }

  .process-route {
    min-height: 950px;
    margin-top: 76px;
    padding-left: 92px;
  }

  .process-route__line {
    display: none;
  }

  .process-route__mobile-line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    width: 1px;
    background: rgba(102, 8, 16, 0.22);
  }

  .process-route__mobile-line .process-route__progress {
    display: block;
    width: 2px;
    height: var(--process-progress-percent);
    background: var(--accent-wine);
    transition: height 100ms linear;
  }

  .process-route__guide {
    top: 0;
    left: -1px;
    width: clamp(64px, 17vw, 76px);
    transform: translate3d(0, var(--process-y, 0), 0);
  }

  .process-route__finish {
    display: none;
  }

  .process-route__steps {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .process-step:nth-child(1),
  .process-step:nth-child(2),
  .process-step:nth-child(3),
  .process-step:nth-child(4),
  .process-step:nth-child(5) {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }

  .process-step,
  .process-step:nth-child(even) {
    position: relative;
    inset: auto;
    align-self: auto;
    width: 100%;
    max-width: none;
    min-height: 160px;
    padding: 0 0 24px;
    border-left: 0;
    border-bottom: 1px solid rgba(10, 52, 40, 0.12);
  }

  .process-step h3,
  .process-step p {
    max-width: 100%;
    white-space: normal;
  }

  .process-step h3 {
    font-size: 32px;
  }

  .process-step p {
    font-size: 13px;
  }

  .about-story {
    min-height: auto;
  }

  .about-story__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 88px 20px 72px;
    overflow: visible;
  }

  .about-story__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .about-story__photo {
    order: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .about-story__photo img {
    object-fit: cover;
    object-position: center top;
  }

  .about-story__deck {
    order: 2;
    display: grid;
    gap: 14px;
    height: auto;
    overflow: visible;
  }

  .about-story__card {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 390px;
    padding: 28px 24px;
    transform: none;
    box-shadow: 0 12px 30px rgba(28, 29, 25, 0.1);
  }

  .about-story__card h2,
  .about-story__card h3 {
    margin-top: 42px;
    font-size: clamp(30px, 8.7vw, 38px);
    line-height: 1.06;
  }

  .about-story__card h2 span,
  .about-story__card h3 span {
    display: inline;
    white-space: normal;
  }

  .about-story__card h2 span + span::before,
  .about-story__card h3 span + span::before {
    content: " ";
  }

  .about-story__text p {
    font-size: 15px;
  }

  .useful-mail {
    min-height: 860px;
    margin-top: 92px;
    padding: 106px 20px 42px;
  }

  .useful-mail__marker,
  .useful-mail__eyebrow,
  .useful-mail h2,
  .useful-mail__letters,
  .useful-mail__signature {
    position: relative;
    inset: auto;
  }

  .useful-mail__heart {
    position: relative;
    inset: auto;
    display: block;
    width: 36px;
    height: 36px;
    margin: 20px 0 0 auto;
  }

  .useful-mail__marker {
    position: relative;
    inset: auto;
    gap: 12px;
  }

  .useful-mail__eyebrow {
    margin-top: 62px;
    font-size: 20px;
    text-align: center;
  }

  .useful-mail h2 {
    margin-top: 28px;
    font-size: clamp(31px, 8vw, 36px);
    line-height: 0.94;
  }

  .useful-mail__letters {
    display: grid;
    gap: 16px;
    margin-top: 54px;
  }

  .useful-letter,
  .useful-letter--prompts,
  .useful-letter--canva,
  .useful-letter--stickers,
  .useful-letter--support,
  .useful-letter--steps {
    position: relative;
    inset: auto;
    justify-content: flex-start;
    width: 100%;
    min-height: 96px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 252, 239, 0.22);
    transform: none;
  }

  .useful-letter__icon {
    width: 74px;
    flex: 0 0 74px;
    transform: none;
  }

  .useful-letter__label {
    font-size: 22px;
    white-space: normal;
    text-align: left;
  }

  .useful-mail__signature {
    justify-content: flex-end;
    margin: 36px 0 0 auto;
  }

  .useful-mail__signature img {
    width: 112px;
    height: 142px;
  }

  .useful-mail__signature p {
    max-width: 210px;
    font-size: 11px;
    white-space: normal;
  }

  .useful-mail-dialog {
    min-height: 0;
    padding: 64px 26px 34px;
  }

  .useful-mail-dialog h3 {
    font-size: clamp(44px, 13vw, 58px);
  }

  .useful-mail-dialog__text {
    font-size: 15px;
  }

  .useful-mail-dialog__action {
    width: 100%;
    margin-top: 36px;
  }

  .familiar {
    margin-top: 48px;
    padding: 88px 22px 76px;
    background-size: 100% 100%;
  }

  .familiar::before {
    left: 22px;
    top: 28px;
  }

  .familiar__intro {
    min-height: 164px;
    padding: 12px 18px;
  }

  .familiar h2 {
    width: auto;
    font-size: clamp(36px, 9.8vw, 48px);
    line-height: 1.06;
    white-space: normal;
  }

  .familiar__script {
    margin-bottom: 8px;
    font-size: 42px;
  }

  .familiar__body {
    grid-template-columns: 1fr;
    gap: 42px;
    height: auto;
    margin-top: 42px;
  }

  .familiar__visual {
    width: min(100%, 470px);
    height: auto;
    min-height: 0;
    aspect-ratio: 1071 / 1468;
  }

  .familiar__visual img {
    object-fit: contain;
  }

  .familiar__statement {
    width: auto;
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }

  .familiar__statement::after {
    right: auto;
    left: 0;
  }

  .clarity-frame {
    min-height: 280px;
    margin-top: 44px;
    padding: 54px 52px;
  }

  .clarity-frame h2 {
    width: auto;
    font-size: clamp(30px, 8.4vw, 38px);
    white-space: normal;
  }

  .clarity-frame p {
    font-size: 15px;
    white-space: normal;
  }

  .clarity-frame__bracket {
    top: 42px;
    bottom: 42px;
    width: 18px;
  }

  .clarity-frame__bracket--left {
    left: 16px;
  }

  .clarity-frame__bracket--right {
    right: 16px;
  }

  .has-motion .clarity-frame__bracket--left {
    transform: translateX(var(--clarity-shift));
  }

  .has-motion .clarity-frame__bracket--right {
    transform: translateX(calc(-1 * var(--clarity-shift)));
  }

  .services {
    padding: 120px 18px 108px;
  }

  .services__header {
    display: block;
    margin-bottom: 88px;
  }

  .services__marker {
    margin: 0 0 22px;
  }

  .services__header h2 {
    font-size: clamp(44px, 12vw, 58px);
    line-height: 0.96;
    white-space: normal;
  }

  .services__stack {
    padding-bottom: 40px;
  }

  .services__footer {
    grid-template-columns: 1fr;
    margin-top: 72px;
    padding-top: 40px;
  }

  .services__footer p {
    font-size: clamp(24px, 7.4vw, 32px);
  }

  .services__cta {
    width: 100%;
  }

  .service-card {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    align-content: end;
    min-height: 430px;
    margin-top: 18px;
    padding: 28px 24px;
  }

  .service-card__number {
    align-self: start;
  }

  .service-card h4 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .services__group + .services__group {
    margin-top: 112px;
  }

  .services__group-title {
    gap: 14px;
    margin-bottom: 38px;
    font-size: clamp(32px, 9.2vw, 42px);
    line-height: 1;
  }

  .services__group--experts .service-card:last-child h4 {
    font-size: clamp(29px, 8.25vw, 36px);
    letter-spacing: -0.02em;
  }

  .service-card__cta {
    justify-self: start;
    min-width: 0;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 14px 0 16px;
    font-size: 13px;
  }

  .approach {
    margin-top: 92px;
    padding: 92px 18px 108px;
    background-size: 100% 100%;
  }

  .approach__marker {
    margin-bottom: 28px;
  }

  .approach__header {
    gap: 28px;
  }

  .approach__header h2 {
    font-size: clamp(48px, 14vw, 66px);
    line-height: 0.98;
  }

  .approach__lead p:first-child {
    font-size: 25px;
  }

  .approach__workspace {
    margin-top: 68px;
  }

  .approach__notes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
  }

  .approach__hint {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 0 8px;
    transform: rotate(-2deg);
  }

  .approach-note,
  .approach-note--one,
  .approach-note--two,
  .approach-note--three,
  .approach-note--four {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 170px;
  }

  .approach-note__title {
    font-size: clamp(31px, 9.2vw, 42px);
  }

  .approach-detail {
    min-height: 0;
    padding: 36px 30px 40px;
  }

  .approach-detail__number {
    margin-bottom: 30px;
  }

  .approach-detail__close {
    top: 24px;
    right: 24px;
  }

  .diagnostic {
    margin-top: 92px;
    padding: 96px 18px 116px;
    background-size: 100% 100%;
  }

  .diagnostic__marker {
    align-items: flex-start;
  }

  .diagnostic__marker p {
    font-size: 30px;
  }

  .diagnostic__heading h2 {
    font-size: clamp(46px, 13vw, 62px);
    line-height: 0.98;
  }

  .diagnostic__heading p {
    margin-top: 24px;
    font-size: 16px;
  }

  .diagnostic-book {
    margin-top: 72px;
    padding-top: 26px;
  }

  .diagnostic-book__topline {
    left: 7%;
    right: 7%;
  }

  .diagnostic-book__spread {
    display: block;
    min-height: 0;
    padding: 10px;
    background: #6f7561;
  }

  .diagnostic-book__page {
    min-height: 0;
    padding: 34px 24px;
  }

  .diagnostic-book__page--left,
  .diagnostic-book__page--right {
    border-radius: 2px;
    box-shadow: none;
  }

  .diagnostic-book__page--left {
    min-height: 410px;
  }

  .diagnostic-book__page--right {
    min-height: 420px;
    border-top: 1px solid rgba(10, 52, 40, 0.14);
    transform-origin: center top;
  }

  .diagnostic-book.is-turning .diagnostic-book__page--right {
    transform: rotateX(5deg);
  }

  .diagnostic-book__spine {
    display: none;
  }

  .diagnostic-book__question h3 {
    font-size: clamp(34px, 10.4vw, 44px);
  }

  .diagnostic-book__answers {
    margin: 46px 0;
  }

  .diagnostic-book__answers button {
    grid-template-columns: 36px 1fr;
    gap: 14px;
    min-height: 88px;
    padding: 14px;
  }

  .diagnostic-answer__index {
    width: 34px;
    height: 34px;
  }

  .diagnostic-result {
    position: relative;
    inset: auto;
    display: block;
    min-height: 760px;
    padding: 38px 24px;
    background:
      repeating-linear-gradient(180deg, transparent 0, transparent 44px, rgba(10, 52, 40, 0.045) 45px),
      #f5f0e4;
  }

  .diagnostic-result__meter {
    margin-top: 26px;
  }

  .diagnostic-result__copy {
    margin-top: 42px;
  }

  .diagnostic-result__columns {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 36px;
  }

  .diagnostic-result__actions {
    display: grid;
    margin-top: 34px;
  }

  .diagnostic-result__actions button,
  .diagnostic-result__actions a {
    width: 100%;
  }
}

/* Editorial library: a scroll-led folder with material tabs */
.useful-library {
  position: relative;
  overflow: clip;
  color: var(--emerald);
  background:
    linear-gradient(rgba(10, 52, 40, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.025) 1px, transparent 1px),
    #f8f2e7;
  background-size: 12.5vw 12.5vw;
}

.useful-library__story {
  position: relative;
}

.useful-library__stage {
  position: relative;
  height: 100svh;
  min-height: 680px;
  padding: clamp(86px, 9vh, 108px) clamp(24px, 5vw, 80px) 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(10, 52, 40, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.025) 1px, transparent 1px),
    #f8f2e7;
  background-size: 12.5vw 12.5vw;
}

.useful-library__header {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(42px, 6vw, 96px);
  max-width: 1480px;
  margin: 0 auto;
}

.useful-library__marker {
  display: flex;
  gap: 16px;
  color: var(--accent-wine);
  font: 800 11px/1.25 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.useful-library__marker p,
.useful-library__intro p,
.useful-library__intro h2 {
  margin: 0;
}

.useful-library__eyebrow {
  color: var(--accent-wine);
  font: 800 11px/1.3 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.useful-library__intro h2 {
  width: max-content;
  max-width: none;
  margin-top: 13px;
  font: 500 clamp(15px, 4.7vw, 52px) / 0.94 var(--serif);
  letter-spacing: -0.035em;
  white-space: nowrap;
  text-wrap: nowrap;
}

.useful-library__lead {
  max-width: 790px;
  margin-top: 18px !important;
  color: rgba(10, 52, 40, 0.74);
  font: 400 clamp(14px, 1.08vw, 17px) / 1.55 var(--sans);
}

.useful-library__desk {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(61vh, 570px);
}

.useful-folder {
  position: absolute;
  top: 65%;
  left: 50%;
  width: min(55vw, 760px);
  height: 250px;
  transform: translate(-50%, -50%);
}

.useful-folder__back,
.useful-folder__front {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(10, 52, 40, 0.16);
  border-radius: 5px 5px 2px 2px;
}

.useful-folder__back {
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(102, 8, 16, 0.08), transparent 42%),
    #ddc6aa;
  box-shadow: 0 34px 80px rgba(60, 48, 35, 0.17);
  transform: translateY(5px) rotate(-0.3deg);
}

.useful-folder__back::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 34px;
  width: 210px;
  height: 36px;
  border: 1px solid rgba(10, 52, 40, 0.14);
  border-bottom: 0;
  border-radius: 5px 30px 0 0;
  background: #ddc6aa;
}

.useful-folder__front {
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 38px;
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 0 56%, rgba(255, 252, 239, 0.2) 56% 100%),
    #caae8d;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
  transform: rotate(0.6deg);
}

.useful-folder__front {
  top: 0;
}

.useful-folder__front::before {
  content: "";
  position: absolute;
  top: 100%;
  right: -60vw;
  left: -60vw;
  height: 52vh;
  background: #f8f2e7;
}

.useful-folder__front::after {
  content: "07";
  position: absolute;
  right: 30px;
  bottom: 8px;
  color: rgba(10, 52, 40, 0.07);
  font: 600 126px/0.8 var(--serif);
}

.useful-folder__front span,
.useful-folder__front small {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  text-transform: uppercase;
}

.useful-folder__front span {
  color: var(--accent-wine);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.useful-folder__front strong {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  font: 500 clamp(31px, 3vw, 46px) / 0.95 var(--serif);
}

.useful-folder__front small {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.useful-tab {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: clamp(250px, 21vw, 310px);
  height: clamp(285px, 38vh, 350px);
  margin: calc(clamp(285px, 38vh, 350px) / -2) 0 0 calc(clamp(250px, 21vw, 310px) / -2);
  padding: clamp(23px, 2.2vw, 32px);
  border: 1px solid rgba(10, 52, 40, 0.24);
  border-radius: 3px;
  color: var(--emerald);
  text-decoration: none;
  box-shadow: 0 24px 54px rgba(55, 44, 32, 0.14);
  transform-origin: 50% 100%;
  transition: box-shadow 320ms ease, filter 320ms ease;
  will-change: transform;
}

.useful-tab--prompts {
  background:
    linear-gradient(90deg, var(--accent-wine) 0 7px, transparent 7px),
    #f0dcc5;
  transform: translate(-330px, -190px) rotate(-4deg);
}

.useful-tab--canva {
  background:
    linear-gradient(180deg, rgba(102, 8, 16, 0.11) 0 34px, transparent 34px),
    #e5c9ae;
  transform: translate(0, -240px) rotate(1.2deg);
}

.useful-tab--stickers {
  background:
    radial-gradient(circle at 84% 16%, rgba(102, 8, 16, 0.13) 0 34px, transparent 35px),
    #cbd9c8;
  transform: translate(330px, -185px) rotate(4deg);
}

.useful-tab::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(10, 52, 40, 0.13);
  pointer-events: none;
}

.useful-tab:hover,
.useful-tab:focus-visible {
  z-index: 6;
  filter: brightness(1.025);
  box-shadow: 0 34px 70px rgba(55, 44, 32, 0.2);
  outline: 2px solid var(--accent-wine);
  outline-offset: 5px;
}

.useful-tab__index {
  color: var(--accent-wine);
  font: 800 10px/1.25 var(--sans);
  letter-spacing: 0.1em;
}

.useful-tab h3 {
  max-width: 250px;
  margin: auto 0 0;
  font: 500 clamp(27px, 2.2vw, 35px) / 0.98 var(--serif);
  letter-spacing: -0.02em;
}

.useful-tab p {
  margin: 15px 0 0;
  color: rgba(30, 43, 54, 0.7);
  font: 400 12px/1.5 var(--sans);
}

.useful-tab__action {
  margin-top: 17px;
  font: 800 10px/1.2 var(--sans);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.useful-library__hint {
  position: absolute;
  right: 0;
  bottom: 25px;
  left: 0;
  margin: 0;
  color: var(--accent-wine);
  font: 700 10px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.useful-reading {
  position: relative;
  z-index: 8;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(100px, 12vw, 180px) clamp(24px, 5vw, 80px) clamp(110px, 12vw, 180px);
  background:
    linear-gradient(rgba(10, 52, 40, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.025) 1px, transparent 1px),
    #f8f2e7;
  background-size: 12.5vw 12.5vw;
}

@media (min-width: 761px) {
  .useful-reading {
    margin-top: -30svh;
  }
}

.useful-reading__header {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(52px, 6vw, 88px);
}

.useful-reading__header p,
.useful-reading__header h3 {
  margin: 0;
}

.useful-reading__header p {
  color: var(--accent-wine);
  font: 800 11px/1.2 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.useful-reading__header h3 {
  width: max-content;
  max-width: none;
  font: 500 clamp(28px, 3.45vw, 54px) / 0.96 var(--serif);
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-wrap: nowrap;
}

.useful-reading__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  align-items: start;
}

.useful-article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: clamp(24px, 2.5vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(10, 52, 40, 0.2);
  border-radius: 2px;
  color: var(--emerald);
  background: #fff9ed;
  box-shadow: 0 24px 54px rgba(55, 44, 32, 0.12);
  text-decoration: none;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 360ms ease;
}

.useful-article--one { grid-column: 1 / span 4; padding-top: 58px; background: linear-gradient(180deg, var(--accent-wine) 0 12px, #fff9ed 12px); transform: translateY(28px) rotate(-1.2deg); }
.useful-article--two { grid-column: 5 / span 3; border: 2px solid var(--accent-wine); background: linear-gradient(135deg, rgba(102, 8, 16, 0.08) 0 38px, #fff9ed 39px); transform: translateY(-12px) rotate(0.8deg); }
.useful-article--three { grid-column: 8 / span 3; padding-left: clamp(34px, 3.2vw, 48px); background: linear-gradient(90deg, #c8d5c7 0 15px, #fff9ed 15px); transform: translateY(42px) rotate(-0.7deg); }
.useful-article--all { grid-column: 11 / span 2; min-height: 300px; color: #fffcef; background: var(--emerald); transform: translateY(4px) rotate(1.3deg); }

.useful-article--one::before {
  content: "HR / EDITORIAL";
  position: absolute;
  top: 27px;
  right: 30px;
  color: rgba(102, 8, 16, 0.5);
  font: 800 8px/1 var(--sans);
  letter-spacing: 0.12em;
}

.useful-article--two::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 76px;
  height: 30px;
  background: rgba(202, 174, 141, 0.72);
  transform: translateX(-50%) rotate(-2deg);
}

.useful-article--three::before {
  content: "✓";
  position: absolute;
  top: 28px;
  right: 28px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(10, 52, 40, 0.35);
  border-radius: 50%;
  color: var(--accent-wine);
  font: 700 16px/1 var(--sans);
}

.useful-article--all::before {
  content: "АРХИВ";
  position: absolute;
  top: 24px;
  right: -22px;
  padding: 8px 28px;
  color: var(--emerald);
  background: #e4c7ad;
  font: 800 8px/1 var(--sans);
  letter-spacing: 0.12em;
  transform: rotate(9deg);
}

.useful-article::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.16;
}

.useful-article:hover,
.useful-article:focus-visible {
  transform: translateY(-8px) rotate(0deg);
  box-shadow: 0 30px 64px rgba(55, 44, 32, 0.16);
  outline: 2px solid var(--accent-wine);
  outline-offset: 5px;
}

.useful-article > span {
  font-family: var(--sans);
  font-style: normal;
  text-transform: uppercase;
}

.useful-article > span:first-child {
  color: var(--accent-wine);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.useful-article--all > span:first-child {
  color: #e8b7a7;
}

.useful-article h4 {
  margin: auto 0 0;
  font: 500 clamp(25px, 2.1vw, 34px) / 1.02 var(--serif);
  letter-spacing: -0.02em;
}

.useful-article__action {
  margin-top: 24px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

@media (max-width: 1024px) and (min-width: 761px) {
  .useful-library__stage {
    min-height: 640px;
    padding-inline: 32px;
  }

  .useful-library__header,
  .useful-reading__header {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 30px;
  }

  .useful-folder {
    width: min(64vw, 650px);
  }

  .useful-tab {
    width: 250px;
    height: 300px;
    margin: -150px 0 0 -125px;
    padding: 23px;
  }

  .useful-tab h3 {
    font-size: 27px;
  }

  .useful-reading__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .useful-article,
  .useful-article--one,
  .useful-article--two,
  .useful-article--three,
  .useful-article--all {
    grid-column: auto;
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .useful-library {
    overflow: hidden;
    background-size: 50vw 50vw;
  }

  .useful-library__stage {
    height: auto;
    min-height: 0;
    padding: 92px 20px 68px;
    overflow: visible;
  }

  .useful-library__header,
  .useful-reading__header {
    display: block;
  }

  .useful-library__marker {
    margin-bottom: 36px;
  }

  .useful-library__intro h2 {
    width: max-content;
    max-width: none;
    font-size: clamp(15px, 4.7vw, 22px);
    line-height: 0.96;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .useful-library__lead {
    font-size: 14px;
  }

  .useful-library__desk {
    position: relative;
    height: auto;
    margin-top: 62px;
  }

  .useful-folder {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .useful-folder__back {
    position: relative;
    height: 120px;
  }

  .useful-folder__back::before {
    left: 18px;
    width: 150px;
  }

  .useful-folder__front {
    position: absolute;
    top: 0;
    height: 120px;
    padding: 22px;
  }

  .useful-folder__front strong {
    font-size: 31px;
  }

  .useful-folder__front small {
    display: none;
  }

  .useful-tab,
  .useful-tab--prompts,
  .useful-tab--canva,
  .useful-tab--stickers {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 280px;
    margin: 18px 0 0;
    padding: 27px;
    transform: none !important;
  }

  .useful-tab--prompts {
    margin-top: 34px;
  }

  .useful-tab h3 {
    margin-top: 80px;
    font-size: 32px;
  }

  .useful-library__hint {
    display: none;
  }

  .useful-reading {
    padding: 78px 20px 100px;
  }

  .useful-reading__header {
    margin-bottom: 42px;
  }

  .useful-reading__header h3 {
    width: max-content;
    max-width: none;
    margin-top: 14px;
    font-size: clamp(16px, 5.25vw, 22px);
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .useful-reading__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .useful-article,
  .useful-article--one,
  .useful-article--two,
  .useful-article--three,
  .useful-article--all {
    grid-column: auto;
    min-height: 250px;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .useful-library__story {
    padding-bottom: 180px;
  }

  .useful-library__stage {
    height: auto;
    min-height: 900px;
  }

  .useful-library__hint {
    display: none;
  }
}

.kasper-offer {
  position: fixed;
  z-index: 70;
  right: clamp(18px, 2.4vw, 38px);
  bottom: clamp(16px, 2.5vw, 36px);
  width: min(410px, calc(100vw - 32px));
  height: 286px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 54px, 0) rotate(1.5deg);
  transition:
    opacity 420ms ease,
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kasper-offer[hidden] {
  display: none;
}

.kasper-offer.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.kasper-offer__bubble {
  position: absolute;
  top: 0;
  right: 0;
  width: 342px;
  min-height: 214px;
  padding: 25px 44px 28px;
  border: 1px solid rgba(10, 52, 40, 0.18);
  border-radius: 48% 52% 47% 53% / 52% 46% 54% 48%;
  color: var(--emerald);
  background: rgba(255, 252, 239, 0.96);
  box-shadow: 0 22px 54px rgba(45, 36, 28, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
}

.kasper-offer__bubble::after {
  content: "";
  position: absolute;
  right: 44px;
  bottom: -18px;
  width: 38px;
  height: 30px;
  border-right: 1px solid rgba(10, 52, 40, 0.18);
  background: #fffcef;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
  transform: rotate(-8deg);
}

.kasper-offer__eyebrow,
.kasper-offer__title,
.kasper-offer__note,
.kasper-offer__promo {
  margin: 0;
}

.kasper-offer__eyebrow {
  color: var(--accent-wine);
  font: 700 10px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kasper-offer__title {
  margin: 9px auto 0;
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  max-width: 270px;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.kasper-offer__note {
  max-width: 270px;
  margin: 12px auto 0;
  font: 700 11px/1.4 var(--sans);
  letter-spacing: 0.025em;
}

.kasper-offer__promo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(10, 52, 40, 0.35);
  border-radius: 999px;
  color: var(--emerald);
  background: rgba(255, 255, 255, 0.35);
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 220ms ease,
    background 220ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kasper-offer__promo:hover,
.kasper-offer__promo:focus-visible {
  color: #fffcef;
  background: var(--emerald);
  outline: none;
}

.kasper-offer__promo.is-revealed {
  color: var(--emerald);
  background: rgba(255, 255, 255, 0.45);
  cursor: default;
  animation: kasper-promo-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kasper-promo-reveal {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kasper-offer__image {
  position: absolute;
  right: 8px;
  bottom: -12px;
  z-index: 2;
  width: 122px;
  height: 154px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 16px rgba(28, 24, 20, 0.2));
  transform-origin: 50% 100%;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kasper-offer:hover .kasper-offer__image {
  transform: translateY(-5px) rotate(2deg);
}

.kasper-offer__close {
  position: absolute;
  z-index: 4;
  top: 13px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--emerald);
  background: transparent;
  font: 400 27px/1 var(--sans);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.kasper-offer__close:hover,
.kasper-offer__close:focus-visible {
  background: rgba(10, 52, 40, 0.08);
  outline: none;
  transform: rotate(8deg);
}

@media (max-width: 520px) {
  .kasper-offer {
    right: 12px;
    bottom: 10px;
    width: calc(100vw - 24px);
    height: 250px;
  }

  .kasper-offer__bubble {
    width: calc(100% - 18px);
    min-height: 204px;
    padding: 22px 38px 24px;
  }

  .kasper-offer__title {
    max-width: 220px;
    font-size: clamp(26px, 8vw, 32px);
  }

  .kasper-offer__note {
    max-width: 220px;
    margin-top: 9px;
    font-size: 10px;
  }

  .kasper-offer__image {
    right: 6px;
    width: 96px;
    height: 122px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .kasper-offer,
  .kasper-offer__image,
  .kasper-offer__close,
  .kasper-offer__promo {
    transition: none;
  }

  .kasper-offer__promo.is-revealed {
    animation: none;
  }
}

@media (max-width: 520px) {
  .site-logo {
    font-size: 20px;
  }

  .site-header {
    top: 12px;
    left: 50%;
    right: auto;
    width: calc(100% - 24px);
    min-height: 0;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .site-nav {
    gap: 14px;
  }

  .site-nav a {
    font-size: 11px;
  }

  .portrait--main {
    width: 154px;
    height: 212px;
    top: 154px;
  }

  .hero-copy {
    margin-top: 326px;
  }

  .hero h1 {
    line-height: 0.96;
  }

  .hero-title-main {
    font-size: clamp(42px, 13vw, 58px);
  }

  .hero-title-main:nth-child(2) {
    font-size: clamp(38px, 11.8vw, 52px);
  }

  .hero-title-subline {
    font-size: clamp(22px, 7vw, 30px);
  }

  .hero-subtitle {
    display: block;
    font-size: 20px;
  }

  .hero-cta {
    width: 100%;
    min-width: 0;
  }

  .photo-slot--right {
    display: none;
  }

  .familiar__intro {
    min-height: 188px;
    padding: 16px 8px;
  }

  .familiar h2 {
    font-size: clamp(34px, 9.7vw, 42px);
  }

  .familiar__script {
    font-size: 38px;
  }

  .familiar__body {
    gap: 38px;
    margin-top: 34px;
  }

  .familiar__list li {
    min-height: 0;
    padding: 16px 0 16px 38px;
    font-size: 15px;
  }

  .familiar__list li::before {
    top: 18px;
  }

  .familiar__list li:hover {
    padding-left: 38px;
  }

  .familiar__statement {
    margin-top: 48px;
    font-size: clamp(25px, 7.8vw, 32px);
  }

  .clarity-frame {
    min-height: 260px;
    padding: 48px 44px;
  }

  .approach {
    padding-right: 14px;
    padding-left: 14px;
  }

  .approach__header h2 {
    font-size: clamp(43px, 13.4vw, 58px);
  }

  .approach__lead p {
    font-size: 15px;
  }

  .diagnostic {
    padding-right: 14px;
    padding-left: 14px;
  }

  .diagnostic__header {
    gap: 30px;
  }

  .diagnostic__marker {
    gap: 12px;
  }

  .diagnostic__marker p {
    font-size: 26px;
  }

  .diagnostic__heading h2 {
    font-size: clamp(42px, 12.7vw, 54px);
  }

  .diagnostic-book__folio {
    display: grid;
    gap: 5px;
  }

  .diagnostic-book__page {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-route__progress,
  .process-route__kasper,
  .process-step {
    transition: none;
  }

  .useful-letter,
  .useful-letter__icon img,
  .useful-mail__signature,
  .useful-mail__signature img,
  .useful-mail-modal,
  .useful-mail-dialog {
    transition: none;
  }

  .clarity-frame h2,
  .clarity-frame p,
  .clarity-frame__bracket {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }

  .service-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .service-card__image {
    transition: none;
  }

  .services__cta {
    transition: none;
  }

  .approach-note {
    opacity: 1;
    transform: rotate(var(--rotation));
    transition: none;
  }

  .approach-detail {
    transition: none;
  }

  .diagnostic-book__bookmark,
  .diagnostic-book__page,
  .diagnostic-book__answers button,
  .diagnostic-result,
  .diagnostic-result__meter span {
    transition: none;
  }

  .about-story {
    min-height: auto;
  }

  .about-story__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .about-story__deck {
    display: grid;
    height: auto;
  }

  .about-story__card {
    position: relative;
    inset: auto;
    transform: none;
    box-shadow: none;
  }
}

.portfolio-showcase {
  position: relative;
  min-height: 100svh;
  color: var(--emerald);
  background:
    linear-gradient(rgba(10, 52, 40, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.03) 1px, transparent 1px),
    #f6f2ea;
  background-size: 10vw 10vw;
}

.portfolio-showcase__stage {
  position: relative;
  height: 100svh;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(82px, 9vh, 104px) clamp(24px, 4vw, 64px) clamp(26px, 4vh, 44px);
  overflow: hidden;
  background:
    linear-gradient(rgba(10, 52, 40, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.03) 1px, transparent 1px),
    #f6f2ea;
  background-size: 10vw 10vw;
}

.portfolio-showcase__header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(170px, 0.24fr) minmax(0, 0.76fr);
  gap: clamp(42px, 6vw, 92px);
}

.portfolio-showcase__marker {
  display: flex;
  gap: 16px;
  color: var(--accent-wine);
  font: 700 12px/1.25 var(--sans);
  text-transform: uppercase;
}

.portfolio-showcase__marker p,
.portfolio-showcase__heading p {
  margin: 0;
}

.portfolio-showcase__heading {
  display: flex;
  align-items: baseline;
  gap: clamp(42px, 6vw, 86px);
}

.portfolio-showcase__heading h2 {
  margin: 0;
  font: 500 clamp(54px, 5.8vw, 90px) / 0.88 var(--serif);
  letter-spacing: -0.035em;
}

.portfolio-showcase__heading p {
  max-width: 480px;
  color: rgba(30, 43, 54, 0.66);
  font: 400 clamp(14px, 1.1vw, 17px) / 1.5 var(--sans);
}

.portfolio-showcase__table {
  position: absolute;
  top: clamp(205px, 24vh, 245px);
  right: 0;
  bottom: clamp(24px, 4vh, 42px);
  left: 0;
}

.portfolio-card {
  position: absolute;
  width: clamp(270px, 22vw, 330px);
  height: clamp(330px, 47vh, 430px);
  z-index: 1;
  transform-origin: 50% 82%;
  will-change: transform, opacity;
}

.portfolio-card--one { top: 16%; left: -5%; z-index: 1; }
.portfolio-card--two { top: 5%; left: 14%; z-index: 2; }
.portfolio-card--three { top: 14%; left: 34%; z-index: 3; }
.portfolio-card--four { top: 3%; left: 54%; z-index: 4; }
.portfolio-card--five { top: 17%; left: 73%; z-index: 5; }
.portfolio-card--six { top: 7%; left: 91%; z-index: 6; }

.portfolio-card--two,
.portfolio-card--five {
  width: clamp(250px, 20vw, 305px);
  height: clamp(310px, 44vh, 400px);
}

.portfolio-card--four {
  width: clamp(285px, 23vw, 345px);
}

.portfolio-card__sheet {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  padding: 13px;
  border: 1px solid rgba(62, 53, 43, 0.14);
  border-radius: 2px;
  background: #fbf8f0;
  box-shadow: 0 24px 52px rgba(53, 44, 34, 0.17);
  transition:
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms ease;
}

.portfolio-card:hover .portfolio-card__sheet {
  transform: translateY(-8px) rotate(0deg) scale(1.012);
  box-shadow: 0 32px 68px rgba(53, 44, 34, 0.2);
}

.portfolio-card__mockup,
.portfolio-card__media {
  position: relative;
  overflow: hidden;
  background: #ddd2c2;
}

.portfolio-card__media {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  background: #f0ece3;
  color: var(--cream);
  text-decoration: none;
}

.portfolio-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-card__media > span {
  position: absolute;
  right: 16px;
  bottom: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  border-bottom: 1px solid currentColor;
  color: var(--accent-wine);
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 249, 237, 0.95),
    1px 0 0 rgba(255, 249, 237, 0.95),
    -1px 0 0 rgba(255, 249, 237, 0.95);
  transition: transform 250ms ease, color 250ms ease;
}

.portfolio-card__media:hover img,
.portfolio-card__media:focus-visible img {
  transform: scale(0.985);
}

.portfolio-card__media:hover > span,
.portfolio-card__media:focus-visible > span {
  transform: translateY(-3px);
  color: var(--primary-green);
}

.portfolio-card__media:focus-visible {
  outline: 3px solid var(--accent-wine);
  outline-offset: 3px;
}

.portfolio-card__mockup::before,
.portfolio-card__mockup::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.13);
}

.portfolio-card__mockup::before {
  inset: 12% 17%;
  transform: rotate(-7deg);
}

.portfolio-card__mockup::after {
  width: 44%;
  aspect-ratio: 1;
  right: -7%;
  bottom: -14%;
  border-radius: 50%;
}

.portfolio-card__mockup--emerald { background: linear-gradient(145deg, #9eafa4, #2d574a); }
.portfolio-card__mockup--sand { background: linear-gradient(145deg, #dfceb8, #a78267); }
.portfolio-card__mockup--rose { background: linear-gradient(145deg, #e2c5c0, #a66e77); }
.portfolio-card__mockup--mist { background: linear-gradient(145deg, #d1dcd9, #708f86); }
.portfolio-card__mockup--linen { background: linear-gradient(145deg, #e7dbc7, #b2906c); }
.portfolio-card__mockup--wine { background: linear-gradient(145deg, #c2a2a5, #682e3a); }

.portfolio-card h3 {
  min-height: 54px;
  margin: 0;
  padding: 17px 6px 5px;
  font: 500 clamp(20px, 1.7vw, 27px) / 1.02 var(--serif);
}

.portfolio-copy--mobile {
  display: none;
}

@media (max-width: 760px) {
  main .portfolio-showcase[id] {
    min-height: 0;
    overflow: clip;
    scroll-margin-top: 0;
  }

  .portfolio-showcase__stage {
    height: auto;
    min-height: 0;
    padding: 88px 20px 76px;
    overflow: clip;
  }

  .portfolio-showcase__header {
    display: block;
  }

  .portfolio-showcase__marker {
    margin-bottom: 20px;
  }

  .portfolio-showcase__heading {
    display: block;
  }

  .portfolio-showcase__heading h2 {
    font-size: clamp(52px, 15vw, 66px);
  }

  .portfolio-showcase__heading p {
    max-width: 340px;
    margin-top: 16px;
    font-size: 14px;
  }

  .portfolio-showcase__table {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    width: 100%;
    height: auto;
    margin-top: 44px;
    padding: 8px 6px;
    transform: none !important;
    will-change: auto;
  }

  .portfolio-card,
  .portfolio-card--two,
  .portfolio-card--four,
  .portfolio-card--five {
    position: relative;
    inset: auto;
    justify-self: center;
    width: min(calc(100% - 12px), 430px);
    height: auto;
    transform-origin: center;
    will-change: auto;
  }

  .portfolio-card--one { transform: rotate(-1.15deg); }
  .portfolio-card--two { transform: rotate(0.9deg); }
  .portfolio-card--three { transform: rotate(-0.7deg); }
  .portfolio-card--four { transform: rotate(1.1deg); }
  .portfolio-card--five { display: none; }
  .portfolio-card--six { transform: rotate(-0.85deg); }

  .portfolio-card__sheet {
    grid-template-rows: auto auto;
    height: auto;
    padding: 10px;
    box-shadow: 0 18px 38px rgba(53, 44, 34, 0.15);
  }

  .portfolio-card__media {
    display: grid;
    grid-template-rows: auto auto;
    padding: 8px;
  }

  .portfolio-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }

  .portfolio-card__media > span {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: start;
    margin: 10px 4px 2px;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #fbf8f0;
    font-size: 10px;
    text-shadow: none;
  }

  .portfolio-card h3 {
    min-height: 0;
    padding: 16px 6px 7px;
    font-size: clamp(24px, 7vw, 31px);
    line-height: 1.05;
    text-wrap: balance;
  }

  .portfolio-copy--desktop {
    display: none;
  }

  .portfolio-copy--mobile {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-showcase {
    min-height: 100svh;
  }

  .portfolio-card {
    opacity: 1;
  }
}

/* Portfolio is a single free-flowing photo strip, never a grid or a stack */
.portfolio-showcase__table {
  top: clamp(225px, 27vh, 270px);
  right: auto;
  bottom: auto;
  left: 0;
  display: flex;
  align-items: center;
  gap: clamp(38px, 4vw, 70px);
  width: max-content;
  height: min(58vh, 540px);
  padding: 0 clamp(32px, 5vw, 76px);
  will-change: transform;
}

.portfolio-card,
.portfolio-card--one,
.portfolio-card--two,
.portfolio-card--three,
.portfolio-card--four,
.portfolio-card--five,
.portfolio-card--six {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  z-index: auto;
  opacity: 1;
}

.portfolio-card--one { transform: translateY(22px) rotate(-3.5deg); }
.portfolio-card--two { transform: translateY(-28px) rotate(2.5deg); }
.portfolio-card--three { transform: translateY(34px) rotate(-2deg); }
.portfolio-card--four { transform: translateY(-18px) rotate(3.5deg); }
.portfolio-card--five { transform: translateY(26px) rotate(-3deg); }
.portfolio-card--six { transform: translateY(-24px) rotate(2deg); }

@media (max-width: 760px) {
  .portfolio-showcase__table {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    width: 100%;
    height: auto;
    margin-top: 44px;
    padding: 8px 6px;
    transform: none !important;
    will-change: auto;
  }

  .portfolio-card--one { transform: rotate(-1.15deg); }
  .portfolio-card--two { transform: rotate(0.9deg); }
  .portfolio-card--three { transform: rotate(-0.7deg); }
  .portfolio-card--four { transform: rotate(1.1deg); }
  .portfolio-card--five { display: none; }
  .portfolio-card--six { transform: rotate(-0.85deg); }
}

/* Единая печатная типографика маркеров разделов */
.services__marker,
.approach__marker,
.diagnostic__marker,
.useful-library__marker,
.work-process__marker,
.about-story__section-marker,
.portfolio-showcase__marker {
  align-items: baseline;
  gap: 16px;
  color: var(--accent-wine);
  font: 800 11px/1.25 var(--sans);
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.services__marker > span,
.services__marker > p,
.approach__marker > span,
.approach__marker > p,
.diagnostic__marker > span,
.diagnostic__marker > p,
.useful-library__marker > span,
.useful-library__marker > p,
.work-process__marker > span,
.work-process__marker > p,
.about-story__section-marker > span,
.about-story__section-marker > p,
.portfolio-showcase__marker > span,
.portfolio-showcase__marker > p {
  margin-block: 0;
  color: inherit;
  font: inherit;
  font-style: normal;
  letter-spacing: inherit;
}

.faq {
  position: relative;
  padding: clamp(110px, 11vw, 176px) clamp(22px, 5vw, 80px) clamp(120px, 12vw, 190px);
  overflow: clip;
  color: var(--emerald);
  background:
    linear-gradient(rgba(10, 52, 40, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 52, 40, 0.035) 1px, transparent 1px),
    #f8f2e7;
  background-size: 25vw 25vw;
}

.faq__layout {
  display: grid;
  grid-template-columns: minmax(310px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
  width: min(100%, 1480px);
  margin: 0 auto;
}

.faq__intro {
  position: sticky;
  top: 104px;
  min-height: 590px;
  padding: clamp(34px, 4vw, 58px);
  border: 1px solid rgba(10, 52, 40, 0.18);
  background:
    linear-gradient(135deg, transparent 0 66%, rgba(102, 8, 16, 0.08) 66% 100%),
    #e6d3bc;
  box-shadow: 0 28px 64px rgba(55, 44, 32, 0.12);
}

.faq__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--accent-wine);
  font: 800 11px/1.25 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.faq__marker p,
.faq__eyebrow,
.faq__lead,
.faq__note,
.faq__intro h2 {
  margin: 0;
}

.faq__eyebrow {
  margin-top: clamp(74px, 9vw, 126px);
  color: var(--accent-wine);
  font: 800 10px/1.3 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.faq__intro h2 {
  position: relative;
  z-index: 1;
  max-width: 570px;
  margin-top: 16px;
  font: 500 clamp(42px, 4.3vw, 66px) / 0.94 var(--serif);
  letter-spacing: -0.035em;
}

.faq__lead {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin-top: 28px;
  color: rgba(10, 52, 40, 0.72);
  font: 400 15px/1.6 var(--sans);
}

.faq__note {
  position: relative;
  z-index: 1;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: 350px;
  margin-top: 42px;
  color: var(--accent-wine);
  font: 700 11px/1.45 var(--sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.faq__list {
  border-top: 1px solid rgba(10, 52, 40, 0.2);
}

.faq-item {
  border-bottom: 1px solid rgba(10, 52, 40, 0.2);
  background: rgba(255, 252, 239, 0.5);
  transition: color 320ms ease, background-color 320ms ease, box-shadow 320ms ease;
}

.faq-item summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 48px;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  min-height: 112px;
  padding: 24px clamp(18px, 2.5vw, 34px);
  color: var(--emerald);
  font: 600 clamp(16px, 1.25vw, 20px) / 1.35 var(--sans);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__number {
  align-self: start;
  padding-top: 7px;
  color: var(--accent-wine);
  font: 800 9px/1 var(--sans);
  letter-spacing: 0.1em;
}

.faq-item__toggle {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(10, 52, 40, 0.34);
  border-radius: 50%;
  background: var(--bg);
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: var(--emerald);
  transform: translate(-50%, -50%);
  transition: transform 320ms ease;
}

.faq-item__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__answer {
  padding: 0 clamp(18px, 2.5vw, 34px) 34px calc(34px + clamp(32px, 4.5vw, 62px));
}

.faq-item__answer p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 252, 239, 0.78);
  font: 400 15px/1.65 var(--sans);
}

.faq-item[open] {
  color: var(--bg);
  background: var(--emerald);
  box-shadow: 0 24px 54px rgba(10, 52, 40, 0.14);
}

.faq-item[open] summary,
.faq-item[open] .faq-item__number {
  color: var(--bg);
}

.faq-item[open] .faq-item__toggle {
  border-color: var(--bg);
  background: var(--bg);
}

.faq-item[open] .faq-item__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent-wine);
  outline-offset: -5px;
}

.faq-item[open] .faq-item__answer {
  animation: faq-answer-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Спокойные переходы между крупными редакционными разделами */
.portfolio-showcase,
.approach,
.diagnostic,
.useful-library,
.about-story,
.work-process,
.faq {
  isolation: isolate;
}

.portfolio-showcase,
.useful-library,
.about-story,
.work-process,
.faq {
  margin-top: clamp(104px, 10vw, 168px);
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .faq__layout {
    grid-template-columns: 1fr;
  }

  .faq__intro {
    position: relative;
    top: auto;
    min-height: 560px;
  }
}

@media (max-width: 600px) {
  .portfolio-showcase,
  .useful-library,
  .about-story,
  .work-process,
  .faq {
    margin-top: 72px;
  }

  .faq {
    padding: 88px 20px 110px;
    background-size: 50vw 50vw;
  }

  .faq__layout {
    gap: 42px;
  }

  .faq__intro {
    min-height: 0;
    padding: 28px 24px;
  }

  .faq__eyebrow {
    margin-top: 60px;
  }

  .faq__intro h2 {
    max-width: 310px;
    font-size: clamp(39px, 11.5vw, 48px);
  }

  .faq__lead {
    margin-top: 22px;
    font-size: 14px;
  }

  .faq__note {
    margin-top: 34px;
  }

  .faq-item summary {
    grid-template-columns: 24px minmax(0, 1fr) 38px;
    gap: 12px;
    min-height: 96px;
    padding: 20px 12px;
    font-size: 16px;
  }

  .faq-item__number {
    font-size: 8px;
  }

  .faq-item__toggle {
    width: 36px;
    height: 36px;
  }

  .faq-item__answer {
    padding: 0 20px 28px 48px;
  }

  .faq-item__answer p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item__toggle::before,
  .faq-item__toggle::after {
    transition: none;
  }

  .faq-item[open] .faq-item__answer {
    animation: none;
  }
}

/* Контакты */
.contacts {
  position: relative;
  isolation: isolate;
  max-width: 1840px;
  min-height: 100svh;
  margin: clamp(104px, 10vw, 168px) auto 0;
  padding: clamp(112px, 10vw, 176px) clamp(28px, 6vw, 112px) 0;
  overflow: hidden;
  color: var(--emerald);
  background:
    linear-gradient(90deg, rgba(220, 207, 190, 0.26) 1px, transparent 1px),
    linear-gradient(180deg, rgba(220, 207, 190, 0.2) 1px, transparent 1px),
    var(--bg);
  background-size: 25% 100%, 100% 33.333%;
}

.contacts__header {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(0, 2.2fr);
  column-gap: clamp(36px, 7vw, 132px);
  align-items: start;
  max-width: 1540px;
  margin: 0 auto clamp(58px, 6.5vw, 110px);
}

.contacts__marker {
  display: flex;
  gap: 22px;
  align-items: baseline;
  color: var(--accent-wine);
  font: 800 12px/1 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.contacts__marker p,
.contacts__eyebrow,
.contacts__lead,
.contacts__availability,
.contacts__legal p {
  margin: 0;
}

.contacts__eyebrow {
  grid-column: 2;
  color: var(--accent-wine);
  font: 700 12px/1.35 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contacts__header h2 {
  grid-column: 2;
  max-width: 980px;
  margin: 22px 0 0;
  font: 400 clamp(58px, 6.2vw, 112px) / 0.92 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.contacts__lead {
  grid-column: 2;
  max-width: 680px;
  margin-top: 30px;
  color: rgba(10, 52, 40, 0.72);
  font: 400 clamp(16px, 1.3vw, 21px) / 1.55 var(--sans);
}

.contacts__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(116px, auto);
  gap: clamp(14px, 1.35vw, 24px);
  max-width: 1540px;
  margin: 0 auto;
}

.contact-card {
  position: relative;
  display: flex;
  grid-column: span 4;
  min-height: 238px;
  padding: clamp(26px, 2.4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(10, 52, 40, 0.15);
  border-radius: 3px;
  flex-direction: column;
  background: rgba(247, 237, 220, 0.86);
  box-shadow: 0 24px 52px rgba(57, 45, 35, 0.08);
  font-family: var(--sans);
  text-decoration: none;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms ease, background-color 360ms ease;
}

.contact-card--primary {
  grid-column: span 5;
  background: var(--emerald);
  color: var(--bg);
}

.contact-card:nth-child(2) {
  grid-column: span 7;
}

.contact-card:nth-child(3) {
  grid-column: 2 / span 4;
}

.contact-card:nth-child(4) {
  grid-column: span 4;
  background: rgba(233, 212, 195, 0.9);
}

.contact-card--compact {
  grid-column: span 3;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: -84px;
  right: -56px;
  width: 190px;
  height: 190px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.1;
}

.contact-card__number {
  color: var(--accent-wine);
  font: 800 10px/1 var(--sans);
  letter-spacing: 0.1em;
}

.contact-card--primary .contact-card__number {
  color: #e7b9ad;
}

.contact-card__label {
  margin-top: 38px;
  font: 500 clamp(20px, 1.8vw, 29px) / 1.1 var(--sans);
}

.contact-card__value {
  max-width: calc(100% - 50px);
  margin-top: auto;
  padding-top: 24px;
  color: currentColor;
  font: 400 clamp(14px, 1.05vw, 17px) / 1.4 var(--sans);
  opacity: 0.72;
}

.contact-card__arrow {
  position: absolute;
  right: clamp(24px, 2vw, 34px);
  bottom: clamp(24px, 2vw, 34px);
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  place-items: center;
  font: 400 19px/1 var(--sans);
  opacity: 0.72;
}

.contact-card:hover,
.contact-card:focus-visible {
  z-index: 2;
  background: #f3dfc6;
  box-shadow: 0 34px 68px rgba(57, 45, 35, 0.15);
  transform: translateY(-8px);
}

.contact-card--primary:hover,
.contact-card--primary:focus-visible {
  color: var(--bg);
  background: #124b3b;
}

.contact-card:focus-visible {
  outline: 2px solid var(--accent-wine);
  outline-offset: 5px;
}

.contacts__footer {
  position: relative;
  min-height: 390px;
  max-width: 1540px;
  margin: clamp(70px, 8vw, 132px) auto 0;
  padding: 44px clamp(24px, 3vw, 52px) 32px;
  overflow: hidden;
  color: var(--bg);
  background: var(--emerald);
}

.contacts__availability {
  position: relative;
  z-index: 2;
  max-width: 520px;
  font: 500 clamp(18px, 1.55vw, 25px) / 1.35 var(--sans);
}

.contacts__brand {
  position: absolute;
  left: 50%;
  bottom: -0.25em;
  margin: 0;
  color: rgba(255, 252, 239, 0.075);
  font: 400 clamp(108px, 15vw, 260px) / 0.72 var(--serif);
  letter-spacing: -0.06em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.contacts__legal {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 3vw, 52px);
  bottom: 30px;
  left: clamp(24px, 3vw, 52px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 252, 239, 0.66);
  font: 400 11px/1.4 var(--sans);
  letter-spacing: 0.03em;
}

.contacts__legal a {
  text-underline-offset: 4px;
}

@media (max-width: 980px) {
  .contacts__header {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .contact-card,
  .contact-card--primary,
  .contact-card:nth-child(2),
  .contact-card:nth-child(3),
  .contact-card:nth-child(4),
  .contact-card--compact {
    grid-column: span 6;
  }

  .contact-card--compact {
    grid-column: 4 / span 6;
  }
}

@media (max-width: 640px) {
  .contacts {
    min-height: 0;
    margin-top: 72px;
    padding: 88px 20px 0;
    background-size: 50% 100%, 100% 25%;
  }

  .contacts__header {
    display: block;
    margin-bottom: 46px;
  }

  .contacts__marker {
    margin-bottom: 48px;
  }

  .contacts__eyebrow {
    font-size: 10px;
  }

  .contacts__header h2 {
    margin-top: 18px;
    font-size: clamp(47px, 14.2vw, 60px);
    line-height: 0.94;
  }

  .contacts__lead {
    margin-top: 24px;
    font-size: 15px;
  }

  .contacts__grid {
    display: block;
  }

  .contact-card {
    min-height: 190px;
    margin-top: 14px;
    padding: 26px;
  }

  .contact-card:first-child {
    margin-top: 0;
  }

  .contact-card__label {
    margin-top: 28px;
    font-size: 22px;
  }

  .contact-card__value {
    padding-top: 28px;
    font-size: 14px;
  }

  .contact-card__arrow {
    right: 22px;
    bottom: 22px;
    width: 40px;
    height: 40px;
  }

  .contacts__footer {
    min-height: 360px;
    margin-top: 64px;
    padding: 30px 24px;
  }

  .contacts__brand {
    bottom: 86px;
    font-size: 33vw;
  }

  .contacts__legal {
    right: 24px;
    bottom: 24px;
    left: 24px;
    display: grid;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card {
    transition: none;
  }
}

/* Контакты: спокойная композиция по референсу */
.contacts {
  max-width: none;
  min-height: 0;
  padding: clamp(108px, 8vw, 148px) clamp(24px, 2.8vw, 54px) 0;
  background: var(--bg);
}

.contacts__header {
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 2.45fr);
  max-width: 1740px;
  margin-bottom: clamp(48px, 4.5vw, 76px);
}

.contacts__header h2 {
  max-width: none;
  margin-top: 18px;
  font-size: clamp(52px, 4.4vw, 78px);
  line-height: 0.98;
  white-space: nowrap;
}

.contacts__lead {
  max-width: none;
  margin-top: 20px;
  font-size: clamp(15px, 1.05vw, 18px);
}

.contacts__panel {
  position: relative;
  max-width: 1740px;
  min-height: 710px;
  margin: 0 auto;
  padding: clamp(30px, 2.8vw, 52px) clamp(24px, 2.8vw, 52px) 0;
  overflow: hidden;
  border: 1px solid rgba(10, 52, 40, 0.06);
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 24px 70px rgba(57, 45, 35, 0.05);
}

.contacts__grid {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 30px);
  max-width: none;
}

.contact-card,
.contact-card--primary,
.contact-card:nth-child(2),
.contact-card:nth-child(3),
.contact-card:nth-child(4),
.contact-card--compact {
  grid-column: auto;
  min-height: clamp(210px, 16vw, 260px);
  padding: clamp(24px, 2vw, 36px);
  border: 0;
  border-radius: 18px;
  color: var(--emerald);
  background: rgba(241, 240, 236, 0.82);
  box-shadow: none;
}

.contact-card::before {
  display: none;
}

.contact-card__number {
  display: none;
}

.contact-card__label {
  margin-top: 0;
  font: 500 clamp(18px, 1.35vw, 24px) / 1.1 var(--sans);
}

.contact-card__value {
  max-width: calc(100% - 42px);
  color: rgba(10, 52, 40, 0.32);
  font: 400 clamp(13px, 0.95vw, 16px) / 1.35 var(--sans);
  opacity: 1;
}

.contact-card__arrow {
  right: clamp(20px, 1.6vw, 28px);
  bottom: clamp(20px, 1.6vw, 28px);
  width: 38px;
  height: 38px;
  border: 0;
  color: rgba(10, 52, 40, 0.2);
  background: rgba(10, 52, 40, 0.05);
  font-size: 17px;
  opacity: 1;
}

.contact-card:hover,
.contact-card:focus-visible,
.contact-card--primary:hover,
.contact-card--primary:focus-visible {
  color: var(--emerald);
  background: rgba(234, 225, 211, 0.9);
  box-shadow: 0 18px 38px rgba(57, 45, 35, 0.08);
  transform: translateY(-5px);
}

.contacts__brand {
  z-index: 0;
  bottom: 90px;
  color: rgba(10, 52, 40, 0.035);
  font-size: clamp(112px, 15vw, 272px);
  line-height: 0.72;
  letter-spacing: -0.055em;
}

.contacts__footer {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 36px;
  min-height: 132px;
  max-width: none;
  margin: 0;
  padding: 24px clamp(24px, 3vw, 54px);
  overflow: visible;
  border-radius: 20px 20px 0 0;
}

.contacts__availability {
  font-size: clamp(14px, 1vw, 17px);
}

.contacts__legal {
  position: static;
  justify-self: stretch;
  align-items: center;
  font-size: 10px;
}

.contacts__disclaimer {
  grid-column: 1 / -1;
  max-width: 860px;
  margin: 0;
  color: rgba(255, 252, 239, 0.46);
  font: 400 9px/1.45 var(--sans);
  letter-spacing: 0.02em;
}

.site-nav a,
.hero-tags span,
.approach-note__title {
  font-family: var(--sans);
}

@media (max-width: 980px) {
  .contacts__header h2 {
    white-space: normal;
  }

  .contacts__panel {
    min-height: 850px;
  }

  .contacts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-card,
  .contact-card--primary,
  .contact-card:nth-child(2),
  .contact-card:nth-child(3),
  .contact-card:nth-child(4),
  .contact-card--compact {
    min-height: 220px;
  }

  .contacts__brand {
    bottom: 112px;
  }

  .contacts__footer {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 166px;
  }
}

@media (max-width: 640px) {
  .contacts {
    padding: 88px 14px 0;
  }

  .contacts__header {
    padding: 0 6px;
  }

  .contacts__header h2 {
    font-size: clamp(43px, 13vw, 54px);
  }

  .contacts__panel {
    min-height: 1200px;
    padding: 14px 14px 0;
    border-radius: 18px 18px 0 0;
  }

  .contacts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-card,
  .contact-card--primary,
  .contact-card:nth-child(2),
  .contact-card:nth-child(3),
  .contact-card:nth-child(4),
  .contact-card--compact {
    min-height: 170px;
    margin: 0;
    padding: 24px;
    border-radius: 14px;
  }

  .contacts__brand {
    bottom: 162px;
    font-size: 31vw;
  }

  .contacts__footer {
    display: block;
    min-height: 214px;
    padding: 24px;
    border-radius: 16px 16px 0 0;
  }

  .contacts__legal {
    display: grid;
    margin-top: 20px;
  }
}

/* Уведомление о технических данных */
.cookie-notice {
  position: fixed;
  z-index: 70;
  left: clamp(18px, 2.5vw, 42px);
  bottom: clamp(18px, 2.5vw, 38px);
  width: min(470px, calc(100vw - 36px));
  padding: 24px 26px 22px;
  border: 1px solid rgba(10, 52, 40, 0.18);
  border-radius: 18px;
  color: var(--emerald);
  background: rgba(255, 252, 239, 0.96);
  box-shadow: 0 26px 70px rgba(42, 34, 27, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice.is-hiding {
  opacity: 0;
  transform: translateY(14px);
}

.cookie-notice__title {
  margin: 0 0 8px;
  color: var(--accent-wine);
  font: 700 12px/1.2 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cookie-notice > p:not(.cookie-notice__title) {
  max-width: 400px;
  margin: 0;
  color: rgba(10, 52, 40, 0.72);
  font: 400 13px/1.5 var(--sans);
}

.cookie-notice__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}

.cookie-notice__actions button {
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: var(--bg);
  background: var(--emerald);
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-notice__actions a {
  color: var(--emerald);
  font: 600 11px/1.2 var(--sans);
  text-underline-offset: 4px;
}

.cookie-notice__actions button:focus-visible,
.cookie-notice__actions a:focus-visible {
  outline: 2px solid var(--accent-wine);
  outline-offset: 4px;
}

body:not(.cookies-accepted) .kasper-offer {
  display: none !important;
}

/* Страница политики */
.legal-page {
  color: var(--emerald);
  background:
    linear-gradient(90deg, rgba(220, 207, 190, 0.28) 1px, transparent 1px),
    var(--bg);
  background-size: 25vw 100%;
}

.legal-page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: calc(100% - clamp(28px, 6vw, 100px));
  max-width: 1540px;
  min-height: 64px;
  margin: 24px auto 0;
  padding: 10px clamp(18px, 2vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background: rgba(255, 252, 239, 0.82);
  box-shadow: 0 18px 52px rgba(48, 38, 28, 0.08);
}

.legal-page__back {
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.legal-document {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(90px, 10vw, 150px) 0 120px;
  background: transparent;
}

.legal-document__marker,
.legal-document__updated {
  color: var(--accent-wine);
  font: 700 11px/1.4 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-document h1 {
  margin: 24px 0 18px;
  font: 400 clamp(52px, 8vw, 92px) / 0.94 var(--serif);
  letter-spacing: -0.035em;
}

.legal-document__updated {
  margin: 0 0 72px;
  color: rgba(10, 52, 40, 0.48);
}

.legal-document section {
  padding: 36px 0;
  border-top: 1px solid rgba(10, 52, 40, 0.16);
}

.legal-document h2 {
  margin: 0 0 20px;
  font: 500 clamp(25px, 3vw, 36px) / 1.1 var(--serif);
}

.legal-document p {
  margin: 14px 0 0;
  color: rgba(10, 52, 40, 0.74);
  font: 400 clamp(14px, 1.2vw, 17px) / 1.7 var(--sans);
}

.legal-document a {
  color: var(--accent-wine);
  text-underline-offset: 4px;
}

@media (max-width: 640px) {
  .cookie-notice {
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    padding: 20px;
  }

  .legal-page__header {
    width: calc(100% - 28px);
    margin-top: 14px;
  }

  .legal-page__header .site-logo {
    font-size: 17px;
  }

  .legal-page__back {
    font-size: 9px;
  }

  .legal-document {
    padding-top: 74px;
  }

  .legal-document h1 {
    font-size: 42px;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    transition: none;
  }
}

.brand-logo-img { display: block; width: auto; max-width: 180px; height: clamp(18px, 1.5vw, 24px); object-fit: contain; }
.brand-logo-img--footer { width: min(180px, 100%); max-width: 180px; height: auto; }

/* Главный подвал */
.main-footer-contact {
  padding: clamp(22px, 2.4vw, 42px);
  color: var(--emerald);
  background: #202322;
}

.main-footer-contact__frame {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
  min-height: min(760px, 82vh);
  overflow: hidden;
  border: 1px solid rgba(255, 252, 239, 0.72);
  background: #f3efdf;
}

.main-footer-contact__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3.2vw, 58px);
}

.main-footer-contact__marker {
  margin: 0 0 clamp(24px, 3vw, 52px);
  color: var(--accent-wine);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-footer-contact h2 {
  max-width: 760px;
  margin: 0;
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(66px, 7.1vw, 132px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.76;
}

.main-footer-contact h2 span,
.main-footer-contact h2 em {
  display: block;
}

.main-footer-contact h2 em {
  margin: 0.2em 0 0.04em clamp(28px, 4vw, 76px);
  color: var(--accent-wine);
  font-family: "Snell Roundhand", "Apple Chancery", var(--serif);
  font-size: 0.48em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.92;
}

.main-footer-contact__name {
  margin: clamp(18px, 2vw, 34px) 0 0;
  color: var(--emerald);
  font: 700 clamp(18px, 1.45vw, 26px)/1.1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-footer-contact__lead {
  max-width: 620px;
  margin: 18px 0 clamp(30px, 3vw, 52px);
  color: rgba(10, 52, 40, 0.7);
  font: 500 clamp(15px, 1.1vw, 19px)/1.5 var(--sans);
}

.main-footer-contact__socials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 850px;
}

.main-footer-contact__socials a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid rgba(102, 8, 16, 0.32);
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.main-footer-contact__socials a::after {
  position: absolute;
  top: 13px;
  right: 14px;
  content: "↗";
  color: var(--accent-wine);
  font-size: 16px;
}

.main-footer-contact__socials span {
  font: 400 clamp(19px, 1.5vw, 27px)/1 var(--serif);
}

.main-footer-contact__socials small {
  max-width: calc(100% - 20px);
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: rgba(10, 52, 40, 0.58);
  font: 650 10px/1.25 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main-footer-contact__socials a:hover,
.main-footer-contact__socials a:focus-visible {
  color: #fffcef;
  background: var(--accent-wine);
  transform: translateY(-2px);
}

.main-footer-contact__socials a:hover::after,
.main-footer-contact__socials a:focus-visible::after,
.main-footer-contact__socials a:hover small,
.main-footer-contact__socials a:focus-visible small {
  color: #fffcef;
}

.main-footer-contact__socials a:focus-visible {
  outline: 3px solid rgba(112, 134, 106, 0.7);
  outline-offset: 3px;
}

.main-footer-contact__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-top: auto;
  padding-top: clamp(34px, 4vw, 70px);
  color: rgba(10, 52, 40, 0.65);
  font: 500 11px/1.45 var(--sans);
}

.main-footer-contact__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.main-footer-contact__bottom a {
  text-decoration-color: rgba(102, 8, 16, 0.5);
  text-underline-offset: 4px;
}

.main-footer-contact__bottom p {
  margin: 0;
}

.main-footer-contact__portrait {
  min-height: 100%;
  margin: 0;
  background: #e7e2d8;
}

.main-footer-contact__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.main-footer-contact__meta-note {
  max-width: 980px;
  margin: 14px 0 0 auto;
  color: rgba(255, 252, 239, 0.5);
  font: 400 9px/1.4 var(--sans);
  text-align: right;
}

@media (max-width: 1080px) {
  .main-footer-contact__frame {
    grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.75fr);
  }

  .main-footer-contact__socials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-footer-contact__bottom {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }
}

@media (max-width: 760px) {
  .main-footer-contact {
    padding: 12px;
  }

  .main-footer-contact__frame {
    grid-template-columns: 1fr;
  }

  .main-footer-contact__content {
    padding: 28px 20px 34px;
  }

  .main-footer-contact h2 {
    font-size: clamp(60px, 20vw, 88px);
  }

  .main-footer-contact h2 em {
    max-width: 8em;
    margin-left: 18px;
    font-size: 0.42em;
  }

  .main-footer-contact__socials {
    grid-template-columns: 1fr 1fr;
  }

  .main-footer-contact__socials a {
    min-height: 74px;
    padding: 12px 14px;
  }

  .main-footer-contact__portrait {
    min-height: 110vw;
    order: -1;
  }

  .main-footer-contact__portrait img {
    object-position: 50% 25%;
  }

  .main-footer-contact__meta-note {
    margin-right: 6px;
    margin-left: 6px;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .main-footer-contact__socials {
    grid-template-columns: 1fr;
  }
}

/* Mobile: final header and hero cleanup */
@media (max-width: 768px) {
  .site-header {
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    min-height: auto !important;
    padding: 14px 18px !important;
    border-radius: 24px !important;
    display: block !important;
    transform: none !important;
  }

  .site-header.is-scrolled {
    transform: none !important;
  }

  .site-header-row {
    width: 100% !important;
    min-height: 54px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .site-logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .brand-logo-img {
    display: block !important;
    height: 26px !important;
    width: auto !important;
  }

  .site-menu-toggle {
    position: relative !important;
    margin: 0 0 0 auto !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex: 0 0 54px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0A3428 !important;
    border: 1px solid rgba(10, 52, 40, 0.28) !important;
    background: rgba(255, 253, 249, 0.78) !important;
    transform: none !important;
  }

  .burger-icon {
    position: relative !important;
    display: block !important;
    width: 24px !important;
    height: 18px !important;
    color: #0A3428 !important;
    border-top: 2px solid #0A3428 !important;
  }

  .burger-icon::before,
  .burger-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 24px !important;
    border-top: 2px solid #0A3428 !important;
  }

  .burger-icon::before {
    top: 7px !important;
  }

  .burger-icon::after {
    top: 15px !important;
  }

  .hero-tags {
    display: none !important;
  }

  .hero {
    min-height: auto !important;
    padding-bottom: 120px !important;
    overflow: hidden !important;
  }

  .hero-title {
    max-width: 100% !important;
  }

  .photo-slot {
    border: 1px solid rgba(102, 8, 16, 0.16) !important;
    background: #ead2c8 !important;
    box-shadow: 0 18px 42px rgba(48, 38, 28, 0.12) !important;
    overflow: hidden !important;
  }

  .photo-slot img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .hero-cta {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 32px) !important;
    margin: 36px auto 0 !important;
    z-index: 3 !important;
  }
}
/* Useful section: repair layer after deleted broken block */

/* DESKTOP / BASE */
#useful.useful-library {
  overflow: hidden;
}

#useful .useful-library__stage {
  min-height: 900px;
  overflow: hidden;
}

#useful .useful-library__desk {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(61vh, 570px);
}

#useful .useful-folder {
  position: absolute;
  top: 62%;
  left: 50%;
  width: min(55vw, 760px);
  height: 430px;
  transform: translate(-50%, -50%);
}

#useful .useful-folder__back {
  display: none !important;
}

#useful .useful-folder__bag {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  display: block;
  width: 315px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 30px 46px rgba(55, 44, 32, 0.2));
}

#useful .useful-folder__front {
  position: absolute;
  left: 50%;
  bottom: 94px;
  z-index: 5;
  width: 210px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fffaf0;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

#useful .useful-folder__front::before,
#useful .useful-folder__front::after {
  display: none;
}

#useful .useful-folder__front span {
  color: #fffaf0;
  font: 800 8px/1.15 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#useful .useful-folder__front strong {
  display: block;
  margin-top: 6px;
  color: #fffaf0;
  font: 500 25px/0.92 var(--serif);
}

#useful .useful-folder__front small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 250, 240, 0.9);
  font: 700 7px/1.25 var(--sans);
}

/* карточки: внешний вид, transform на desktop НЕ трогаем */
#useful .useful-tab {
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

#useful .useful-tab::before {
  display: none;
}

#useful .useful-tab__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 24px 36px rgba(55, 44, 32, 0.16));
}

#useful .useful-tab__index,
#useful .useful-tab h3,
#useful .useful-tab p,
#useful .useful-tab__action,
#useful .useful-tab__telegram {
  position: absolute;
  z-index: 2;
  margin: 0;
}

#useful .useful-tab--prompts {
  z-index: 9 !important;
  width: 255px;
  height: 368px;
}

#useful .useful-tab--canva {
  z-index: 10 !important;
  width: 265px;
  height: 344px;
}

#useful .useful-tab--stickers {
  z-index: 11 !important;
  width: 240px;
  height: 350px;
}

#useful .useful-tab--prompts .useful-tab__index {
  top: 22%;
  left: 19%;
  color: var(--accent-wine);
  font: 800 8px/1.2 var(--sans);
  letter-spacing: 0.1em;
}

#useful .useful-tab--prompts h3 {
  top: 55%;
  left: 21%;
  max-width: 58%;
  color: var(--emerald);
  font: 500 25px/0.96 var(--serif);
}

#useful .useful-tab--prompts p {
  top: 69%;
  left: 21%;
  max-width: 57%;
  color: rgba(30, 43, 54, 0.72);
  font: 600 8px/1.28 var(--sans);
}

#useful .useful-tab--prompts .useful-tab__action {
  top: 84.5%;
  left: 21%;
  color: var(--emerald);
  font: 800 7px/1.2 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#useful .useful-tab--canva .useful-tab__index {
  top: 20%;
  left: 24%;
  color: var(--accent-wine);
  font: 800 8px/1.2 var(--sans);
  letter-spacing: 0.1em;
}

#useful .useful-tab--canva h3 {
  top: 45%;
  left: 24%;
  max-width: 55%;
  color: var(--emerald);
  font: 500 22px/0.98 var(--serif);
}

#useful .useful-tab--canva p {
  top: 62%;
  left: 24%;
  max-width: 51%;
  color: rgba(30, 43, 54, 0.72);
  font: 600 7px/1.25 var(--sans);
}

#useful .useful-tab--canva .useful-tab__action {
  top: 80.5%;
  left: 24%;
  color: var(--emerald);
  font: 800 7px/1.2 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#useful .useful-tab--stickers .useful-tab__index {
  top: 20%;
  left: 18%;
  color: var(--accent-wine);
  font: 800 8px/1.2 var(--sans);
  letter-spacing: 0.1em;
}

#useful .useful-tab__telegram {
  top: 14%;
  right: 13%;
  width: 33px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

#useful .useful-tab--stickers h3 {
  top: 43%;
  left: 18%;
  max-width: 58%;
  color: var(--emerald);
  font: 500 22px/0.96 var(--serif);
}

#useful .useful-tab--stickers p {
  top: 60%;
  left: 18.5%;
  max-width: 54%;
  color: rgba(30, 43, 54, 0.72);
  font: 600 7px/1.28 var(--sans);
}

#useful .useful-tab--stickers .useful-tab__action {
  top: 79%;
  left: 18.5%;
  color: var(--emerald);
  font: 800 7px/1.2 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#useful .useful-library__hint {
  display: none;
}

/* MOBILE: компактная сцена, не колонка */
@media (max-width: 760px) {
  #useful .useful-library__stage {
    height: auto;
    min-height: 760px;
    padding: 92px 18px 62px;
    overflow: hidden;
  }

  #useful .useful-library__header {
    display: block;
    position: relative;
    z-index: 20;
  }

  #useful .useful-library__marker {
    margin-bottom: 28px;
  }

  #useful .useful-library__intro h2 {
    width: auto;
    max-width: 100%;
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: 0.98;
    white-space: normal;
  }

  #useful .useful-library__lead {
    max-width: 100%;
    font-size: 14px;
  }

  #useful .useful-library__desk {
    position: relative !important;
    height: 430px !important;
    margin-top: 42px;
  }

  #useful .useful-folder {
    position: absolute !important;
    top: 52% !important;
    left: 50% !important;
    width: 340px !important;
    max-width: 100%;
    height: 390px !important;
    transform: translate(-50%, -50%) !important;
  }

  #useful .useful-folder__bag {
    width: 190px;
  }

  #useful .useful-folder__front {
    display: none;
  }

  #useful .useful-tab,
  #useful .useful-tab--prompts,
  #useful .useful-tab--canva,
  #useful .useful-tab--stickers {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  #useful .useful-tab--prompts {
    width: 138px;
    height: 200px;
    transform: translate(-170px, -70px) rotate(-5deg) !important;
  }

  #useful .useful-tab--canva {
    width: 150px;
    height: 196px;
    transform: translate(-72px, -128px) rotate(1.5deg) !important;
  }

  #useful .useful-tab--stickers {
    width: 132px;
    height: 196px;
    transform: translate(54px, -70px) rotate(5deg) !important;
  }

  #useful .useful-tab p {
    display: none;
  }

  #useful .useful-tab h3 {
    font-size: 13px;
  }

  #useful .useful-tab__index {
    font-size: 5px !important;
  }

  #useful .useful-tab__action {
    font-size: 5px !important;
  }

  #useful .useful-tab__telegram {
    width: 20px;
  }
}

@media (max-width: 420px) {
  #useful .useful-folder {
    width: 310px !important;
  }

  #useful .useful-tab--prompts {
    transform: translate(-154px, -62px) rotate(-5deg) !important;
  }

  #useful .useful-tab--canva {
    transform: translate(-72px, -124px) rotate(1.5deg) !important;
  }

  #useful .useful-tab--stickers {
    transform: translate(42px, -62px) rotate(5deg) !important;
  }
}
/* Useful section: FREE label near heading */
#useful .useful-library__free {
  position: absolute !important;
  top: 24px !important;
right: 120px !important;
width: 120px !important;
height: 100px !important;
  z-index: 30 !important;
transform: none !important;
pointer-events: none !important;
}

#useful .useful-library__free-label {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 72px !important;
  max-width: 72px !important;
  height: auto !important;
  transform: none !important;
}

#useful .useful-library__free-arrow {
  position: absolute !important;
  top: 56px !important;
  right: 22px !important;
  left: auto !important;
  width: 72px !important;
  max-width: 72px !important;
  height: auto !important;
  transform: rotate(-8deg) !important;
}

@media (max-width: 1024px) {
  #useful .useful-library__free {
    top: 190px !important;
    right: 44px !important;
    width: 100px !important;
    height: 118px !important;
  }

  #useful .useful-library__free-label {
    width: 58px !important;
    max-width: 58px !important;
  }

  #useful .useful-library__free-arrow {
    top: 46px !important;
    right: 16px !important;
    width: 56px !important;
    max-width: 56px !important;
  }
}

@media (max-width: 760px) {
  #useful .useful-library__free {
    top: 255px !important;
    right: 18px !important;
    width: 78px !important;
    height: 92px !important;
  }

  #useful .useful-library__free-label {
    width: 44px !important;
    max-width: 44px !important;
  }

  #useful .useful-library__free-arrow {
    top: 34px !important;
    right: 10px !important;
    width: 42px !important;
    max-width: 42px !important;
  }
}
/* FINAL FIX: useful FREE placement */
#useful .useful-library__free {
  position: absolute !important;
  top: 210px !important;
  right: 250px !important;
  left: auto !important;
  width: 90px !important;
  height: 110px !important;
  z-index: 30 !important;
  pointer-events: none !important;
  transform: none !important;
}

#useful .useful-library__free-label {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: block !important;
  width: 52px !important;
  max-width: 52px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
}

#useful .useful-library__free-arrow {
  position: absolute !important;
  top: 38px !important;
  right: 10px !important;
  left: auto !important;
  display: block !important;
  width: 52px !important;
  max-width: 52px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  transform: rotate(-8deg) !important;
}

/* На телефоне декоративный FREE убираем, чтобы не ломал блок */
@media (max-width: 760px) {
  #useful .useful-library__free,
  #useful .useful-library__free-label,
  #useful .useful-library__free-arrow {
    display: none !important;
  }
}

/* Убираем красную рамку вокруг Canva/карточек */
#useful .useful-tab,
#useful .useful-tab:hover,
#useful .useful-tab:focus,
#useful .useful-tab:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* MOBILE USEFUL: стильная свайп-витрина вместо пакета */
@media (max-width: 760px) {
  #useful .useful-library__free,
  #useful .useful-library__free-label,
  #useful .useful-library__free-arrow,
  #useful .useful-folder__bag,
  #useful .useful-folder__back,
  #useful .useful-folder__front,
  #useful .useful-library__hint {
    display: none !important;
  }

  #useful .useful-library__stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 92px 0 72px !important;
    overflow: hidden !important;
  }

  #useful .useful-library__header {
    display: block !important;
    padding: 0 20px !important;
  }

  #useful .useful-library__marker {
    margin-bottom: 28px !important;
  }

  #useful .useful-library__intro h2 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(34px, 10.5vw, 44px) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
  }

  #useful .useful-library__lead {
    max-width: 100% !important;
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  #useful .useful-library__desk {
    position: relative !important;
    height: auto !important;
    margin-top: 42px !important;
    overflow: visible !important;
  }

  #useful .useful-library__desk::before {
    content: "Листайте материалы →";
    display: block;
    margin: 0 20px 18px;
    color: var(--accent-wine);
    font: 800 10px/1.2 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #useful .useful-folder {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    gap: 18px !important;
    padding: 0 20px 20px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    transform: none !important;
    scrollbar-width: none !important;
  }

  #useful .useful-folder::-webkit-scrollbar {
    display: none !important;
  }

  #useful .useful-tab,
  #useful .useful-tab--prompts,
  #useful .useful-tab--canva,
  #useful .useful-tab--stickers {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 265px !important;
    width: 265px !important;
    height: 370px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    scroll-snap-align: center !important;
    outline: none !important;
  }

  #useful .useful-tab::before {
    display: none !important;
  }

  #useful .useful-tab__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 18px 28px rgba(55, 44, 32, 0.14)) !important;
  }

  #useful .useful-tab__index,
  #useful .useful-tab h3,
  #useful .useful-tab p,
  #useful .useful-tab__action,
  #useful .useful-tab__telegram {
    position: absolute !important;
    z-index: 2 !important;
    margin: 0 !important;
  }

  #useful .useful-tab--prompts .useful-tab__index {
    top: 22% !important;
    left: 19% !important;
  }

  #useful .useful-tab--prompts h3 {
    top: 55% !important;
    left: 21% !important;
    max-width: 58% !important;
  }

  #useful .useful-tab--prompts p {
    top: 69% !important;
    left: 21% !important;
    max-width: 57% !important;
  }

  #useful .useful-tab--prompts .useful-tab__action {
    top: 84.5% !important;
    left: 21% !important;
  }

  #useful .useful-tab--canva .useful-tab__index {
    top: 20% !important;
    left: 24% !important;
  }

  #useful .useful-tab--canva h3 {
    top: 45% !important;
    left: 24% !important;
    max-width: 55% !important;
  }

  #useful .useful-tab--canva p {
    top: 62% !important;
    left: 24% !important;
    max-width: 51% !important;
  }

  #useful .useful-tab--canva .useful-tab__action {
    top: 80.5% !important;
    left: 24% !important;
  }

  #useful .useful-tab--stickers .useful-tab__index {
    top: 20% !important;
    left: 18% !important;
  }

  #useful .useful-tab--stickers h3 {
    top: 43% !important;
    left: 18% !important;
    max-width: 58% !important;
  }

  #useful .useful-tab--stickers p {
    top: 60% !important;
    left: 18.5% !important;
    max-width: 54% !important;
  }

  #useful .useful-tab--stickers .useful-tab__action {
    top: 79% !important;
    left: 18.5% !important;
  }

  #useful .useful-tab__index {
    color: var(--accent-wine) !important;
    font: 800 8px/1.2 var(--sans) !important;
    letter-spacing: 0.1em !important;
  }

  #useful .useful-tab h3 {
    color: var(--emerald) !important;
    font: 500 23px/0.98 var(--serif) !important;
  }

  #useful .useful-tab p {
    color: rgba(30, 43, 54, 0.72) !important;
    font: 600 7.5px/1.28 var(--sans) !important;
  }

  #useful .useful-tab__action {
    color: var(--emerald) !important;
    font: 800 7px/1.2 var(--sans) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  #useful .useful-tab__telegram {
    top: 14% !important;
    right: 13% !important;
    width: 32px !important;
    height: auto !important;
  }
}
/* DESKTOP USEFUL: витрина как на мобильном, но шире + FREE */
@media (min-width: 761px) {
  #useful .useful-folder__bag,
  #useful .useful-folder__back,
  #useful .useful-folder__front,
  #useful .useful-library__hint {
    display: none !important;
  }

  #useful .useful-library__stage {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 110px !important;
    overflow: hidden !important;
  }

  #useful .useful-library__desk {
    position: relative !important;
    height: auto !important;
    max-width: 1180px !important;
    margin: 76px auto 0 !important;
    overflow: visible !important;
  }

  #useful .useful-folder {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: clamp(28px, 3.2vw, 52px) !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px 32px 38px !important;
    overflow: visible !important;
    transform: none !important;
  }

  #useful .useful-tab,
  #useful .useful-tab--prompts,
  #useful .useful-tab--canva,
  #useful .useful-tab--stickers {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    outline: none !important;
  }

  #useful .useful-tab::before {
    display: none !important;
  }

  #useful .useful-tab--prompts {
    width: 260px !important;
    height: 374px !important;
    z-index: 3 !important;
    transform: rotate(-3.5deg) translateY(20px) !important;
  }

  #useful .useful-tab--canva {
    width: 278px !important;
    height: 362px !important;
    z-index: 4 !important;
    transform: rotate(1.2deg) translateY(-10px) !important;
  }

  #useful .useful-tab--stickers {
    width: 252px !important;
    height: 366px !important;
    z-index: 3 !important;
    transform: rotate(3.5deg) translateY(24px) !important;
  }

  #useful .useful-tab__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 22px 34px rgba(55, 44, 32, 0.15)) !important;
    transition: transform 0.45s ease, filter 0.45s ease !important;
  }

  #useful .useful-tab:hover .useful-tab__image,
  #useful .useful-tab:focus-visible .useful-tab__image {
    transform: translateY(-8px) scale(1.015) !important;
    filter: drop-shadow(0 30px 42px rgba(55, 44, 32, 0.2)) !important;
  }

  #useful .useful-tab__index,
  #useful .useful-tab h3,
  #useful .useful-tab p,
  #useful .useful-tab__action,
  #useful .useful-tab__telegram {
    position: absolute !important;
    z-index: 2 !important;
    margin: 0 !important;
  }

  #useful .useful-tab--prompts .useful-tab__index {
    top: 22% !important;
    left: 19% !important;
  }

  #useful .useful-tab--prompts h3 {
    top: 55% !important;
    left: 21% !important;
    max-width: 58% !important;
  }

  #useful .useful-tab--prompts p {
    top: 69% !important;
    left: 21% !important;
    max-width: 57% !important;
  }

  #useful .useful-tab--prompts .useful-tab__action {
    top: 84.5% !important;
    left: 21% !important;
  }

  #useful .useful-tab--canva .useful-tab__index {
    top: 20% !important;
    left: 24% !important;
  }

  #useful .useful-tab--canva h3 {
    top: 45% !important;
    left: 24% !important;
    max-width: 55% !important;
  }

  #useful .useful-tab--canva p {
    top: 62% !important;
    left: 24% !important;
    max-width: 51% !important;
  }

  #useful .useful-tab--canva .useful-tab__action {
    top: 80.5% !important;
    left: 24% !important;
  }

  #useful .useful-tab--stickers .useful-tab__index {
    top: 20% !important;
    left: 18% !important;
  }

  #useful .useful-tab--stickers h3 {
    top: 43% !important;
    left: 18% !important;
    max-width: 58% !important;
  }

  #useful .useful-tab--stickers p {
    top: 60% !important;
    left: 18.5% !important;
    max-width: 54% !important;
  }

  #useful .useful-tab--stickers .useful-tab__action {
    top: 79% !important;
    left: 18.5% !important;
  }

  #useful .useful-tab__index {
    color: var(--accent-wine) !important;
    font: 800 8px/1.2 var(--sans) !important;
    letter-spacing: 0.1em !important;
  }

  #useful .useful-tab h3 {
    color: var(--emerald) !important;
    font: 500 23px/0.98 var(--serif) !important;
  }

  #useful .useful-tab p {
    color: rgba(30, 43, 54, 0.72) !important;
    font: 600 7.5px/1.28 var(--sans) !important;
  }

  #useful .useful-tab__action {
    color: var(--emerald) !important;
    font: 800 7px/1.2 var(--sans) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  #useful .useful-tab__telegram {
    top: 14% !important;
    right: 13% !important;
    width: 32px !important;
    height: auto !important;
  }

  #useful .useful-library__free {
    position: absolute !important;
    top: clamp(138px, 10vw, 180px) !important;
    right: clamp(82px, 12vw, 210px) !important;
    left: auto !important;
    display: block !important;
    width: 118px !important;
    height: 132px !important;
    z-index: 30 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  #useful .useful-library__free-label {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
  }

  #useful .useful-library__free-arrow {
    position: absolute !important;
    top: 48px !important;
    right: 18px !important;
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
    transform: rotate(-8deg) !important;
  }

  #useful .useful-tab__image {
    animation: usefulDesktopSoftIn 0.75s ease both;
  }

  #useful .useful-tab--prompts .useful-tab__image {
    animation-delay: 0.05s;
  }

  #useful .useful-tab--canva .useful-tab__image {
    animation-delay: 0.14s;
  }

  #useful .useful-tab--stickers .useful-tab__image {
    animation-delay: 0.23s;
  }
}

@keyframes usefulDesktopSoftIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Mobile: portfolio as a simple vertical list */
@media (max-width: 760px) {
  #portfolio,
  #portfolio * {
    scroll-snap-type: none !important;
    scroll-snap-align: unset !important;
  }

  #portfolio {
    overflow: visible !important;
  }

  #portfolio .portfolio-showcase__stage,
  #portfolio .portfolio-showcase__viewport,
  #portfolio .portfolio-showcase__track {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  #portfolio .portfolio-showcase__track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
  }

  #portfolio .portfolio-showcase__card,
  #portfolio .portfolio-card,
  #portfolio .project-card,
  #portfolio article {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #portfolio .portfolio-showcase__controls,
  #portfolio .portfolio-showcase__progress,
  #portfolio .portfolio-showcase__nav {
    display: none !important;
  }
}