:root {
  color-scheme: dark;
  --cream: #faf7ef;
  --muted: rgba(250, 247, 239, 0.7);
  --line: rgba(250, 247, 239, 0.34);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #101827;
  color: var(--cream);
  font-family: "DM Sans", Arial, sans-serif;
}

.hero {
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

.hero__background, .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__background {
  background: url("assets/harley-street-evening.png") center / cover no-repeat;
  filter: saturate(0.72) contrast(1.05);
  transform: scale(1.025);
}

.hero__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 14, 27, 0.94) 0%, rgba(6, 14, 27, 0.79) 39%, rgba(6, 14, 27, 0.19) 72%, rgba(6, 14, 27, 0.12) 100%),
    linear-gradient(0deg, rgba(4, 10, 20, 0.55), transparent 45%);
}

.site-header, .site-footer { display: flex; justify-content: space-between; align-items: center; }
.mobile-hero { display: none; }

.wordmark { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--cream); text-decoration: none; }

.wordmark__mark {
  width: 2.45rem;
  height: 2.45rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.91rem;
}

.wordmark__name { font-family: "Playfair Display", Georgia, serif; font-size: 1.14rem; letter-spacing: 0.035em; }
.wordmark__name small { font-family: "DM Sans", Arial, sans-serif; font-size: 0.52em; font-weight: 500; letter-spacing: 0.14em; vertical-align: middle; }

.content { align-self: center; justify-self: start; width: min(100%, 42rem); text-align: left; padding: 4rem 0; }

.eyebrow { margin: 0 0 1.4rem; color: var(--muted); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(3rem, 7.6vw, 6.9rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.98; text-wrap: balance; }

.intro { max-width: 29rem; margin: 1.75rem 0 2.3rem; color: var(--muted); font-size: clamp(0.98rem, 1.4vw, 1.12rem); line-height: 1.65; }

.contact { display: inline-flex; flex-direction: column; gap: 0.35rem; color: var(--cream); text-decoration: none; font-size: 0.71rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.contact__email { padding-bottom: 0.45rem; border-bottom: 1px solid var(--cream); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: none; transition: opacity 160ms ease; }
.contact:hover .contact__email, .contact:focus-visible .contact__email { opacity: 0.65; }

.whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.72rem 0.55rem;
  border-top: 1px solid rgba(250, 247, 239, 0.2);
  color: var(--cream);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

.whatsapp__icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: #25d366; }
.whatsapp:hover, .whatsapp:focus-visible { background: rgba(255, 255, 255, 0.1); }

.clinician-portrait {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5.5rem);
  bottom: clamp(4.25rem, 9vh, 7.5rem);
  width: clamp(8.5rem, 14vw, 13rem);
  margin: 0;
  border: 1px solid rgba(250, 247, 239, 0.4);
  background: #121e30;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.28);
}

.clinician-portrait img { display: block; width: 100%; aspect-ratio: 0.79; object-fit: cover; object-position: 50% 22%; filter: saturate(0.86); }
.clinician-portrait figcaption { padding: 0.7rem 0.8rem; color: var(--cream); font-size: 0.56rem; letter-spacing: 0.11em; text-transform: uppercase; }

.site-footer { color: rgba(250, 247, 239, 0.57); font-size: 0.67rem; letter-spacing: 0.13em; text-transform: uppercase; }
.site-footer p { margin: 0; }

@media (max-width: 850px) {
  .clinician-portrait {
    top: 1.45rem;
    right: clamp(1.35rem, 4vw, 2.25rem);
    bottom: auto;
    width: clamp(5.7rem, 13vw, 6.7rem);
  }
  .clinician-portrait figcaption { padding: 0.46rem 0.52rem; font-size: 0.45rem; line-height: 1.4; }
  .clinician-portrait .whatsapp { gap: 0.35rem; padding: 0.5rem 0.3rem; font-size: 0.45rem; letter-spacing: 0.06em; }
  .clinician-portrait .whatsapp__icon { width: 0.9rem; height: 0.9rem; }
  .content { align-self: end; padding-top: 13rem; }
}

@media (max-width: 600px) {
  .hero { display: block; min-height: 100svh; padding: 0; }
  .hero__background { background-position: 60% center; }
  .hero__overlay { inset: 49% 0 0; background: linear-gradient(180deg, rgba(6, 14, 27, 0.47), rgba(6, 14, 27, 0.95) 35%, rgba(6, 14, 27, 0.98)); }
  .site-header { position: absolute; top: 1.2rem; left: 1.35rem; z-index: 2; }
  .wordmark__name { font-size: 1.04rem; }
  .mobile-hero {
    position: absolute;
    inset: 0 0 51% 0;
    z-index: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 1.2rem 1.35rem 1.45rem;
    background: linear-gradient(180deg, rgba(4, 12, 25, 0.05), rgba(4, 12, 25, 0.6)), url("assets/doctor-portrait-mask-corrected.png") center 23% / cover no-repeat;
  }
  .mobile-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: min(100%, 18rem);
    padding: 0.98rem 1rem;
    background: #25d366;
    color: #071827;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.22);
  }
  .mobile-contact svg { width: 1.28rem; height: 1.28rem; }
  .mobile-contact:hover, .mobile-contact:focus-visible { background: #5eea93; }
  .clinician-portrait { display: none; }
  .content { position: absolute; z-index: 1; top: 49%; right: 1.35rem; bottom: 1.25rem; left: 1.35rem; width: auto; padding: 1.25rem 0 0; text-align: left; }
  .eyebrow { margin: 0 0 0.6rem; font-size: 0.53rem; letter-spacing: 0.14em; }
  h1 { font-size: clamp(2.25rem, 11.8vw, 3rem); line-height: 0.98; }
  .intro { margin: 0.85rem 0 1rem; font-size: 0.82rem; line-height: 1.48; }
  .contact { font-size: 0.57rem; }
  .contact__email { font-size: 0.72rem; }
  .site-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }