/* ==========================================================================
   GOLDEN JUBILEE — 03 · Online Service
   Replaces the old purple "Online Service" Depicter banner (desktop-only).
   Flat cream ground with a field of tiny gold Zoe, the Prophet standing in
   front of a maroon disc whose gold ring draws itself in on scroll.
   ========================================================================== */
.gj-online{
  --o-cream:#FFFAF1; --o-paper:#F7EBD6; --o-maroon:#8A1A2C; --o-maroon-deep:#4E0B17;
  --o-gold:#D8A13A; --o-gold-deep:#9A6A12; --o-ink:#2A0A10; --o-blue:var(--jb-blue,#244A9B);
  --o-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --o-sans:'Urbanist','Helvetica Neue',Arial,sans-serif;
  position:relative;overflow:hidden;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background-color:var(--jb-gold-100,#F3E3B8);color:var(--o-ink);font-family:var(--o-sans);
  /* a sparse field of tiny gold stars (the loader's Zoe), not a gradient */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23D8A13A' fill-opacity='.22'%3E%3Cpath d='M30 20l1.8 4.1 4.5.4-3.4 2.9 1 4.4-3.9-2.3-3.9 2.3 1-4.4-3.4-2.9 4.5-.4z'/%3E%3Cpath d='M128 64l1.2 2.7 3 .3-2.3 1.9.7 2.9-2.6-1.5-2.6 1.5.7-2.9-2.3-1.9 3-.3z'/%3E%3Cpath d='M70 132l1.5 3.4 3.7.3-2.8 2.4.8 3.6-3.2-1.9-3.2 1.9.8-3.6-2.8-2.4 3.7-.3z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:180px 180px;
}
.gj-online *,.gj-online *::before,.gj-online *::after{box-sizing:border-box}
.gj-online p,.gj-online h2,.gj-online figure{margin:0;padding:0}

.gj-online__inner{max-width:1240px;margin:0 auto;padding:clamp(64px,9vw,120px) clamp(20px,5vw,64px) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;min-height:min(86vh,860px)}

/* ---- text ---- */
.gj-online__text{align-self:center;padding-bottom:clamp(48px,8vw,110px)}
.gj-online__eyebrow{display:inline-flex;align-items:center;gap:14px;font:600 11px/1 var(--o-sans) !important;letter-spacing:.34em !important;text-transform:uppercase;color:var(--o-gold-deep) !important}
.gj-online__eyebrow::after{content:"";width:48px;height:1px;background:var(--o-blue)}
.gj-online .gj-online__title{margin-top:.35em;font-family:var(--o-serif) !important;font-weight:500 !important;font-size:clamp(52px,7.2vw,112px) !important;
  line-height:.92 !important;letter-spacing:-.005em !important;color:var(--o-maroon) !important;text-transform:none}
.gj-online .gj-online__title em{font-style:italic;font-weight:400;color:var(--o-gold-deep)}
.gj-online__with{margin-top:.9em !important;font:500 clamp(15px,1.4vw,18px)/1.5 var(--o-sans) !important;letter-spacing:.14em !important;text-transform:uppercase;color:var(--o-ink) !important}
.gj-online__tag{margin-top:1.4em !important;padding-left:18px !important;border-left:2px solid var(--o-blue);
  font-family:var(--o-serif) !important;font-style:italic;font-size:clamp(22px,2.3vw,30px) !important;line-height:1.3 !important;color:var(--o-maroon-deep) !important}
.gj-online__tag span{color:var(--o-maroon);font-weight:600}
.gj-online__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.gj-online .gj-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;text-decoration:none !important;
  font:700 12px/1 var(--o-sans);letter-spacing:.18em;text-transform:uppercase;transition:background-color .25s,color .25s,transform .25s,box-shadow .25s}
.gj-online .gj-btn svg{width:18px;height:18px;flex:none}
.gj-online .gj-btn--solid{background:var(--o-maroon);color:var(--o-cream) !important;box-shadow:0 10px 26px rgba(63,6,14,.22)}
.gj-online .gj-btn--solid:hover{background:var(--o-maroon-deep);transform:translateY(-2px)}
.gj-online .gj-btn--line{border:1px solid var(--o-maroon);color:var(--o-maroon) !important}
.gj-online .gj-btn--line:hover{background:var(--o-maroon);color:var(--o-cream) !important}

/* ---- the Prophet, a maroon disc and a gold ring ---- */
.gj-online__figure{position:relative;align-self:end;justify-self:center;width:min(100%,560px);aspect-ratio:560/680;display:flex;align-items:flex-end;justify-content:center}
.gj-online__disc{position:absolute;left:50%;bottom:6%;width:88%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--jb-gold,#D4A84A)}
.gj-online__ring{position:absolute;left:50%;bottom:calc(6% - 3.5%);width:95%;aspect-ratio:1;transform:translateX(-50%) rotate(-90deg);overflow:visible}
.gj-online__ring circle{fill:none;stroke:var(--o-blue);stroke-width:.5;stroke-dasharray:302;stroke-dashoffset:302}
.gj-online__figure img{position:relative;z-index:1;height:100% !important;width:auto !important;max-width:none !important;object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(63,6,14,.28))}
/* the ground line the portrait stands on */
.gj-online__figure::after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:1px;background:var(--o-gold);z-index:2}

/* ---- reveal on scroll (online.js adds .is-in) ---- */
.gj-online__text > *{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.gj-online__disc{opacity:0;transform:translateX(-50%) scale(.86);transition:opacity 1s ease,transform 1.3s cubic-bezier(.16,1,.3,1)}
.gj-online__figure img{opacity:0;transform:translateY(40px);transition:opacity 1s ease .25s,transform 1.4s cubic-bezier(.16,1,.3,1) .25s}
.gj-online.is-in .gj-online__text > *{opacity:1;transform:none}
.gj-online.is-in .gj-online__text > :nth-child(2){transition-delay:.1s}
.gj-online.is-in .gj-online__text > :nth-child(3){transition-delay:.2s}
.gj-online.is-in .gj-online__text > :nth-child(4){transition-delay:.3s}
.gj-online.is-in .gj-online__text > :nth-child(5){transition-delay:.4s}
.gj-online.is-in .gj-online__disc{opacity:1;transform:translateX(-50%) scale(1)}
.gj-online.is-in .gj-online__figure img{opacity:1;transform:none}
.gj-online.is-in .gj-online__ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1) .35s}

@media (max-width:860px){
  .gj-online__inner{grid-template-columns:1fr;min-height:0;text-align:center;padding-top:72px}
  .gj-online__text{padding-bottom:12px}
  .gj-online__eyebrow::before{content:"";width:48px;height:1px;background:var(--o-gold)}
  .gj-online__tag{border-left:0;padding-left:0 !important}
  .gj-online__ctas{justify-content:center}
  .gj-online__figure{width:min(86vw,440px)}
}
@media (prefers-reduced-motion:reduce){
  .gj-online__text > *,.gj-online__disc,.gj-online__figure img{opacity:1 !important;transform:none !important;transition:none !important}
  .gj-online__disc{transform:translateX(-50%) !important}
  .gj-online__ring circle{stroke-dashoffset:0;transition:none}
}