/* components.css — reusable pieces: buttons, badges, cards, patches.
   If a class here is used on more than one page, it belongs in this
   file so every page stays visually consistent automatically. */

.eyebrow{
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass-bright); display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass);}

.cta-btn{
  display:inline-block; font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  background:var(--brass); color:var(--ink); padding:11px 20px; border-radius:var(--radius);
  border:1px solid var(--brass); transition:background .2s, transform .15s;
  cursor:pointer;
}
.cta-btn:hover, .cta-btn:focus-visible{background:var(--brass-bright); transform:translateY(-1px);}

.cta-ghost{
  display:inline-block; font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  color:var(--cream); padding:11px 20px; border-radius:var(--radius);
  border:1px solid var(--line); background:transparent;
}
.cta-ghost:hover, .cta-ghost:focus-visible{border-color:var(--brass-bright); color:var(--brass-bright);}

/* trust patches (hero row) */
.patches{display:flex; gap:18px; flex-wrap:wrap;}
.patch{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:999px; padding:9px 16px 9px 9px; background:rgba(36,29,20,0.6);
}
.patch .dot{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--brass-bright); font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
}
.patch span.label{font-size:12.5px; letter-spacing:0.04em; color:var(--cream-dim); font-family:'Oswald',sans-serif; text-transform:uppercase;}

/* signature line under The Difference copy */
.diff-copy p{font-size:18px; color:var(--cream-dim); font-weight:300; margin:0 0 18px;}
.diff-copy strong{color:var(--cream); font-weight:600;}
.signature-line{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--brass-bright); font-size:14px; margin-top:8px; display:block;
}

/* service cards */
.svc-card{background:var(--ink); padding:30px 26px;}
.svc-card h3{font-size:16px; letter-spacing:0.02em; margin-bottom:10px;}
.svc-card p{font-size:14.5px; color:var(--cream-dim); font-weight:300; margin:0;}
.svc-note{margin-top:26px; font-size:14.5px; color:var(--cream-dim); font-weight:300; font-style:italic;}

/* how-it-works steps */
.step{border-top:1px solid var(--brass); padding-top:18px;}
.step .num{font-family:'Oswald',sans-serif; font-size:13px; color:var(--brass-bright); letter-spacing:0.1em;}
.step h3{font-size:19px; margin:10px 0 10px; text-transform:none; font-family:'Fraunces',serif; font-weight:600;}
.step p{font-size:15px; color:var(--cream-dim); font-weight:300; margin:0;}

/* quote result cards */
.quote-placeholder{color:var(--cream-dim); font-weight:300; font-size:15px;}
.price-card{border:1px solid var(--line); border-radius:4px; padding:16px;}
.price-card.smart{border-color:var(--brass); background:rgba(201,154,70,0.08);}
.price-card .tag{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cream-dim);}
.price-card.smart .tag{color:var(--brass-bright);}
.price-card .amt{font-family:'Oswald',sans-serif; font-size:26px; color:var(--cream); margin-top:6px;}
.price-card .time{font-size:12.5px; color:var(--cream-dim); margin-top:6px;}
.savings-badge{
  display:inline-block; background:var(--ember); color:var(--cream); font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:0.05em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.quote-explain{font-size:14.5px; color:var(--cream-dim); font-weight:300; margin-top:10px;}
.quote-disclaimer{font-size:12px; color:var(--cream-dim); opacity:0.75; margin-top:16px; font-style:italic;}
.quote-error{color:var(--brass-bright); font-size:14px; margin-top:12px;}
.spinner{
  width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--brass-bright);
  border-radius:50%; display:inline-block; animation:spin 0.8s linear infinite; margin-right:8px; vertical-align:-3px;
}
@keyframes spin{to{transform:rotate(360deg);}}
.demo-flag{
  display:inline-flex; align-items:center; gap:8px; font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); background:var(--brass-bright);
  padding:6px 10px; border-radius:3px; margin-bottom:22px;
}

/* contact section */
.contact-list{list-style:none; padding:0; margin:22px 0 0;}
.contact-list li{
  padding:14px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:16px;
  font-size:15px; color:var(--cream-dim); font-weight:300;
}
.contact-list li strong{color:var(--cream); font-weight:600; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;}
.contact-card{border:1px solid var(--line); border-radius:6px; padding:28px; background:var(--charcoal);}
.contact-card h3{font-family:'Oswald',sans-serif; font-size:16px; margin-bottom:14px;}
.contact-card p{color:var(--cream-dim); font-size:14.5px; font-weight:300;}

/* footer */
.foot-row p{font-size:12.5px; color:var(--cream-dim); margin:0;}
.foot-patches{display:flex; gap:10px; flex-wrap:wrap;}
.foot-patches span{
  font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--brass-bright); border:1px solid var(--line); padding:5px 10px; border-radius:999px;
}
.placeholder-note{color:var(--ember); opacity:0.9;}

/* photo placeholders — swap for real <img> tags once you have photos.
   See assets/images/gallery/ and assets/images/services/ for where files go. */
.photo-ph{
  aspect-ratio:4/3; border-radius:4px; border:1px dashed var(--line);
  background:repeating-linear-gradient(135deg, rgba(201,154,70,0.06) 0 12px, transparent 12px 24px), var(--charcoal);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  color:var(--cream-dim); font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
}
.ba-pair{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.ba-pair .photo-ph{border:none; border-radius:0; aspect-ratio:1/1;}
.ba-caption{font-size:13px; color:var(--cream-dim); font-weight:300; margin-top:10px; text-align:center;}