:root {

--clean-base:#F6F4EF;
--softness:#C9C6C1;
--nature-anchor:#6F7C6A;
--contrast:#2F3A34;
--skin-tone:#A89F94;
--luxury-accent:#C8B38A;

}


* {
box-sizing:border-box;
}


body {

margin:0;

background:var(--clean-base);

color:var(--contrast);

font-family:
'Lato',
Arial,
Helvetica,
sans-serif;

line-height:1.6;

}



/* HEADER */

header {

background:var(--nature-anchor);

color:white;

padding:25px;

text-align:center;

}


.logo h1 {

font-family:'Playfair Display', Georgia, serif;

font-size:2.2rem;

font-weight:normal;

margin:0;

}


.logo p {

margin-top:5px;

}


nav {

margin-top:20px;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:12px;

}


nav a {

color:white;

text-decoration:none;

padding:6px 8px;

}



/* GENERAL LAYOUT */


.container {

width:90%;

max-width:1100px;

margin:0 auto;

}



section {

padding:50px 20px;

}



/* HERO */


.hero {

text-align:center;

padding:45px 20px;

background-image:
linear-gradient(
rgba(246,244,239,0.88),
rgba(246,244,239,0.88)
),
url('/assets/images/hero-fern.jpg');

background-size:cover;

background-position:center;

border-radius:0 0 30px 30px;

}


.hero h2 {

font-family:'Playfair Display', Georgia, serif;

font-size:2.2rem;

font-weight:normal;

line-height:1.2;

margin-bottom:15px;

}


.hero-tagline {

font-size:1.2rem;

}


.hero-location {

color:var(--skin-tone);

font-size:1.1rem;

}



/* BUTTONS */


.button {

display:inline-block;

margin-top:20px;

padding:14px 30px;

background:var(--luxury-accent);

color:var(--contrast);

border-radius:30px;

text-decoration:none;

}



.nav-button {

background:var(--luxury-accent);

color:var(--contrast)!important;

padding:8px 18px;

border-radius:20px;

}



/* HOMEPAGE INTRO */


.intro {

background:white;

text-align:center;

border-radius:20px;

}


.intro h2,
.home-treatments h2,
.experience h2,
.salon-location h2 {

font-family:'Playfair Display', Georgia, serif;

font-weight:normal;

}


/* HOME TREATMENTS */

.home-treatments {

text-align:center;

}



.treatment-highlights {

display:grid;

grid-template-columns:1fr;

gap:25px;

margin-top:30px;

}



.card {

background:white;

padding:30px;

border-radius:18px;

box-shadow:0 8px 20px rgba(0,0,0,0.08);

text-align:center;

transition:transform 0.2s ease;

}



.card:hover {

transform:translateY(-5px);

}



.card h3 {

color:var(--nature-anchor);

font-family:'Playfair Display', Georgia, serif;

}


/* EXPERIENCE */


.experience {

text-align:center;

background:var(--softness);

}



/* LOCATION */


.salon-location {

text-align:center;

}



/* FOOTER */


footer {

background:var(--contrast);

color:white;

text-align:center;

padding:25px;

margin-top:40px;

}



/* TREATMENT PAGE */


.page-header {

text-align:center;

padding:50px 20px;

}


.treatments {

display:grid;

gap:25px;

margin-bottom:50px;

}



.card h3 {

color:var(--nature-anchor);

}



.duration {

color:var(--skin-tone);

font-size:0.95rem;

}



.price {

font-size:1.3rem;

font-weight:bold;

color:var(--nature-anchor);

}



.small-button {

display:inline-block;

margin-top:15px;

padding:8px 20px;

background:var(--luxury-accent);

color:var(--contrast);

text-decoration:none;

border-radius:20px;

}



/* BOOKING */


.booking-prompt {

background:var(--softness);

text-align:center;

padding:50px 20px;

}


.booking-form {

background:white;

padding:30px;

border-radius:18px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

margin-bottom:40px;

}


.booking-form label {

display:block;

margin-top:15px;

margin-bottom:5px;

font-weight:bold;

}


.booking-form input,
.booking-form textarea {

width:100%;

padding:12px;

border:1px solid var(--softness);

border-radius:10px;

font-size:1rem;

}


.booking-form textarea {

height:120px;

}



.pricing-note {

text-align:center;

padding:30px 20px;

font-size:0.95rem;

color:var(--skin-tone);

}


/* DESKTOP */


@media(min-width:700px){


.treatments {

grid-template-columns:repeat(2,1fr);

}


.treatment-highlights {

grid-template-columns:repeat(4,1fr);

}


}