/* ============================================================
   COMPONENTS — buttons, cards, forms, media, overlays
   ============================================================ */

/* --------------------------- BUTTONS --------------------------- */
.btn{
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-glow: transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.7rem; isolation:isolate;
  padding: 1.02em 2.15em;
  font-family:var(--f-body); font-size:var(--t-sm); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid transparent; border-radius:var(--r-pill);
  cursor:pointer; overflow:hidden;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: color .45s var(--e-out), border-color .45s var(--e-out),
              transform .45s var(--e-out), box-shadow .5s var(--e-out);
}
.btn:hover{ box-shadow: var(--btn-glow); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: var(--grad-hot);
  transform: translateY(101%); border-radius:inherit;
  transition: transform .55s var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before{ transform:translateY(0); }
.btn:hover{ color:#fff; }
.btn:active{ transform:scale(.97); }

.btn__arrow{ transition: transform .45s var(--e-out); }
.btn:hover .btn__arrow{ transform: translateX(5px); }

.btn--ghost{
  --btn-bg: transparent; --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover{ border-color: transparent; box-shadow: var(--shadow-glow); }

.btn--light{ --btn-bg:#fff; --btn-fg:#14100E; }
.btn--accent{
  --btn-fg:#fff; --btn-glow: var(--shadow-glow);
  background-image: var(--grad-hot); background-color: transparent;
}
.btn--accent::before{ background-image: var(--grad-jewel); }
.btn--accent:hover{ color:#fff; }

/* dark solid button also picks up a coloured glow */
.btn:not(.btn--ghost):not(.btn--light){ --btn-glow: var(--shadow-glow); }
.btn--sm{ padding:.82em 1.6em; font-size:var(--t-xs); }
.btn--wide{ width:100%; }

/* Text link with animated rule */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--t-sm); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.4em; color:var(--text);
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: currentColor; transform-origin:100% 50%; transform:scaleX(1);
  transition: transform .5s var(--e-out);
}
.tlink:hover::after{ transform-origin:0 50%; }
.tlink:hover{ color: var(--accent); }
.tlink svg{ transition: transform .45s var(--e-out); }
.tlink:hover svg{ transform: translateX(4px); }

/* Circular play / scroll button */
.circle-btn{
  width: clamp(84px, 9vw, 122px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; position:relative;
  border:1px solid var(--line-strong); color:var(--text);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .4s var(--e-out), border-color .4s var(--e-out), transform .5s var(--e-out);
}
.circle-btn:hover{ color:var(--accent); border-color:var(--accent); transform:scale(1.06); }
.circle-btn::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--accent); animation: pulseRing 2.9s var(--e-out) infinite;
}

/* --------------------------- SECTION HEADS --------------------------- */
.shead{
  display:grid; gap: var(--s-3);
  margin-bottom: clamp(2.4rem, 4.5vw, 4.6rem);
}
.shead--split{
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end; gap: clamp(1.6rem, 4vw, 4.5rem);
}
@media (max-width:900px){ .shead--split{ grid-template-columns:1fr; align-items:start; } }
.shead--center{ justify-items:center; text-align:center; max-width:820px; margin-inline:auto; }
.shead h2 .accent{ color:var(--accent); font-style:italic; }

/* --------------------------- CARDS --------------------------- */
.card{
  position:relative; background: var(--bg-elev);
  border:1px solid var(--line-soft); border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  transition: transform .55s var(--e-out), border-color .45s var(--e-out), box-shadow .55s var(--e-out), background-color .45s var(--e-out);
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(460px circle at var(--gx,50%) var(--gy,0%), var(--halo-1), transparent 64%);
  opacity:0; transition: opacity .5s var(--e-out);
}
.card:hover{ transform: translateY(-7px); border-color: var(--line); box-shadow: var(--shadow-md); }
.card:hover::after{ opacity:1; }

.card__num{
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--accent-hi);
  letter-spacing:.18em; display:block; margin-bottom:1.1rem;
}
.card__icon{
  width:clamp(38px,4vw,50px); height:clamp(38px,4vw,50px); color:var(--accent);
  margin-bottom: 1.35rem;
}
.card__icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.15; }
.card h3{ margin-bottom:.75rem; }
.card p{ color:var(--text-mut); font-size:var(--t-sm); line-height:1.72; }

