/* Belle Vous Spa - skin consultation landing page
   Design system: "Belle Vous Spa - Still Room"
   bg #F5F2EC | surface #FCFAF6 | ink #1F2620 | ink-soft #4E594B
   accent #3E5A47 | accent-deep #2F4736 | deep #24312A | stone #E7E1D5
   hairline #DED7C9 | on-dark #F2EFE8 | on-dark-soft #C7CFC4 | muted #8A9187
   Radius rule: buttons and small controls 4px, cards and images 18px. */

:root{
  --bvs-bg:#F5F2EC; --bvs-surface:#FCFAF6; --bvs-ink:#1F2620; --bvs-ink-soft:#4E594B;
  --bvs-accent:#3E5A47; --bvs-accent-deep:#2F4736; --bvs-deep:#24312A; --bvs-stone:#E7E1D5;
  --bvs-hairline:#DED7C9; --bvs-on-dark:#F2EFE8; --bvs-on-dark-soft:#C7CFC4; --bvs-muted:#8A9187;
}

/* ---------- 1. The consultation form ---------- */

.bvs-cf{
  background:var(--bvs-surface);
  border:1px solid var(--bvs-hairline);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 18px 44px rgba(36,49,42,.10);
  text-align:left; width:100%; max-width:520px; box-sizing:border-box;
}
.bvs-cf *{box-sizing:border-box}
.bvs-cf__heading{
  font-family:Lato,sans-serif; font-weight:700;
  font-size:13px; line-height:1.3; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--bvs-ink);
  margin:0 0 12px; padding:0 0 10px;
  border-bottom:1px solid var(--bvs-hairline);
}
.bvs-cf__intro{
  font-family:Lato,sans-serif; font-size:14.5px; line-height:1.5;
  color:var(--bvs-ink-soft); margin:0 0 16px;
}
.bvs-cf__alert{
  font-family:Lato,sans-serif; font-weight:700; font-size:15px; line-height:1.5;
  color:var(--bvs-ink); background:var(--bvs-stone);
  border:1px solid var(--bvs-hairline); border-left:3px solid var(--bvs-accent);
  border-radius:4px; padding:11px 14px; margin:0 0 18px;
}
.bvs-cf__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.bvs-cf__row{display:flex;gap:9px}
.bvs-cf__row > .bvs-cf__field{flex:1 1 0;min-width:0}
.bvs-cf__field{margin:0 0 8px}

.bvs-cf label{
  display:block; font-family:Lato,sans-serif; font-weight:700;
  font-size:10px; letter-spacing:1.3px; text-transform:uppercase; line-height:1.3;
  color:var(--bvs-ink); margin:0 0 4px;
}
.bvs-cf label span{font-weight:400;letter-spacing:.4px;text-transform:none;color:var(--bvs-muted)}

.bvs-cf input[type=text],
.bvs-cf input[type=email],
.bvs-cf input[type=tel],
.bvs-cf select,
.bvs-cf textarea{
  width:100%; font-family:Lato,sans-serif; font-size:16px; line-height:1.5;
  color:var(--bvs-ink); background:#FFFFFF;
  border:1px solid var(--bvs-hairline); border-radius:4px;
  padding:9px 11px; -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.bvs-cf textarea{resize:vertical;min-height:66px}
.bvs-cf select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233E5A47' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
  padding-right:38px;
}
.bvs-cf input:focus,.bvs-cf select:focus,.bvs-cf textarea:focus{
  outline:none; border-color:var(--bvs-accent);
  box-shadow:0 0 0 3px rgba(62,90,71,.16);
}
.bvs-cf ::placeholder{color:var(--bvs-muted);opacity:1}

.bvs-cf__error{
  display:block; font-family:Lato,sans-serif; font-size:13.5px; line-height:1.4;
  font-weight:700; color:var(--bvs-ink); background:var(--bvs-stone);
  border-left:3px solid var(--bvs-accent); border-radius:0 4px 4px 0;
  padding:6px 10px; margin:7px 0 0; letter-spacing:0; text-transform:none;
}
.bvs-cf__field:has(.bvs-cf__error) input,
.bvs-cf__field:has(.bvs-cf__error) select,
.bvs-cf__field:has(.bvs-cf__error) textarea{border-color:var(--bvs-accent-deep);border-width:2px}

