:root {
    --pink:#080b64;
    --ink:#111111;
    --blush:#e5e3d8
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    font-size:15px
}

h1,h2,h3 {
    font-family:'Playfair Display',serif;
    font-weight:500;
    letter-spacing:-.035em
}

h2 {
    font-size:clamp(30px,3vw,45px);
    line-height:1.04
}

h2 span,h1 span {
    color:var(--pink)
}

.container {
    max-width:1360px
}

.topbar {
    background:var(--blush);
    color:var(--ink);
    font-size:11px;
    padding:7px 0
}

.site-header {
    background:#fff;
    box-shadow:0 2px 12px #1111;
    position:relative;
    z-index:5
}

.navbar {
    min-height:76px
}

.navbar-brand {
    color:#080b64;
    font-size:29px;
    letter-spacing:-.06em;
    line-height:1
}

.navbar-brand em {
    font-family:'Playfair Display',serif;
    color:var(--pink);
    font-size:27px;
    font-weight:600
}

.navbar-brand small {
    display:block;
    letter-spacing:.3em;
    font-size:7px;
    text-align:center;
    margin-top:4px
}

.nav-link {
    font-size:14px;
    color:#080b64;
    margin:0 6px
}

.nav-actions {
    display:flex;
    gap:12px;
    align-items:center
}

.phone {
    background:#080b64;
    color:#fff;
    text-decoration:none;
    padding:12px 16px;
    border-radius:3px;
    font-size:12px
}

.btn {
    border-radius:2px;
    font-weight:700;
    font-size:12px;
    padding:13px 20px
}

.btn-pink {
    background:var(--pink);
    border:2px solid var(--pink);
    color:#fff
}

.btn-outline-pink {
    border:2px solid var(--pink);
    color:var(--pink);
    background:#fff
}

.btn-dark-cta {
    background:#080b64;
    color:#fff;
    border:2px solid #080b64
}

.hero {
    background:linear-gradient(100deg,#fff 3%,#f1f0e9 58%,#e5e3d8 100%);
    overflow:hidden
}

.hero-grid {
    min-height:635px;
    display:grid;
    grid-template-columns:40% 34% 26%
}

.hero-copy {
    padding:65px 0 40px;
    z-index:2
}

.eyebrow {
    color:var(--pink);
    font-weight:700;
    letter-spacing:.18em;
    font-size:13px;
    margin-bottom:14px
}

.hero h1 {
    font-size:clamp(44px,4.3vw,68px);
    line-height:.97;
    margin-bottom:20px
}

.hero-lead {
    max-width:490px
}

.benefits,.mini-benefits {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    text-align:center;
    margin:24px 0;
    font-size:11px;
    line-height:1.2
}

.benefits i,.mini-benefits i {
    font-style:normal;
    color:var(--pink);
    font-size:34px;
    display:block;
    margin-bottom:5px
}

.hero-btn {
    display:block;
    width:min(100%,465px);
    margin-top:10px;
    text-align:center
}

.hero-person {
    background:url('../images/Bright Studio Wellness Portrait (1).png') center top/cover no-repeat;
    min-height:100%;
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 95%)
}

.live-wrap {
    padding:28px 0 15px;
    z-index:2
}

.live-card {
    border:7px solid #fff;
    border-radius:12px 12px 0 0;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 12px 24px #1e182730
}

.live-photo {
    height:235px;
    background:url('../images/support-image-banner.png') center/cover no-repeat;
    position:relative
}

.live-badge {
    position:absolute;
    top:10px;
    left:10px;
    border-radius:15px;
    background:#080b64;
    color:#fff;
    font-size:11px;
    padding:5px 9px
}

.live-content {
    color:var(--ink);
    padding:16px
}

.live-content h3 {
    font-family:'DM Sans';
    font-weight:700;
    letter-spacing:0;
    font-size:19px
}

.live-content p {
    font-size:13px
}

.zoom {
    font-weight:700;
    font-size:22px;
    margin-bottom:10px
}

.availability {
    background:#fff;
    padding:12px;
    text-align:center;
    box-shadow:0 8px 18px #2222
}

.availability b,.availability small {
    display:block
}

.handwritten {
    text-align:center;
    font-family:'Playfair Display';
    font-style:italic;
    font-size:22px;
    transform:rotate(-7deg);
    margin:28px 0
}

.trust-strip {
    background:#080b64;
    color:#fff;
    padding:18px 0
}

