.nav1-topbar-contact a {
  color: var(--textColour1);
}

/* ===== SECTION: Treatments Hero START ===== */

#treatments-hero {
  display: flex;
  align-items: center;
  background-color: var(--bgColour1);
  margin-top: 80px;
}

/* Grid */
.treatments-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
  gap: var(--spaceLg);
  align-items: center;
}

/* Content */
.treatments-hero__content {
  display: grid;
  gap: var(--spaceSmmd);
  max-width: 34rem;
}

/* Image */
.treatments-hero__media {
  overflow: hidden;
  border-radius: 1.25rem;
  content-visibility: auto;
  contain-intrinsic-size: 780px;
}

.treatments-hero__media picture,
.treatments-hero__media img {
  display: block;
  width: 100%;
}

.treatments-hero__media img {
  height: auto;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 900px) {
  #treatments-hero {
    min-height: auto;
  }

  .treatments-hero__grid {
    grid-template-columns: 1fr;
  }

  .treatments-hero__content {
    max-width: none;
    text-align: center;
    justify-items: center;
  }

  .treatments-hero__content p {
    max-width: 34rem;
  }

  .treatments-hero__media {
    max-width: 32rem;
    margin: 0 auto;
  }
}

/* ===== SECTION: Treatments Hero END ===== */

/* ===== SECTION: Treatments Intro START ===== */

#treatments-intro {
  text-align: center;
  background-color: var(--bgColour3);
}

/* Content */
.treatments-intro__content {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  gap: var(--spaceSm);
  justify-items: center;
}

/* Icon */
.treatments-intro__icon svg {
  width: 38px;
  height: 38px;
  fill: var(--mainBrandColour);
  display: block;
}

/* Heading */
.treatments-intro__content h2 {
  line-height: 1.2em;
  font-size: clamp(1.8rem, 2.8vw, 2.3rem);
}

/* Responsive */
@media (max-width: 768px) {
  .treatments-intro__content h2 {
    max-width: none;
  }
}

/* ===== SECTION: Treatments Intro END ===== */

/* ===== SECTION: Nail Treatments START ===== */

#nail-treatments {
  background-color: var(--bgColour1);
}

/* Grid */
.nail-treatments__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
  gap: var(--spaceLg);
  align-items: start;
}

/* Image */
.nail-treatments__media {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.14);
}

.nail-treatments__media picture,
.nail-treatments__media img {
  display: block;
  width: 100%;
}

.nail-treatments__media img {
  height: auto;
  object-fit: cover;
}

/* Content */
.nail-treatments__content {
  display: grid;
  gap: var(--spaceMd);
}

.nail-treatments__group {
  display: grid;
  gap: var(--spaceSm);
}

.nail-treatments__group h2,
.nail-treatments__group h3 {
  font-family: var(--headerFont);
}

.nail-treatments__group h3 {
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  padding-top: var(--spaceSm);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nail-treatments__includes {
  font-style: italic;
  opacity: 0.9;
}

/* Prices */
.nail-treatments__prices {
  list-style: none;
  display: grid;
  margin-top: var(--spaceXs);
}

.nail-treatments__prices li {
  display: flex;
  justify-content: space-between;
  gap: var(--spaceSm);
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 300;
}

.nail-treatments__prices span:last-child {
  white-space: nowrap;
}

/* CTA */
.nail-treatments__cta {
  margin-top: var(--spaceLg);
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .nail-treatments__grid {
    grid-template-columns: 1fr;
  }

  .nail-treatments__media {
    max-width: 34rem;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .nail-treatments__prices li {
    align-items: flex-start;
  }
}

/* ===== SECTION: Nail Treatments END ===== */

/* ===== SECTION: Facials START ===== */

#facials {
  background-color: var(--bgColour3);
  text-align: center;
}

/* Header */
.facials__header {
  max-width: 48rem;
  margin: 0 auto var(--spaceLg);
}

.facials__header p {
  margin-top: var(--spaceSm);
  font-size: 1rem;
}

/* Grid */
.facials__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spaceSmmd);
  text-align: left;
}

/* Card */
.facials__card {
  background: var(--bgColour1);
  border-radius: 1.25rem;
  padding: 1.75rem;
  display: grid;
  gap: var(--spaceSm);
}

.facials__card svg {
  width: 20px;
  height: 20px;
  fill: var(--mainBrandColour);
}

.facials__card h3 {
  font-family: var(--headerFont);
}

/* Responsive */
@media (max-width: 1100px) {
  .facials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .facials__grid {
    grid-template-columns: 1fr;
  }

  .facials__card {
    text-align: center;
  }
}

/* ===== SECTION: Facials END ===== */

/* ===== SECTION: Additional Treatments START ===== */

#additional-treatments {
  background-color: var(--bgColour1);
}

/* Grid */
.additional-treatments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spaceLg);
  align-items: start;
}

/* Group */
.additional-treatments__group {
  display: grid;
  gap: var(--spaceSm);
}

.additional-treatments__group--card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, 0.28);
}

.additional-treatments__group h3 {
  font-family: var(--headerFont);
}

/* CTA */
.additional-treatments__cta {
  margin-top: var(--spaceLg);
  text-align: center;
}

/* Responsive */
@media (max-width: 950px) {
  .additional-treatments__grid {
    grid-template-columns: 1fr;
    gap: var(--spaceMd);
  }

  .additional-treatments__group p {
    max-width: none;
  }
}

/* ===== SECTION: Additional Treatments END ===== */

/* ===== SECTION: Personal Approach START ===== */

#personal-approach {
  background-color: var(--bgColour3);
}

/* Main Grid */
.personal-approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem);
  gap: var(--spaceLg);
  align-items: start;
}

/* Left Content */
.personal-approach__content {
  display: grid;
  gap: var(--spaceLg);
}

/* Heading */
.personal-approach__intro h2 {
  margin-bottom: var(--spaceSmmd);
}

/* Benefits */
.personal-approach__benefits {
  list-style: none;
  display: grid;
  gap: 1rem;
}

.personal-approach__benefits li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 300;
}

.personal-approach__benefits svg {
  width: 18px;
  height: 18px;
  stroke: var(--mainBrandColour);
  flex-shrink: 0;
}

/* Location Card */
.personal-approach__location-card {
  background: var(--bgColour1);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: var(--spaceSm);
}

.personal-approach__location-card h3 {
  font-family: var(--headerFont);
}

.personal-approach__location-card p {
  color: rgba(51, 51, 51, 0.72);
}

/* Location Features */
.personal-approach__location-features {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin-top: var(--spaceXs);
}

.personal-approach__location-features li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 300;
}

.personal-approach__location-features svg {
  width: 18px;
  height: 18px;
  fill: var(--mainBrandColour);
  flex-shrink: 0;
}

/* Image */
.personal-approach__media {
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.12);
}

.personal-approach__media picture,
.personal-approach__media img {
  display: block;
  width: 100%;
}

.personal-approach__media img {
  height: auto;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 950px) {
  .personal-approach__grid {
    grid-template-columns: 1fr;
  }

  .personal-approach__media {
    max-width: 36rem;
    margin: 0 auto;
  }
}

/* ===== SECTION: Personal Approach END ===== */