.bvs-cf__consent{position:relative;padding-left:24px;margin:2px 0 12px}
.bvs-cf__consent input{position:absolute;left:0;top:2px;width:17px;height:17px;accent-color:var(--bvs-accent)}
.bvs-cf__consent label{
  font-family:Lato,sans-serif; font-weight:400; font-size:13px; line-height:1.45;
  letter-spacing:0; text-transform:none; color:var(--bvs-ink-soft); margin:0;
}

.bvs-cf__button{
  display:block; width:100%; cursor:pointer;
  font-family:Lato,sans-serif; font-weight:700; font-size:14px;
  letter-spacing:2.2px; text-transform:uppercase;
  color:#FFFFFF; background:var(--bvs-accent);
  border:none; border-radius:4px; padding:14px 26px; min-height:48px;
  transition:background-color .18s ease, transform .08s ease;
}
.bvs-cf__button:hover,.bvs-cf__button:focus{background:var(--bvs-accent-deep)}
.bvs-cf__button:active{transform:translateY(1px)}
.bvs-cf__button:focus-visible{outline:3px solid rgba(62,90,71,.35);outline-offset:2px}

.bvs-cf__footnote{
  font-family:Lato,sans-serif; font-size:12.5px; line-height:1.5;
  color:var(--bvs-muted); text-align:center; margin:8px 0 0;
}

@media (max-width:767px){
  .bvs-cf{padding:16px 16px 14px;border-radius:18px;max-width:none}
  .bvs-cf__heading{font-size:12.5px}
  .bvs-cf__row{flex-direction:column;gap:0}
  .bvs-cf input,.bvs-cf select,.bvs-cf textarea{font-size:16px}
}

/* ---------- 2. Page sections ---------- */

.bvs-measure > *{max-width:600px}
.bvs-measure-c > *{max-width:620px;margin-left:auto;margin-right:auto}

/* Hero */
.bvs-hero{position:relative}
.bvs-hero__copy .elementor-widget:last-child{margin-bottom:0}
@media (max-width:767px){
  .bvs-hero{min-height:0!important}
  .bvs-hero__inner{gap:26px!important}
}

