/* A local CSS adaptation of the public Royal Coast consulting interaction.
   Kept separate from Kedry's retained runtime. No animation dependency. */
.garmoniya-help {
  --figure-olive: #404435;
  --figure-cream: #e7dfd2;
  --figure-ease: cubic-bezier(.65, 0, .35, 1);
  color: var(--figure-olive);
  background: var(--figure-cream);
  padding-block: clamp(72px, 10vw, 160px);
}
.garmoniya-help__intro {
  padding-inline: var(--page-gutter, clamp(20px, 3.65vw, 70px));
  margin-bottom: clamp(42px, 6vw, 96px);
}
.garmoniya-help__eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.garmoniya-help__intro h2 {
  color: inherit;
  font-family: var(--font-site-extended, inherit);
  font-size: clamp(36px, 4.6vw, 76px);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: 0 0 28px;
}
.garmoniya-help__intro > p:last-child {
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.5;
  max-width: 32em;
}
.figure-row {
  border-top: 1px solid #40443533;
  position: relative;
  transition: background-color .7s var(--figure-ease), color .7s var(--figure-ease);
  overflow: clip;
}
.figure-row:last-child { border-bottom: 1px solid #40443533; }
.figure-row__heading { margin: 0; font: inherit; }
.figure-row__trigger {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  width: 100%;
  padding: 34px var(--page-gutter, clamp(20px, 3.65vw, 70px));
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.figure-row__number {
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: .04em;
}
.figure-row__title {
  font-family: var(--font-site-extended, inherit);
  font-size: clamp(26px, 3.1vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
  transition: transform .9s var(--figure-ease);
}
.figure-row__toggle {
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transition: transform .7s var(--figure-ease);
}
.figure-row__body { display: grid; grid-template-rows: 1fr; }
.figure-row__body-inner {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 5vw;
  overflow: hidden;
  padding-inline: var(--page-gutter, clamp(20px, 3.65vw, 70px));
}
.figure-row__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 28px 0 64px clamp(0px, 5.9vw, 90px);
  max-width: 40em;
  transition: opacity .65s var(--figure-ease), transform .9s var(--figure-ease);
}
.figure-row__copy p {
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 28em;
}
.figure-row__contact {
  appearance: none;
  display: inline-flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 17px 22px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.figure-row__contact span { font-size: 22px; line-height: 1; }
.figure-row__trigger:focus-visible, .figure-row__contact:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}
.figure-row__art {
  pointer-events: none;
  justify-self: center;
  align-self: end;
  width: min(100%, 430px);
  height: clamp(300px, 47vh, 540px);
  transform-origin: bottom center;
  filter: drop-shadow(0 24px 30px #00000025);
  transition: opacity .7s var(--figure-ease), transform .9s var(--figure-ease);
}
.figure-row__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: bottom center;
}
.figure-rows.is-motion-ready .figure-row__body {
  grid-template-rows: 0fr;
  transition: grid-template-rows .9s var(--figure-ease);
}
.figure-rows.is-motion-ready .figure-row__body-inner { visibility: hidden; transition: visibility 0s .9s; }
.figure-rows.is-motion-ready .figure-row__copy { opacity: 0; transform: translateY(12px); }
.figure-rows.is-motion-ready .figure-row__art { opacity: 0; transform: translateY(5%) scale(.85); }
.figure-rows.is-motion-ready .figure-row.is-active { background: var(--figure-olive); color: var(--figure-cream); }
.figure-rows.is-motion-ready .figure-row.is-active .figure-row__body { grid-template-rows: 1fr; }
.figure-rows.is-motion-ready .figure-row.is-active .figure-row__body-inner { visibility: visible; transition-delay: 0s; }
.figure-rows.is-motion-ready .figure-row.is-active .figure-row__copy { opacity: 1; transform: none; }
.figure-rows.is-motion-ready .figure-row.is-active .figure-row__art { opacity: 1; transform: translateY(0) scale(1); }
.figure-row.is-active .figure-row__toggle { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .figure-row.is-active .figure-row__title { transform: translateX(.6rem); }
}
.figure-row.is-active.is-in-view .figure-row__image {
  animation: garmoniya-figure-sway 5.6s ease-in-out .7s infinite;
  will-change: transform;
}
@keyframes garmoniya-figure-sway {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: translateY(-5px) scale(1.022) rotate(-1.4deg); }
}
/* Touch scenes keep their natural height. Changing the highlighted scene never
   alters document geometry, avoiding scroll anchoring and accordion oscillation. */
.figure-rows.is-auto-scroll { overflow-anchor: none; }
.figure-rows.is-auto-scroll .figure-row__body { grid-template-rows: 1fr; transition: none; }
.figure-rows.is-auto-scroll .figure-row__body-inner { visibility: visible; transition: none; }
.figure-rows.is-auto-scroll .figure-row__copy { opacity: 1; transform: none; }
.figure-rows.is-motion-ready.is-auto-scroll .figure-row .figure-row__art {
  opacity: .18;
  transform: translateY(24px) scale(.9);
  transition: opacity .65s var(--figure-ease), transform .85s var(--figure-ease);
}
.figure-rows.is-auto-scroll .figure-row.is-active.is-in-view .figure-row__art { opacity: 1; transform: translateY(0) scale(1); }
.figure-rows.is-auto-scroll .figure-row__toggle { font-size: 0; transform: none; }
.figure-rows.is-auto-scroll .figure-row__toggle::after { content: '•'; font-size: 17px; opacity: .25; transition: opacity .5s ease; }
.figure-rows.is-auto-scroll .figure-row.is-active .figure-row__toggle::after { opacity: 1; }
@media (max-width: 1023px) {
  .figure-row__trigger { grid-template-columns: 26px minmax(0, 1fr) 24px; gap: 12px; padding-block: 26px; }
  .figure-row__number { font-size: 11px; }
  .figure-row__title { font-size: clamp(24px, 4.8vw, 37px); }
  .figure-row__toggle { font-size: 26px; }
  .figure-row__body-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .figure-row__copy { padding: 8px 0 26px; max-width: 34em; }
  .figure-row__copy p { margin-bottom: 24px; font-size: 17px; }
  .figure-row__art { width: min(65%, 300px); height: clamp(250px, 65vw, 340px); }
  .figure-rows.is-motion-ready .figure-row__body { transition-duration: .6s; }
  .figure-row__art { transition-duration: .55s, .7s; }
}
@media (prefers-reduced-motion: reduce) {
  .garmoniya-help *, .garmoniya-help *::before, .garmoniya-help *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .figure-row__title, .figure-row__copy, .figure-row__art { transform: none !important; }
}