/* Redesign additions: services, before/after slots, quote form. Reuses main.css variables. */
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:32px; }
.btn--outline{ background:transparent; color:var(--gold); box-shadow:inset 0 0 0 2px var(--gold); }
.btn--outline:hover{ background:var(--gold); color:#1a1400; }
.svc-lede{ max-width:640px; margin:14px auto 0; color:var(--gray); }
.svc-link{ color:var(--gold); border-bottom:1px solid var(--gold-dim); }
.svc-group{ text-align:center; text-transform:none; margin:0 0 6px; font-size:1.6rem; }
.svc-group--next{ margin-top:64px; }
.svc-group__lede{ text-align:center; color:var(--gray); margin:0 auto 28px; max-width:600px; }
.svc-incl{ list-style:none; margin:4px 0 0; padding:10px 0 0; border-top:1px solid var(--line); font-size:.88rem; color:var(--gray); }
.svc-incl li{ padding:3px 0 3px 18px; position:relative; }
.svc-incl li::before{ content:"\2713"; position:absolute; left:0; color:var(--gold); }
.svc-school{ text-align:center; color:var(--white); font-weight:600; margin:40px 0 0; }
.svc-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:32px; }
/* Quote form */
.quote-form{ max-width:760px; background:rgba(10,10,10,.6); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px; padding:32px; }
.quote-form label{ font-size:.95rem; }
.hp-field{ position:absolute; left:-9999px; }
.svc-checks{ border:none; padding:0; margin:0; }
.svc-checks legend{ font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--white); margin-bottom:10px; }
.svc-checks__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; }
.contact-form .svc-check{ display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:400; font-size:.92rem; color:var(--gray); margin:0; cursor:pointer; }
.contact-form .svc-check input{ width:18px; height:18px; padding:0; accent-color:var(--gold); flex:none; }
.form-note{ text-align:center; }
@media (max-width:560px){ .quote-form{ padding:22px 18px; } .svc-checks__grid{ grid-template-columns:1fr; } }
.quote-form [hidden]{ display:none !important; }
.svc-more{ margin-top:auto; color:var(--gold); font-weight:600; font-size:.92rem; }
.svc-more:hover{ color:var(--gold-hi); }
.svc-disc .price-card__amount{ font-size:1.2rem; line-height:1.4; }
.svc-summary{ margin-top:8px; }
.svc-summary h3{ font-size:1.3rem; }
.svc-feature{ max-width:820px; margin:0 auto 28px; padding:32px; }
.svc-feature h3{ font-size:1.7rem; }
.svc-feature p{ font-size:1.02rem; }
.svc-summary{ max-width:820px; margin:0 auto; }
/* Conditional quote fields (shown/hidden by js/main.js). */
.quote-cond{ display:grid; gap:22px; align-content:start; }
.svc-feature--live{ max-width:960px; }
.svc-feature__cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:6px; }
.svc-feature__label{ margin:0; color:var(--white); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.svc-quote-box{ margin-top:14px; padding:20px 22px; border:1px solid var(--gold-dim); border-radius:8px; background:rgba(255,228,92,.06);
  display:flex; align-items:center; gap:24px; }
.svc-quote-box p{ flex:1; color:var(--gray); }
.svc-quote-box strong{ color:var(--white); }
.svc-quote-box .btn{ flex:none; }
@media (max-width:700px){ .svc-feature__cols{ grid-template-columns:1fr; gap:14px; } .svc-quote-box{ flex-direction:column; align-items:flex-start; } .svc-feature{ padding:24px 20px; } }
.svc-feature__note{ text-transform:none; letter-spacing:0; color:var(--gray); font-weight:400; }
.svc-hl{ color:var(--gold); font-weight:700; }
/* Quote-form backgrounds (homepage #quote, contact <main>). main.css gives
   .bg-marble-* `background-size:cover; background-position:center`, which
   recomputes the image scale from the element's HEIGHT, so the marble zoomed
   whenever the form grew. Here the scale depends only on the viewport width:
   the image is always at least 1250px tall (taller than the default section at
   any width), anchored to the top. If the section ever grows past it, a
   vertically mirrored copy continues below, so there is never an empty strip. */
.bg-stable{
  --bg-h: max(1250px, 56.25vw);          /* 56.25vw = 16:9 image at full width */
  position:relative; isolation:isolate;
  background-size:auto var(--bg-h) !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}
.bg-stable::after{
  content:""; position:absolute; left:0; right:0; top:var(--bg-h); bottom:0;
  z-index:-1; pointer-events:none;
  background-image:inherit; background-size:auto var(--bg-h);
  background-position:center bottom; background-repeat:no-repeat;
  transform:scaleY(-1);
}