/* Helping Mamas × SCADserve: builds on project.css.
   The page takes the Helping Mamas rose. Interactive pieces (the ecosystem,
   the unit sizes, the feature hotspots) are driven by ../home/helping-mamas.js. */

/* ---------- Theme: Helping Mamas rose ---------- */
.hm {
  --hm-rose: #c6315e;
  --hm-rose-2: #a82650;
  --hm-blush: #f7dbe3;
  --hm-shell: #fcf0f3;

  --color-bg-brand: var(--hm-rose);
  --color-bg-brand-hover: var(--hm-rose-2);
  --color-bg-brand-subtle: var(--hm-shell);
  --color-text-brand: #b02a54;
  --color-border-brand: var(--hm-rose);
  --color-icon-brand: var(--hm-rose);
  --pj-brand-light: #f08cab;
}

.hm .pj-pitch__impact,
.hm .pj-pitch__impact .pj-pitch__tag {
  color: #f9f9f9;
}

/* Tab panels set their own display, which would otherwise override [hidden]. */
.hm main [hidden] {
  display: none !important;
}

.hm-overview {
  margin-top: var(--space-5xl);
}

/* ---------- 01 The challenge ---------- */
.hm-big {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-3xl);
}

.hm-big__fig {
  margin: 0;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.hm-big__text {
  flex: 1 1 320px;
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
}

.hm-triad,
.hm-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-triad li,
.hm-levels li {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
}

.hm-triad span,
.hm-levels span {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
}

.hm-triad p,
.hm-levels p {
  margin: 0;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.hm-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5xl);
  align-items: center;
}

.hm-context__text {
  display: grid;
  gap: var(--space-md);
}

.hm-context__text p:last-child {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* The five walls the van model keeps hitting, arranged around the client. */
.hm-context__walls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-context__walls li {
  padding: var(--space-md) var(--space-xl);
  border: 1.5px solid var(--hm-rose);
  border-radius: var(--radius-full);
  color: var(--color-text-brand);
  font-size: var(--type-body-md-size);
  font-weight: 500;
}

.hm-ask {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-4xl);
  border-left: 4px solid var(--hm-rose);
  border-radius: var(--radius-lg);
  background: var(--hm-shell);
}

.hm-ask blockquote {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: -0.01em;
}

/* ---------- 02 Research ---------- */
.hm-method,
.hm-facts dl {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2xl);
  margin: 0;
}

.hm-method > div,
.hm-facts dl > div {
  padding-top: var(--space-lg);
  border-top: 2px solid var(--hm-rose);
}

.hm-method dt,
.hm-facts dt {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hm-method dd,
.hm-facts dd {
  margin: var(--space-md) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.hm-facts {
  display: grid;
  gap: var(--space-2xl);
}

.hm-facts__note {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.hm-insights {
  display: grid;
  gap: var(--space-2xl);
  margin: 0;
}

.hm-insights img {
  display: block;
  width: 100%;
  height: auto;
}

.hm-pillars {
  display: grid;
  gap: var(--space-lg);
}

.hm-pillars ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-pillars li {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: var(--space-2xl) var(--space-3xl);
  border-radius: var(--radius-full);
  background: var(--hm-shell);
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  text-align: center;
}

.hm-pillars li:nth-child(even) {
  background: var(--hm-rose);
  color: #f9f9f9;
}

.hm-hmw {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-5xl) var(--space-4xl);
  border-radius: var(--radius-xl);
  background: var(--hm-rose);
  color: #f9f9f9;
}

.hm-hmw .pj-label {
  color: #fbd6e1;
}

.hm-hmw__q {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ---------- 03 Bloom ---------- */
.hm-eco {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5xl);
  align-items: center;
}

/* The map: Bloom in the middle, four touchpoints around it. */
.hm-eco__map {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--hm-shell) 0 30%, transparent 30.5%),
    radial-gradient(circle, transparent 0 62%, var(--hm-blush) 62.5% 63%, transparent 63.5%);
}

.hm-eco__core {
  position: absolute;
  inset: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  border-radius: 50%;
  background: var(--hm-rose);
  color: #f9f9f9;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
}

