/* =====================================================================================
   Home page layout system. Scoped to .page-home so no other page is affected.
   One container, one section rhythm, one section header, one card, one grid.
   Spacing follows an 8px scale (8 · 16 · 24 · 32 · 48 · 64).
   ===================================================================================== */
.page-home{
  --l-max:1160px;
  --l-gutter:24px;
  --l-section:clamp(56px,7vw,88px);
  --l-gap:24px;
  --l-radius:16px;
  --l-shadow:0 1px 2px rgba(16,24,20,.05),0 8px 24px -12px rgba(16,24,20,.18);
  --l-shadow-hover:0 2px 4px rgba(16,24,20,.06),0 16px 32px -14px rgba(16,24,20,.28);
  --l-cream:#f6f1e6;
  --l-white:#fff;
}
@media (max-width:640px){.page-home{--l-gutter:16px;--l-gap:16px}}

/* ---- Container: every block on the page uses the same measure ------------------------------------ */
.page-home main .wrap{width:min(var(--l-max),100% - 2*var(--l-gutter))}
.page-home .ayah__in{max-width:820px}

/* ---- Section rhythm: same vertical padding, two alternating neutrals, no textures ----------------- */
.page-home .section{padding-block:var(--l-section);position:relative}
.page-home .section::before{display:none}
.page-home .sec--cream{background:var(--l-cream)}
.page-home .sec--white{background:var(--l-white)}
.page-home .ayah{padding-block:var(--l-section)}

/* Events + featured projects: the hero's geometric tile, soft, behind the content */
.page-home .sec--tiled{overflow:hidden}
.page-home .sec--tiled::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tile-dark);background-size:72px;opacity:.045;
}
.page-home .sec--tiled>.wrap{position:relative}

/* ---- Section header: eyebrow, title, optional action on the right (always left-aligned) ------------ */
.page-home .section__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 24px;margin:0 0 32px;text-align:start;
}
.page-home .section__head h2{
  margin:0;font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.2;letter-spacing:-.01em;
}
.page-home .section__head .eyebrow{margin:0 0 8px}
.page-home .section__head .btn{flex:none}
.page-home .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
html.is-ur .page-home .eyebrow{letter-spacing:0;text-transform:none;font-size:.85rem}

/* ---- Stats band (shown only when there are real numbers) ---------------------------------------- */
.page-home .band{background:var(--l-white);border-bottom:1px solid var(--line)}
.page-home .band__grid{padding-block:32px;gap:24px}
.page-home .band strong{font-size:2rem;line-height:1.1}
.page-home .band span{font-size:.875rem}

