/* ABOUTME: Molo Hero (2026) styles: copy beside a media column (1.6:1 with the triangle, 1.4:1 with an image in a
   ABOUTME: 6:5 frame, a twisting coin or the data-sources field, or a form card), rising headline lines; the media drops below the copy under 900px. */
.molo-hero-triangle .molo-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-top: clamp(40px, 4vw, 56px);
  padding-bottom: 64px;
}
.molo-hero-triangle__copy { display: flex; flex-direction: column; gap: 36px; }
.molo-hero-triangle .molo-hero-triangle__headline {
  margin: 0;
  font-size: var(--molo-fs-hero);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
}
.molo-hero-triangle__headline .molo-em { font-weight: 900; }
.molo-hero-triangle__line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: molo-rise .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(.05s + var(--molo-line, 0) * .13s);
}
@keyframes molo-rise { to { opacity: 1; transform: none; } }
.molo-hero-triangle__intro { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.molo-hero-triangle .molo-hero-triangle__lead {
  margin: 0;
  font-family: var(--ml-font-heading);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.molo-hero-triangle .molo-hero-triangle__body { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--molo-on-navy); }
.molo-hero-triangle__action { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.molo-hero-triangle .molo-hero-triangle__subnote { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--molo-on-navy-muted); }

.molo-hero-triangle .molo-eyebrow { margin: 0; color: var(--molo-sage); }
.molo-hero-triangle--media-image .molo-section__inner,
.molo-hero-triangle--media-coin .molo-section__inner,
.molo-hero-triangle--media-sources .molo-section__inner {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(56px, 5.5vw, 80px);
}
.molo-hero-triangle--media-image .molo-hero-triangle__copy,
.molo-hero-triangle--media-form .molo-hero-triangle__copy { gap: 32px; }
.molo-hero-triangle--media-form .molo-section__inner {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(56px, 5.5vw, 80px);
}

/* Form card: white panel holding a Contact Form 7 form. */
.molo-hero-triangle__form {
  box-sizing: border-box;
  padding: clamp(28px, 3vw, 40px);
  background: var(--molo-paper);
  border-radius: var(--molo-radius-card);
  color: var(--molo-navy);
}
.molo-hero-triangle .molo-hero-triangle__form-heading {
  margin: 0 0 20px;
  color: var(--molo-navy);
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.molo-hero-triangle__form label { color: var(--molo-navy); font-weight: 700; }
/* Some site forms label fields with <h6 style="color: #fff"> for dark backgrounds;
   only !important outranks that inline color inside the white card. */
.molo-hero-triangle .molo-hero-triangle__form h6 {
  margin: 0 0 6px;
  color: var(--molo-navy) !important;
  font-size: 1rem;
  font-weight: 700;
}
.molo-hero-triangle--media-form .molo-hero-triangle__headline { font-size: var(--molo-fs-h2); }
.molo-hero-triangle__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.molo-hero-triangle__form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--molo-line);
  border-radius: 12px;
  background: var(--molo-paper-dim);
  color: var(--molo-navy);
}
/* the response box stays hidden until Contact Form 7 has something to say */
.molo-hero-triangle__form .wpcf7-form.init .wpcf7-response-output { display: none; }
.molo-hero-triangle__form input:focus-visible,
.molo-hero-triangle__form textarea:focus-visible { outline: 3px solid var(--molo-orange); outline-offset: 1px; }
.molo-hero-triangle--media-none .molo-section__inner { grid-template-columns: minmax(0, 1fr); }
.molo-hero-triangle .molo-hero-triangle__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background: var(--molo-navy-night);
  border-radius: var(--molo-radius-card);
}
.molo-hero-triangle__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.molo-hero-triangle__caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 14px;
  background: var(--molo-wash);
  color: var(--molo-navy);
  border-radius: var(--molo-radius-pill);
  font-family: var(--ml-font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Coin: two logo faces with a stacked-disc rim between them. It twists like a weight on a
   steel wire: a slow eased turn, a rest on the far face, then the same turn back. */
.molo-coin {
  --molo-coin-depth: 18px;
  display: grid;
  place-items: center;
  aspect-ratio: 6 / 5;
  perspective: 1100px;
}
.molo-coin__body {
  position: relative;
  width: min(340px, 78%);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
  animation: molo-coin-twist 9s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
@keyframes molo-coin-twist {
  0%, 12%   { transform: rotateX(-14deg) rotateY(0deg); }
  88%, 100% { transform: rotateX(-14deg) rotateY(540deg); }
}
.molo-coin__edge,
.molo-coin__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.molo-coin__edge {
  background: var(--molo-navy-border);
  transform: translateZ(calc((var(--molo-coin-layer) - 11.5) * var(--molo-coin-depth) / 24));
}
.molo-coin__face {
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, var(--molo-navy-raised), var(--molo-navy-deep) 75%);
  box-shadow: inset 0 0 0 10px var(--molo-navy-line), inset 0 0 0 12px rgba(255, 255, 255, .08);
}
.molo-coin__face--front { transform: translateZ(calc(var(--molo-coin-depth) / 2)); }
.molo-coin__face--back { transform: rotateY(180deg) translateZ(calc(var(--molo-coin-depth) / 2)); }
.molo-coin__glyph { width: 56%; height: auto; color: var(--molo-orange); }
.molo-coin__face img { width: 72%; height: auto; }

@media (max-width: 900px) {
  .molo-hero-triangle .molo-section__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .molo-hero-triangle__line { animation: none; opacity: 1; transform: none; }
  .molo-coin__body { animation: none; }
}