:root { --bg:#fcfbfd; --alt:#f6f1f7; --panel:#ffffff; --text:#1d1a20; --muted:#5f5964; --pink:#d15fd3; --teal:#5fbed3; --gold:#a63aa9; --gold-light:#f2b9f3; --line:#ece2ee; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body { font-family:'Jost',system-ui,sans-serif; font-weight:400; background:var(--bg); color:var(--text); line-height:1.65; }
  h1,h2,h3 { font-family:'Jost',sans-serif; font-weight:400; letter-spacing:-.01em; }
  a { color:var(--gold); text-decoration:none; }
  .wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
  section { padding:96px 0; }
  .eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; display:inline-flex; align-items:center; gap:14px; }
  .eyebrow::before { content:''; width:34px; height:1px; background:currentColor; }
  .hero .eyebrow::after, .credits .eyebrow::after { content:''; width:34px; height:1px; background:currentColor; }
  h2 { font-size:2.5rem; line-height:1.15; margin:8px 0 20px; }
  .lead { color:var(--muted); max-width:680px; font-size:1.08rem; }

  /* Nav */
  nav { position:fixed; inset:0 0 auto 0; z-index:10; background:rgba(251,249,245,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  nav .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; }
  .logo { font-family:'Jost',sans-serif; font-size:1.05rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text); }
  .logo span { color:var(--gold); }
  nav ul { list-style:none; display:flex; gap:28px; }
  nav ul a { color:var(--text); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
  nav ul a:hover { color:var(--gold); }

  /* Hero */
  .hero { min-height:100vh; display:flex; align-items:center; text-align:center; padding:110px 0 70px; color:#fff;
    background:radial-gradient(ellipse at top, rgba(209,95,211,.22), transparent 60%),
               linear-gradient(rgba(14,14,16,.62),rgba(14,14,16,.94)), url('images/summerstage.jpg') center 25%/cover no-repeat; }
  .hero h1 em { font-style:italic; color:var(--gold-light); }
  .hero h1 { font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.12; margin:16px 0 20px; }
  .hero .eyebrow { color:var(--gold-light); }
  .hero p { color:#eeeae2; font-size:1.2rem; max-width:620px; margin:0 auto 36px; }
  .btn { display:inline-block; padding:15px 34px; border-radius:2px; letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; transition:.2s; }
  .btn-gold { background:var(--pink); color:#1d1a20; }
  .btn-gold:hover { background:var(--teal); }
  .btn-line { border:1px solid var(--pink); color:var(--gold); margin-left:12px; }
  .btn-line:hover { background:rgba(160,124,54,.08); }
  .hero .btn-line { border-color:var(--teal); color:#bfeaf3; }
  .hero .btn-line:hover { background:rgba(255,255,255,.08); }

  /* Services */
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin-top:44px; }
  .card { background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:34px 30px; }
  .card .icon { font-size:0; line-height:0; width:40px; height:1px; background:var(--gold); margin:4px 0 22px; }
  .card h3 { font-size:1.3rem; line-height:1.25; margin-bottom:8px; }
  .card p { color:var(--muted); font-size:.95rem; }

  /* Gallery */
  #gallery { background:var(--alt); }
  .gallery { display:grid; grid-auto-flow:dense; grid-template-columns:repeat(3,1fr); grid-auto-rows:260px; gap:14px; margin-top:44px; }
  @media (max-width:760px) { .gallery { grid-template-columns:1fr 1fr; grid-auto-rows:180px; } }
  .gallery figure { border-radius:2px; overflow:hidden; background:#e9e3d8; cursor:pointer; position:relative; }
  .gallery figure.wide { grid-column:span 2; }
  .gallery img { width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform .4s; }
  .gallery figure:hover img { transform:scale(1.05); }
  .placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#9a938a; font-size:.9rem; border:2px dashed var(--line); border-radius:10px; }


  /* Featured */
  .feature { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:56px; }
  .feature.reverse .feature-photo { order:2; }
  .feature-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .feature-pair .feature-photo img { height:520px; max-height:none; }
  @media (max-width:760px) { .feature-pair .feature-photo img { height:300px; } }
  .feature-title { font-size:2.1rem; margin:6px 0 10px; }
  .stat { font-size:1.1rem; color:var(--text); margin-bottom:14px; }
  .stat span { font-family:'Jost',sans-serif; font-size:2.6rem; color:var(--gold); margin-right:6px; }
  .feature-photo { border-radius:2px; overflow:hidden; box-shadow:0 18px 40px rgba(120,40,130,.18); cursor:pointer; }
  .feature-photo img { width:100%; display:block; max-height:640px; object-fit:cover; }
  @media (max-width:760px) { .feature { grid-template-columns:1fr; } .feature.reverse .feature-photo { order:0; } }

  /* Bio */
  #bio { background:var(--alt); }
  .bio { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; }
  .bio-photos { display:grid; gap:16px; }
  .bio-photo { aspect-ratio:4/5; border-radius:2px; overflow:hidden; background:#e9e3d8; }
  .bio-photo img { width:100%; height:100%; object-fit:cover; }
  @media (max-width:760px) { .bio { grid-template-columns:1fr; } .bio-photos { grid-template-columns:1fr 1fr; } }

  .bio-text { color:var(--muted); font-size:1.05rem; margin-bottom:16px; max-width:640px; }
  .bio-text em { color:var(--text); font-style:italic; }

  /* Credits */
  .credits { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0; text-align:center; background:var(--panel); }
  .credits .eyebrow { margin-bottom:12px; }
  .credits p { font-family:'Jost',sans-serif; font-size:1.05rem; letter-spacing:.02em; color:var(--text); line-height:2; }
  .credits p { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 34px; }
  .credits .ci { white-space:nowrap; }
  .credits .dot { color:var(--gold); margin:0 6px; }

  /* Process */
  .steps { counter-reset:step; }
  .steps .card::before { counter-increment:step; content:counter(step); display:block; font-family:'Jost',sans-serif; font-size:2.1rem; color:var(--gold); margin-bottom:6px; }

  /* Contact */
  #contact { background:var(--alt); }
  .contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:48px; margin-top:20px; }
  form { display:grid; gap:14px; }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  input, select, textarea { width:100%; padding:14px 16px; border-radius:2px; border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit; }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal); }
  textarea { min-height:140px; resize:vertical; }
  button { border:0; cursor:pointer; font:inherit; }
  .contact-info p { margin-bottom:14px; color:var(--muted); }
  .contact-info strong { color:var(--text); display:block; }

  footer { border-top:1px solid var(--line); padding:28px 0; text-align:center; color:#8a8378; font-size:.85rem; }



  /* Compact services list */
  .svc-list { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 40px; margin-top:36px; }
  .svc-list h3 { font-size:1.2rem; margin-bottom:4px; padding-top:14px; border-top:2px solid var(--teal); }
  .svc-list p { color:var(--muted); font-size:.95rem; }
  .svc-note { margin-top:36px; color:var(--muted); max-width:720px; }
  #services, #gallery, #bio, #contact, #featured { padding:80px 0; }
  .feature { margin-top:0; }
  .feature-pair .feature-photo img { height:440px; }
  .bio-photos { grid-template-columns:1fr 1fr; }
  .bio { grid-template-columns:420px 1fr; }
  @media (max-width:760px) {
    .svc-list { grid-template-columns:1fr 1fr; gap:20px 18px; margin-top:24px; }
    .svc-list h3 { font-size:1.02rem; } .svc-list p { font-size:.85rem; }
    #services, #gallery, #bio, #contact, #featured { padding:56px 0; }
    h2 { font-size:2rem; }
    .hero { min-height:auto; padding:120px 0 64px; }
    .feature { gap:28px; }
    .feature-pair .feature-photo img { height:260px; }
    .bio { gap:28px; grid-template-columns:1fr; }
    .hero .eyebrow::before, .hero .eyebrow::after { display:none; }
    .credits { padding:24px 0; } .credits p { font-size:.98rem; gap:2px 20px; }
  }

  /* Dancing music notes */
  section, .credits { position:relative; }
  section > .wrap, .credits > .wrap { position:relative; z-index:1; }
  .note { position:absolute; z-index:0; pointer-events:none; color:var(--gold); opacity:.5; font-family:'Jost',sans-serif; line-height:1;
          animation:dance 6s ease-in-out infinite; }
  .hero .note { color:var(--gold-light); opacity:.75; }
  @keyframes dance {
    0%,100% { transform:translateY(0) rotate(-8deg); }
    25%     { transform:translateY(-14px) rotate(6deg); }
    50%     { transform:translateY(-4px) rotate(-3deg); }
    75%     { transform:translateY(-18px) rotate(10deg); }
  }
  @media (max-width:1000px) { .note.m-hide { display:none; } }
  @media (max-width:760px) { .note { display:none; } }
  @media (prefers-reduced-motion: reduce) { .note { animation:none; } }

  /* Lightbox */
  .lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:50; }
  .lightbox.open { display:flex; }
  .lightbox img { max-width:92vw; max-height:88vh; border-radius:8px; }

  @media (max-width:760px) {
    nav ul li { display:none; }
    nav ul li:last-child { display:block; }
    nav ul li:last-child a { color:var(--gold); border:1px solid var(--gold); padding:6px 14px; border-radius:2px; }
    .contact-grid, .row { grid-template-columns:1fr; }
    .btn-line { margin:12px 0 0; }
    section { padding:72px 0; }
  }

  /* Tabs */
  nav ul a.active { color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:4px; }
  nav ul li.cta a { color:#1d1a20; background:var(--pink); padding:9px 16px; border-radius:2px; }
  nav ul li.cta a.active { border-bottom:0; padding-bottom:9px; background:var(--teal); }
  @media (max-width:760px) {
    nav .wrap { flex-direction:column; height:auto; padding-top:12px; padding-bottom:10px; gap:10px; }
    nav ul { gap:16px; overflow-x:auto; max-width:100%; }
    nav ul li, nav ul li:last-child { display:block; white-space:nowrap; }
    nav ul li:last-child a { border:0; padding:6px 10px; color:#1d1a20; }
    nav ul a { font-size:.66rem; letter-spacing:.14em; }
    .page-head { padding-top:140px !important; }
    .hero { padding-top:150px !important; }
  }
  /* Inner page header */
  .page-head { padding:150px 0 40px; background:var(--alt); border-bottom:1px solid var(--line); }
  .page-head h1 { font-size:3rem; line-height:1.1; margin-top:10px; }
  .page-head p { color:var(--muted); max-width:640px; margin-top:12px; font-size:1.08rem; }
  .mission { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal); padding:34px 36px; margin-top:12px; }
  .mission h2 { font-size:2rem; margin-top:0; }
  .mission p { color:var(--muted); margin-top:10px; font-size:1.05rem; }
  .more { display:inline-block; margin-top:22px; letter-spacing:.18em; text-transform:uppercase; font-size:.75rem; }
  form label { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px; }
  .book-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:56px; }
  @media (max-width:760px) { .book-grid { grid-template-columns:1fr; gap:28px; } .page-head h1 { font-size:2.2rem; } }
  .note.teal { color:var(--teal); }
  .hero .note.teal { color:#9fdcea; }
  .hero .note { color:var(--gold-light); }
  .eyebrow::before, .eyebrow::after { background:var(--teal) !important; }
  .photo-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
  .photo-pair img { width:100%; height:460px; object-fit:cover; display:block; cursor:pointer; border-radius:2px; }
  .photo-pair figcaption { font-size:.85rem; color:var(--muted); margin-top:10px; letter-spacing:.04em; }
  .resume { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:32px; }
  .resume h3 { font-size:1.1rem; padding-top:12px; border-top:2px solid var(--teal); margin-bottom:10px; }
  .resume ul { list-style:none; color:var(--muted); line-height:1.9; }
  @media (max-width:760px) { .photo-pair img { height:240px; } .resume { grid-template-columns:1fr 1fr; gap:24px; } }

  /* Display font: Dela Gothic One for headings and logo */
  h1, h2, .logo { font-family:'Dela Gothic One',sans-serif !important; font-weight:400; letter-spacing:0; }
  h3 { font-family:'Jost',sans-serif; font-weight:500; }
  .logo { font-size:1.05rem !important; letter-spacing:.06em !important; text-transform:none !important; }
  .hero h1 { font-size:clamp(2.2rem,5.4vw,4rem) !important; line-height:1.15 !important; }
  .hero h1 em { font-style:normal !important; }
  h2 { font-size:2.1rem !important; line-height:1.2 !important; }
  .page-head h1 { font-size:2.6rem !important; }
  .mission h2 { font-size:1.7rem !important; }
  @media (max-width:760px) { h2 { font-size:1.6rem !important; } .page-head h1 { font-size:2rem !important; } .hero h1 { font-size:2rem !important; } }
  .steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:22px; }
  .steps-row > div { border-top:2px solid var(--teal); padding-top:14px; }
  .steps-row span { font-family:'Dela Gothic One',sans-serif; font-size:1.6rem; color:var(--pink); line-height:1; }
  .steps-row h3 { font-size:1.05rem; margin:8px 0 4px; }
  .steps-row p { color:var(--muted); font-size:.92rem; }
  @media (max-width:760px) { .steps-row { grid-template-columns:1fr 1fr; gap:20px 18px; } .steps-row h3 { font-size:.98rem; } .steps-row p { font-size:.85rem; } }
  .hero h1 .bar { color:var(--teal); font-family:"Jost",sans-serif; font-weight:300; margin:0 .15em; }
  .hero h1 em { white-space:nowrap; }
  @media (max-width:760px) { .hero h1 em { font-size:1.45rem; } }