.hm-eco__node {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: var(--space-md) var(--space-xl);
  border: 1.5px solid var(--hm-rose);
  border-radius: var(--radius-full);
  background: #f9f9f9;
  color: var(--color-text-brand);
  font: inherit;
  font-size: var(--type-body-md-size);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hm-eco__node--1 { left: 50%; top: 6%; }
.hm-eco__node--2 { left: 92%; top: 50%; }
.hm-eco__node--3 { left: 50%; top: 94%; }
.hm-eco__node--4 { left: 8%; top: 50%; }

.hm-eco__node[aria-selected="true"] {
  background: var(--hm-rose);
  color: #f9f9f9;
}

/* Clickable cues: the touchpoints you haven't opened pulse, lift on hover and carry a "+". */
.hm-eco__node::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(198 49 94 / 0.45);
  animation: hm-pulse 1.8s ease-out infinite;
  pointer-events: none;
}

.hm-eco__node[aria-selected="true"]::after,
.hm-eco__map.is-explored .hm-eco__node::after {
  animation: none;
}

.hm-eco__node:not([aria-selected="true"])::before {
  content: "+";
  margin-right: 6px;
  font-weight: 700;
}

.hm-eco__node:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 8px 20px -10px rgb(166 38 80 / 0.6);
}

.hm-eco__node {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hm-eco__core {
  flex-direction: column;
  gap: 2px;
}

.hm-eco__hint {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.hm-eco__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
}

.hm-eco__panel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}

.hm-eco__panel > div {
  display: grid;
  gap: var(--space-md);
}

.hm-eco__panel p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.hm-eco__kind {
  color: var(--color-text-brand) !important;
  font-size: var(--type-label-size) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hm-criteria {
  display: grid;
  gap: var(--space-lg);
}

.hm-criteria ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-criteria li {
  padding: var(--space-2xl) 0 0;
  border-top: 2px solid var(--hm-rose);
}

.hm-criteria p {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* ---------- 04 Exploration ---------- */
.hm-explore {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.hm-explore figure {
  margin: 0;
}

.hm-explore img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: #fff;
}

.hm-explore figcaption {
  margin-top: var(--space-md);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
}

.hm-explore strong {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
}

/* ---------- 05 The experience ---------- */
.hm-story {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-story li {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.hm-story img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
}

.hm-story span {
  color: var(--color-text-brand);
  font-weight: 600;
  font-size: var(--type-label-size);
}

.hm-story p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
}

.hm-note {
  margin: calc(var(--space-2xl) * -1) 0 0;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: var(--type-caption-size);
}

/* ---------- 06 The machines ---------- */
.hm-sizes {
  display: grid;
  gap: var(--space-2xl);
}

.hm-sizes__pick {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
}

.hm-sizes__body {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-5xl);
  align-items: end;
}

.hm-sizes__pick button {
  padding: var(--space-sm) var(--space-xl);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hm-sizes__pick button[aria-checked="true"] {
  background: var(--hm-rose);
  color: #f9f9f9;
}

/* Drawn to scale: 4px to the inch. The person is 5′5″. */
.hm-sizes__scene {
  --in: 4px;
  position: relative;
  height: calc(84 * var(--in));
  padding-bottom: 2px;
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
  overflow: hidden;
}

.hm-sizes__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #d9a3b4;
}

.hm-sizes__wall {
  position: absolute;
  left: 18%;
  top: 0;
  bottom: 2px;
  width: 0;
}

.hm-sizes__unit {
  position: absolute;
  left: 22%;
  bottom: calc(var(--lift, 0) * var(--in) + 2px);
  width: calc(var(--w, 20) * var(--in));
  height: calc(var(--h, 33) * var(--in));
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, #f2b9ca, var(--hm-rose));
  transition: width 0.5s ease, height 0.5s ease, bottom 0.5s ease;
}

.hm-sizes__h,
.hm-sizes__w {
  position: absolute;
  color: #7a5562;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hm-sizes__h {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

.hm-sizes__w {
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.hm-sizes__person {
  position: absolute;
  right: 18%;
  bottom: 2px;
  height: calc(65 * var(--in));
  fill: #b48a97;
}

.hm-sizes__spec {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
}

.hm-sizes__spec > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-default);
}

.hm-sizes__spec dt {
  color: var(--color-text-brand);
  font-size: var(--type-label-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hm-sizes__spec dd {
  margin: 0;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.hm-sizes__spec dd[data-k="cap"] {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: 1.1;
  color: var(--color-text-brand);
}

/* Feature hotspots */
.hm-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3xl);
}

.hm-features__unit {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
  margin: 0;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
}

.hm-features__img {
  position: relative;
}

.hm-features__img img {
  display: block;
  width: 100%;
  height: auto;
}

.hm-hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid #fff8fa;
  border-radius: 50%;
  background: var(--hm-rose);
  box-shadow: 0 0 0 0 rgb(198 49 94 / 0.5);
  cursor: pointer;
  animation: hm-pulse 2s ease-out infinite;
}

.hm-hot.is-active {
  background: #3a1d27;
  animation: none;
}

@keyframes hm-pulse {
  0% { box-shadow: 0 0 0 0 rgb(198 49 94 / 0.5); }
  100% { box-shadow: 0 0 0 14px rgb(198 49 94 / 0); }
}

.hm-features__list {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.hm-features__list li {
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.hm-features__list li.is-active {
  border-left-color: var(--hm-rose);
  background: #f9f9f9;
  opacity: 1;
}

.hm-features__list h3 {
  font-size: var(--type-body-lg-size);
  line-height: 1.3;
}

.hm-features__list p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
}

/* ---------- 07 Packaging & card ---------- */
.hm-pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4xl) var(--space-5xl);
  align-items: center;
}