/* ---- Cards: projects, activities, events, steps share one surface ----------------------------------- */
.page-home .pcard,
.page-home .acard,
.page-home .erow,
.page-home .flow__step,
.page-home .pcta{
  background:var(--surface,#fff);
  border:1px solid var(--line);
  border-radius:var(--l-radius);
  box-shadow:var(--l-shadow);
}
.page-home .pcard,.page-home .acard{
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:transform .2s ease,box-shadow .2s ease;
}
.page-home .pcard:hover,.page-home .acard:hover{transform:translateY(-3px);box-shadow:var(--l-shadow-hover)}
@media (prefers-reduced-motion:reduce){.page-home .pcard,.page-home .acard{transition:none}.page-home .pcard:hover,.page-home .acard:hover{transform:none}}

/* media: identical 16:9 frame */
.page-home .pcard__media,
.page-home .acard__media,
.page-home .pcard__media--art{
  aspect-ratio:16/9;height:auto;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.page-home .pcard__media img,.page-home .acard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-home .pcard__art .icon,.page-home .acard__art .icon,.page-home .pcard__media--art .pcard__art .icon{width:2.5rem;height:2.5rem}
.page-home .pcard .badge{top:12px;inset-inline-start:12px;left:auto;font-size:.7rem;padding:.2rem .6rem}

/* body: identical padding, rhythm and type */
.page-home .pcard__body,.page-home .acard__body{
  display:flex;flex-direction:column;flex:1;gap:0;padding:20px;
}
.page-home .pcard .eyebrow,.page-home .acard .eyebrow{margin:0 0 8px;font-size:.7rem}
.page-home .pcard__title,.page-home .acard__body h3{
  margin:0 0 8px;font-size:1.125rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.page-home .pcard__title a::after{content:"";position:absolute;inset:0;z-index:1}
.page-home .pcard__sum,.page-home .acard__body p:not(.eyebrow){
  margin:0 0 16px;font-size:.9rem;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* footer row pinned to the bottom of every card */
.page-home .pcard__foot,.page-home .acard .link-arrow{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
}
.page-home .pcard__foot{display:flex;align-items:center;gap:12px}
.page-home .acard .link-arrow{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:600;gap:8px}
.page-home .pcard .meter{flex:1;min-width:0;margin:0}
.page-home .pcard .meter__bar{height:6px}
.page-home .pcard .meter__row{font-size:.75rem;margin-top:8px;gap:4px 12px}
.page-home .pcard__go{width:32px;height:32px}
.page-home .acard:not(:has(.link-arrow)) .acard__body{padding-bottom:20px}

/* ---- One grid for every card list ---------------------------------------------------------------------- */
.page-home .grid--cards,.page-home .grid--3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--l-gap);
}
@media (max-width:960px){.page-home .grid--cards,.page-home .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.page-home .grid--cards,.page-home .grid--3{grid-template-columns:minmax(0,1fr)}}

/* the "give" card that fills unused project slots */
.page-home .pcta{
  display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px;
  background:linear-gradient(135deg,#0b4b38,#0f5a43);color:#fff;border-color:transparent;
}
.page-home .pcta--2{grid-column:span 2}
.page-home .pcta__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.12);color:var(--gold-500)}
.page-home .pcta h3{margin:0 0 8px;font-size:1.25rem;color:#fff}
.page-home .pcta p{margin:0;color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.6}
.page-home .pcta .eyebrow{margin-bottom:8px;color:var(--gold-500)}
.page-home .pcta .btn{align-self:flex-start}
@media (min-width:961px){
  .page-home .pcta--2{flex-direction:row;align-items:center;gap:24px}
  .page-home .pcta--2 .pcta__text{flex:1}
  .page-home .pcta--2 .btn{align-self:center;flex:none}
}
@media (max-width:960px){.page-home .pcta--2{grid-column:1/-1}}

/* ---- Events: feature + list, or the feature alone at full width --------------------------------- */
.page-home .events{display:grid;gap:var(--l-gap)}
@media (min-width:960px){.page-home .events{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}}
.page-home .events--solo{grid-template-columns:minmax(0,1fr)}
.page-home .efeature{padding:32px;border-radius:var(--l-radius);box-shadow:var(--l-shadow)}
.page-home .events--solo .efeature{padding:40px}
@media (min-width:960px){.page-home .events--solo .efeature{grid-template-columns:auto minmax(0,1fr);gap:48px}}
.page-home .efeature h3{margin:0 0 8px}
.page-home .elist{display:grid;gap:16px;align-content:start}
.page-home .erow{padding:16px 20px;gap:16px}
.page-home .erow:hover{border-color:var(--gold-500)}
.page-home .erow h3{margin:0 0 4px;font-size:1.0625rem}

/* ---- How transparency works: three equal cards -------------------------------------------------------- */
.page-home .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--l-gap);margin:0;padding:0;list-style:none}
@media (max-width:820px){.page-home .flow{grid-template-columns:minmax(0,1fr)}}
.page-home .flow__step{display:block;text-align:start;padding:24px;position:relative}
.page-home .flow__step::before,.page-home .flow__step::after{display:none!important}
.page-home .flow__circle{
  display:grid;place-items:center;width:48px;height:48px;border-radius:12px;margin:0 0 16px;border:0;box-sizing:border-box;
  background:var(--green-100,#e3f1ea);color:var(--green-700,#0b4b38);
}
.page-home .flow__circle .icon{width:1.4rem;height:1.4rem}
.page-home .flow__label{display:block;margin:0 0 4px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600,#8a6410)}
.page-home .flow__step h3{margin:0 0 8px;font-size:1.125rem}
.page-home .flow__step p{margin:0;max-width:none;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* ---- Scripture band ------------------------------------------------------------------------------------------ */
.page-home .ayah__star{margin-bottom:8px}
.page-home .ayah__ar{margin-bottom:16px}
.page-home .ayah__tr{margin-bottom:8px}

/* ---- Ways of giving: the chooser sits in the same container and card language ----------------------------- */
.page-home .give{border-radius:var(--l-radius);box-shadow:var(--l-shadow);overflow:hidden}

/* ---- Events: two clearly separated parts (upcoming, completed) -------------------------------------------- */
.page-home .evsub{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);
  font:700 .8rem/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--green-800,#0b4b38);
}
html.is-ur .page-home .evsub{letter-spacing:0;text-transform:none;font-size:1rem}
.page-home .evsub span{display:inline-flex;align-items:center;gap:8px}
.page-home .evsub em{font-style:normal;font-size:.72rem;background:var(--green-100,#e3f1ea);color:var(--green-800,#0b4b38);border-radius:99px;padding:.05rem .55rem;margin-inline-start:8px;letter-spacing:0}
.page-home .evsub a{font-size:.78rem;letter-spacing:.02em;text-transform:none;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.page-home .evsub--past{margin-top:48px}
.page-home .elist--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;opacity:1}
@media (max-width:820px){.page-home .elist--home{grid-template-columns:minmax(0,1fr)}}
.page-home .elist--past .erow{background:var(--l-cream,#f6f1e6);box-shadow:none}
.page-home .elist--past .datebadge{filter:grayscale(.55) opacity(.8)}
.page-home .empty--slim{padding:20px;font-size:.9rem}

/* Events: everything stacks vertically (upcoming feature, further upcoming events, then completed events) */
@media (min-width:960px){.page-home .events{grid-template-columns:minmax(0,1fr)}}
.page-home .events .elist{grid-template-columns:minmax(0,1fr)}
.page-home .elist--home{grid-template-columns:minmax(0,1fr);gap:12px}

/* ---- Events: upcoming on the left, completed on the right (wider and more prominent) ---------------------- */
.page-home .evcols{display:grid;gap:40px;align-items:start}
@media (min-width:1000px){.page-home .evcols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.page-home .evcol--done{min-width:0}
.page-home .evsub--past{margin-top:0}
/* completed: cards share the column; a single card fills it */
.page-home .evcol--done .pgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.page-home .evcol--done .pevent__media{aspect-ratio:4/3}
.page-home .evcol--done .pevent{box-shadow:0 2px 4px rgba(16,24,20,.06),0 16px 34px -16px rgba(16,24,20,.32)}
.page-home .evcol--done .pevent__body h3{font-size:1.2rem}
/* upcoming: the feature card is a compact stacked card in the narrower column */
.page-home .evcol--up .efeature{grid-template-columns:minmax(0,1fr);gap:18px;padding:24px}
.page-home .evcol--up .efeature__date{display:flex;align-items:center;gap:14px;text-align:start}
.page-home .evcol--up .efeature__date p{margin:0;font-size:1rem}
.page-home .evcol--up .events--solo .efeature{padding:24px}
.page-home .evcol--up .countdown span{min-width:56px}

/* ---- Events: room for two completed events, and left/right cards share one height ---------------------------- */
.page-home .evcols{align-items:stretch}
.page-home .evcol{display:flex;flex-direction:column}
.page-home .evcol--up .events{flex:1;display:flex;flex-direction:column;gap:16px}
.page-home .evcol--up .efeature{flex:1;align-content:center}
.page-home .evcol--done .pgrid{flex:1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:20px}
@media (max-width:640px){.page-home .evcol--done .pgrid{grid-template-columns:minmax(0,1fr)}}
.page-home .evcol--done .pevent{height:100%}
.page-home .evcol--done .pevent__media{aspect-ratio:auto;flex:1 1 auto;min-height:220px}
.page-home .pevent__body{flex:none}
/* reserved slot while there is only one completed event */
.page-home .pevent--soon{
  align-items:center;justify-content:center;text-align:center;gap:12px;padding:28px 22px;
  background:transparent;border:2px dashed var(--line);box-shadow:none;color:var(--muted);
}
.page-home .pevent__soonicon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--green-100,#e3f1ea);color:var(--green-700,#0b4b38)}
.page-home .pevent--soon p{margin:0;font-size:.88rem;line-height:1.55;max-width:26ch}

/* WhatsApp number in the top bar: the middle group stands out in white */
.page-home .announce__hl{color:#fff;font-weight:800}

/* The events bar lines up with the header above it (same wide container, content starts at the left edge) */
.page-home main .announce .wrap{width:calc(100% - 2rem);max-width:1360px}
.page-home .announce__in{justify-content:flex-start}

/* WhatsApp number: all white */
.page-home .announce__wa span[dir=ltr],.page-home .announce__hl{color:#fff;font-weight:700}

/* Scripture band: Urdu translation between the Arabic and the English */
.page-home .ayah__ur{
  font-family:var(--font-ur);font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:2.2;color:#fff;
  margin:0 auto 14px;max-width:46ch;
}
.page-home .ayah__ur{font-size:clamp(.92rem,1.4vw,1.1rem);line-height:2.1;max-width:52ch}

/* ---- Home: the small section labels (EVENTS, FEATURED PROJECTS, WAYS OF GIVING) get a thin underline ---- */
.page-home .section__head .eyebrow{display:inline-block;padding-bottom:.3rem;border-bottom:1px solid var(--gold-500)}
.page-home main .section h2::before{display:none}
/* thinner label underline: half-pixel on sharp screens, and a softer gold so it never looks heavy */
.page-home .section__head .eyebrow{border-bottom:.5px solid rgba(217,163,54,.75);padding-bottom:.25rem}
/* label underline: a clear 2px gold line */
.page-home .section__head .eyebrow{border-bottom:2px solid var(--gold-500);padding-bottom:.3rem}
/* "Our promise" label gets the same underline */
.page-home .tw__head .eyebrow{display:inline-block;padding-bottom:.3rem;border-bottom:2px solid var(--gold-500)}
/* "How transparency works": handwritten like the other section headings (English; Urdu keeps its own script) */
html:not(.is-ur) .page-home .tw__head h3{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;font-size:clamp(2rem,4.2vw,2.9rem);line-height:1.1;letter-spacing:0}

/* Underline the "Upcoming events" / "Completed events" headings */
.page-home .evsub > span{border-bottom:2px solid var(--gold-500,#c9962b);padding-bottom:.3rem}

/* ---- Home: one centred column shared by header, announcement bar, hero and sections ---------------- */
.page-home{--l-max:1480px}
.page-home main .announce .wrap{width:min(var(--l-max),100% - 2*var(--l-gutter));max-width:none}
/* hero sketch ends at the column's right edge instead of running past it */
.page-home .herobg__sketch{inset-inline-end:max(var(--l-gutter),calc((100% - var(--l-max))/2));width:min(46%,760px)}
@media (max-width:900px){.page-home .herobg__sketch{width:92vw;inset-inline-end:-6%}}

/* Home: same comfortable side padding */
.page-home{--l-max:1400px;--l-gutter:clamp(20px,5vw,80px)}
@media (max-width:640px){.page-home{--l-gutter:16px}}

/* ---- Events (photo-first): latest completed event leads, the next event sits beside it, later dates are pills ---- */
.page-home .evc{display:grid;gap:24px;align-items:stretch}
@media (min-width:1000px){.page-home .evc{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.page-home .evc__lead,.page-home .evc__next{min-width:0;display:flex;flex-direction:column}
.page-home .evc__lead .pevent{flex:1;height:100%;box-shadow:0 2px 4px rgba(16,24,20,.06),0 16px 34px -16px rgba(16,24,20,.32)}
.page-home .evc__lead .pevent__media{aspect-ratio:auto;flex:1 1 auto;min-height:300px}
.page-home .evc__lead .pevent__body h3{font-size:1.25rem}
.page-home .evc__next .efeature{flex:1;grid-template-columns:minmax(0,1fr);gap:16px;padding:24px;align-content:center}
.page-home .evc__next .efeature>.eyebrow{margin:0}
.page-home .evc__next .efeature__date{display:flex;align-items:center;gap:14px;text-align:start}
.page-home .evc__next .efeature__date p{margin:0;font-size:1rem}
.page-home .evc__next .countdown span{min-width:56px}
.page-home .evc__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.page-home .evc__pill{display:inline-flex;align-items:center;gap:8px;padding:.45rem .95rem;border:1px solid var(--line);border-radius:99px;background:var(--surface,#fff);color:var(--ink,inherit);font-size:.88rem;text-decoration:none}
.page-home .evc__pill b{color:var(--gold-600,#a8741a);font-weight:700}
.page-home .evc__pill:hover{border-color:var(--gold-500,#c9962b)}
.page-home .evc__pill--more{color:var(--muted)}


/* Special events flagged for the hero: always-visible announcement blended into the hero (independent of the slides) */
.hevents{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-end;justify-content:center;padding-top:136px;padding-bottom:0}
.hevent{display:flex;flex-direction:column;gap:.25rem;pointer-events:auto;width:620px;max-width:100%;padding:.2rem 0 .2rem 1.3rem;text-decoration:none;color:#fff;
  border-inline-start:3px solid var(--gold-500,#e2b04a);background:linear-gradient(90deg,rgba(3,22,16,.45),transparent);text-shadow:0 2px 14px rgba(0,0,0,.45);animation:heventin .7s ease both}
html[dir=rtl] .hevent{background:linear-gradient(270deg,rgba(3,22,16,.45),transparent)}
.hevent__tag{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;color:var(--gold-500,#e2b04a);font-weight:800;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.hevent__title{font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.1;font-weight:800;color:#fff}
.hevent__sum{font-size:clamp(.85rem,1.1vw,.95rem);line-height:1.3;font-weight:700;color:var(--gold-500,#e2b04a);padding:0}
.hevent__when{font-size:.8rem;font-weight:700;color:#fff}
.hevent__where{display:flex;align-items:center;gap:.35rem;opacity:.9;font-size:.8rem}
.hevent__go{margin-top:.2rem;font-size:.8rem;font-weight:700;color:#fff;opacity:.9}
.hevent:hover .hevent__go{text-decoration:underline}
html.is-ur .hevent__tag{letter-spacing:0;text-transform:none}
@keyframes heventin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:1100px){
  .hevents{position:relative;inset:auto;align-items:flex-start;padding-top:4.5rem;margin-bottom:-3.5rem}
  .hevent{max-width:none}
}
@media (prefers-reduced-motion:reduce){.hevent{animation:none}}

/* with a special event announced, the sketches recede into the background */
.herofull.has-event .herobg__sketch{opacity:.22;filter:blur(.4px);bottom:180px}
.herofull.has-event .herobg img{opacity:.55}
@media (max-width:900px){.herofull.has-event .herobg__sketch{opacity:.14;bottom:120px}}

/* long verses: smaller and tighter so the hero keeps its height */
.verse--long .verse__ar{font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.7}
.verse--long .verse__ur{font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.8}
.verse--xl .verse__ar{font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.65}
.verse--xl .verse__ur{font-size:clamp(.9rem,1.25vw,1rem);line-height:1.7}
.verse--long .verse__en,.verse--xl .verse__en{font-size:.85rem}


/* special event: staggered entrance, drawing gold rule, shimmering title, gentle float */
.hevent{position:relative;border-inline-start-color:transparent;animation:heventin .8s cubic-bezier(.2,.8,.2,1) both,heventfloat 6s ease-in-out 1.2s infinite}
.hevent::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:linear-gradient(var(--gold-500,#e2b04a),#fff3c4,var(--gold-500,#e2b04a));transform-origin:top;animation:heventrule 1s ease-out .1s both}
.hevent>*{animation:heventrise .7s ease-out both}
.hevent>:nth-child(1){animation-delay:.25s}
.hevent>:nth-child(2){animation-delay:.4s}
.hevent>:nth-child(3){animation-delay:.55s}
.hevent>:nth-child(4){animation-delay:.7s}
.hevent>:nth-child(5){animation-delay:.85s}
.hevent>:nth-child(6){animation-delay:1s}
.hevent__title{background:linear-gradient(100deg,#fff 40%,#ffe9a8 50%,#fff 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;
  animation:heventrise .7s ease-out .4s both,heventshine 5s ease-in-out 1.5s infinite}
.hevent__tag svg{animation:heventpulse 2s ease-in-out infinite}
.hevent__go svg{display:inline-block;animation:heventnudge 1.6s ease-in-out infinite}
@keyframes heventrule{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes heventrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes heventshine{0%,55%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes heventfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes heventpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes heventnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
html[dir=rtl] .hevent__go svg{animation-name:none}
@media (prefers-reduced-motion:reduce){.hevent,.hevent::before,.hevent>*,.hevent__title,.hevent__tag svg,.hevent__go svg{animation:none!important}.hevent__title{background:none;-webkit-text-fill-color:#fff}}

/* continuous motion on the heading only (everything else settles after the entrance) */
.hevent{animation:heventin .8s cubic-bezier(.2,.8,.2,1) both}
.hevent__tag svg,.hevent__go svg{animation:none}
.hevent__title{background:linear-gradient(100deg,#fff 35%,#ffd877 50%,#fff 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:heventrise .7s ease-out .4s both,heventshine 3.2s linear 1.2s infinite,heventglow 3.2s ease-in-out 1.2s infinite}
@keyframes heventshine{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes heventglow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,216,119,0))}50%{filter:drop-shadow(0 0 10px rgba(255,216,119,.45))}}

/* animated rule under the heading: draws from the first to the last character, then repeats */
.hevent__title{display:block;width:fit-content;max-width:100%;position:relative;padding-bottom:.4rem}
.hevent__title::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500,#e2b04a),#fff3c4,var(--gold-500,#e2b04a));box-shadow:0 0 6px rgba(255,216,119,.6);
  transform-origin:left center;transform:scaleX(0);animation:heventline 3.6s ease-in-out 1.2s infinite}
html[dir=rtl] .hevent__title::after{transform-origin:right center}
@keyframes heventline{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hevent__title::after{animation:none!important;transform:scaleX(1);opacity:.7}}

/* slimmer hero buttons */
.hero__cta .btn--lg{padding:.4rem 1.1rem;font-size:.92rem}

/* rotating events: all stacked in one spot, one visible at a time */
.hevents__stage{display:grid;width:620px;max-width:100%;pointer-events:none}
.hevents__stage>.hevent{grid-area:1/1;width:100%;max-width:none;margin-inline-end:0;transition:opacity .5s ease,visibility .5s}
.hevents__stage>.hevent:not(.is-active){opacity:0;visibility:hidden;animation:none!important}
.hevents__stage>.hevent:not(.is-active)>*,.hevents__stage>.hevent:not(.is-active)::before,.hevents__stage>.hevent:not(.is-active) .hevent__title::after{animation:none!important}
.hevents__dots{grid-area:2/1;display:flex;gap:.45rem;padding:.7rem 0 0 1.3rem;pointer-events:auto}
.hevents__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:background .2s,width .2s}
.hevents__dots button[aria-current]{background:var(--gold-500,#e2b04a);width:22px;border-radius:4px}
@media (min-width:1101px){.hevents__stage{margin-inline-end:-48px}}
@media (max-width:1100px){.hevents__stage{width:100%}}

/* heading: plain white, no colour animation (the underline keeps animating) */
.hevent__title{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:#fff;filter:none;
  text-shadow:0 2px 14px rgba(0,0,0,.45);animation:heventrise .7s ease-out .4s both}

/* "under construction / testing" notice: fixed at the top right, just below the header */
.testbanner{position:fixed;top:132px;inset-inline-end:16px;z-index:60;display:flex;align-items:center;gap:.6rem;max-width:min(380px,calc(100vw - 32px));padding:.55rem .6rem .55rem .9rem;border-radius:.7rem;color:#2b1d00;
  background:repeating-linear-gradient(-45deg,#f6c445 0 14px,#f0b52a 14px 28px);border:2px solid #2b1d00;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:.82rem;line-height:1.3;animation:tbin .6s cubic-bezier(.2,.8,.2,1) both}
.testbanner[hidden]{display:none}
.testbanner__txt{display:flex;flex-direction:column}
.testbanner__txt strong{font-size:.92rem;text-transform:uppercase;letter-spacing:.04em}
html.is-ur .testbanner__txt strong{text-transform:none;letter-spacing:0}
.testbanner__dot{flex:none;width:10px;height:10px;border-radius:50%;background:#c0271b;box-shadow:0 0 0 0 rgba(192,39,27,.6);animation:tbpulse 1.6s infinite}
.testbanner__x{flex:none;margin-inline-start:auto;width:24px;height:24px;border:0;border-radius:50%;background:rgba(43,29,0,.15);color:#2b1d00;font-size:1.1rem;line-height:1;cursor:pointer}
.testbanner__x:hover{background:rgba(43,29,0,.3)}
@keyframes tbin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes tbpulse{70%{box-shadow:0 0 0 9px rgba(192,39,27,0)}100%{box-shadow:0 0 0 0 rgba(192,39,27,0)}}
@media (max-width:700px){.testbanner{top:158px;inset-inline-end:8px;font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.testbanner,.testbanner__dot{animation:none}}