:root{
    --brand-blue:#1CA3E0;
    --brand-blue-dark:#0E7BAE;
    --brand-pink:#E6127E;
    --brand-pink-dark:#B90E64;
    --ink:#20222b;
    --paper:#fffdfd;
    --soft:#fdf3f8;
  }

  body{
    font-family:'Poppins', sans-serif;
    color:var(--ink);
    background:var(--paper);
  }
  h1,h2,h3,.font-display{
    font-family:'Playfair Display', serif;
  }
  a{ text-decoration:none; }

  /* ---------- Navbar ---------- */
  .navbar-brand-text{
    font-family:'Playfair Display', serif;
    font-weight:800;
    font-size:1.5rem;
  }
  .navbar-brand-text .pic{ color:var(--brand-pink); }
  .navbar-brand-text .wed{ color:var(--brand-blue); }
  .navbar{ border-bottom:1px solid #f1e3ec; }
  .nav-link{ font-weight:500; color:var(--ink) !important; }
  .nav-link:hover{ color:var(--brand-pink) !important; }
  .btn-brand{
    background:linear-gradient(90deg,var(--brand-pink),var(--brand-blue));
    color:#fff; border:none; font-weight:600;
  }
  .btn-brand:hover{ opacity:.9; color:#fff; }

  /* ---------- Hero ---------- */
  .hero{
    background:radial-gradient(circle at 15% 20%, rgba(28,163,224,.10), transparent 45%),
               radial-gradient(circle at 85% 15%, rgba(230,18,126,.10), transparent 45%),
               var(--soft);
    padding:5rem 0 4rem;
    border-bottom:1px solid #f1e3ec;
  }
  .eyebrow{
    letter-spacing:.12em; text-transform:uppercase; font-size:.8rem;
    font-weight:600; color:var(--brand-pink);
  }
  .hero h1{
    font-weight:800; font-size:2.6rem; line-height:1.15;
  }
  .hero h1 span{ color:var(--brand-blue); }

  /* ---------- Section labels ---------- */
  .section-label{
    display:inline-block; font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase; font-weight:700; color:var(--brand-blue-dark);
    margin-bottom:.5rem;
  }

  /* ---------- TOC ---------- */
  .toc{
    background:#fff; border:1px solid #f1e3ec; border-radius:.9rem;
    padding:1.5rem 1.75rem;
  }
  .toc a{ color:var(--ink); font-weight:500; }
  .toc a:hover{ color:var(--brand-pink); }
  .toc-num{
    color:var(--brand-pink); font-weight:700; margin-right:.4rem;
  }

  /* ---------- Photographer cards ---------- */
  .studio-card{
    border:1px solid #f1e3ec; border-radius:1rem; padding:2rem;
    background:#fff; transition:box-shadow .2s ease, transform .2s ease;
  }
  .studio-card:hover{
    box-shadow:0 12px 30px rgba(230,18,126,.08);
    transform:translateY(-3px);
  }
  .studio-card.featured{
    border:2px solid var(--brand-pink);
    background:linear-gradient(180deg,#fff, var(--soft));
    position:relative;
  }
  .featured-ribbon{
    position:absolute; top:-12px; right:1.5rem;
    background:linear-gradient(90deg,var(--brand-pink),var(--brand-blue));
    color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; padding:.3rem .8rem; border-radius:2rem;
  }
  .rank-badge{
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,var(--brand-pink),var(--brand-blue));
    color:#fff; font-family:'Playfair Display',serif; font-weight:800;
    font-size:1.25rem; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .studio-name{ font-weight:700; margin-bottom:.15rem; }
  .studio-loc{ color:#8a8a94; font-size:.85rem; margin-bottom:.75rem; }
  .tag{
    display:inline-block; font-size:.72rem; font-weight:600;
    padding:.28rem .65rem; border-radius:2rem; margin:0 .35rem .35rem 0;
  }
  .tag-pink{ background:rgba(230,18,126,.08); color:var(--brand-pink-dark); }
  .tag-blue{ background:rgba(28,163,224,.10); color:var(--brand-blue-dark); }

  /* ---------- CTA ---------- */
  .cta-section{
    background:linear-gradient(120deg,var(--brand-blue-dark),var(--brand-blue) 45%,var(--brand-pink) 120%);
    border-radius:1.25rem; color:#fff; padding:3rem;
  }
  .cta-section h2{ font-weight:700; }

  /* ---------- FAQ ---------- */
  .accordion-button:not(.collapsed){
    color:var(--brand-pink-dark); background:var(--soft);
  }
  .accordion-button:focus{ box-shadow:none; }

  footer{
    background:#181820; color:#c9c9d3; padding:3rem 0 1.5rem;
  }
  footer a{ color:#e7e7ef; }
  footer a:hover{ color:var(--brand-pink); }
  .footer-brand .pic{ color:var(--brand-pink); }
  .footer-brand .wed{ color:var(--brand-blue); }

  @media (max-width:576px){
    .hero h1{ font-size:2rem; }
    .cta-section{ padding:2rem; }
  }