:root {
  --font-family-inter: 'Inter', sans-serif;

  --lightgrey: #737373; 
  --black: #1e1e1e;
  --subhead: #333333;
  --lightergrey: #525252;

  --bg-blue: #A3CAC1;
  --bg-yellow: #D0CFBF;
  --bg-grey: #A6A6A6;
  --bg-white: #D9D9D9;

   /* responsive spacing + readable line length */
  --container-max: 980px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad-y: clamp(64px, 10vw, 190px);
}

/* 
lightgrey for nav bar 
black for headings and text bodies
subhead for enh price and about body text
lightergrey for prices, could use same as nav bar or viceversa
*/ 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family-inter);
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.image img {
  width: 100%;
}

.container {
  width: min(var(--container-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.landing{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-pad-y) var(--gutter);
  gap: clamp(24px, 6vw, 80px);
}

.logo img{
  margin-inline: auto;
  width: min(560px, 90vw);  
}

.nav-bar{
  display: flex;
  justify-content: center;
  /* padding-top: 100px; */
}

.nav-list {
  display: flex;
  flex-wrap: wrap;                   
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 30px);
  list-style: none;
}

.nav-text {
  color: var(--lightgrey);
  font-size: clamp(18px, 2.6vw, 36px);
  font-weight: 400;
}

.nav-text a {
  text-decoration: none;
  color: var(--lightgrey);
  padding: 10px 14px;               
  display: inline-block;
}
 
.nav-text a:visited {
  color: var(--lightgrey);
}

.title,
.en_title,
.about_section h1 {
  color: var(--black);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.15;
}

.title {
  margin-bottom: clamp(28px, 6vw, 90px);
}

.card_title {
  color: var(--black);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 300;
  margin-bottom: 10px;
}

.card_price {
  color: var(--lightergrey);
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 300;
  margin-bottom: 10px;
}

.card_text {
  color: var(--black);
  text-align: center;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* --- About section --- */
.about_section {
  background-color: var(--bg-blue);
  color: var(--subhead);
  text-align: center;
  padding: var(--section-pad-y) 0;
}

.about_section .container {
  display: grid;
  gap: clamp(14px, 3vw, 38px);
  justify-items: center;
}

#sub_about,
#text_about {
  width: 100%;          
  max-width: 900px;
  font-size: clamp(16px, 2.6vw, 36px);
  line-height: 1.35;
}

/* make body paragraph a bit smaller than the tagline on desktop */
#text_about {
  max-width: 880px;
  font-size: clamp(16px, 2.2vw, 28px);
}

/* --- Treatments + Signature --- */
.treatments {
  background-color: var(--bg-blue);
  padding: var(--section-pad-y) 0;
}

.signature_treatments {
  background-color: var(--bg-yellow);
  padding: var(--section-pad-y) 0;
}

.treatments .container,
.signature_treatments .container {
  display: grid;
  justify-items: center;
}

.treatment_card {
  width: 100%;               
  max-width: 640px;
  margin-bottom: clamp(36px, 6vw, 130px);
  display: grid;
  justify-items: center;
  gap: 6px;
}

/* --- Enhancements --- */
.enhancements {
  background-color: var(--bg-grey);
  padding: var(--section-pad-y) 0;
  text-align: center;
}

.enhancements .container {
  display: grid;
  justify-items: center;
}

.enhancements h2 {
  color: var(--subhead);
  font-size: clamp(18px, 3vw, 36px);
  font-weight: 300;
  margin-bottom: clamp(28px, 5vw, 74px);
}

.en_card {
  color: var(--black);
  margin-bottom: clamp(24px, 5vw, 74px);
}

.en_card h3 {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 300;
  margin-bottom: 12px;
}

.en_card p {
  text-align: center;
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* --- Contact --- */
.booknow {
  background-color: var(--bg-white);
  color: var(--black);
  padding: var(--section-pad-y) 0;
  text-align: center;
}

.contact_title {
  margin-bottom: clamp(28px, 6vw, 90px);
}

.booknow p {
  font-size: clamp(18px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.3;
}

.contact {
  margin-bottom: 18px;
}

/* --- Small-screen tweaks --- */
@media (max-width: 480px) {
  .nav-text a {
    padding: 10px 10px;
  }

  .treatment_card {
    gap: 10px;
  }
}