.btn,
.jo-btn {
display: inline-block;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.08em;
font-size: clamp(0.85rem, 1vw + 0.6rem, 1rem);
padding: clamp(0.6rem, 1vw + 0.4rem, 0.9rem) clamp(1.2rem, 1.8vw + 0.5rem, 1.8rem);
border: none;
border-radius: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.btn:hover,
.jo-btn:hover{
color: #fff;
text-decoration: none;
transition: all 0.3s;
}
.btn:focus-visible,
.jo-btn:focus-visible {
outline: 2px solid #b9955d; outline-offset: 3px;
} .btn--rose,
.jo-btn--rose {
background-color: #B67861; }
.btn--rose:hover,
.jo-btn--rose:hover {
background-color: #9F5F4C;
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
} .btn--sage,
.jo-btn--sage {
background-color: var(--sage-brush);
border: 1.5px solid var(--sage-brush);
color: #fff;
text-transform: none;
letter-spacing: 0.02em;
font-weight: 500;
}
.btn--sage:hover,
.jo-btn--sage:hover {
background-color: #8A8E74;
border-color: #8A8E74;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(158, 161, 132, 0.2);
} .btn--ochre,
.jo-btn--ochre {
background-color: #A7844E;
}
.btn--ochre:hover,
.jo-btn--ochre:hover {
background-color: #946F3C;
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
} .btn--roseg,
.jo-btn--roseg {
background-color: var(--rose-gold);
border: 1.5px solid var(--rose-gold);
color: #fff;
text-transform: none;
letter-spacing: 0.02em;
font-weight: 500;
}
.btn--roseg:hover,
.jo-btn--roseg:hover {
background-color: var(--rose-gold);
border-color: var(--rose-gold);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(183, 110, 121, 0.2);
} a:focus-visible,
.btn:focus-visible,
.jo-btn:focus-visible {
outline: clamp(2px, 0.25vw, 3px) solid var(--color-accent);
outline-offset: clamp(2px, 0.3vw, 4px);
border-radius: 0; 
box-shadow: 0 0 0 clamp(2px, 0.3vw, 4px) rgba(185, 149, 93, 0.4); } .button-custom {
background-color: var(--canyon-rose-light);
color: var(--muted-brown);
font-family: var(--font-body);
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
padding: clamp(0.7rem, 1vw + 0.5rem, 1.1rem) clamp(1.2rem, 1.5vw + 0.8rem, 1.8rem);
font-size: clamp(0.9rem, 1vw + 0.4rem, 1rem);
border: 1px solid var(--canyon-rose);
border-radius: 2px;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
}
.button-custom:hover {
background-color: var(--canyon-rose);
border-color: var(--rose-gold);
color: var(--muted-brown);
box-shadow: 0 4px 12px rgba(233, 217, 209, 0.4);
transform: none;
cursor: pointer;
text-decoration: none;
} .cta-buttons,
.cta-final__buttons {
display: flex;
justify-content: center;
gap: clamp(0.6rem, 1.5vw, 1.2rem);
flex-wrap: wrap;
margin-top: clamp(1.6rem, 2.5vw, 2.2rem);
margin-bottom: clamp(1.8rem, 3vw, 3rem);
}
.cta-buttons--compact {
gap: clamp(0.4rem, 1vw, 0.8rem);
margin-top: clamp(1rem, 1.5vw, 1.5rem);
margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}
@media (max-width: 600px) {
.cta-buttons {
flex-direction: column;
align-items: center; 
gap: 0.8rem;
margin-top: 1.5rem;
}
.cta-buttons .btn,
.cta-buttons .jo-btn,
.cta-buttons .button-custom {
max-width: 260px; 
text-align: center;
white-space: normal;
line-height: 1.4;
}
}