/* --------------------------- MEDIA FRAMES --------------------------- */
.frame{
  position:relative; overflow:hidden; border-radius: var(--r-md);
  background: var(--surface);
}
.frame img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--e-out), filter .4s var(--e-out);
}
.frame--tall{ aspect-ratio: 3/4; }
.frame--port{ aspect-ratio: 4/5; }
.frame--sq{ aspect-ratio: 1/1; }
.frame--wide{ aspect-ratio: 16/10; }
.frame--cine{ aspect-ratio: 21/9; }
.frame:hover img{ transform: scale(1.06); }

.frame__veil{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 38%, rgba(10,8,7,.72) 100%);
  opacity:.9; transition: opacity .5s var(--e-out);
}
.frame__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(1.1rem,2.2vw,1.9rem);
  color:#fff; z-index:2;
}
.frame__cap h3{ color:#fff; }
.frame__cap .meta{ color:rgba(255,255,255,.72); }

/* --------------------------- MARQUEE --------------------------- */
.marquee{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; width:max-content;
  animation: marquee var(--mspeed, 42s) linear infinite;
}
.marquee--rev .marquee__track{ animation-name: marqueeRev; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__item{
  display:inline-flex; align-items:center; gap: clamp(1.4rem,3vw,3rem);
  padding-inline: clamp(1.4rem,3vw,3rem);
  font-family: var(--f-display); font-weight:300;
  font-size: clamp(1.7rem, 4.6vw, 4.4rem); line-height:1.25;
  white-space:nowrap; color:var(--text);
}
.marquee__item .dim{ color:transparent; -webkit-text-stroke:1px var(--line-strong); }
.marquee__item .dot{ color:var(--accent); font-size:.4em; }

.ticker{ border-block:1px solid var(--line); padding-block:1.05rem; background:var(--bg-alt); }
.ticker .marquee__item{
  font-family:var(--f-body); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--text-mut);
  gap:1.6rem; padding-inline:1.6rem;
}
.ticker .marquee__item .dot{ color:var(--accent); font-size:1em; }

/* --------------------------- STATS --------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap: clamp(1.2rem,3vw,3rem);
}
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ text-align:center; }
.stat__n{
  font-family:var(--f-display); font-weight:300;
  font-size: clamp(2.6rem,6vw,4.6rem); line-height:1;
  background-image: var(--grad-hot);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  display:flex; align-items:baseline; justify-content:center; gap:.06em;
}
.stat__n .suf{ font-size:.42em; }
.stat__l{
  margin-top:.85rem; font-size:var(--t-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-mut);
}

/* --------------------------- ACCORDION --------------------------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; text-align:left; cursor:pointer;
  padding: clamp(1.3rem,2.4vw,1.95rem) 0;
  background:none; border:0; color:var(--text);
  font-family:var(--f-display); font-weight:300;
  font-size: clamp(1.08rem,2.1vw,1.5rem); line-height:1.3;
  transition: color .35s var(--e-out);
}
.acc__btn:hover{ color: var(--accent); }
.acc__ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong); position:relative;
  transition: background-color .4s var(--e-out), border-color .4s var(--e-out), transform .5s var(--e-out);
}
.acc__ico::before,.acc__ico::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition: transform .45s var(--e-out), opacity .3s;
}
.acc__ico::before{ width:12px; height:1px; }
.acc__ico::after { width:1px; height:12px; }
.acc__item.is-open .acc__ico{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  transform:rotate(90deg); box-shadow: var(--shadow-glow);
}
.acc__item.is-open .acc__ico::after{ opacity:0; }
.acc__panel{
  overflow:hidden; height:0;
  transition: height .6s var(--e-out);
}
.acc__inner{
  padding-bottom: clamp(1.3rem,2.4vw,2rem);
  max-width: 74ch; color: var(--text-mut); font-size:var(--t-sm); line-height:1.78;
}
.acc__inner > * + *{ margin-top:.9rem; }

/* --------------------------- FORMS --------------------------- */
.field{ position:relative; display:block; }
.field + .field{ margin-top: 1.7rem; }
.field__input,.field__area,.field__select{
  width:100%; background:transparent; color:var(--text);
  border:0; border-bottom:1px solid var(--line);
  padding: 1.5rem 0 .75rem; font-family:var(--f-body); font-size:var(--t-base);
  transition: border-color .4s var(--e-out);
  border-radius:0;
}
.field__area{ resize:vertical; min-height:118px; }
.field__select{ cursor:pointer; appearance:none; }
.field__label{
  position:absolute; left:0; top:1.45rem; pointer-events:none;
  font-size:var(--t-sm); color:var(--text-mut); letter-spacing:.05em;
  transition: transform .4s var(--e-out), font-size .4s var(--e-out), color .4s var(--e-out);
  transform-origin:0 0;
}
.field__input:focus ~ .field__label,
.field__area:focus ~ .field__label,
.field__select:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__area:not(:placeholder-shown) ~ .field__label,
.field.has-value .field__label{
  transform: translateY(-1.42rem) scale(.78);
  color: var(--accent); letter-spacing:.16em; text-transform:uppercase;
}
.field__bar{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background-image: var(--grad-hot); transform:scaleX(0); transform-origin:0 50%;
  transition: transform .55s var(--e-out);
}
.field__input:focus ~ .field__bar,
.field__area:focus ~ .field__bar,
.field__select:focus ~ .field__bar{ transform:scaleX(1); }
.field__err{
  display:block; margin-top:.5rem; font-size:var(--t-xs);
  color: var(--brand-rose); opacity:0; transform:translateY(-4px);
  transition: opacity .3s, transform .3s;
}
.field.is-err .field__err{ opacity:1; transform:none; }
.field.is-err .field__input,.field.is-err .field__area,.field.is-err .field__select{ border-bottom-color: var(--brand-rose); }

.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  padding:.6em 1.15em; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mut); cursor:pointer; background:transparent;
  font-family:var(--f-body);
  transition: all .35s var(--e-out);
}
.chip:hover{ color:var(--text); border-color:var(--line-strong); }
.chip.is-on{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  box-shadow: var(--shadow-glow);
}