/* Section 2: hairline separated causes, no card grounds */
.bvs-cause{padding:26px 0;border-top:1px solid #DED7C9}
.bvs-causes > .e-con:first-child .bvs-cause,
.bvs-causes > .elementor-element:first-child{border-top:0}
.bvs-causes .bvs-cause:first-child{border-top:0;padding-top:0}
.bvs-cause .elementor-widget{margin-bottom:0}

/* Section 3: timeline */
.bvs-how__title{margin-bottom:14px}
.bvs-step{position:relative;padding:24px 0 24px 46px;border-top:1px solid rgba(31,38,32,.14)}
.bvs-how .bvs-step:first-of-type{border-top:0}
.bvs-step:before{
  content:"";position:absolute;left:8px;top:34px;bottom:-24px;width:1px;background:rgba(31,38,32,.16);
}
.bvs-how > .e-con:last-child .bvs-step:before,
.bvs-step:last-of-type:before{display:none}
.bvs-step__n p{
  position:absolute;left:0;top:24px;width:17px;height:17px;line-height:17px;
  text-align:center;margin:0;
}
.bvs-step .elementor-widget{margin-bottom:0}

/* Section 4: concern rows */
.bvs-concern{padding:22px 0;border-top:1px solid #DED7C9}
.bvs-concern-list .bvs-concern:first-child{border-top:0;padding-top:0}
.bvs-concern .elementor-widget{margin-bottom:0}
.bvs-concerns__aside img{border-radius:18px;display:block;width:100%;height:auto}

/* Section 5: promise panel */
.bvs-promise .elementor-widget{margin-bottom:0}

/* Section 6 */
.bvs-founder img{border-radius:18px;display:block;width:100%;height:auto}

/* Section 7: accordion on hairlines only */
.bvs-accordion .elementor-accordion .elementor-accordion-item{
  border:0!important;border-top:1px solid #DED7C9!important;
}
.bvs-accordion .elementor-accordion .elementor-accordion-item:last-child{
  border-bottom:1px solid #DED7C9!important;
}
.bvs-accordion .elementor-tab-title{cursor:pointer}
.bvs-accordion .elementor-tab-content{border-top:0!important}

/* Sticky mobile CTA */
.bvs-sticky-cta{
  position:fixed!important;left:0;right:0;bottom:0;z-index:99;
  width:100%!important;max-width:none!important;
  border-top:1px solid #DED7C9;
  box-shadow:0 -8px 24px rgba(36,49,42,.10);
  padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
}
.bvs-sticky-cta .elementor-widget{width:100%;margin-bottom:0}
.bvs-sticky-cta .elementor-button{width:100%;min-height:56px}
@media (max-width:1024px){ body.bvs-lp{padding-bottom:82px} }

/* Buttons rendered by Elementor: hold the radius and tap target */
.bvs-btn .elementor-button{border-radius:4px;min-height:58px;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:767px){ .bvs-btn .elementor-button{width:100%} }

/* Motion: slow opacity only, and never on the hero */
@media (prefers-reduced-motion:no-preference){
  .bvs-why,.bvs-how,.bvs-concerns,.bvs-fee,.bvs-founder,.bvs-faq{animation:bvsFade .7s ease both}
}
@keyframes bvsFade{from{opacity:0}to{opacity:1}}
/* ---------- 3. Stats band ---------- */
.bvs-stats{border-top:1px solid #DED7C9;border-bottom:1px solid #DED7C9}
.bvs-stat .elementor-widget{margin-bottom:0}
.bvs-stat p{max-width:250px}
@media (max-width:767px){
  .bvs-stats{gap:22px!important}
  .bvs-stat{flex-direction:row!important;align-items:baseline!important;gap:14px!important}
  .bvs-stat p{max-width:none}
}

/* ---------- 4. Reviews ---------- */
.bvs-review-row{align-items:stretch}
.bvs-review{display:flex;flex-direction:column}
.bvs-review .elementor-widget{margin-bottom:0}
.bvs-review__text{flex:1 1 auto}
.bvs-review .elementor-star-rating{line-height:1}
.bvs-review__who{margin-top:auto;padding-top:14px;border-top:1px solid #DED7C9}
.bvs-review__avatar{flex:0 0 auto}
.bvs-review__avatar p{
  width:46px;height:46px;border-radius:50%;margin:0;
  background:#3E5A47;color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
}
.bvs-review__avatar img{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block}
.bvs-review__name p{margin:0}
.bvs-review__name span{color:#8A9187;font-size:13px}
@media (max-width:1024px) and (min-width:768px){ .bvs-review{width:calc(50% - 10px)!important} }
@media (max-width:767px){ .bvs-review{width:100%!important} }

/* ---------- 5. Anchor scrolling ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
#consultation-form{scroll-margin-top:24px}
/* ---------- 6. Hero: equal-height columns ---------- */

.bvs-hero__copy,.bvs-hero__form{align-self:stretch}
.bvs-hero__copy{justify-content:center}
.bvs-hero__form{display:flex;flex-direction:column;justify-content:center}
.bvs-hero__form > *{width:100%;display:flex;flex-direction:column;flex:1 1 auto;margin-bottom:0}
.bvs-hero__form > * > *{flex:1 1 auto;display:flex;flex-direction:column}
.bvs-hero__form .bvs-cf{
  max-width:none;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;
}
.bvs-hero__form .bvs-cf__form{display:block}

@media (max-width:767px){
  .bvs-hero__copy,.bvs-hero__form{align-self:auto}
  .bvs-hero__form,.bvs-hero__form > *,.bvs-hero__form > * > *,.bvs-hero__form .bvs-cf{flex:0 1 auto;display:block}
  .bvs-hero__form .bvs-cf{display:block}
}

/* ---------- 7. How it works: numbers in their own column ---------- */

.bvs-step{
  flex-direction:row!important;align-items:flex-start;
  gap:18px!important;padding:20px 0!important;
  border-top:1px solid rgba(31,38,32,.14);
}
.bvs-step:before{display:none!important}
.bvs-how .bvs-step:first-of-type{border-top:0}
.bvs-step__num{flex:0 0 34px;max-width:34px}
.bvs-step__num p{
  width:26px;height:26px;line-height:26px;text-align:center;margin:2px 0 0;
  border:1px solid #3E5A47;border-radius:50%;
}
.bvs-step__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.bvs-step__body .elementor-widget{margin-bottom:0}
/* Heading and intro are optional; add them back with shortcode attributes if wanted */
.bvs-cf__heading:empty,.bvs-cf__intro:empty{display:none}
