/* ══ ABOUT PAGE SPECIFIC STYLES ═════════════════════════════ */

/* HERO SPLIT */
.ah{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}

/* Left logo panel */
.al{background:var(--surface);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:400px}
.al::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(201,168,76,.08),transparent 70%)}

/* Animated border frame */
.alf{position:absolute;inset:50px;border:1px solid var(--border)}
.alf::before{content:'';position:absolute;inset:14px;border:1px solid rgba(201,168,76,.07)}
/* Animated corner accent */
.alf::after{
  content:'';position:absolute;top:-2px;left:-2px;width:30px;height:30px;
  border-top:2px solid var(--gold);border-left:2px solid var(--gold);
  opacity:0;transition:opacity 1s var(--ease) .8s,width 1s var(--ease) .8s,height 1s var(--ease) .8s;
}
.alf.vis::after{opacity:1;width:50px;height:50px}
.allab{position:absolute;left:22px;top:50%;transform:translateY(-50%) rotate(-90deg);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
.dlw{width:150px;height:150px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.dlw::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(201,168,76,.1);animation:rb 20s linear infinite}
.dlw::after{content:'';position:absolute;inset:-22px;border-radius:50%;border:1px dashed rgba(201,168,76,.05);animation:rb 35s linear infinite reverse}
@keyframes rb{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.dlw img{width:100px;height:auto;mix-blend-mode:lighten}
.yms{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center}
.ym{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 18px;border-right:1px solid var(--border)}
.ym:last-child{border-right:none}
.ymn{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);font-weight:400;
  opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ymn.vis{opacity:1;transform:none}
.yml{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Right text panel */
.ar{display:flex;flex-direction:column;justify-content:flex-end;padding:130px 60px 70px;position:relative}
.ar::before{content:'ElAlfy';position:absolute;top:80px;right:-15px;font-family:'Playfair Display',serif;font-size:110px;font-weight:700;color:rgba(201,168,76,.03);line-height:1;pointer-events:none;user-select:none}
.ar h1{font-family:'Playfair Display',serif;font-size:clamp(36px,6vw,72px);font-weight:400;line-height:1.05;color:var(--text);margin-bottom:8px}
.ar h1 em{font-style:italic;color:var(--gold-light)}
.dtitle{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:28px}
.ar p{font-size:14px;color:var(--muted);line-height:1.95;max-width:min(500px,90%);margin-bottom:16px}
.sh{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:500}
.shl{width:44px;height:1px;background:linear-gradient(to right,var(--gold),transparent);animation:spp 2s ease-in-out infinite}
@keyframes spp{0%,100%{opacity:.4}50%{opacity:1}}

/* TIMELINE */
#tl{padding:100px 60px;border-top:1px solid var(--border);position:relative}
#tl::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border);transform:translateX(-50%)}
.tlh{text-align:center;margin-bottom:70px;position:relative;z-index:1}
.tlh .ey{justify-content:center}
.tlh .ey::before{display:none}
.tll{display:flex;flex-direction:column;gap:0;position:relative;z-index:1;max-width:900px;margin:0 auto}
.tli{display:grid;grid-template-columns:1fr 60px 1fr;align-items:start;min-height:80px}
.tli:nth-child(odd) .tlc{grid-column:1;text-align:right;padding:0 34px 50px 0}
.tli:nth-child(odd) .tld{grid-column:2}
.tli:nth-child(odd) .tlb{grid-column:3}
.tli:nth-child(even) .tlb{grid-column:1}
.tli:nth-child(even) .tld{grid-column:2}
.tli:nth-child(even) .tlc{grid-column:3;text-align:left;padding:0 0 50px 34px}
.tld{display:flex;flex-direction:column;align-items:center;padding-top:4px}
.tldc{width:13px;height:13px;border-radius:50%;background:var(--black);border:2px solid rgba(201,168,76,.3);flex-shrink:0;position:relative;z-index:2;transition:background .4s,transform .4s,border-color .4s,box-shadow .4s}
.tli.vis .tldc{border-color:var(--gold)}
.tli:hover .tldc{background:var(--gold);transform:scale(1.4);box-shadow:0 0 14px rgba(201,168,76,.5)}
.tly{font-family:'Playfair Display',serif;font-size:12px;color:var(--gold);font-weight:400;margin-bottom:6px;letter-spacing:.04em}
.tlti{font-family:'Playfair Display',serif;font-size:17px;color:var(--text);font-weight:400;line-height:1.3;margin-bottom:6px}
.tlde{font-size:12px;color:var(--muted);line-height:1.8;font-weight:300}
.tlb{min-height:10px}

/* BROADCAST */
#bc{padding:90px 60px;background:var(--surface);border-top:1px solid var(--border)}
.bci{display:grid;grid-template-columns:1fr 2fr;gap:70px;align-items:start}
.bcl h2{margin-bottom:18px}
.bcl p{font-size:13px;color:var(--muted);line-height:1.9}
.bcc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bcard{padding:26px 22px;transition:border-color .3s,transform .3s;position:relative;overflow:hidden}
.bcard::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold);transition:width .5s var(--ease)}
.bcard:hover::after{width:100%}
.bname{font-family:'Playfair Display',serif;font-size:17px;color:var(--text);font-weight:400;margin-bottom:7px}
.bdesc{font-size:12px;color:var(--muted);line-height:1.75}
.btag{display:inline-block;margin-top:10px;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;border:1px solid var(--border);padding:4px 9px}

/* ARTISTS */
#art{padding:90px 60px;border-top:1px solid var(--border)}
.arth{margin-bottom:50px}
.arth p{font-size:13px;color:var(--muted);line-height:1.9;margin-top:12px;max-width:min(600px,90vw)}
.artg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.ag{padding:28px 24px;transition:background .3s}
.ag:hover{background:rgba(22,19,12,0.65)}
.agl{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:block}
.ans{display:flex;flex-direction:column;gap:7px}
.an{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.an::before{content:'';display:block;width:4px;height:4px;background:var(--gold);border-radius:50%;flex-shrink:0;opacity:.5}
.an.vis{opacity:1;transform:none}
.an:hover{color:var(--text)}

/* CLIENTS */
#cls{padding:90px 60px;background:var(--surface);border-top:1px solid var(--border)}
.clsh{margin-bottom:50px}
.clsg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cls2{padding:24px 20px;transition:border-color .3s}
.clt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cli{display:flex;flex-direction:column;gap:5px}
.cli span{font-size:12px;color:var(--muted)}

/* MEGA EVENTS */
#me{padding:90px 60px;border-top:1px solid var(--border)}
.meh{margin-bottom:50px}
.meh p{font-size:13px;color:var(--muted);line-height:1.9;margin-top:12px;max-width:min(600px,90vw)}
.mel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mei{display:flex;gap:16px;align-items:flex-start;padding:20px 18px;transition:transform .3s}
.mei:hover{transform:translateX(5px)}
.mey{font-family:'Playfair Display',serif;font-size:18px;color:var(--gold);font-weight:400;line-height:1.2;flex-shrink:0;width:46px;padding-top:2px}
.meit h4{font-family:'Playfair Display',serif;font-size:14px;color:var(--text);font-weight:400;margin-bottom:4px;line-height:1.3}
.meit p{font-size:11px;color:var(--muted);line-height:1.7}

/* PHILOSOPHY & CTA */
#ph{padding:100px 60px;text-align:center;background:var(--dark);border-top:1px solid var(--border);position:relative;overflow:hidden}
#ph::before{content:'"';position:absolute;top:-40px;left:50%;transform:translateX(-50%);font-family:'Playfair Display',serif;font-size:260px;font-weight:700;color:rgba(201,168,76,.03);line-height:1;pointer-events:none;user-select:none}
.phq{font-family:'Playfair Display',serif;font-size:clamp(20px,3.5vw,38px);font-style:italic;color:var(--text);line-height:1.55;font-weight:400;max-width:min(760px,90vw);margin:0 auto 30px;position:relative;z-index:1}
.phq::before{
  content:'"';position:absolute;left:-40px;top:-20px;
  font-size:80px;color:rgba(201,168,76,.2);font-family:'Playfair Display',serif;
  line-height:1;opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s;
}
.phq.vis::before{opacity:1;transform:translateY(0)}
.pha{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;position:relative;z-index:1}

#ctab{padding:80px 60px;text-align:center;border-top:1px solid var(--border);position:relative;overflow:hidden}
#ctab::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:450px;height:450px;background:radial-gradient(circle,rgba(201,168,76,.04),transparent 70%);pointer-events:none}
#ctab h2{margin-bottom:14px}
#ctab p{color:var(--muted);font-size:14px;max-width:min(420px,90vw);margin:0 auto 32px;line-height:1.9}

/* MEDIA QUERIES (ABOUT SPECIFIC) */
@media(max-width:960px){
  .ah{grid-template-columns:1fr;min-height:auto}
  .al{min-height:320px}.alf{inset:15px}.dlw{width:120px;height:120px}.dlw img{width:80px}
  .allab{left:0;right:0;top:auto;bottom:10px;transform:none;text-align:center;font-size:7px;letter-spacing:.25em;width:100%}
  .yms{bottom:20px}.ymn{font-size:18px}
  .ar{padding:50px 20px 55px;justify-content:center}.ar::before{display:none}.ar p{max-width:100%}
  #tl{padding:70px 20px}#tl::before{display:none}
  .tli{grid-template-columns:24px 1fr}
  .tli:nth-child(odd) .tlc,.tli:nth-child(even) .tlc{grid-column:2;text-align:left;padding:0 0 44px 18px}
  .tli:nth-child(odd) .tld,.tli:nth-child(even) .tld{grid-column:1}.tlb{display:none}
  #bc{padding:65px 20px}.bci{grid-template-columns:1fr;gap:36px}.bcc{grid-template-columns:1fr}
  #art{padding:65px 20px}.artg{grid-template-columns:1fr}
  #cls{padding:65px 20px}.clsg{grid-template-columns:1fr 1fr}
  #me{padding:65px 20px}.mel{grid-template-columns:1fr}
  #ph,#ctab{padding:70px 20px}.phq::before{display:none}
}
@media(max-width:600px){.clsg{grid-template-columns:1fr}.bcc{grid-template-columns:1fr}.yms{display:none}.al{min-height:280px}}