.form-note{ font-size:var(--t-xs); color:var(--text-mut); line-height:1.7; }
.form-ok{
  margin-top:1.4rem; padding:1.05rem 1.3rem; border-radius:var(--r-sm);
  background: var(--accent-wash); border:1px solid var(--accent-soft);
  color: var(--text); font-size:var(--t-sm);
  display:none;
}
.form-ok.is-on{ display:block; animation: fadeUp .6s var(--e-out); }

/* --------------------------- LIGHTBOX --------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background: rgba(8,6,5,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display:grid; place-items:center; padding: clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden;
  transition: opacity .45s var(--e-out), visibility .45s;
}
.lightbox.is-on{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:min(1180px,92vw); max-height:82vh; width:auto;
  object-fit:contain; border-radius:var(--r-sm);
  transform: scale(.94); opacity:0;
  transition: transform .6s var(--e-out), opacity .5s var(--e-out);
  filter:none;
}
.lightbox.is-on .lightbox__img{ transform:none; opacity:1; }
.lightbox__cap{
  position:absolute; bottom: clamp(1rem,3vw,2.2rem); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.78); font-size:var(--t-xs);
  letter-spacing:.2em; text-transform:uppercase; text-align:center;
}
.lightbox__x,.lightbox__nav{
  position:absolute; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition: background-color .35s, border-color .35s, transform .35s var(--e-out);
}
.lightbox__x:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.lightbox__x{ top: clamp(1rem,3vw,2.2rem); right: clamp(1rem,3vw,2.2rem); }
.lightbox__nav--prev{ left: clamp(.6rem,2.4vw,2.2rem); top:50%; margin-top:-26px; }
.lightbox__nav--next{ right: clamp(.6rem,2.4vw,2.2rem); top:50%; margin-top:-26px; }

/* --------------------------- QUOTE --------------------------- */
.quote{
  font-family: var(--f-display); font-weight:300; font-style:italic;
  font-size: clamp(1.28rem, 2.7vw, 2.35rem); line-height:1.42;
  letter-spacing:-.015em; color: var(--text);
}
.quote__mark{
  font-size: clamp(3rem,7vw,6rem); line-height:.6;
  background-image:var(--grad-hot); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; opacity:.85; display:block; margin-bottom:.35rem; font-family:var(--f-display);
}
.stars{ display:inline-flex; gap:.22rem; color: var(--th-marigold); }
.stars svg{ width:15px; height:15px; fill:currentColor; }

