/* Malta 360 — statement. Figma "About" 228:4073: 1440×701, py 120, gap 48. */

.m360-statement { padding-block: 120px; }

.m360-statement .m360-section-head { gap: 48px; }
.m360-statement .m360-eyebrow { color: var(--m360-orange); }

.m360-statement .m360-lede {
  max-width: 672px;
  padding-top: 16px;
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: 1.625;
  letter-spacing: .1406px;
}

/* "Frame 1": 1685.15×624.563, centred (−0.42px), top 370.23 → anchored to the
   bottom edge so the strip reads the same whatever the copy length. */
.m360-statement__glyphs {
  left: calc(50% - 842.995 * var(--u));
  bottom: calc(-293.793 * var(--u));
  width: calc(1685.15 * var(--u));
  height: calc(624.563 * var(--u));
}

/* "Border": 800px ring, white 5%, left −160, vertically centred. */
.m360-statement__ring {
  position: absolute;
  left: calc(-160 * var(--u));
  top: calc(50% - 400 * var(--u));
  width: calc(800 * var(--u));
  height: calc(800 * var(--u));
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 50%;
  pointer-events: none;
}

/* Glyphs scale with the canvas, never with the phone-only shape shrink in motion.css. */
.m360-statement__glyphs[data-reveal="shape"].is-in { transform: none; }

.m360-statement__glyphs-sm { display: none; }

@media (max-width: 1024px) {
  .m360-statement { padding-block: 96px calc(330 * 100vw / 1440 + 48px); }
  .m360-statement .m360-lede { font-size: 24px; line-height: 39px; }
}

/* Figma mobile 228:4254: pt 96, pb 120, gap 48, 40/48 heading, 24/39 lede; small
   glyphs (505×189 at x −51, y 726 of 818) cut by the bottom edge. */
@media (max-width: 640px) {
  .m360-statement { padding-block: 96px 120px; }
  .m360-statement .m360-container { padding-inline: 16px; }
  .m360-statement__glyphs { display: none; }
  .m360-statement__glyphs-sm {
    display: block;
    left: calc(50% - 238.5px);
    bottom: -96.93px;
    width: 506px;
    height: 189px;
  }
  .m360-statement__ring { left: -160px; top: calc(50% - 400.5px); width: 800px; height: 800px; }
}