@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --pink: #ff0099;
  --pink-dark: #d90082;
  --pink-soft: #ffe7f3;
  --pink-pale: #fff3f9;
  --ink: #171216;
  --muted: #675d68;
  --white: #ffffff;
  --line: #f3cfe2;
  --shadow: 0 20px 55px rgba(70, 14, 49, 0.12);
  --radius: 28px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.65;
}

img {
  width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.05;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(3rem, 7vw, 6.4rem);
  letter-spacing: -0.04em;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 110px 0;
}

.section-soft {
  background: var(--pink-pale);
}

.section-dark {
  color: var(--white);
  background: var(--ink);
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--white);
  background: var(--ink);
}

.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(241, 217, 230, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.nav-wrap {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--pink);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand-text {
  display: grid;
  line-height: 1.1;
}

.brand-text strong {
  font-size: 0.98rem;
}

.brand-text small {
  color: var(--pink);
  font-size: 0.82rem;
  font-weight: 700;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav > a {
  font-weight: 700;
  text-decoration: none;
}

.site-nav > a:not(.button):hover {
  color: var(--pink);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
}

.nav-toggle span:not(.sr-only) {
  width: 26px;
  height: 2px;
  display: block;
  margin: 5px;
  background: var(--ink);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 24px;
  border: 2px solid var(--pink);
  border-radius: 999px;
  color: var(--white);
  background: var(--pink);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: 180ms ease;
}

.button:hover {
  border-color: var(--pink-dark);
  background: var(--pink-dark);
  transform: translateY(-2px);
}

.button-small {
  min-height: 44px;
  padding: 10px 18px;
}

.button-white {
  border-color: var(--white);
  color: var(--pink);
  background: var(--white);
}

.button-white:hover {
  border-color: var(--white);
  color: var(--white);
  background: transparent;
}

.hero {
  padding: 82px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 0, 153, 0.14), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 70px;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--pink);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.hero-lead {
  max-width: 670px;
  color: var(--muted);
  font-size: 1.18rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 34px 0;
}

.text-link {
  color: var(--ink);
  font-weight: 800;
  text-underline-offset: 5px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-row span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-media {
  position: relative;
}

.hero-media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 10px solid var(--white);
  border-radius: 240px 240px 50px 50px;
  box-shadow: var(--shadow);
}

.hero-badge {
  position: absolute;
  left: -28px;
  bottom: 45px;
  min-width: 190px;
  display: grid;
  padding: 18px 22px;
  border-radius: 18px;
  color: var(--white);
  background: var(--ink);
  box-shadow: var(--shadow);
}

.hero-badge strong {
  font-size: 1.1rem;
}

.hero-badge span {
  color: #ffb8df;
}

.intro-strip {
  padding: 28px 0;
  color: var(--white);
  background: var(--pink);
}

.intro-strip p {
  max-width: 980px;
  margin: 0 auto;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.35;
  text-align: center;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 50px;
}

.section-heading > p:last-child {
  color: var(--muted);
  font-size: 1.08rem;
}

.section-heading-light > p:last-child {
  color: #d6cbd2;
}

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

.service-card {
  min-height: 280px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 25px rgba(91, 18, 60, 0.05);
}

.service-card-highlight {
  color: var(--white);
  background: var(--pink);
}

.service-card-highlight p {
  color: #fff4fb;
}

.service-number {
  display: inline-block;
  margin-bottom: 46px;
  color: var(--pink);
  font-weight: 800;
}

.service-card-highlight .service-number {
  color: var(--white);
}

.service-card p {
  margin-bottom: 0;
  color: var(--muted);
}

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

.result-card {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.result-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.result-card figcaption {
  padding: 16px 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.disclaimer-box {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: var(--white);
}

.process-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: start;
}

.process-grid > div > p:last-child {
  color: var(--muted);
  font-size: 1.08rem;
}

.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-list li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.process-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.process-list li > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--pink);
  font-weight: 800;
}

.process-list p {
  margin-bottom: 0;
  color: var(--muted);
}

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

.review-card {
  margin: 0;
  padding: 30px;
  border: 1px solid #40373d;
  border-radius: var(--radius);
  background: #211b1f;
}

.stars {
  margin-bottom: 18px;
  color: #ff69bd;
  letter-spacing: 0.18em;
}

.review-card p {
  color: #eee6eb;
}

.review-card footer {
  color: #ff94cf;
  font-weight: 800;
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 80px;
  align-items: start;
}

.faq-heading {
  position: sticky;
  top: 120px;
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  padding: 24px 36px 24px 0;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 800;
}

.faq-list details p {
  padding: 0 0 24px;
  color: var(--muted);
}

.local-section {
  padding-top: 0;
}

.local-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: 36px;
  background: var(--pink-soft);
}