.hm-pack figure {
  margin: 0;
}

.hm-pack__wide {
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
}

.hm-pack img {
  display: block;
  width: 100%;
  height: auto;
}

.hm-pack__item {
  display: grid;
  gap: var(--space-md);
}

.hm-pack__item > p,
.hm-pack__points {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.hm-pack__points {
  padding-left: 1.1em;
}

.hm-pack__points strong {
  color: var(--color-text-primary);
}

.hm-pack__opts {
  display: flex;
  gap: var(--space-2xl);
  margin: var(--space-sm) 0 0;
}

.hm-pack__opts dt {
  color: var(--color-text-brand);
  font-size: var(--type-label-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hm-pack__opts dd {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
}

.hm-pack__duo {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--space-xl);
  align-items: end;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
}

.hm-pack__card {
  padding: var(--space-4xl);
  border-radius: var(--radius-xl);
  background: var(--hm-shell);
}

.hm-campaign {
  display: grid;
  gap: var(--space-2xl);
}

.hm-campaign__head {
  display: grid;
  gap: var(--space-md);
}

.hm-campaign__posters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-campaign__posters img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  transition: transform 0.35s ease;
}

.hm-campaign__posters li:hover img {
  transform: translateY(-6px) rotate(-1deg);
}

/* ---------- Closing ---------- */
.hm-closing {
  margin-top: var(--space-9xl);
}

.hm-close {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-10xl) var(--space-4xl);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #1a1416;
  text-align: center;
}

/* The team photo behind the closing line, under a black overlay so the words read. */
.hm-close__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hm-close::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.6);
}

.hm-close__line {
  position: relative;
  z-index: 1;
}

.hm-close__line {
  max-width: 24ch;
  margin: 0;
  color: #fff8fa;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hm .hm-close__line em {
  color: #ffd9e4;
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1099px) {
  .hm-eco,
  .hm-sizes__body,
  .hm-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-eco__map {
    max-width: 440px;
    width: 100%;
    justify-self: center;
  }

  .hm-story {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hm-campaign__posters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hm-triad,
  .hm-levels,
  .hm-context,
  .hm-criteria ul,
  .hm-explore,
  .hm-eco__panel,
  .hm-pack,
  .hm-features__unit {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-method,
  .hm-facts dl {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-pillars li {
    font-size: var(--type-body-md-size);
  }

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

  .hm-hmw,
  .hm-ask {
    padding: var(--space-2xl);
  }

  .hm-eco__node {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--type-body-sm-size);
  }

  .hm-eco__node--2 { left: 84%; }
  .hm-eco__node--4 { left: 16%; }

  .hm-sizes__scene {
    --in: 3px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .hm-eco__node::after,
  .hm-hot {
    animation: none;
  }

  .hm-sizes__unit {
    transition: none;
  }
}