:root {
  --color-ink: #1c1c1c;
  --color-muted: #8a8a8a;
  --color-amber: #f4b53f;
  --color-amber-arrow: #e08a2e;
  --color-page: #ffffff;

  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.5rem, 3.3vw, 3rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Intro / booking block ---------- */
.intro {
  padding: clamp(2.5rem, 4.5vw, 3.5rem) var(--gutter) clamp(1.75rem, 3vw, 2.25rem);
}

.intro__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--color-muted);
}

.intro__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.intro__lead {
  margin: clamp(1.4rem, 2.4vw, 1.8rem) 0 1.1rem;
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* ---------- CTA button ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(280px, 100%);
  padding: 0.95rem 1.4rem;
  background: var(--color-amber);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta:hover {
  background: #f0a92a;
  transform: translateY(-1px);
}

.cta:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

.cta__label {
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.cta__arrow {
  color: var(--color-amber-arrow);
  flex-shrink: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(360px, 56vh, 640px);
  display: flex;
  align-items: flex-end;      /* sit the logo at the bottom… */
  justify-content: flex-start; /* …and the left */
  padding: var(--gutter);      /* respected on all four sides */
  overflow: hidden;

  /* hero-bg.jpg is the concrete-staircase photograph.
     The bottom gradient keeps the white logo legible over light concrete. */
  background-color: #b7b1a8;
  background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 48%),
    url("hero-bg.jpg");
  background-size: cover;
  background-position: center 38%;
}

.hero__logo {
  position: relative;
  width: min(70%, 1055px);
  height: auto;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.3));
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  font-size: 0.82rem;
  color: var(--color-muted);
}

.footer__copy {
  margin: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .intro {
    padding-top: 2rem;
  }

  .intro__title {
    font-size: clamp(2.2rem, 11vw, 2.9rem);
  }

  .cta {
    width: 100%;
  }

  .hero {
    min-height: clamp(300px, 52vh, 440px);
  }

  /* Wider on small screens so "HAIR & SKIN LAB" stays readable. */
  .hero__logo {
    width: min(90%, 460px);
  }
}