/* ============================================================
   UTILITIES — helpers
   ============================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-accent { color: var(--orange-500); }
.text-navy { color: var(--navy-600); }
.text-white { color: #fff; }
.text-muted { color: var(--color-muted); }
.text-gradient { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: var(--fs-lead); color: var(--color-muted); line-height: var(--lh-snug); }
/* Consistent body copy for multi-paragraph blocks (about/story sections) —
   use on every <p> in a block so paragraphs don't mix lead/body sizes. */
.body-text { font-size: 1.05rem; line-height: 1.75; color: var(--color-body); margin-bottom: var(--sp-4); }
.body-text:last-of-type { margin-bottom: 0; }
.fw-bold { font-weight: var(--fw-bold); }
.fw-semibold { font-weight: var(--fw-semibold); }
.mono-num { font-variant-numeric: tabular-nums; }

.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.mx-auto{margin-inline:auto}
.w-full{width:100%}
.maxw-sm{max-width:520px}.maxw-md{max-width:680px}.maxw-lg{max-width:820px}
.relative{position:relative}
.hidden{display:none}
.rounded{border-radius:var(--r-lg)}
.shadow{box-shadow:var(--sh-md)}
.overflow-hidden{overflow:hidden}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row.center { justify-content: center; }

.divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--sp-6); }
.divider--soft { background: linear-gradient(90deg, transparent, var(--color-border), transparent); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--media-first { direction: rtl; }
.split--media-first > * { direction: ltr; }

.aspect-16-10 { aspect-ratio: 16/10; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-square { aspect-ratio: 1; }
.obj-cover { object-fit: cover; width: 100%; height: 100%; }

/* Media frame with accent */
.media-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.media-frame::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border: 1px solid rgba(255,255,255,.14); border-radius: inherit;
}
.media-badge {
  position: absolute; z-index: 3; bottom: 18px; left: 18px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--sh-md);
}
.media-badge .mb-num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.4rem; color: var(--navy-600); }
.media-badge .mb-label { font-size: .78rem; color: var(--color-muted); }

/* Decorative blobs / grid bg */
.bg-grid {
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; z-index: 0;
}
.blob--orange { background: radial-gradient(circle, rgba(243,79,36,.4), transparent 70%); }
.blob--navy { background: radial-gradient(circle, rgba(38,53,92,.4), transparent 70%); }

.list-check { display: grid; gap: 12px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.list-check li::before {
  content:""; flex-shrink:0; width: 22px; height: 22px; margin-top: 2px; border-radius: 6px;
  background: var(--orange-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f34f24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.section--navy .list-check li { color: var(--navy-100); }
.section--navy .list-check li::before { background-color: rgba(243,79,36,.18); }