/* Explicit stroke colors keep outlined headings visible across browsers. */
h1 em,
h2 em {
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--ink);
  paint-order: stroke fill;
}

.services h2 em,
.testimonials h2 em,
.contact h2 em {
  -webkit-text-stroke-color: #fff;
}

@supports not (-webkit-text-stroke: 1px black) {
  h1 em,
  h2 em {
    color: var(--ink);
  }

  .services h2 em,
  .testimonials h2 em,
  .contact h2 em {
    color: #fff;
  }
}

.cert-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
  padding: 12px 20px 12px 12px;
  background: #fff;
  border: 1px solid #cacac3;
  box-shadow: 8px 8px 0 var(--lime);
}

.cert-card img { width: 88px; height: 88px; object-fit: contain; }
.cert-card p { margin: 0; font-size: .78rem; line-height: 1.45; letter-spacing: .08em; }
.cert-card strong { font-family: Oswald, sans-serif; font-size: 1rem; }

.transformation { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.transformation figure { margin: 0; }
.photo-frame { height: 520px; overflow: hidden; background: #151614; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.04); }
.transformation figure:first-child .photo-frame img { object-position: 50% 35%; }
.transformation figure:last-child .photo-frame img { object-position: 50% 40%; }
.transformation figcaption { display: flex; gap: 12px; align-items: center; padding-top: 14px; font: 700 1.1rem Oswald, sans-serif; letter-spacing: .08em; }
.transformation figcaption span { color: #777; font-size: .72rem; }

.testimonials { padding: 110px 5vw; background: var(--ink); color: #fff; }
.testimonial-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.testimonial-head h2 { font-size: clamp(3.5rem,7vw,7rem); letter-spacing: -.035em; }
.testimonial-head > p { color: #b8b9b2; max-width: 350px; line-height: 1.6; }
.testimonial-empty { margin-top: 60px; border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 35px; align-items: center; padding: 36px 42px; }
.quote-mark { color: var(--lime); font: 700 5rem Oswald, sans-serif; line-height: .7; }
.testimonial-empty h3 { font-size: 1.8rem; margin-bottom: 10px; }
.testimonial-empty p { color: #b8b9b2; max-width: 650px; line-height: 1.55; margin: 0; }
.testimonial-empty a { color: var(--lime); font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--lime); padding-bottom: 4px; }

@media (max-width: 850px) {
  .testimonial-head { display: block; }
  .testimonial-head > p { margin-top: 24px; }
  .testimonial-empty { grid-template-columns: auto 1fr; }
  .testimonial-empty a { grid-column: 2; justify-self: start; }
}

@media (max-width: 520px) {
  .cert-card { margin-top: 28px; }
  .transformation { gap: 10px; }
  .photo-frame { height: 360px; }
  .testimonials { padding: 80px 6vw; }
  .testimonial-head h2 { font-size: 3.2rem; }
  .testimonial-empty { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
  .testimonial-empty a { grid-column: 1; }
}

/* Reliable, finger-friendly navigation and anchor positioning on phones. */
button,
a {
  touch-action: manipulation;
}

#about,
#services,
#journey,
#testimonials,
#contact {
  scroll-margin-top: 82px;
}

@media (max-width: 850px) {
  .menu {
    min-width: 48px;
    min-height: 48px;
    cursor: pointer;
  }

  .nav nav {
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }

  .nav nav a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
  }

  .nav nav .nav-cta {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  #about,
  #services,
  #journey,
  #testimonials,
  #contact {
    scroll-margin-top: 70px;
  }

  .nav nav {
    max-height: calc(100vh - 70px);
  }
}