@import url("./botox-fillers-base.css");

/* Aesthetic Injectables editorial treatment hero; uses existing approved treatment photography. */
.injectables-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:440px;background:#f5f0e8 url("/assets/botox-fillers/sabeen_botox.webp") right center/auto 100% no-repeat}
.injectables-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(250,248,244,.98) 0%,rgba(250,248,244,.94) 30%,rgba(250,248,244,.44) 53%,rgba(250,248,244,0) 76%)}
.injectables-hero__inner{box-sizing:border-box;width:min(1320px,calc(100% - 64px));max-width:1320px;margin-inline:auto;padding-block:60px}
.injectables-hero__eyebrow{margin:0 0 17px;color:#a97822;font:600 12px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.injectables-hero h1{max-width:620px;margin:0;color:#171717;font:400 clamp(40px,4.2vw,66px)/1.1 var(--serif);letter-spacing:-.025em}
.injectables-hero h1 em{color:#a97822;font-weight:400}
.injectables-hero__copy{max-width:520px;margin:22px 0 26px;color:#49443e;font:400 16px/1.7 var(--sans)}
.injectables-opening__head{padding-block:36px 30px}
@media(max-width:767px){
.injectables-hero{min-height:350px;background-position:right center;background-size:auto 100%}
.injectables-hero::before{background:linear-gradient(90deg,rgba(250,248,244,.96),rgba(250,248,244,.90) 53%,rgba(250,248,244,.58))}
.injectables-hero__inner{width:calc(100% - 36px);padding-block:35px;text-align:center}
.injectables-hero h1{font-size:clamp(36px,9vw,46px);margin-inline:auto}
.injectables-hero__copy{max-width:380px;margin:18px auto 22px;font-size:14px;line-height:1.6}
.injectables-hero .pb-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:260px;max-width:100%;min-width:0;flex:none;margin-inline:auto;padding-inline:14px;text-align:center}
}


/* Mobile layout and responsive presentation. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .injectables-opening__head { padding: 30px 0 26px; }
  .injectables-opening__head > .eyebrow { max-width: 100%; font-size: clamp(24px, 7.6vw, 30px); line-height: 1.15; letter-spacing: .14em; white-space: normal; overflow-wrap: anywhere; }
  .injectables-opening__pb-divider { width: min(92%, 390px); }
  .injectables-opening__categories { max-width: 100%; font-size: clamp(21px, 5.7vw, 28px); line-height: 1.35; white-space: normal; overflow-wrap: normal; }
  .injectables-opening__brands { max-width: 100%; padding-inline: 4px; overflow-wrap: anywhere; }
  .injectable-treatment-pair { gap: 14px; padding: 0 14px 22px; }
  .injectable-treatment-pair .injectable-treatment { max-width: 100%; }
  .injectable-treatment-pair .injectable-treatment__grid { grid-template-rows: 205px auto; border-radius: 12px; }
  .injectable-treatment-pair .injectable-treatment__content, .injectable-treatment-pair .injectable-treatment--sculptra .injectable-treatment__content { padding: 18px 20px 20px; }
  .injectable-treatment-pair .injectable-treatment:not(.injectable-treatment--sculptra) .injectable-treatment__content > .eyebrow { font-size: clamp(27px, 7.5vw, 32px); }
  .injectable-treatment-pair .injectable-treatment--sculptra h2 { font-size: clamp(32px, 9vw, 38px); }
  .injectable-treatment-pair .injectable-treatment__visual img { object-position: center 38%; }
  /* Filler photograph: show the lips and syringe, not the lower face crop. */
  .injectable-treatment-pair .injectable-treatment--filler .injectable-treatment__visual img { object-fit: cover; object-position: 25% 22%; }
  .injectable-treatment-pair .injectable-treatment__content { font-size: 13.5px; line-height: 1.52; }
  .injectable-treatment-pair .injectable-treatment__lead { margin: 9px 0 10px; font-size: 13px; line-height: 1.45; }
  .injectable-treatment-pair .injectable-treatment:not(.injectable-treatment--sculptra) .injectable-treatment__content > .eyebrow { margin-bottom: 5px; }
  .injectable-treatment-pair .injectable-treatment--sculptra .eyebrow { margin-bottom: 5px; }
  .injectable-treatment-pair .treatment-facts { margin-top: 14px; }
  .injectable-treatment-pair .treatment-facts div { padding: 7px 0; }
  .injectable-treatment-pair .treatment-approach { margin-top: 12px; padding: 11px 13px 12px; }
  .injectable-treatment-pair .treatment-approach h3 { font-size: 17px; }
  .injectable-treatment-pair .treatment-approach p { margin-top: 5px; font-size: 11.5px; line-height: 1.5; }
  .treatment-facts div { grid-template-columns: minmax(82px, 30%) 1fr; gap: 10px; }
  .treatment-facts dt, .treatment-facts dd { overflow-wrap: anywhere; }
  .injectables-mid-cta { padding-inline: 16px; }
  .injectables-mid-cta .pb-btn { width: min(100%, 340px); }
  .injectables-areas, .injectables-compare, .injectables-experience, .injectables-standard, .injectables-closing { padding-block: 46px; }
  .injectables-areas h2, .injectables-compare h2, .injectables-experience h2, .injectables-closing h2 { font-size: clamp(30px, 9vw, 36px); }
  .injectables-areas__column, .injectables-areas__column + article, .injectables-areas__column--sculptra { padding: 24px 0 26px; }
  .injectables-areas__column ul, .injectables-areas__column--sculptra ul { grid-template-columns: 1fr; }
  .comparison-table-wrap { overflow-x: visible; }
  .comparison-table { min-width: 0; table-layout: fixed; }
  .comparison-table tr > *:first-child { width: 22%; }
  .comparison-table th, .comparison-table td { padding: 9px 5px; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
  .comparison-table thead th { font-size: 10.5px; }
  .comparison-combination { padding: 14px 14px 16px; }
  .injectables-standard__principles { grid-template-columns: 1fr; }
  .injectables-standard__principles span + span, .injectables-standard__principles span:nth-child(3), .injectables-standard__principles span:nth-child(4) { border-left: 0; border-top: 1px solid rgba(201,154,61,.28); }
  .injectables-closing__grid { grid-template-columns: 1fr; gap: 30px; }
  .consultation-cta { padding: 28px 20px 32px; }
  .consultation-cta__actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 390px) {
  .injectables-opening__head > .eyebrow { font-size: 23px; letter-spacing: .11em; }
  .injectable-treatment h2, .injectables-standard h2 { font-size: 31px; }
  .comparison-table th, .comparison-table td { padding: 8px 4px; font-size: 9.5px; }
}
/* Final mobile anchor offsets; defined once per target. */
@media (max-width: 767px) {
  #treatments-overview { scroll-margin-top: 118px; }
  #neuromodulators, #sculptra, #areas-title, #compare-title,
  #experience-title, #faq-title { scroll-margin-top: 100px; }
  #pure-body-difference { scroll-margin-top: 12px; }
}

/* Compact two-column treatment-area lists on phones. */
@media (max-width: 767px) {
  .injectables-areas__column ul,
  .injectables-areas__column--sculptra ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 13px;
    margin-top: 13px;
  }
  .injectables-areas__column li {
    min-width: 0;
    padding: 0 0 0 12px;
    border-top: 0;
    font-size: 12.5px;
    line-height: 1.4;
    overflow-wrap: normal;
  }
  .injectables-areas__column li::before { top: .7em; width: 5px; }
  .injectables-areas__column,
  .injectables-areas__column + article,
  .injectables-areas__column--sculptra { padding-top: 20px; padding-bottom: 21px; }
}
@media (max-width: 350px) {
  .injectables-areas__column ul,
  .injectables-areas__column--sculptra ul { column-gap: 9px; }
  .injectables-areas__column li { font-size: 11.5px; }
}

/* Intentional consultation heading wrapping on small screens. */
.injectables-mobile-break { display: none; }
@media (max-width: 767px) {
  .injectables-mobile-break { display: inline; }
  .injectables-experience h2 .injectables-mobile-line { white-space: nowrap; }
  .injectables-experience h2 { font-size: clamp(28px, 7.6vw, 35px); }
}

/* Mobile consultation sequence: compact numbered rows, all copy retained. */
@media (max-width: 767px) {
  .injectables-experience { padding-top: 30px; padding-bottom: 30px; }
  .injectables-experience__head { margin-bottom: 15px; }
  .injectables-experience__head > p:last-child { margin-top: 9px; font-size: 13px; line-height: 1.5; }
  .injectables-experience__steps article,
  .injectables-experience__steps article + article {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    column-gap: 11px;
    padding: 13px 2px 14px;
  }
  .injectables-experience__steps article > span {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 5px;
    font-size: 11px;
  }
  .injectables-experience__steps h3 {
    grid-column: 2;
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
  }
  .injectables-experience__steps p {
    grid-column: 2;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* Compact mobile physician-credentials panel. */
@media (max-width: 767px) {
  .injectables-standard__principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
    border-top: 1px solid rgba(201,154,61,.28);
    border-bottom: 1px solid rgba(201,154,61,.28);
  }
  .injectables-standard__principles span,
  .injectables-standard__principles span + span,
  .injectables-standard__principles span:nth-child(3),
  .injectables-standard__principles span:nth-child(4) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 13px 8px;
    border: 0;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }
  .injectables-standard__principles span:nth-child(even) { border-left: 1px solid rgba(201,154,61,.28); }
  .injectables-standard__principles span:nth-child(n+3) { border-top: 1px solid rgba(201,154,61,.28); }
}

/* Consultation contact actions: compact booking CTA and tap-to-call/text on mobile. */
.consultation-cta__phone-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.consultation-cta__phone-links { display: inline-flex; align-items: center; gap: 9px; font: 600 13px/1.5 var(--sans); }
.consultation-cta__phone-links a { color: #9b6c18; text-decoration: underline; text-underline-offset: 3px; }
.consultation-cta__phone-links a:focus-visible { outline: 2px solid #a97822; outline-offset: 3px; }
@media (max-width: 767px) {
  .consultation-cta__actions { align-items: center; gap: 14px; }
  .consultation-cta__actions .pb-btn {
    box-sizing: border-box;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    align-self: center;
    flex: none;
    margin-inline: auto;
  }
  .consultation-cta__phone-line { justify-content: center; gap: 12px; }
}

/* Shared centered booking action at the close of each informational section. */
.injectables-section-cta { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 34px; text-align: center; }
.injectables-section-cta .pb-btn { display: inline-flex; justify-content: center; align-items: center; }
@media (max-width: 767px) {
  .injectables-section-cta { margin-top: 26px; }
}

/* Consultation phone actions are mobile-only; retain the number on desktop. */
@media (min-width: 769px) {
  .consultation-cta__phone-links { display: none; }
}