/* --------------------------- BADGES / PILLS --------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45em 1em; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mut);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background-image: var(--grad-hot); }
.pill--live .dot{ animation: pulseRing 2s infinite; }

/* --------------------------- CTA BAND --------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  padding-block: clamp(4.5rem, 9vw, 9.5rem);
  background: var(--bg-alt);
  text-align:center;
}
.cta-band__halo{
  position:absolute; inset:-20%;
  background:
    radial-gradient(38% 46% at 24% 32%, var(--halo-1), transparent 68%),
    radial-gradient(34% 42% at 76% 26%, var(--halo-2), transparent 68%),
    radial-gradient(42% 48% at 52% 84%, var(--halo-3), transparent 68%);
  filter: blur(34px); animation: haloDrift 17s ease-in-out infinite; pointer-events:none;
}
.cta-band__in{ position:relative; z-index:2; display:grid; gap:var(--s-4); justify-items:center; }
.cta-band h2{ font-size: var(--t-2xl); max-width:16ch; }
.cta-band .btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
@media (max-width:440px){
  .cta-band .btn-row{ display:grid; width:100%; }
  .cta-band .btn-row .btn{ width:100%; }
}

/* --------------------------- PAGE HERO (inner pages) --------------------------- */
.phero{
  position:relative; overflow:hidden;
  padding-top: calc(var(--header-h) + clamp(3.5rem,7vw,7rem));
  padding-bottom: clamp(3rem,6vw,6rem);
  background: var(--bg-alt);
  border-bottom:1px solid var(--line-soft);
}
.phero__halo{
  position:absolute; inset:-30% -10% auto -10%; height:150%;
  background:
    radial-gradient(30% 52% at 82% 18%, var(--halo-1), transparent 66%),
    radial-gradient(28% 46% at 58% 8%,  var(--halo-2), transparent 66%),
    radial-gradient(26% 44% at 12% 30%, var(--halo-3), transparent 68%);
  filter: blur(30px); animation: haloDrift 21s ease-in-out infinite; pointer-events:none;
}
.phero__in{ position:relative; z-index:2; display:grid; gap: var(--s-3); }
.phero h1{ font-size: var(--t-2xl); max-width:18ch; }
.phero .lede{ margin-top:.6rem; }
.crumbs{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--text-mut);
  margin-bottom:.4rem;
}
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:.45; }

/* --------------------------- PHULKARI MOTIF BG --------------------------- */
.motif-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E11D6E' stroke-width='1.1'%3E%3Cpath d='M60 8 L112 60 L60 112 L8 60 Z'/%3E%3Cpath d='M60 30 L90 60 L60 90 L30 60 Z'/%3E%3Cpath d='M60 48 L72 60 L60 72 L48 60 Z'/%3E%3Cpath d='M0 0 L18 18 M120 0 L102 18 M0 120 L18 102 M120 120 L102 102'/%3E%3C/g%3E%3C/svg%3E");
  background-size: clamp(90px, 9vw, 130px);
}
:root[data-theme="dark"] .motif-bg{ opacity:.13; }

/* --------------------------- SPLIT MEDIA BLOCK --------------------------- */
.duo{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: clamp(1.6rem, 5vw, 5.5rem); align-items:center;
}
.duo--rev .duo__media{ order:2; }
@media (max-width:900px){
  .duo{ grid-template-columns:1fr; }
  .duo--rev .duo__media{ order:0; }
}
.duo__body{ display:grid; gap: var(--s-3); }

/* --------------------------- SCROLL CUE --------------------------- */
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--text-mut);
}
.scroll-cue__rail{
  width:1px; height:64px; background:var(--line); position:relative; overflow:hidden;
}
.scroll-cue__rail::after{
  content:""; position:absolute; left:0; width:1px; height:26px; background-image:var(--grad-hot);
  animation: scrollNudge 2.3s var(--e-in-out) infinite;
}

/* section-head aside alignment */
.shead__aside{ display:flex; align-items:end; justify-content:flex-end; }
@media (max-width:900px){ .shead__aside{ justify-content:flex-start; } }

/* --------------------------- SIGNATURE BLOCK --------------------------- */
/* shared by the home intro and the about story — keep it here so any page
   that uses the markup gets the styling */
.intro__sig{
  display:flex; align-items:center; gap:1rem; margin-top: var(--s-3);
}
.intro__sig .orn{ flex:none; }
.intro__sig .name{ font-family:var(--f-display); font-size:var(--t-md); }
.intro__sig .role{
  font-size:var(--t-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mut);
}