/* ============================================================
   Vikas Collectives — Design System v5
   Theme matched to reference design:
   ivory base · midnight-blue ink · brass gold · saffron accent
   Type: Marcellus (display) + Mulish (body)
   ============================================================ */
:root{
  --ivory:  #FDFBF6;
  --tint:   #F2EFE6;
  --ink:    #1C2240;
  --ink-2:  #262D52;
  --brass:  #B8862B;
  --gold-l: #D9A94E;
  --saffron:#E07B1F;
  --muted:  #5A5F74;
  --line:   #E8E3D4;
  --radius: 14px;
  --max: 1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Mulish',system-ui,-apple-system,sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.65;
  font-size:1.02rem;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);width:92%;margin:0 auto;padding:0}

/* ---------- Type ---------- */
h1,h2,h3,.display{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.15}
h1{font-size:clamp(2.4rem,5.6vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:.45em}
h3{font-size:1.3rem;margin-bottom:.35em}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:'Mulish',sans-serif;font-size:.72rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--saffron);
  margin-bottom:1rem;
}
.eyebrow::after{content:"";flex:0 0 56px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brass),var(--saffron))}
.center .eyebrow,.hero .eyebrow,.page-hero .eyebrow{justify-content:center}
.center .eyebrow::before,.hero .eyebrow::before,.page-hero .eyebrow::before{
  content:"";flex:0 0 56px;height:2px;border-radius:2px;
  background:linear-gradient(270deg,var(--brass),var(--saffron))}
.lead{font-size:1.12rem;color:var(--muted)}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(253,251,246,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:1rem}
.brand{font-family:'Marcellus',serif;font-size:1.3rem;color:var(--ink);text-decoration:none}
.brand em{color:var(--brass);font-style:normal}
nav.menu{display:flex;gap:1.5rem}
nav.menu a{
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:6px 2px;position:relative;transition:color .2s;
}
nav.menu a:hover,nav.menu a:focus-visible{color:var(--saffron)}
nav.menu a[aria-current="page"]{color:var(--saffron)}
@media (min-width:821px){
  nav.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
    border-radius:2px;background:linear-gradient(90deg,var(--brass),var(--saffron));transition:width .25s ease}
  nav.menu a:hover::after,nav.menu a[aria-current="page"]::after{width:100%}
}
.nav-toggle{display:none;background:none;border:1px solid var(--brass);color:var(--ink);
  font-size:1.2rem;padding:4px 12px;border-radius:8px;cursor:pointer}
@media (max-width:820px){
  .nav-toggle{display:block}
  nav.menu{
    position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ivory);border-bottom:1px solid var(--line);display:none;
    box-shadow:0 18px 30px -18px rgba(28,34,64,.25);
  }
  nav.menu.open{display:flex}
  nav.menu a{padding:14px 24px;border-bottom:1px solid var(--line)}
}

