/* =====================================================================
   VICTORIAN PUBLISHING HOUSE — SERVICE PAGE TEMPLATE STYLES (vps-)
   Loaded only on service pages (after header-premium.css + premium-site.css).
   Palette tokens (--vp-*) come from header-premium.css.
   ===================================================================== */

.vps-section-title{
  font-family:Oswald,sans-serif; color:var(--vp-green); font-weight:600;
  font-size:clamp(28px,3.2vw,46px); line-height:1.12; margin:0 0 16px; letter-spacing:.3px;
}
.vps-section-title em{
  font-family:"Playfair Display",Georgia,serif; font-style:italic; font-weight:600;
  background:linear-gradient(135deg,var(--vp-gold-deep),var(--vp-copper) 55%,var(--vp-gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--vp-copper);
}
.vps-section-title--light{ color:var(--vp-ivory); }
.vps-section-title--light em{
  background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold) 55%,var(--vp-gold-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--vp-gold-light);
}
.vps-lead{ color:#5d4f3b; font-size:16px; line-height:1.9; margin:0 0 22px; }
.vps-head{ max-width:760px; margin:0 auto 46px; }
.vps-head-sub{ color:#5d4f3b; line-height:1.8; margin:6px auto 0; max-width:680px; }

/* ---------- Eyebrows ---------- */
.vps-eyebrow{
  display:inline-flex; align-items:center; gap:12px; font-family:Oswald,sans-serif;
  text-transform:uppercase; letter-spacing:2.5px; font-size:14px; font-weight:600; margin-bottom:14px;
}
.vps-eyebrow--gold{ color:var(--vp-gold-light); }
.vps-eyebrow--copper{ color:var(--vp-copper); }
.vps-eyebrow--center{ justify-content:center; }
.vps-eyebrow--center::before,.vps-eyebrow--center::after{ content:""; width:40px; height:2px; background:linear-gradient(90deg,transparent,var(--vp-gold)); }
.vps-eyebrow--center::after{ background:linear-gradient(90deg,var(--vp-gold),transparent); }

/* ---------- Buttons ---------- */
.vps-btn{
  display:inline-flex; align-items:center; gap:10px; font-family:Oswald,sans-serif;
  text-transform:uppercase; letter-spacing:1px; font-size:14px; font-weight:600;
  padding:14px 30px; border-radius:50px; cursor:pointer; transition:all .35s ease; border:1.5px solid transparent;
}
.vps-btn--gold{
  background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold) 55%,var(--vp-gold-deep));
  color:var(--vp-green-deep); box-shadow:0 10px 26px rgba(180,108,41,.32); border-color:rgba(255,255,255,.35);
}
.vps-btn--gold:hover{ transform:translateY(-2px); color:var(--vp-green-deep); box-shadow:0 16px 34px rgba(180,108,41,.45); }
.vps-btn--ghost-light{ background:transparent; border-color:var(--vp-gold); color:var(--vp-ivory); }
.vps-btn--ghost-light:hover{ background:var(--vp-gold); color:var(--vp-green-deep); transform:translateY(-2px); }
.vps-btn--ghost{ background:transparent; border-color:var(--vp-green); color:var(--vp-green); }
.vps-btn--ghost:hover{ background:var(--vp-green); color:#fff; transform:translateY(-2px); }

/* =====================================================================
   1. HERO
   ===================================================================== */
.vps-hero{
  position:relative; background-size:cover; background-position:center; overflow:hidden;
  padding:120px 0 110px;
}
.vps-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(29,39,19,.95) 0%, rgba(41,54,26,.88) 50%, rgba(180,108,41,.55) 100%);
}
.vps-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,var(--vp-gold),transparent); opacity:.7; }
.vps-hero .container{ position:relative; z-index:2; }
.vps-hero-inner{ max-width:760px; }
.vps-hero-motif{ position:absolute; top:18%; right:8%; font-size:clamp(40px,6vw,90px); color:rgba(201,162,75,.16); z-index:1; }
.vps-hero-title{
  font-family:Oswald,sans-serif; color:var(--vp-ivory); font-weight:600;
  font-size:clamp(36px,5vw,64px); line-height:1.05; letter-spacing:.5px; margin:0 0 18px; text-shadow:0 6px 30px rgba(0,0,0,.4);
}
.vps-hero-title em{
  font-family:"Playfair Display",Georgia,serif; font-style:italic; font-weight:600; text-transform:none;
  background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold) 55%,var(--vp-gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--vp-gold-light);
}
.vps-hero-text{ color:#ece4d3; font-size:17px; line-height:1.8; max-width:620px; margin:0 0 26px; }
.vps-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* =====================================================================
   3 & 6. FOLDS
   ===================================================================== */
.vps-fold .vps-fold-img{ position:relative; }
.vps-fold .vps-fold-img img{ width:100%; border-radius:18px; box-shadow:0 26px 60px rgba(41,54,26,.18); }
.vps-fold .vps-fold-img::after{
  content:""; position:absolute; right:-14px; bottom:-14px; width:120px; height:120px; z-index:-1;
  border-right:3px solid var(--vp-gold); border-bottom:3px solid var(--vp-gold); border-radius:0 0 18px 0; opacity:.7;
}
.vps-points{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.vps-points li{ display:flex; align-items:flex-start; gap:12px; color:#4e4231; line-height:1.6; }
.vps-points li i{ color:var(--vp-gold-deep); font-size:18px; margin-top:2px; flex:0 0 auto; }

/* =====================================================================
   4. PROCESS STEPS
   ===================================================================== */
.vps-process{ background:linear-gradient(180deg,#fffdf8 0%, #f6efe1 100%); }
.vps-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.vps-step{
  position:relative; background:#fff; border:1px solid rgba(201,162,75,.22); border-radius:16px;
  padding:34px 22px 26px; text-align:center; box-shadow:0 12px 30px rgba(41,54,26,.07);
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.vps-step:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(41,54,26,.16); border-color:rgba(201,162,75,.5); }
.vps-step-num{
  position:absolute; top:14px; right:18px; font-family:Oswald,sans-serif; font-weight:700;
  font-size:30px; color:rgba(201,162,75,.30); line-height:1;
}
.vps-step-ic{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--vp-green-deep);
  background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold-deep));
  box-shadow:0 8px 18px rgba(180,108,41,.3);
}
.vps-step-title{ font-family:Oswald,sans-serif; font-size:18px; color:var(--vp-green); margin:0 0 8px; }
.vps-step-text{ color:#5d4f3b; font-size:14.5px; line-height:1.65; margin:0; }

/* =====================================================================
   5 & 11. CTA BAND
   ===================================================================== */
.vps-cta{ position:relative; background:linear-gradient(120deg,var(--vp-green-deep),var(--vp-green) 55%,#34431f); overflow:hidden; }
.vps-cta::before{ content:""; position:absolute; top:-120px; right:-100px; width:360px; height:360px; background:radial-gradient(circle,rgba(201,162,75,.18),transparent 70%); }
.vps-cta::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--vp-gold),transparent); opacity:.7; }
.vps-cta-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:54px 0; flex-wrap:wrap; }
.vps-cta-title{ font-family:Oswald,sans-serif; color:var(--vp-ivory); font-size:clamp(24px,2.6vw,38px); margin:0 0 6px; line-height:1.15; }
.vps-cta-text p,.vps-cta-text{ margin:0; }
.vps-cta-text p{ color:#ece4d3; }
.vps-cta-inner p{ color:#ece4d3; margin:6px 0 0; }

/* =====================================================================
   7. GENRES
   ===================================================================== */
.vps-genre-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.vps-genre{
  background:#fbf7ef; border:1px solid rgba(201,162,75,.22); border-radius:14px;
  padding:24px 14px; text-align:center; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.vps-genre i{ font-size:26px; color:var(--vp-copper); margin-bottom:12px; transition:color .35s ease, transform .35s ease; display:block; }
.vps-genre span{ display:block; font-family:Oswald,sans-serif; font-size:14px; color:var(--vp-green); letter-spacing:.4px; }
.vps-genre:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(41,54,26,.14); border-color:var(--vp-gold); }
.vps-genre:hover i{ color:var(--vp-gold-deep); transform:scale(1.12); }

/* =====================================================================
   10. TESTIMONIALS  (dark section)
   ===================================================================== */
.vps-testimonials{ position:relative; background:linear-gradient(160deg,var(--vp-green-deep),var(--vp-green) 60%,#33421e); overflow:hidden; }
.vps-testimonials::before{ content:"\201C"; position:absolute; top:-40px; left:20px; font-family:"Playfair Display",serif; font-size:260px; color:rgba(201,162,75,.10); line-height:1; }
.vps-testimonials .container{ position:relative; z-index:2; }
.vps-review{
  background:#fdfaf3; border-radius:18px; padding:30px 26px 26px; height:100%; position:relative;
  box-shadow:0 20px 44px rgba(0,0,0,.22); border-top:3px solid var(--vp-gold);
}
.vps-review-mark{ font-family:"Playfair Display",serif; font-size:60px; color:var(--vp-gold); line-height:.6; }
.vps-review-text{ color:#4e4231; line-height:1.75; font-size:15px; margin:6px 0 16px; }
.vps-review-stars{ color:var(--vp-gold-deep); margin-bottom:16px; font-size:14px; letter-spacing:2px; }
.vps-review-author{ display:flex; align-items:center; gap:12px; border-top:1px solid rgba(41,54,26,.1); padding-top:14px; }
.vps-review-author img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--vp-gold); }
.vps-review-author strong{ display:block; font-family:Oswald,sans-serif; color:var(--vp-green); font-size:16px; }
.vps-review-author small{ color:var(--vp-copper); }

/* =====================================================================
   12. FAQ + SIDEBAR FORM
   ===================================================================== */
.vps-faq{ background:linear-gradient(180deg,#ffffff 0%, #f6efe1 100%); }
.vps-faq-item{ margin-bottom:14px; }
.vps-faq-q{
  width:100%; text-align:left; background:#fff; border:1px solid rgba(201,162,75,.25); border-radius:12px;
  padding:18px 22px; font-family:Oswald,sans-serif; font-size:16px; color:var(--vp-green); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px; transition:all .3s ease;
  box-shadow:0 6px 18px rgba(41,54,26,.05);
}
.vps-faq-q i{ color:var(--vp-copper); transition:transform .3s ease; flex:0 0 auto; }
.vps-faq-q.active{ border-color:var(--vp-gold); color:var(--vp-copper); box-shadow:0 12px 28px rgba(201,162,75,.18); }
.vps-faq-q.active i{ transform:rotate(45deg); }
.vps-faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.vps-faq-a p{ color:#5d4f3b; line-height:1.8; padding:16px 22px 4px; margin:0; }

.vps-sidebar-form{
  position:sticky; top:110px; background:linear-gradient(160deg,var(--vp-green-deep),var(--vp-green));
  border-radius:18px; padding:30px 26px; color:var(--vp-ivory); box-shadow:0 26px 56px rgba(41,54,26,.28);
  border:1px solid rgba(201,162,75,.3);
}
.vps-sidebar-badge{
  display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold-deep));
  color:var(--vp-green-deep); font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:1px;
  font-size:12px; font-weight:600; padding:7px 16px; border-radius:50px; margin-bottom:14px;
}
.vps-sidebar-form h3{ font-family:Oswald,sans-serif; color:#fff; font-size:24px; margin:0 0 8px; }
.vps-sidebar-form h3 em{ font-family:"Playfair Display",serif; font-style:italic; color:var(--vp-gold-light); }
.vps-sidebar-form > p{ color:#d9d2c2; font-size:14px; line-height:1.6; margin:0 0 18px; }
.vps-field{ margin-bottom:12px; }
.vps-field input,.vps-field textarea{
  width:100%; background:rgba(255,255,255,.96); border:1px solid rgba(201,162,75,.3); border-radius:10px;
  padding:12px 14px; font-size:14px; color:#2b2517; font-family:Poppins,sans-serif;
}
.vps-field input:focus,.vps-field textarea:focus{ outline:none; border-color:var(--vp-gold-light); box-shadow:0 0 0 .18rem rgba(201,162,75,.3); }
.vps-form-note{ color:#cfc7b5; font-size:12px; margin:12px 0 0; display:flex; align-items:center; gap:7px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:991px){
  .vps-steps{ grid-template-columns:repeat(2,1fr); }
  .vps-genre-grid{ grid-template-columns:repeat(4,1fr); }
  .vps-hero{ padding:90px 0 80px; }
  .vps-cta-inner{ justify-content:center; text-align:center; }
  .vps-sidebar-form{ position:static; margin-top:30px; }
}
@media (max-width:575px){
  .vps-steps{ grid-template-columns:1fr; }
  .vps-genre-grid{ grid-template-columns:repeat(2,1fr); }
  .vps-hero-cta .vps-btn{ width:100%; justify-content:center; }
}

/* Reviews page — initials avatar (no book imagery) */
.vps-review-initial{
  width:54px; height:54px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:Oswald,sans-serif; font-size:22px; font-weight:600;
  color:var(--vp-green-deep); border:2px solid var(--vp-gold);
  background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold-deep));
}