.local-card {
  padding: 60px;
}

.local-card address {
  margin-top: 26px;
  font-style: normal;
}

.appointment-note {
  margin-top: 20px;
  color: var(--pink-dark);
  font-weight: 800;
}

.map-placeholder {
  min-height: 420px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 30px;
  color: var(--white);
  background:
    linear-gradient(rgba(23, 18, 22, 0.84), rgba(23, 18, 22, 0.84)),
    repeating-linear-gradient(45deg, #f1c5dd 0 18px, #ffffff 18px 36px);
  text-align: center;
}

.map-placeholder span {
  font-size: 1.25rem;
  font-weight: 800;
}

.cta-section {
  padding: 0 0 110px;
}

.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 55px 60px;
  border-radius: 36px;
  color: var(--white);
  background: var(--pink);
}

.cta-box h2 {
  margin-bottom: 10px;
}

.cta-box .eyebrow {
  color: var(--white);
}

.cta-box p:last-child {
  margin-bottom: 0;
}

.site-footer {
  padding: 70px 0 24px;
  color: var(--white);
  background: var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 50px;
}

.brand-footer {
  margin-bottom: 20px;
}

.footer-grid h2 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1rem;
}

.footer-grid a:not(.brand) {
  display: block;
  margin: 8px 0;
  color: #e8dce3;
  text-decoration: none;
}

.footer-grid p {
  color: #cfc1c9;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid #3a3036;
  color: #a99aa3;
  font-size: 0.85rem;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 940px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 82px;
    display: none;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: grid;
  }

  .hero-grid,
  .process-grid,
  .faq-layout,
  .local-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 50px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-actions,
  .trust-row {
    justify-content: center;
  }

  .hero-media {
    max-width: 620px;
    margin-inline: auto;
  }

  .card-grid,
  .results-grid,
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-heading {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 78px 0;
  }

  .brand-text strong {
    font-size: 0.82rem;
  }

  .brand-text small {
    font-size: 0.72rem;
  }

  .hero {
    padding-top: 58px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-badge {
    left: 12px;
    bottom: 20px;
  }

  .card-grid,
  .results-grid,
  .review-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: auto;
  }

  .process-grid,
  .faq-layout {
    gap: 45px;
  }

  .local-card {
    padding: 40px 26px;
  }

  .cta-box {
    align-items: stretch;
    flex-direction: column;
    padding: 40px 26px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}


/* Real treatment media */
.treatment-photo-grid .result-card img {
  aspect-ratio: 4 / 5;
  object-position: center;
}

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

.video-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.video-card video {
  width: 100%;
  aspect-ratio: 9 / 14;
  display: block;
  object-fit: cover;
  background: #171216;
}

.video-card h3 {
  margin: 0;
  padding: 18px 20px 22px;
}

.tattoo-section {
  background: #ffffff;
}

.tattoo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 22px;
  align-items: stretch;
}

.tattoo-result-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pink-soft);
  box-shadow: var(--shadow);
}

.tattoo-result-card img {
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.tattoo-copy-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--ink);
}

.tattoo-copy-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.2rem;
}

.tattoo-copy-card p:not(.eyebrow) {
  color: #e8dce3;
}

.tattoo-copy-card .button {
  align-self: flex-start;
  margin-top: 14px;
}

@media (max-width: 940px) {
  .video-grid,
  .tattoo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tattoo-copy-card {
    grid-column: 1 / -1;
  }
}

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

  .tattoo-copy-card {
    grid-column: auto;
  }

  .tattoo-result-card img {
    min-height: auto;
  }
}


/* PCOS specialty section */
.pcos-banner {
  padding: 68px 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 0, 153, 0.12), transparent 28%),
    linear-gradient(90deg, #fff8fc 0%, #fff0f8 100%);
}

.pcos-banner-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.pcos-banner h2 {
  margin-bottom: 0;
  color: var(--ink);
}

.pcos-kicker {
  margin-bottom: 12px;
  color: var(--pink);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
}

.pcos-banner-grid > div:last-child > p:not(.pcos-kicker) {
  color: var(--muted);
}

