.mja-uniforms {
  --mja-navy:#13245e;
  --mja-navy-dark:#0c1840;
  --mja-navy-soft:#eef1f8;
  --mja-gold:#f5b400;
  --mja-gold-dark:#d99700;
  --mja-cream:#faf9f6;
  --mja-ink:#1f2533;
  --mja-line:#e7e6e1;
  color:var(--mja-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.mja-uniforms * { box-sizing:border-box; }
.mja-uniforms__inner { width:min(100%,var(--mja-max-width,1180px)); margin:0 auto; padding:1rem 0; }
.mja-uniforms__header { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; margin-bottom:2rem; }
.mja-uniforms__heading-copy { max-width:680px; }
.mja-uniforms__eyebrow { margin:0 0 .65rem; color:var(--mja-gold-dark); font-size:.76rem; font-weight:800; letter-spacing:.34em; }
.mja-uniforms__title { margin:0; color:var(--mja-navy); font-size:clamp(2rem,4vw,3.7rem); line-height:1.05; font-weight:850; letter-spacing:-.035em; }
.mja-uniforms__description { max-width:650px; margin:.9rem 0 0; color:#667083; font-size:1rem; line-height:1.7; }
.mja-uniforms__tagline { max-width:300px; margin:0; color:var(--mja-navy); font-size:1.55rem; line-height:1.15; font-style:italic; text-align:right; position:relative; }
.mja-uniforms__tagline::after { content:""; display:block; height:4px; background:var(--mja-gold); border-radius:999px; margin-top:.25rem; }
.mja-uniforms__loading,.mja-uniforms__empty { padding:2rem; text-align:center; border:1px dashed var(--mja-line); border-radius:20px; color:#6c7587; background:#fff; }
.mja-uniforms__selectors { display:grid; gap:.75rem; margin-bottom:1.5rem; }
.mja-uniforms__pills { display:flex; flex-wrap:wrap; gap:.65rem; }
.mja-uniforms__pill { border:1px solid var(--mja-line); background:#fff; color:#364a7e; border-radius:999px; padding:.68rem 1.05rem; font-size:.92rem; font-weight:700; cursor:pointer; box-shadow:0 2px 7px rgba(17,34,89,.05); transition:.18s ease; }
.mja-uniforms__pill:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(17,34,89,.09); }
.mja-uniforms__pill.is-active { color:#fff; background:var(--mja-navy); border-color:var(--mja-navy); box-shadow:0 5px 14px rgba(19,36,94,.18); }
.mja-uniforms__select-wrap { display:none; position:relative; }
.mja-uniforms__select { width:100%; min-height:48px; border:1px solid var(--mja-line); border-radius:14px; background:#fff; color:var(--mja-navy); font-weight:700; padding:.65rem 2.5rem .65rem .85rem; }
.mja-uniforms__main { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:1.5rem; align-items:start; }
.mja-uniforms__visual { min-width:0; }
.mja-uniforms__viewer { position:relative; width:100%; max-width:680px; margin:0 auto; overflow:hidden; border:1px solid var(--mja-line); border-radius:24px; background:linear-gradient(180deg,#fff 0%,#f1f3f8 100%); }
.mja-uniforms__viewer.is-placeholder { aspect-ratio:1/1; }
.mja-uniforms__image { display:block; width:100%; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; animation:mja-fade .35s ease both; }
.mja-uniforms__placeholder { height:100%; display:grid; place-items:center; padding:2rem; text-align:center; color:#6d7686; }
.mja-uniforms__placeholder strong { display:block; color:var(--mja-navy); font-size:1.1rem; margin-bottom:.35rem; }
.mja-uniforms__hotspot { position:absolute; z-index:3; width:44px; height:44px; border:0; background:transparent; transform:translate(-50%,-50%); cursor:pointer; padding:0; display:grid; place-items:center; }
.mja-uniforms__hotspot-dot { width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:var(--mja-gold); color:var(--mja-navy); display:grid; place-items:center; font-size:1.25rem; font-weight:900; line-height:1; box-shadow:0 4px 12px rgba(12,24,64,.24); transition:.18s ease; }
.mja-uniforms__hotspot:hover .mja-uniforms__hotspot-dot,.mja-uniforms__hotspot:focus-visible .mja-uniforms__hotspot-dot { transform:scale(1.1); }
.mja-uniforms__hotspot.is-active .mja-uniforms__hotspot-dot { background:var(--mja-navy); color:#fff; outline:3px solid var(--mja-gold); outline-offset:2px; }
.mja-uniforms__hotspot-label { position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%) translateY(3px); background:var(--mja-navy-dark); color:#fff; border-radius:8px; padding:.35rem .55rem; white-space:nowrap; font-size:.72rem; font-weight:700; opacity:0; pointer-events:none; transition:.18s; }
.mja-uniforms__hotspot:hover .mja-uniforms__hotspot-label,.mja-uniforms__hotspot:focus-visible .mja-uniforms__hotspot-label { opacity:1; transform:translateX(-50%) translateY(0); }
.mja-uniforms__hint { position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%); border-radius:999px; background:rgba(19,36,94,.9); color:#fff; padding:.38rem .7rem; font-size:.72rem; white-space:nowrap; }
.mja-uniforms__hint b { color:var(--mja-gold); }
.mja-uniforms__views { display:flex; justify-content:center; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:1.1rem; }
.mja-uniforms__view { border:0; border-radius:999px; background:var(--mja-navy-soft); color:#304575; padding:.68rem 1rem; font-size:.88rem; font-weight:750; cursor:pointer; }
.mja-uniforms__view.is-active { color:#fff; background:var(--mja-navy); }
.mja-uniforms__views-mobile { display:none; align-items:center; gap:.7rem; margin-top:1rem; }
.mja-uniforms__arrow { width:46px; height:46px; border-radius:50%; border:1px solid var(--mja-line); background:#fff; color:var(--mja-navy); font-size:1.5rem; cursor:pointer; }
.mja-uniforms__current-view { flex:1; border-radius:999px; background:var(--mja-navy); color:#fff; text-align:center; padding:.72rem; font-weight:750; }
.mja-uniforms__panel { position:sticky; top:1.2rem; min-height:360px; border:1px solid var(--mja-line); border-radius:24px; background:#fff; box-shadow:0 4px 16px rgba(19,36,94,.06); padding:1.4rem; }
.mja-uniforms__panel-empty { min-height:330px; display:grid; place-items:center; text-align:center; color:#70798a; }
.mja-uniforms__panel-empty strong { display:block; color:var(--mja-navy); font-size:1rem; margin-bottom:.35rem; }
.mja-uniforms__element-visual { aspect-ratio:16/8; border-radius:18px; background:var(--mja-navy-soft); display:grid; place-items:center; overflow:hidden; }
.mja-uniforms__element-visual img { width:100%; height:100%; object-fit:contain; }
.mja-uniforms__element-icon { width:72px; height:72px; border-radius:18px; background:#fff; color:var(--mja-navy); display:grid; place-items:center; box-shadow:0 4px 12px rgba(19,36,94,.1); font-size:2rem; font-weight:800; }
.mja-uniforms__element-title { display:flex; align-items:center; gap:.5rem; margin:1.1rem 0 .3rem; color:var(--mja-navy); font-size:1.65rem; line-height:1.1; }
.mja-uniforms__pending { border-radius:999px; background:#fff5cf; color:#8b6500; font-size:.68rem; padding:.2rem .45rem; }
.mja-uniforms__element-description { margin:0 0 1.2rem; color:#687284; line-height:1.55; }
.mja-uniforms__section { display:grid; grid-template-columns:38px minmax(0,1fr); gap:.75rem; margin-top:1rem; }
.mja-uniforms__section-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--mja-navy); color:#fff; font-size:.95rem; font-weight:800; }
.mja-uniforms__section h4 { margin:.08rem 0 .32rem; color:var(--mja-navy); font-size:.9rem; }
.mja-uniforms__section p,.mja-uniforms__section ul { margin:0; color:#677183; font-size:.9rem; line-height:1.55; }
.mja-uniforms__section ul { padding-left:1.1rem; }
.mja-uniforms__section li::marker { color:var(--mja-gold); }
@keyframes mja-fade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (max-width:980px) {
  .mja-uniforms__main { grid-template-columns:1fr; }
  .mja-uniforms__panel { position:static; }
}
@media (max-width:720px) {
  .mja-uniforms__inner { padding:.5rem 0; }
  .mja-uniforms__header { display:block; }
  .mja-uniforms__tagline { max-width:none; text-align:left; margin-top:1.1rem; font-size:1.25rem; display:inline-block; }
  .mja-uniforms__pills { display:none; }
  .mja-uniforms__select-wrap { display:block; }
  .mja-uniforms__views { display:none; }
  .mja-uniforms__views-mobile { display:flex; }
  .mja-uniforms__viewer { border-radius:18px; }
  /* Keep the 44px touch target for accessibility, but make the visible point smaller on phones. */
  .mja-uniforms__hotspot { width:44px; height:44px; }
  .mja-uniforms__hotspot-dot { width:26px; height:26px; border-width:2px; font-size:.95rem; box-shadow:0 3px 9px rgba(12,24,64,.22); }
  .mja-uniforms__hotspot.is-active .mja-uniforms__hotspot-dot { outline-width:2px; outline-offset:2px; }
  .mja-uniforms__panel { border-radius:18px; padding:1rem; }
}
@media (prefers-reduced-motion:reduce) {
  .mja-uniforms *, .mja-uniforms *::before, .mja-uniforms *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}


/* 0.1.5: hotspot coordinates are now relative to the exact rendered image box.
   This keeps points aligned between the administrator and the public viewer,
   even when the source photograph is not square. */
.mja-uniforms__viewer.has-image { aspect-ratio:auto; }