.trust-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px
}

.trust-grid>div {
    display:flex;
    align-items:center;
    gap:10px
}

.trust-grid b {
    font-size:34px;
    color:#ffffff;
    font-weight:400
}

.trust-grid strong,.trust-grid small {
    display:block
}

.trust-grid small {
    font-size:11px
}

.section {
    padding:50px 0
}

.section-intro {
    font-size:14px
}

.result-card img {
    width:100%;
    height:auto;
    object-fit:cover
}

.before-after {
    display:flex;
    background:#fff;
    font-size:10px;
    font-weight:700;
    padding:8px 0;
    box-shadow:0 2px 8px #0001
}

.before-after span {
    width:50%
}

.result-card p {
    font-size:14px
}

.results-cta {
    display:block;
    max-width:390px;
    margin:10px auto
}

.treatment {
    background:linear-gradient(95deg,#e5e3d8,#f6f5f0)
}

.treatment-grid {
    min-height:400px;
    display:grid;
    grid-template-columns:40% 60%;
    align-items:center
}

.treatment-photo {
    height:100%;
    background:url('../images/abdoen -new.png') center/cover no-repeat
}

.treatment-copy {
    padding:45px 7%
}

.treatment-copy p {
    font-size:15px
}

.journey {
    background:linear-gradient(90deg,#fff,#e5e3d8)
}

.journey-main {
    padding:38px 5%
}

.pale {
    color:#080b64;
    font-size:11px;
    letter-spacing:.18em
}

.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:28px;
    text-align:center
}

.steps i {
    display:grid;
    place-items:center;
    width:55px;
    height:55px;
    border:2px solid var(--pink);
    border-radius:50%;
    color:var(--pink);
    font-style:normal;
    font-size:23px;
    margin:0 auto 8px
}

.steps b {
    font-size:12px
}

.steps p {
    font-size:10px;
    line-height:1.35
}

.clinic-card {
    background:var(--pink);
    color:#fff;
    text-align:center;
    padding:15px 24px
}

.clinic-card img {
    width:100%;
    height:210px;
    object-fit:cover
}

.clinic-card h3 {
    font-family:'Playfair Display';
    font-size:26px;
    margin-top:10px
}

.surgeon-grid {
    display:grid;
    grid-template-columns:29% 46% 25%;
    align-items:center;
    gap:20px
}

.surgeon-photo {
    width:100%;
    max-width:320px;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:50%
}

.surgeon-grid h3 {
    font-size:30px
}

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

.surgeon-points li {
    font-size:12px;
    margin:14px 0
}

.surgeon-points li:before {
    content:'♧';
    color:var(--pink);
    font-size:20px;
    margin-right:10px
}

.social-grid {
    display:grid;
    grid-template-columns:68% 32%;
    gap:30px
}

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

.testimonials blockquote {
    background:#fff;
    box-shadow:0 1px 10px #0002;
    padding:18px 14px;
    font-size:12px;
    min-height:200px
}

.testimonials strong {
    display:block;
    color:#080b64;
    font-size:18px;
    margin-top:14px
}

.testimonials cite {
    font-style:normal;
    font-size:11px;
    font-weight:700
}

.accordion-button {
    font-size:12px;
    padding:10px
}

.accordion-body {
    font-size:12px
}

.closing {
    position: relative;
    min-height: 400px;
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.05) 42%,
            rgba(8, 11, 100, 0.78) 55%,
            rgba(8, 11, 100, 0.95) 100%
        ),
        url('../images/Sunlit brunette with tropical palms (1).png') center center / cover no-repeat;
}

.closing-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    min-height: 400px;
}

/* Image is now applied to the complete section */
.closing-photo {
    position: relative;
    background: none;
}

.script {
    position: absolute;
    left: 30px;
    top: 35px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 30px;
    line-height: 1.2;
    transform: rotate(-8deg);
    color: #fff;
}

.closing-copy {
    position: relative;
    z-index: 2;
    padding: 45px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.closing-copy h2 {
    font-size: 43px;
    line-height: 1.1;
    margin-bottom: 18px;
}

.closing-copy p {
    max-width: 520px;
    margin-bottom: 25px;
}

.closing-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-top: 40px;
}

.closing-benefits span {
    display: block;
    font-size: 35px;
}

.closing-benefits small {
    display: block;
    font-size: 11px;
    margin-top: 8px;
}


