/* ==========================================================================
   Home page — hero, values strip, expertise cards, meet Malika, the
   approach steps, and the appointment call to action.
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 630px;
  padding-top: 76px;
  padding-bottom: 78px;
  text-align: center;
}

.hero-copy {
  width: 100%;
  max-width: 900px;
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

/* Short gold rule in front of the hero label. */
.hero .eyebrow::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--gold-display);
}

.hero-description {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.95;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  margin-top: 31px;
}

.hero-credentials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 39px;
}

.credential-seal {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.25rem;
}

.credential-copy {
  text-align: left;
}

.credential-copy strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.8;
}

.credential-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Values strip ------------------------------------------------------------ */

/* The labels sit at the ends and spread evenly, with a decorative star
   centred in each gap. Each star is the tail of the item before it and
   grows to fill the free space, so the spacing stays even at any width. */
.values-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 25px 8%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #eee8de;
  color: #74664e;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  list-style: none;
  text-transform: uppercase;
}

.values-strip li {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

.values-strip li:last-child {
  flex-grow: 0;
}

/* The second value is the empty alt text, so screen readers skip the star. */
.values-strip li:not(:last-child)::after {
  content: "✧";
  content: "✧" / "";
  flex: 1 1 auto;
  padding: 0 22px;
  color: var(--gold-display);
  font-size: 1.1875rem;
  text-align: center;
}

/* Expertise --------------------------------------------------------------- */

.care {
  background: var(--paper);
}

.section-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 45px;
}

.section-intro > p {
  max-width: 330px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
}

.care-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.care-card {
  padding: 30px 29px 32px;
  border: 1px solid #e7dfd1;
  background: var(--cream);
}

.card-number {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.line-icon {
  display: flex;
  align-items: center;
  height: 90px;
  color: var(--gold-display);
  font-family: Georgia, serif;
  font-size: 2.3125rem;
}

.care-card h3 {
  font-size: 1.9375rem;
}

.care-card p {
  max-width: 290px;
  margin: 14px 0 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.95;
}

/* Meet Malika ------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8vw;
  border-bottom: 1px solid var(--border);
}

/* Decorative brand panel: monogram, name and tagline. */
.brand-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 28px;
  border: 1px solid #e0d5c5;
  background: #eee6dc;
  text-align: center;
}

.brand-art-logo {
  width: 260px;
  margin-bottom: 25px;
}

.brand-art-name {
  color: #806135;
  font-family: var(--serif);
  font-size: 1.4375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand-art-rule {
  width: 42px;
  height: 1px;
  margin: 25px auto 20px;
  background: #b9a282;
}

/* Darkened from #786b5c to clear 4.5:1 on the panel (WCAG 1.4.3). */
.brand-art-tagline {
  color: #706456;
  font-size: 0.75rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.about-copy h2 {
  margin-bottom: 22px;
}

.about-name {
  margin-bottom: 23px;
  font-family: var(--serif);
  font-size: 1.5rem;
}

.about-name span {
  margin-left: 10px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.about-text {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
}

.about-copy .text-link {
  margin-top: 13px;
}

/* The approach ------------------------------------------------------------ */

.approach {
  background: var(--paper);
  text-align: center;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 45px 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 0 35px;
  border-right: 1px solid var(--border);
}

.steps li:last-child {
  border: 0;
}

.step-number {
  color: var(--gold-display);
  font-family: var(--serif);
  font-size: 1.6875rem;
  font-style: italic;
}

.steps h3 {
  margin: 14px 0 12px;
  font-size: 1.875rem;
}

.steps p {
  max-width: 230px;
  margin: auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}

/* Appointment ------------------------------------------------------------- */

.appointment {
  padding-top: 83px;
  padding-bottom: 83px;
  background: var(--espresso);
  color: var(--cream);
  text-align: center;
}

.appointment .eyebrow {
  color: #d6c2a0;
}

.appointment h2 {
  margin: 20px 0;
  font-size: clamp(3.0625rem, 4.5vw, 4.25rem);
}

.appointment em {
  color: #d6bb89;
}

.appointment-text {
  color: #d2cabe;
  font-size: 1rem;
  line-height: 1.85;
}

.appointment .button {
  margin-top: 29px;
}

.instagram-handle {
  display: block;
  margin-top: 19px;
  color: #cfc3b0;
  font-size: 0.75rem;
}

/* The panel is dark, so its focus ring flips to cream. */
.appointment a:focus-visible {
  outline-color: var(--focus-on-dark);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero-actions {
    gap: 20px;
  }

  .hero-actions .button {
    padding: 15px 20px;
  }

  .care-card {
    padding: 25px 22px;
  }

  .care-card h3 {
    font-size: 1.75rem;
  }

  .about {
    gap: 45px;
  }

  .brand-art {
    min-height: 370px;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: 590px;
    padding-top: 58px;
    padding-bottom: 59px;
  }

  .hero .eyebrow {
    font-size: 0.6875rem;
  }

  .hero-description {
    max-width: 390px;
    margin: auto;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 21px;
  }

  .hero-credentials {
    margin-top: 35px;
  }

  .credential-copy strong,
  .credential-copy span {
    font-size: 0.6875rem;
  }

  .values-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    padding: 25px 18px;
    font-size: 0.6875rem;
  }

  .values-strip li {
    display: block;
    text-align: center;
  }

  .values-strip li:not(:last-child)::after {
    display: none;
  }

  .section-intro {
    display: block;
    margin-bottom: 30px;
  }

  .section-intro > p {
    max-width: 440px;
    margin-top: 23px;
  }

  .care-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .care-card {
    padding: 27px;
  }

  /* The star moves up beside the card number. */
  .line-icon {
    float: right;
    height: auto;
    margin-top: -10px;
    font-size: 1.9375rem;
  }

  .care-card h3 {
    margin-top: 24px;
    font-size: 2.0625rem;
  }

  .care-card p {
    max-width: 100%;
  }

  .about {
    grid-template-columns: 1fr;
    gap: 37px;
  }

  /* Copy first, brand panel second. */
  .brand-art {
    order: 2;
    min-height: 340px;
  }

  .brand-art-logo {
    width: 235px;
  }

  .about-name {
    font-size: 1.5625rem;
    line-height: 1.6;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 27px;
    margin-top: 32px;
  }

  .steps li {
    padding: 0 0 27px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .steps li:last-child {
    padding-bottom: 0;
  }

  .steps h3 {
    margin-top: 8px;
  }

  .steps p {
    max-width: 270px;
  }

  .appointment {
    padding-top: 66px;
    padding-bottom: 63px;
  }

  .appointment h2 {
    font-size: 3.0625rem;
  }
}

@media (max-width: 380px) {
  .hero .eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }

  .hero .eyebrow::before {
    width: 20px;
  }
}