/* Layout measured from Inna's saved Canva design DAHY715zndk. */
.for-whom {
  --thoughts-top: 112px;
  padding: 0;
  background: linear-gradient(180deg, #220409, var(--dark-burgundy) 68%);
  color: var(--cream);
  isolation: isolate;
  scroll-margin-top: 100px;
}
/* Same container, glyph, label and rule as the adjacent sections. */
.for-whom > .for-whom__header {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 4;
}
.for-whom__header .divider { margin-bottom: 0; }
.for-whom__journey { height: calc(100svh + 1100px); min-height: 1800px; }
.for-whom__stage {
  position: sticky;
  top: var(--thoughts-top);
  width: min(100%, calc((100svh - 112px) * 0.81868743));
  aspect-ratio: 736 / 899;
  margin: 0 auto;
  /* Inna moved the 736px photo left by 11.425px on the Canva canvas. */
  transform: translateX(-1.552288%);
  isolation: isolate;
  container-type: inline-size;
}
.for-whom__scenery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: url('../assets/inna-thoughts-video-poster.jpg') center top / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
.for-whom__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.for-whom .for-whom__question {
  position: absolute;
  top: 45.607964%;
  left: 13.550929%;
  width: 76%;
  margin: 0;
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.3rem, 6.5cqw, 6rem);
  line-height: 0.752508;
  text-align: center;
  text-shadow: 0 2px 18px rgba(26, 22, 13, 0.24);
  z-index: 1;
}
.for-whom__question span { display: block; }
.thoughts { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; z-index: 3; }
.thought {
  position: absolute;
  top: calc(var(--thought-y) * 1%);
  left: calc(var(--thought-x) * 1%);
  width: calc(var(--thought-width) * 1%);
  transition: opacity 0.18s ease-out;
}
/* Coordinates, type scale and alignment from the saved text layers. */
.thought--one { --thought-x: 25.345809; --thought-y: 72.203293; --thought-width: 43.668769; --thought-font: 2.000703; --thought-leading: 1.056541; --thought-align: left; --hint-x: -1.449452; --hint-y: -3.436912; }
.thought--two { --thought-x: 10.652024; --thought-y: 37.944758; --thought-width: 35.397297; --thought-font: 1.923881; --thought-leading: 1.060757; --thought-align: left; --hint-x: 0.000000; --hint-y: -5.333849; }
.thought--three { --thought-x: 48.922773; --thought-y: 33.642376; --thought-width: 44.477374; --thought-font: 1.965734; --thought-leading: 1.110056; --thought-align: left; --hint-x: 0.000000; --hint-y: -4.131939; }
.thought--four { --thought-x: 13.550929; --thought-y: 57.993066; --thought-width: 36.449071; --thought-font: 1.981047; --thought-leading: 1.071416; --thought-align: left; --hint-x: -2.898905; --hint-y: -3.436126; }
.thought--five { --thought-x: 55.049570; --thought-y: 63.859261; --thought-width: 38.350576; --thought-font: 2.084387; --thought-leading: 1.086957; --thought-align: center; --hint-x: 0.000000; --hint-y: -5.042840; }
.thought__entry {
  display: block;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.32s ease-out, transform 0.4s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.is-enhanced .thought:not(.is-revealed) { pointer-events: none; }
.is-enhanced .thought:not(.is-revealed) .thought__entry {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.thought.is-open, .thought:focus-within { z-index: 10; }
.has-open-thought .thought.is-revealed:not(.is-open) { opacity: 0.55; }
.thought__button {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  text-align: var(--thought-align);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.thought__button:focus-visible { outline: 1px solid var(--cream); outline-offset: 5px; }
.thought.is-pointed .thought__quote { color: #fffdf5; text-shadow: 0 0 16px rgba(253, 247, 230, 0.4); }
.thought__quote {
  position: relative;
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(9px, calc(var(--thought-font) * 1cqw), 1.5rem);
  line-height: var(--thought-leading);
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0) scale(var(--pointer-scale, 1));
  transition: transform 0.12s ease-out, color 0.18s ease, text-shadow 0.18s ease;
}
/* The five disclosure signs sit above/left of their quotes, as moved in Canva. */
.thought__hint {
  position: absolute;
  left: calc(var(--hint-x) * 1cqw);
  top: calc(var(--hint-y) * 1cqw);
  width: 2.898904cqw;
  height: 3.356884cqw;
  padding-top: 0.115942cqw;
  font-family: 'Arial', sans-serif;
  font-size: clamp(12px, 2.898551cqw, 1.5rem);
  font-weight: 400;
  line-height: 1.078125;
  text-align: center;
}
.thought__hint::before { content: '⊕'; }
.thought__button[aria-expanded="true"] .thought__hint::before {
  content: '⊖';
}
.thought__body {
  position: absolute;
  top: calc(100% + 12px);
  /* Local left coordinates now measure the text box's left edge. */
  left: calc((50 - var(--thought-x)) * 1cqw);
  transform: translateX(-50%);
  width: min(330px, calc(100cqw - 32px));
  margin: 0;
  padding: 20px 22px;
  border: 1px solid rgba(253, 247, 230, 0.22);
  background: #350905;
  box-shadow: 0 16px 48px rgba(26, 22, 13, 0.25);
  color: var(--cream);
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  animation: thought-open 0.25s ease both;
}
.thought__body[hidden] { display: none; }
.thought--one .thought__body, .thought--five .thought__body { top: auto; bottom: calc(100% + 12px); }
@keyframes thought-open { from { opacity: 0; } to { opacity: 1; } }
/* One milk cloud follows the selected native disclosure. */
.thought-smoke { position: absolute; z-index: 0; pointer-events: none; }
.thought-smoke[hidden] { display: none !important; }
.thought-smoke__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.thought-smoke.is-gpu .thought-smoke__canvas { display: block; }
.thought-smoke__fallback { position: absolute; display: block; max-width: none; transform-origin: 50% 50%; }
.thought-smoke.is-gpu .thought-smoke__fallback { visibility: hidden; }
.thought-smoke.is-missing .thought-smoke__fallback { display: none; }
.for-whom.has-smoke .thought__button { position: relative; z-index: 2; }
.for-whom.has-smoke .thought__body {
  z-index: 1;
  margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  color: var(--dark-burgundy);
  animation: none;
  opacity: var(--thought-copy, 0);
}
.for-whom.has-smoke.is-smoke-pending .thought__body,
.for-whom.has-smoke.is-smoke-unavailable .thought__body {
  color: var(--cream);
  text-shadow: 0 1px 12px rgb(34 4 9 / .6);
}
.for-whom.has-static-cloud .thought__body,
.for-whom.has-spreading-cloud .thought__body { line-height: 1.45; text-align: center; }
.thought-smoke.is-spreading .thought-smoke__fallback { will-change: transform; }
/* Selected colour study 01: translucent brand burgundy, feathered alpha only. */
.thought-oval { position: absolute; z-index: 0; pointer-events: none; }
.thought-oval[hidden] { display: none !important; }
.thought-oval__shape {
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform;
  background: radial-gradient(ellipse closest-side,
    rgb(103 17 2 / .74) 0%,
    rgb(103 17 2 / .73) 52%,
    rgb(103 17 2 / .61) 70%,
    rgb(103 17 2 / .30) 84%,
    rgb(103 17 2 / .06) 95%,
    rgb(103 17 2 / 0) 100%);
}
.for-whom.has-thought-oval .thought__button { position: relative; z-index: 2; }
.for-whom.has-thought-oval .thought__body {
  z-index: 1;
  margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  color: var(--cream);
  line-height: 1.45;
  text-align: center;
  animation: none;
  opacity: var(--thought-copy, 0);
}
/* A borderless continuation unfolds immediately below the selected quote. */
.for-whom.has-thought-callout { --thought-line-width: 1px; }
.for-whom.has-thought-callout .thought__button { position: relative; z-index: 2; }
.for-whom.has-thought-callout .thought.is-open .thought__quote { transform: none; transition: color .18s ease, text-shadow .18s ease; }
.for-whom.has-thought-callout .thought.is-open .thought__entry { transform: none; transition: opacity .32s ease-out; }
.for-whom.has-thought-callout .thought__hint {
  width: clamp(14px, 2.898904cqw, 22px);
  height: clamp(14px, 2.898904cqw, 22px);
  padding: 0;
  border: var(--thought-line-width) solid var(--cream);
  border-radius: 50%;
}
.has-thought-callout .thought__button[aria-expanded] .thought__hint::before,
.has-thought-callout .thought__hint::after {
  content: ''; position: absolute; background: var(--cream);
}
.has-thought-callout .thought__button[aria-expanded] .thought__hint::before {
  left: 25%; top: 50%; width: 50%; height: var(--thought-line-width);
  transform: translateY(-50%);
}
.has-thought-callout .thought__hint::after {
  left: 50%; top: 25%; width: var(--thought-line-width); height: 50%;
  transform: translateX(-50%);
}
.has-thought-callout .thought__button[aria-expanded="true"] .thought__hint::after { opacity: 0; }
.for-whom.has-thought-callout .thought__body {
  z-index: 3; box-sizing: border-box;
  margin: 0; padding: 18px 22px;
  border: 0;
  border-radius: 0;
  background: #671102; box-shadow: none;
  color: rgb(253 247 230 / var(--callout-copy, 0));
  line-height: 1.55; text-align: left;
  animation: none; opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .thought__button:hover .thought__quote { color: #fffdf5; text-shadow: 0 0 14px rgba(253, 247, 230, 0.35); }
}
.for-whom > .for-whom__outro { padding: 72px 24px 100px; }
.for-whom__closing {
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.for-whom__closing-title { display: block; margin-bottom: 20px; font-style: normal; font-size: 1.5em; }

/* All copy stays readable when JavaScript is unavailable. */
.for-whom:not(.is-enhanced) .for-whom__journey { height: auto; min-height: 0; }
.for-whom:not(.is-enhanced) .for-whom__stage { position: relative; top: auto; width: min(100%, 736px); aspect-ratio: auto; padding: 280px 24px 80px; transform: none; }
.for-whom:not(.is-enhanced) .for-whom__question { position: relative; inset: auto; width: 100%; margin: 0 auto 80px; }
.for-whom:not(.is-enhanced) .thought__hint { display: none; }
.for-whom:not(.is-enhanced) .thoughts { position: relative; display: grid; gap: 32px; }
.for-whom:not(.is-enhanced) .thought { position: relative; inset: auto; transform: none; width: 100%; }
.for-whom:not(.is-enhanced) .thought__quote { font-size: 12px; }
.for-whom:not(.is-enhanced) .thought__body { position: static; transform: none; width: 100%; margin-top: 16px; }

@media (max-width: 820px), (max-height: 680px) {
  .for-whom__journey { height: auto; min-height: 0; padding-bottom: var(--thought-overflow, 0px); }
  .for-whom__stage { position: relative; top: auto; width: min(100%, 736px); transform: none; }
  .for-whom > .for-whom__outro { padding-top: 40px; padding-bottom: 72px; }
}
@media (max-width: 560px) {
  .for-whom > .for-whom__header { top: 28px; }
  /* Keep the chosen composition, with extra room for 9px Russian type. */
  .thought--two { --thought-x: 4.049321; --thought-y: 35.844772; --thought-width: 40; }
  .thought--three { --thought-x: 51; --thought-y: 33; --thought-width: 45; }
  .thought--four { --thought-y: 61; }
  .thought--five { --thought-y: 67; }
  .thought--one { --thought-y: 81; }
  .for-whom .for-whom__question { top: 46%; }
  .for-whom:not(.is-enhanced) .for-whom__question { top: auto; }
  .thought__button { min-height: 44px; }
  .thought__body { padding: 16px 18px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .for-whom__portrait { display: none; }
  .thought, .thought__entry, .thought__quote { transition: none; transform: none; }
  .is-enhanced .thought:not(.is-revealed) { pointer-events: auto; }
  .is-enhanced .thought:not(.is-revealed) .thought__entry { opacity: 1; transform: none; }
  .thought__body { animation: none; }
}