@media(max-width:991px) {
    .hero-grid {
        grid-template-columns:55% 45%
    }
    .live-wrap {
        grid-column:1/-1;
        max-width:500px;
        margin:auto
    }
    .trust-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .surgeon-grid {
        grid-template-columns:30% 70%
    }
    .surgeon-points {
        grid-column:2
    }
    .social-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:767px) {
    .hero-grid {
        display:block;
        position:relative
    }
    .hero-copy {
        padding:38px 0
    }
    .hero-person {
        position:absolute;
        right:-20%;
        top:0;
        width:70%;
        height:470px;
        opacity:.28
    }
    .live-wrap {
        position:relative
    }
    .benefits,.mini-benefits {
        grid-template-columns:repeat(2,1fr)
    }
    .trust-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .treatment-grid {
        display:block
    }
    .treatment-photo {
        height:300px
    }
    .steps {
        grid-template-columns:repeat(2,1fr)
    }
    .surgeon-grid {
        display:block;
        text-align:center
    }
    .surgeon-photo {
        width:220px
    }
    .surgeon-points {
        text-align:left
    }
    .testimonials {
        grid-template-columns:1fr
    }
    .closing {
        background:var(--pink)
    }
    .closing-grid {
        display:block
    }
    .closing-photo {
        height:330px
    }
    .closing-copy {
        padding:35px 22px
    }
    .topbar span:last-child {
        display:none
    }
    .closing {
        min-height: auto;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.10) 0%,
                rgba(8, 11, 100, 0.75) 40%,
                rgba(8, 11, 100, 0.96) 100%
            ),
            url('../images/footer-banner.png') center top / cover no-repeat;
    }

    .closing-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .closing-photo {
        min-height: 300px;
    }

    .closing-copy {
        padding: 40px 25px;
    }

    .closing-copy h2 {
        font-size: 34px;
    }

    .closing-benefits {
        gap: 15px;
        margin-top: 30px;
    }
}

/* Nip Tuck color completion.
   Targeted priorities also correct the earlier HTML color overrides. */
:root {
    --nt-navy: #080b64;
    --nt-navy-hover: #050747;
    --nt-beige: #e5e3d8;
    --nt-ink: #111111;
    --nt-muted: #545454;
}
body { background-color: #fff; }
.phone, .phone:visited {
    color: #fff !important;
    background-color: var(--nt-navy);
}
.phone:hover, .phone:focus-visible {
    color: #fff !important;
    background-color: var(--nt-navy-hover);
}
.btn-pink:hover, .btn-pink:focus-visible,
.btn-dark-cta:hover, .btn-dark-cta:focus-visible {
    color: #fff !important;
    background-color: var(--nt-navy-hover);
    border-color: var(--nt-navy-hover);
}
.btn-outline-pink:hover, .btn-outline-pink:focus-visible {
    color: #fff !important;
    background-color: var(--nt-navy);
    border-color: var(--nt-navy);
}
.live-card, .live-content { background-color: #fff; }
.live-content, .live-content h3, .live-content p, .live-content .zoom {
    color: var(--nt-navy) !important;
}
.live-content .btn { color: #fff !important; }
.trust-strip {
    background-color: var(--nt-navy) !important;
    color: #fff !important;
}
.trust-strip b, .trust-strip strong, .trust-strip small {
    color: #fff !important;
}
.handwritten { color: var(--nt-navy); }
.surgeon { background-color: var(--nt-beige); }
.surgeon-grid h3 { color: var(--nt-navy); }
.accordion-button:not(.collapsed) {
    color: var(--nt-navy);
    background-color: var(--nt-beige);
    box-shadow: none;
}
.accordion-button:focus {
    border-color: var(--nt-navy);
    box-shadow: 0 0 0 3px rgba(8, 11, 100, .18);
}
.accordion-item { border-color: var(--nt-beige); }
.clinic-card h3, .clinic-card p { color: #fff; }
.clinic-card .btn-light { color: var(--nt-navy); }
.before-after, .before-after span {
    background-color: var(--nt-navy);
    color: #fff;
}
.closing .btn-dark-cta {
    color: var(--nt-navy) !important;
    background-color: #fff !important;
    border-color: #fff !important;
}
.closing .btn-dark-cta:hover, .closing .btn-dark-cta:focus-visible {
    color: var(--nt-navy) !important;
    background-color: var(--nt-beige) !important;
    border-color: var(--nt-beige) !important;
}