/* Text resize pill */
.font-controls{display:flex;border:1px solid var(--brass);border-radius:999px;overflow:hidden;margin-left:12px}
.font-controls button{
  background:transparent;border:none;cursor:pointer;color:var(--ink);
  font-family:'Mulish',sans-serif;font-weight:800;line-height:1;
  padding:6px 11px;transition:background .2s,color .2s;
}
.font-controls button + button{border-left:1px solid var(--line)}
.font-controls button:hover,.font-controls button:focus-visible{
  background:linear-gradient(135deg,var(--brass),var(--saffron));color:#fff}
.font-controls .fa-sm{font-size:.7rem}.font-controls .fa-md{font-size:.85rem}.font-controls .fa-lg{font-size:1rem}
@media (max-width:480px){.font-controls{margin-left:4px}.font-controls button{padding:5px 8px}}

/* ---------- Hero (light ivory) ---------- */
.hero{
  background:
    radial-gradient(ellipse 60% 55% at 78% 20%, rgba(224,123,31,.10), transparent 65%),
    radial-gradient(ellipse 55% 60% at 15% 85%, rgba(184,134,43,.10), transparent 60%),
    var(--ivory);
  color:var(--ink);
  text-align:center;
  padding:96px 24px 84px;
  position:relative;overflow:hidden;
}
.hero h1{color:var(--ink)}
.hero h1 .gold{
  background:linear-gradient(120deg,var(--brass),var(--saffron));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .tag{margin:1.3rem auto 0;max-width:620px;font-size:1.12rem;color:var(--muted)}
.hero .cta-row{margin-top:2.2rem;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero.split{text-align:left;padding:56px 24px 54px}
.hero-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center}
.hero.split .eyebrow{justify-content:flex-start}
.hero.split .eyebrow::before{display:none}
.hero.split .cta-row{justify-content:flex-start}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero.split{text-align:center}
  .hero.split .cta-row,.hero.split .eyebrow{justify-content:center}
  .hero.split .eyebrow::before{display:block;content:"";flex:0 0 56px;height:2px;border-radius:2px;background:linear-gradient(270deg,var(--brass),var(--saffron))}
}
.hero-photo{position:relative}
.hero-photo{display:flex;justify-content:center}
.hero-photo img{
  width:min(100%,320px);border-radius:var(--radius);
  box-shadow:0 22px 50px -20px rgba(28,34,64,.45);
  aspect-ratio:4/5;object-fit:cover;object-position:top;
}
@media (max-width:860px){.hero-photo img{width:min(80%,270px)}}
.hero-photo::after{
  content:"";position:absolute;inset:-13px 13px 13px -13px;
  border:1.5px solid var(--brass);border-radius:var(--radius);z-index:-1;opacity:.55;
}

/* Hero entrance animation */
.hero h1,.hero .eyebrow,.hero .tag,.hero .cta-row,.hero-photo{
  opacity:0;transform:translateY(18px);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.18s}
.hero .tag{animation-delay:.4s}
.hero .cta-row{animation-delay:.58s}
.hero-photo{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:13px 30px;text-decoration:none;
  font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  border-radius:999px;transition:filter .2s,background .2s,color .2s;
  position:relative;overflow:hidden;border:1.5px solid transparent;
}
.btn.solid{background:linear-gradient(135deg,var(--brass),var(--saffron));color:#fff}
.btn.solid:hover,.btn.solid:focus-visible{filter:brightness(1.08)}
.btn.ghost{border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);color:#fff}
.dark .btn.ghost, .page-hero .btn.ghost{border-color:var(--gold-l);color:var(--gold-l)}
.dark .btn.ghost:hover{background:var(--gold-l);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
.btn.solid::after{
  content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .5s ease;
}
.btn.solid:hover::after{left:130%}

/* ---------- Music-note divider ---------- */
.wave{display:flex;align-items:center;justify-content:center;width:100%;height:64px;background:var(--ivory)}
.note-divider{display:flex;align-items:center;gap:20px;width:min(560px,80%)}
.note-divider .line{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brass),var(--saffron))}
.note-divider .line:last-child{background:linear-gradient(270deg,transparent,var(--brass),var(--saffron))}
.note-divider .notes{display:flex;gap:14px;font-family:'Marcellus',serif;color:var(--brass)}
.note-divider .notes span{font-size:1.5rem;line-height:1;animation:noteFloat 2.6s ease-in-out infinite}
.note-divider .notes span:nth-child(2){font-size:1.9rem;color:var(--saffron);animation-delay:.4s}
.note-divider .notes span:nth-child(3){animation-delay:.8s}
@keyframes noteFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.page-hero + .wave{background:var(--ink)}
.page-hero + .wave .notes{color:var(--gold-l)}
.page-hero + .wave .notes span:nth-child(2){color:var(--saffron)}

/* ---------- Sections ---------- */
section.block{padding:78px 0}
section.block.dark{background:var(--ink);color:#fff}
section.block.dark h2,section.block.dark h3{color:#fff}
section.block.dark .lead{color:#C9CDE0}
section.block.alt{background:var(--tint)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
@media (max-width:820px){.two-col{grid-template-columns:1fr;gap:34px}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:2rem}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;box-shadow:0 6px 18px -12px rgba(28,34,64,.18);
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(28,34,64,.3)}
.card h3{color:var(--ink)}
.card p{font-size:.97rem;color:var(--muted);margin-top:.4rem}
.card a{color:var(--brass);font-weight:700}
.dark .card{background:var(--ink-2);border-color:rgba(217,169,78,.3);color:#fff}
.dark .card p{color:#C9CDE0}
.dark .card:hover{box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}

/* Instruments chips */
.instruments{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem}
.instruments span{
  border:1.5px solid var(--brass);color:var(--brass);border-radius:999px;
  padding:7px 18px;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s,color .25s;
}
.instruments span:hover{background:linear-gradient(135deg,var(--brass),var(--saffron));color:#fff;border-color:transparent}
.dark .instruments span{color:var(--gold-l);border-color:var(--gold-l)}
.dark .instruments span:hover{color:var(--ink);background:var(--gold-l)}

/* Testimonials */
.quote{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:var(--radius);padding:28px 32px;margin-bottom:24px;position:relative;
  box-shadow:0 6px 18px -12px rgba(28,34,64,.15);
  transition:transform .3s ease,box-shadow .3s ease;
}
.quote:hover{transform:translateX(6px);box-shadow:0 16px 34px -18px rgba(28,34,64,.3)}
.quote::before{
  content:"\201C";position:absolute;top:4px;right:20px;
  font-family:'Marcellus',serif;font-size:4.2rem;line-height:1;
  color:var(--saffron);opacity:.18;
}
.quote p{font-size:1.03rem;font-style:italic;color:var(--ink)}
.quote cite{display:block;margin-top:14px;font-style:normal;font-weight:800;font-size:.9rem;color:var(--ink)}
.quote cite small{display:block;font-weight:600;color:var(--muted)}

/* Video */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:2rem}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 14px 34px -18px rgba(28,34,64,.4)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* FAQ */
details.faq{border-bottom:1px solid var(--line);padding:18px 4px}
details.faq summary{
  cursor:pointer;font-weight:800;font-size:1.02rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink);
}
details.faq summary::after{content:"+";color:var(--saffron);font-size:1.4rem;font-family:'Marcellus',serif}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin-top:12px;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:2rem}
.contact-card{
  border:1px solid rgba(217,169,78,.35);border-radius:var(--radius);
  padding:26px;background:var(--ink-2);
  transition:transform .3s,border-color .3s;
}
.contact-card:hover{transform:translateY(-5px);border-color:var(--gold-l)}
.contact-card h3{color:var(--gold-l)}
.contact-card a{color:#fff;text-decoration:none;border-bottom:1px solid var(--brass)}
.contact-card a:hover{color:var(--gold-l)}

/* Photo frames */
.photo-frame{position:relative}
.photo-frame img{width:100%;border-radius:var(--radius);
  box-shadow:0 20px 44px -22px rgba(28,34,64,.45);object-fit:cover}
.photo-frame::after{content:"";position:absolute;inset:-12px 12px 12px -12px;
  border:1.5px solid var(--brass);border-radius:var(--radius);z-index:-1;opacity:.55}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:2rem}
.gallery-grid figure{margin:0;position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery-grid figure:hover img{transform:scale(1.05)}
.gallery-grid .placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  color:var(--muted);border:1.5px dashed var(--brass);border-radius:var(--radius);
  text-align:center;padding:16px;font-size:.9rem;font-weight:600;
}
.gallery-grid .placeholder .note-icon{font-family:'Marcellus',serif;font-size:2.2rem;color:var(--saffron);opacity:.7}
.gallery-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(28,34,64,.88));
  color:#fff;font-size:.82rem;font-weight:600;padding:22px 12px 10px;
}

/* Stats */
.stat .display{color:var(--gold-l)}

/* ---------- Footer ---------- */
footer.site{
  background:var(--ink);color:#C9CDE0;
  padding:54px 0 32px;font-size:.94rem;
}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px}
@media (max-width:820px){footer .cols{grid-template-columns:1fr}}
footer h4{font-family:'Marcellus',serif;color:#fff;margin-bottom:.8rem;font-size:1.1rem}
footer a{color:#C9CDE0;text-decoration:none}
footer a:hover{color:var(--gold-l)}
footer ul{list-style:none}
footer li{margin-bottom:.45rem}
.footnote{margin-top:38px;padding-top:20px;border-top:1px solid rgba(217,169,78,.2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.84rem;color:#9AA0BC}

/* ---------- Inner page hero (midnight) ---------- */
.page-hero{
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(184,134,43,.22), transparent 60%),
    var(--ink);
  color:#fff;padding:74px 24px 60px;text-align:center;
}
.page-hero h1{color:#fff}
.page-hero p{max-width:620px;margin:1.1rem auto 0;color:#C9CDE0}
.page-hero + .wave{background:var(--ink)}


/* ---------- Utility ---------- */
.center{text-align:center}
.mt-2{margin-top:2rem}
ul.check{list-style:none;margin-top:1rem}
ul.check li{padding-left:1.6em;position:relative;margin-bottom:.6rem}
ul.check li::before{content:"\266A";position:absolute;left:0;color:var(--saffron);font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:var(--saffron);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}
::selection{background:var(--saffron);color:#fff}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Testimonial Icon */
.testimonial-icon {
    border-radius: 50%;
    width: 75px;
    height: 75px;
}

/* Footer social icons */
.social-icons{display:flex;gap:12px;margin-top:.5rem}
.social-icons a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(217,169,78,.5);color:#C9CDE0;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.social-icons a:hover,.social-icons a:focus-visible{
  background:linear-gradient(135deg,var(--brass),var(--saffron));
  color:#fff;border-color:transparent;transform:translateY(-3px);
}

footer .cols li{display:flex;align-items:center;flex-wrap:wrap}
footer .cols li svg{flex:0 0 auto}