@media (max-width: 760px) {
  .pcos-banner-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* WordPress theme enhancements */
.nav-wrap{min-height:154px}.brand-logo{display:block;flex:0 0 auto;width:min(260px,42vw);height:150px;overflow:hidden}.brand-logo img{display:block;width:100%;height:auto;transform:translateY(-17%)}
.site-footer .brand-logo{height:150px}.site-footer .brand-logo img{filter:none}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)}.hero-copy{max-width:900px}.hero{background:radial-gradient(circle at 88% 20%,#ffd9ec 0,transparent 34%),linear-gradient(135deg,#fff 0%,#fff3f9 100%)}.hero-media{max-width:510px;margin-left:auto}.hero-media img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;border-radius:56px;max-height:680px}
.treatment-photo-grid{align-items:start}.treatment-photo-grid .result-card{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}.treatment-photo-grid .result-card img,.treatment-photo-grid .result-card:nth-child(n) img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border:0;border-radius:16px;box-shadow:0 14px 34px rgba(151,35,101,.10)}.result-card figcaption{min-height:0;background:transparent;padding:14px 4px 0}
.tattoo-result-card{display:flex;align-items:center;justify-content:center}.tattoo-result-card img{width:100%;height:auto;min-height:0;max-height:620px;object-fit:contain;background:#fff8fc}
.tattoo-grid-text-only{grid-template-columns:1fr}.tattoo-grid-text-only .tattoo-copy-card{max-width:780px}
.video-card video{aspect-ratio:9/16;object-fit:contain}
.inner-hero{min-height:auto;padding:clamp(7rem,12vw,10rem) 0 clamp(4rem,8vw,7rem)}
.inner-hero .container{max-width:900px}
.detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-grid .service-card h2{font-size:clamp(1.35rem,2vw,1.8rem)}
.site-footer address{font-style:normal}
.location-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;background:linear-gradient(135deg,#ffe7f3,#fff5fa);border:1px solid #f3cfe2;border-radius:24px;min-height:420px;padding:2rem}.location-panel span{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3rem);color:#1e1720}.location-panel small{font-size:1.05rem}
.site-footer .site-nav,.site-footer .button{display:none}
.site-nav{gap:14px}.site-nav>a{font-size:.9rem}.nav-wrap{width:min(calc(100% - 32px),1380px)}
.inner-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.7fr);gap:56px;align-items:center}.service-page-image{width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:24px;box-shadow:0 18px 45px rgba(151,35,101,.13)}
.review-visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}.review-visual-grid img{border-radius:22px}
.bio-grid{display:grid;grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr);gap:64px;align-items:start}.bio-photo img{width:100%;height:auto;border-radius:28px;box-shadow:var(--shadow)}
.service-card-highlight,.intro-strip,.cta-box{background:#ff0099!important}.tattoo-copy-card{color:var(--ink);background:#ffe7f3}.tattoo-copy-card p:not(.eyebrow){color:var(--muted)}.tattoo-copy-card .button{color:#fff;background:#ff0099}
.local-seo-section{background:#fff3f9}
@media(max-width:940px){.nav-wrap{min-height:136px}.site-nav{top:136px}.brand-logo{width:min(230px,62vw);height:132px}.hero-grid{grid-template-columns:1fr}.hero-media{width:min(100%,510px);margin-inline:auto}}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}.inner-hero{padding-top:8rem}}
@media(max-width:640px){.nav-wrap{min-height:108px}.site-nav{top:108px}.brand-logo{width:min(190px,62vw);height:104px}.hero{padding:54px 0 64px}.hero-grid{gap:34px}.hero-media{width:100%;max-width:none}.hero-media img{width:100%;height:auto;max-height:390px;aspect-ratio:4/3;object-fit:cover;object-position:center 28%;border-width:6px;border-radius:28px}.hero-badge{left:12px;bottom:12px;min-width:0;padding:11px 15px;border-radius:14px}.hero-badge strong{font-size:.92rem}.hero-badge span{font-size:.8rem}.treatment-photo-grid .result-card img{height:auto;aspect-ratio:auto;object-fit:contain}.result-card figcaption{min-height:0}.tattoo-grid{grid-template-columns:1fr}.tattoo-result-card img{max-height:none}.video-card video{height:auto}}
@media(max-width:940px){.inner-hero-grid,.bio-grid{grid-template-columns:1fr}.service-page-image{max-height:560px}.review-visual-grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .inner-hero-grid{gap:30px}
  .service-page-image{display:block;width:auto;max-width:100%;height:auto;max-height:440px;margin-inline:auto;object-fit:contain;border-radius:18px}
  .bio-photo{text-align:center}.bio-photo img{width:auto;max-width:100%;height:auto;max-height:520px;margin-inline:auto;object-fit:contain;border-radius:20px}
  .review-visual-grid{gap:18px}.review-visual-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:16px}
  .treatment-photo-grid{gap:34px}.treatment-photo-grid .result-card img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;border-radius:14px}
  .tattoo-result-card{min-height:0}.tattoo-result-card img{display:block;width:auto;max-width:100%;height:auto;max-height:460px;margin-inline:auto;object-fit:contain}
  .video-grid{grid-template-columns:1fr;gap:24px}.video-card video{display:block;width:100%;height:auto;max-height:520px;aspect-ratio:auto;object-fit:contain}
}
