:root{
  --plum:#5b2e4a;--rose:#a56a7f;--blush:#e7a9b6;--pink:#f7c7d1;
  --cream:#f3e7df;--taupe:#c8b7ae;--gold:#d4af37;--ivory:#faf6f2;
  --white:#fff;--ink:#36282f;--muted:#776a70;--line:rgba(91,46,74,.14);
  --shadow:0 24px 70px rgba(91,46,74,.12);--radius:28px;
  --serif:'Playfair Display',Georgia,serif;--script:'Great Vibes',cursive;
  --sans:'Montserrat',system-ui,sans-serif
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font:15px/1.75 var(--sans);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;background-image:radial-gradient(rgba(91,46,74,.18) .45px,transparent .6px);background-size:6px 6px}img{max-width:100%;display:block}a{color:inherit}h1,h2,h3{font-family:var(--serif);color:var(--plum);line-height:1.05;margin:0 0 1rem;font-weight:600}h1{font-size:clamp(3rem,7.8vw,6.8rem);letter-spacing:-.04em}h2{font-size:clamp(2.2rem,4.8vw,4.2rem);letter-spacing:-.03em}h3{font-size:1.5rem}p{margin:0 0 1.25rem}.site-header{height:92px;padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;background:rgba(250,246,242,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}.brand img{width:58px;height:58px;object-fit:contain}.brand span{display:flex;flex-direction:column;line-height:1}.brand strong{font:600 1.05rem var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}.brand em{font:400 .9rem var(--script);font-style:normal;color:var(--rose);margin-top:.18rem}.desktop-nav{display:flex;align-items:center;gap:2rem}.desktop-nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;font-weight:700;position:relative}.desktop-nav a:not(.nav-cta):after{content:"";position:absolute;height:1px;background:var(--rose);left:0;right:100%;bottom:-.65rem;transition:.25s}.desktop-nav a:hover:after,.desktop-nav a.active:after{right:0}.nav-cta{border:1px solid var(--plum);padding:.78rem 1.15rem;border-radius:999px}.nav-cta:hover,.nav-cta.active{background:var(--plum);color:#fff}.hero{min-height:calc(100vh - 92px);display:grid;grid-template-columns:1.08fr .92fr;gap:4vw;align-items:center;padding:5vw 7vw 7vw;overflow:hidden;background:radial-gradient(circle at 75% 50%,rgba(247,199,209,.45),transparent 34%),linear-gradient(135deg,#fff 0%,var(--ivory) 52%,#f0ddd7 100%)}.hero-copy{max-width:760px}.hero h1 span{font-family:var(--script);font-weight:400;color:var(--rose);font-size:.78em;letter-spacing:0}.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.22em;font-weight:700;font-size:.67rem;color:var(--rose);margin-bottom:1.2rem}.lead{font-size:clamp(1rem,1.45vw,1.2rem);max-width:620px;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.98rem 1.45rem;border:1px solid var(--plum);border-radius:999px;background:var(--plum);color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font:700 .68rem var(--sans);cursor:pointer;transition:.22s}.button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(91,46,74,.18)}.button-ghost{background:transparent;color:var(--plum)}.button-light{background:#fff;border-color:#fff;color:var(--plum)}.trust-row{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:2.4rem;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.trust-row span:before{content:"♥";font-size:.55rem;color:var(--gold);margin-right:.5rem}.hero-logo-wrap{position:relative;min-height:610px;display:grid;place-items:center}.hero-logo{position:relative;z-index:2;width:min(580px,95%);filter:drop-shadow(0 25px 45px rgba(91,46,74,.14))}.halo{position:absolute;border-radius:50%;border:1px solid rgba(212,175,55,.38)}.halo-one{width:520px;height:520px}.halo-two{width:580px;height:580px;opacity:.45}.section{padding:7rem 8vw}.welcome{background:#fff}.welcome-grid{display:grid;grid-template-columns:1.15fr .65fr;gap:8vw;align-items:end}.welcome-grid p{font-size:1.03rem;color:var(--muted)}.text-link{text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.69rem;color:var(--plum)}.text-link span{color:var(--gold);font-size:1rem;margin-left:.25rem}.treatment-showcase{background:linear-gradient(180deg,var(--ivory),#f6ebe6)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.6rem}.treatment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.treatment-card{position:relative;min-height:330px;padding:1.4rem;border:1px solid rgba(91,46,74,.08);border-radius:24px;background:rgba(255,255,255,.82);text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:space-between;box-shadow:0 15px 40px rgba(91,46,74,.06);transition:.25s;overflow:hidden}.treatment-card:after{content:"";position:absolute;inset:auto -25% -55% -25%;height:70%;border-radius:50%;background:linear-gradient(140deg,rgba(231,169,182,.18),rgba(212,175,55,.08))}.treatment-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.treatment-card img{width:150px;height:150px;object-fit:contain;position:relative;z-index:1}.treatment-card h3{font-size:1.65rem;margin:.5rem 0 .25rem}.treatment-card p{margin:0;color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em}.card-arrow{position:absolute;right:1rem;top:1rem;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--rose);background:#fff}.brand-banner{position:relative;margin:0;background:var(--plum);overflow:hidden}.brand-banner picture,.brand-banner img{width:100%;display:block}.banner-link{position:absolute;inset:0}.details-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid var(--line)}.details-strip>div,.details-strip>a{padding:1.4rem 2rem;text-align:center;text-decoration:none;border-right:1px solid var(--line)}.details-strip span,.details-strip strong{display:block}.details-strip span{text-transform:uppercase;letter-spacing:.12em;color:var(--rose);font-size:.6rem}.details-strip strong{font:600 1.05rem var(--serif);color:var(--plum);margin-top:.2rem}.page-hero{min-height:500px;padding:7rem 8vw 5rem;display:grid;grid-template-columns:1fr minmax(240px,420px);gap:5vw;align-items:center;background:linear-gradient(130deg,#fff,var(--cream));overflow:hidden}.page-hero>div{max-width:820px}.page-hero p:last-child{font-size:1.02rem;color:var(--muted)}.page-hero img{max-height:380px;margin:auto;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(91,46,74,.1))}.contact-hero img{max-height:280px}.category-pills{display:flex;gap:.6rem;overflow-x:auto;padding:1rem 7vw;position:sticky;top:92px;z-index:30;background:rgba(250,246,242,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);scrollbar-width:none}.category-pills::-webkit-scrollbar{display:none}.category-pills a{white-space:nowrap;text-decoration:none;border:1px solid var(--line);padding:.56rem .9rem;border-radius:999px;background:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.63rem}.price-list{padding:2rem 8vw 7rem}.price-category{display:grid;grid-template-columns:310px 1fr;gap:6vw;padding:5rem 0;border-bottom:1px solid var(--line);scroll-margin-top:170px}.category-title{position:sticky;top:170px;align-self:start;display:flex;align-items:center;gap:1.2rem}.category-title img{width:100px;height:100px;object-fit:contain}.category-title span{display:block;font-size:.64rem;color:var(--rose);letter-spacing:.14em}.category-title h2{font-size:2.5rem;margin:.2rem 0}.treatment{display:grid;grid-template-columns:1fr auto;gap:2rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}.treatment:first-child{padding-top:0}.treatment h3{font:600 .92rem/1.4 var(--sans);color:var(--ink);margin:0 0 .28rem}.treatment p{font-size:.8rem;color:var(--muted);margin:0 0 .2rem}.treatment small{color:var(--rose)}.treatment strong{font:600 1.2rem var(--serif);color:var(--plum);white-space:nowrap}.booking-panel{margin:0 5vw 6rem;padding:4.5rem 5vw;border-radius:30px;background:linear-gradient(120deg,var(--plum),#75445f);display:flex;justify-content:space-between;align-items:end;gap:3rem;color:#fff;box-shadow:var(--shadow)}.booking-panel h2{color:#fff}.booking-panel p:last-child{color:#eadde2}.light{color:var(--pink)}.about-layout{display:grid;grid-template-columns:.75fr 1fr;gap:7vw;align-items:center}.about-mark{min-height:560px;background:linear-gradient(145deg,#fff,var(--cream));border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);padding:2rem}.about-mark img{width:min(360px,80%)}.about-mark span{text-transform:uppercase;letter-spacing:.16em;font-size:.65rem;color:var(--rose);margin-top:1.5rem}.about-copy>p{color:var(--muted)}.values{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.5rem;border-top:1px solid var(--line)}.values div{padding:1.3rem .8rem 0 0}.values strong,.values span{display:block}.values strong{font:600 1.3rem var(--serif);color:var(--plum)}.values span{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.care-note{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#fff}.care-note>p{color:var(--muted);font-size:1rem}.contact-layout{display:grid;grid-template-columns:.75fr 1.1fr;gap:7vw;align-items:start}.contact-line{display:block;padding:1.2rem 0;border-top:1px solid var(--line);text-decoration:none}.contact-line span,.contact-line strong{display:block}.contact-line span{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rose)}.contact-line strong{font:600 1.35rem/1.4 var(--serif);color:var(--plum);margin-top:.25rem}.hours{margin-top:2.2rem;padding:1.5rem;border-radius:20px;background:var(--cream)}.hours h3{font-size:1.4rem}.hours div{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--line)}.form-card,.card,.enquiry,.note{background:#fff;padding:2rem;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.branded-form{padding:clamp(1.5rem,4vw,3.2rem)}.form-card label{display:block;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.1rem;color:var(--plum)}.form-card input,.form-card textarea,.form-card select{width:100%;padding:.9rem 0;border:0;border-bottom:1px solid var(--taupe);background:transparent;font:inherit;color:var(--ink);outline:none}.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:var(--rose)}.form-card textarea{min-height:130px;resize:vertical}.error{display:block;color:#9d2948;margin-top:.35rem}.flash{position:fixed;top:110px;left:50%;transform:translateX(-50%);z-index:80;padding:.9rem 1.2rem;border-radius:999px;background:var(--plum);color:#fff;box-shadow:var(--shadow)}.site-footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;padding:4rem 7vw 3rem;background:#2f2028;color:#fff}.site-footer div{display:flex;flex-direction:column;gap:.2rem}.site-footer strong{font:600 1.2rem var(--serif)}.site-footer span,.site-footer a{font-size:.72rem;color:#ddcfd5;text-decoration:none}.site-footer div:last-child{text-align:right}.mobile-tabbar{display:none}
/* Admin compatibility */.admin-shell{background:#f6f1ee}.admin-shell .site-header{position:relative}.page-head{padding:4rem 7vw 1.5rem}.admin-shell .section{padding:2rem 7vw 5rem}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.admin-shell table{width:100%;border-collapse:collapse;background:#fff}.admin-shell th,.admin-shell td{text-align:left;padding:.85rem;border-bottom:1px solid var(--line)}.admin-shell .actions{margin:0}.admin-shell .button{margin:.2rem}
@media(max-width:1050px){.treatment-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-copy{padding-top:2rem}.hero-logo-wrap{min-height:500px}.welcome-grid,.about-layout,.contact-layout,.care-note{grid-template-columns:1fr}.page-hero{grid-template-columns:1fr .55fr}.price-category{grid-template-columns:250px 1fr}.site-footer{grid-template-columns:1fr 1fr}.site-footer div:last-child{text-align:left}}
@media(max-width:700px){body:not(.admin-shell){padding-bottom:76px}.site-header{height:68px;padding:0 4.5vw;position:relative}.brand img{width:44px;height:44px}.brand strong{font-size:.8rem}.brand em{font-size:.75rem}.desktop-nav{display:none}.hero{min-height:auto;padding:3.5rem 5vw 4rem;gap:1.5rem}.hero h1{font-size:3.35rem}.hero-logo-wrap{min-height:350px}.hero-logo{width:340px}.halo-one{width:310px;height:310px}.halo-two{width:340px;height:340px}.actions{display:grid;grid-template-columns:1fr}.button{width:100%}.section{padding:4.2rem 5vw}.welcome-grid{gap:1rem}.section-heading{align-items:start;flex-direction:column}.treatment-grid{grid-template-columns:1fr 1fr;gap:.7rem}.treatment-card{min-height:245px;padding:1rem}.treatment-card img{width:110px;height:110px}.treatment-card h3{font-size:1.25rem}.card-arrow{display:none}.brand-banner img{min-height:260px;object-fit:cover;object-position:center}.details-strip{grid-template-columns:1fr 1fr}.details-strip>div,.details-strip>a{padding:1rem .5rem;border-bottom:1px solid var(--line)}.page-hero{min-height:360px;padding:4rem 5vw 3rem;grid-template-columns:1fr}.page-hero h1{font-size:3.2rem}.page-hero img{display:none}.category-pills{top:0;padding:.8rem 5vw}.price-list{padding:1rem 5vw 5rem}.price-category{display:block;padding:3.5rem 0;scroll-margin-top:70px}.category-title{position:static;margin-bottom:1.8rem}.category-title img{width:78px;height:78px}.category-title h2{font-size:2.2rem}.treatment{gap:1rem}.booking-panel{margin:0;padding:3.5rem 5vw;border-radius:0;align-items:start;flex-direction:column}.about-mark{min-height:380px}.values{grid-template-columns:1fr}.values div{padding-bottom:1rem}.contact-layout{gap:3rem}.branded-form{margin-left:-.5rem;margin-right:-.5rem}.site-footer{grid-template-columns:1fr;padding:3.5rem 5vw 2rem}.mobile-tabbar{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;z-index:60;height:calc(70px + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(91,46,74,.1);backdrop-filter:blur(18px)}.mobile-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;color:#9a858e;font-size:.56rem;font-weight:700}.tab-icon{font-size:1.35rem;line-height:1}.mobile-tabbar a.active{color:var(--plum)}.admin-shell .site-header{height:68px}.admin-shell .section{padding:2rem 5vw 4rem}.grid{grid-template-columns:1fr}}


/* =========================================================
   Tranquil Moments — responsive branded header
   ========================================================= */

:root {
    --tm-plum: #5b2e4a;
    --tm-plum-dark: #462238;
    --tm-rose: #a56a7f;
    --tm-blush: #e7a9b6;
    --tm-pale-pink: #f7c7d1;
    --tm-ivory: #faf6f2;
    --tm-cream: #fffaf7;
    --tm-taupe: #c8b7ae;
    --tm-gold: #d4af37;
    --tm-charcoal: #34242e;
}

.tm-site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background:
        linear-gradient(
            135deg,
            rgba(250, 246, 242, 0.99),
            rgba(255, 250, 247, 0.99)
        );
    border-bottom: 1px solid rgba(91, 46, 74, 0.12);
    box-shadow: 0 10px 30px rgba(91, 46, 74, 0.07);
}

.tm-header-strip {
    background:
        linear-gradient(
            105deg,
            var(--tm-plum-dark),
            var(--tm-plum) 55%,
            #704055
        );
    color: white;
}

.tm-header-strip-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 20px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tm-header-strip-heart {
    color: var(--tm-pale-pink);
    font-size: 0.85rem;
}

.tm-strip-dot {
    color: var(--tm-blush);
}

.tm-header-main {
    width: min(1180px, calc(100% - 40px));
    min-height: 118px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto auto;
    align-items: center;
    gap: 34px;
}

.tm-header-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    color: inherit;
    text-decoration: none;
}

.tm-header-mark {
    width: 105px;
    height: 105px;
    flex: 0 0 105px;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

.tm-header-title-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tm-header-title {
    color: var(--tm-plum);
    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(1.45rem, 2.25vw, 2.25rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tm-header-byline {
    position: relative;
    width: max-content;
    margin-top: 10px;
    padding-right: 54px;
    color: #b38b51;
    font-family:
        Montserrat,
        Arial,
        sans-serif;
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.tm-header-byline::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 42px;
    height: 1px;
    background: var(--tm-blush);
}

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

.tm-desktop-nav a {
    position: relative;
    padding: 14px 0;
    color: var(--tm-plum);
    font-family:
        Montserrat,
        Arial,
        sans-serif;
    font-size: 0.79rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.tm-desktop-nav a::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 6px;
    left: 50%;
    height: 2px;
    background: var(--tm-blush);
    transition:
        right 160ms ease,
        left 160ms ease;
}

.tm-desktop-nav a:hover,
.tm-desktop-nav a:focus-visible,
.tm-desktop-nav a.is-active {
    color: var(--tm-rose);
}

.tm-desktop-nav a:hover::after,
.tm-desktop-nav a:focus-visible::after,
.tm-desktop-nav a.is-active::after {
    right: 0;
    left: 0;
}

.tm-header-book {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border: 1px solid rgba(165, 106, 127, 0.28);
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            var(--tm-pale-pink),
            #f2d9d8
        );
    box-shadow: 0 9px 22px rgba(91, 46, 74, 0.1);
    color: var(--tm-plum);
    font-family:
        Montserrat,
        Arial,
        sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.tm-header-book:hover,
.tm-header-book:focus-visible {
    transform: translateY(-2px);
    background:
        linear-gradient(
            135deg,
            #f4ced5,
            var(--tm-pale-pink)
        );
    box-shadow: 0 13px 28px rgba(91, 46, 74, 0.15);
}


/* Tablet */

@media (max-width: 1040px) {

    .tm-header-main {
        width: min(100% - 30px, 920px);
        grid-template-columns: 1fr auto;
        gap: 20px;
    }

    .tm-desktop-nav {
        display: none;
    }

    .tm-header-title {
        font-size: clamp(1.25rem, 3vw, 1.9rem);
    }
}


/* Phone layout — bottom navigation remains unchanged */

@media (max-width: 700px) {

    .tm-header-strip-inner {
        min-height: 31px;
        gap: 8px;
        padding: 7px 10px;
        font-size: 0.54rem;
        letter-spacing: 0.13em;
    }

    .tm-header-main {
        width: 100%;
        min-height: 92px;
        grid-template-columns: 1fr;
        padding: 10px 14px;
    }

    .tm-header-brand {
        gap: 14px;
        overflow: visible;
    }

    .tm-header-mark {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .tm-header-title {
        overflow: hidden;
        font-size: clamp(1rem, 4.1vw, 1.35rem);
        line-height: 1.13;
        letter-spacing: 0.035em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tm-header-byline {
        margin-top: 7px;
        padding-right: 28px;
        font-size: 0.55rem;
        letter-spacing: 0.2em;
    }

    .tm-header-byline::after {
        width: 21px;
    }

    .tm-header-book {
        display: none;
    }
}


@media (max-width: 440px) {

    .tm-header-strip-inner {
        letter-spacing: 0.09em;
    }

    .tm-header-mark {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .tm-header-title {
        font-size: 0.84rem;
    }

    .tm-header-byline {
        font-size: 0.49rem;
    }

    .tm-header-book {
        padding: 0 11px;
        font-size: 0.57rem;
    }
}


/* Preserve space above the fixed phone navigation. */

@media (max-width: 767px) {

    body {
        padding-bottom:
            calc(
                78px + env(safe-area-inset-bottom, 0px)
            );
    }
}



/* =========================================================
   Subtle premium backgrounds
   Removes strong pink gradients across public pages
   ========================================================= */

body {
    background:
        radial-gradient(
            circle at top right,
            rgba(231, 169, 182, 0.07),
            transparent 30rem
        ),
        radial-gradient(
            circle at bottom left,
            rgba(212, 175, 55, 0.035),
            transparent 34rem
        ),
        #faf6f2;

    color: var(--tm-charcoal, #34242e);
}


/* Main public content */

main,
.site-main,
.page-main,
.page-content {
    background: transparent;
}


/* Standard sections */

section,
.page-section,
.content-section,
.treatments-section,
.about-section,
.contact-section {
    background-color: transparent;
}


/* Cards and content panels */

.card,
.treatment-card,
.category-card,
.contact-card,
.about-card,
.info-card,
.panel,
.content-card {
    background: rgba(255, 255, 255, 0.94);
    background-image: none;
    border: 1px solid rgba(91, 46, 74, 0.08);
    box-shadow: 0 10px 28px rgba(91, 46, 74, 0.065);
}


/* Pale alternate sections */

.section-soft,
.section-light,
.alternate-section,
.featured-section,
.intro-section {
    background: #faf8f6;
    background-image: none;
}


/* Remove strong gradients from common wrappers */

.page-header,
.section-header,
.treatments-header,
.about-header,
.contact-header,
.cta-section,
.booking-section,
.welcome-section {
    background-image: none;
}


/* Keep accent colour on buttons rather than large backgrounds */

.button,
.btn,
.primary-button,
.cta-button,
.tm-header-book {
    background:
        linear-gradient(
            135deg,
            #f3d6dc,
            #efd9d4
        );
}


/* Slightly quieter decorative elements */

.decorative-bg,
.floral-bg,
.gradient-bg {
    opacity: 0.45;
}


/* Mobile refinement */

@media (max-width: 700px) {
    body {
        background:
            radial-gradient(
                circle at top right,
                rgba(231, 169, 182, 0.055),
                transparent 20rem
            ),
            #faf6f2;
    }
}



/* =========================================================
   Banner background correction
   Prevent the website banner appearing behind whole pages
   ========================================================= */

.hero,
.home-hero,
.site-hero,
.page-hero,
.page-header,
.section-header,
.treatments-header,
.about-header,
.contact-header {
    background-image: none !important;
    background-color: transparent;
}


/* Restore a clean ivory page background */

body {
    background:
        radial-gradient(
            circle at top right,
            rgba(231, 169, 182, 0.055),
            transparent 30rem
        ),
        #faf6f2;
}


/* Optional light overlay for readability */

.tm-home-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(250, 246, 242, 0.18),
            rgba(250, 246, 242, 0.04)
        );
    pointer-events: none;
}


/* Ensure banner content remains above its overlay */

.tm-home-banner > * {
    position: relative;
    z-index: 1;
}



/**********************************************************
    Tranquil Moments Premium Background Refresh
**********************************************************/

body{

    background:

        radial-gradient(
            circle at top right,
            rgba(231,169,182,.05),
            transparent 35rem
        ),

        radial-gradient(
            circle at bottom left,
            rgba(212,175,55,.03),
            transparent 38rem
        ),

        #faf6f2;

}


/* Homepage */

.hero{

    background:

        radial-gradient(
            circle at 80% 40%,
            rgba(231,169,182,.15),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #faf6f2
        ) !important;

}


/* Internal pages */

.page-hero{

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #faf6f2
        ) !important;

}


/* Treatment section */

.treatment-showcase{

    background:#faf8f6 !important;

}


/* Booking section */

.booking-panel{

    background:var(--plum) !important;

}


/* About page logo box */

.about-mark{

    background:#ffffff !important;

}



/* =========================================================
   Mobile edge-to-edge homepage banner
   ========================================================= */

@media (max-width: 700px) {

    .brand-banner {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
        border-radius: 0 0 24px 24px;
        background: var(--tm-plum, #5b2e4a);
        box-shadow: 0 14px 30px rgba(91, 46, 74, 0.12);
    }

    .brand-banner picture {
        width: 100%;
        display: block;
    }

    .brand-banner img {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        display: block;
        object-fit: contain;
        object-position: center;
    }

    .brand-banner .banner-link {
        position: absolute;
        inset: 0;
        z-index: 2;
    }
}

/* Tranquil Moments public-site v3 refinements */

/* Keep Explore Treatments readable like Book an Appointment */
.hero .button-ghost,
.hero a.button-ghost,
.actions .button-ghost {
    color: var(--plum, #5b2e4a) !important;
    border-color: var(--plum, #5b2e4a) !important;
    background: transparent !important;
}

/* Clearer pricing and opening-hours typography */
.treatment strong,
.treatment .price,
.treatment-price,
.hours strong,
.hours span,
.details-strip strong,
.details-strip span {
    font-family: var(--sans, Montserrat, Arial, sans-serif) !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

.treatment strong,
.treatment .price,
.treatment-price {
    color: var(--plum, #5b2e4a) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.hours strong,
.details-strip strong {
    color: var(--plum, #5b2e4a) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.hours span,
.details-strip span {
    font-size: .68rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

/* Desktop category navigation now sticks flush to viewport top */
@media (min-width: 701px) {
    .category-pills {
        top: 0 !important;
        z-index: 140 !important;
    }
}


/* =========================================================
   Homepage secondary button correction
   ========================================================= */

.hero .actions .button.button-ghost,
.hero .actions a.button.button-ghost,
.hero a.button-ghost,
.actions a.button-ghost {
    background: transparent !important;
    border-color: var(--plum, #5b2e4a) !important;
    color: var(--plum, #5b2e4a) !important;
}

.hero .actions .button.button-ghost:hover,
.hero .actions a.button.button-ghost:hover,
.hero a.button-ghost:hover {
    background: var(--plum, #5b2e4a) !important;
    color: #ffffff !important;
}



/* ==========================================
   Hero secondary button
   ========================================== */

.hero-actions .btn-secondary,
.hero-actions a.btn-secondary,
.hero .btn-secondary,
.hero a.btn-secondary{

    background:#ffffff !important;
    color:#5b2e4a !important;
    border:2px solid #5b2e4a !important;

    transition:
        background .25s,
        color .25s,
        transform .25s,
        box-shadow .25s;
}

.hero-actions .btn-secondary:hover,
.hero-actions a.btn-secondary:hover,
.hero .btn-secondary:hover,
.hero a.btn-secondary:hover{

    background:#5b2e4a !important;
    color:#ffffff !important;

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(91,46,74,.22);
}



/* Homepage Explore Treatments button */

.hero .button-ghost {
    background: transparent !important;
    border-color: var(--plum, #5b2e4a) !important;
    color: var(--plum, #5b2e4a) !important;
}

.hero .button-ghost:hover,
.hero .button-ghost:focus-visible {
    background: var(--plum, #5b2e4a) !important;
    border-color: var(--plum, #5b2e4a) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(91, 46, 74, 0.18);
}



/* =========================================================
   Treatments category navigation
   Wrap on desktop, horizontal scroll on mobile
   ========================================================= */

/* Desktop and tablet */
@media (min-width: 701px) {

    .category-pills {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.55rem;

        padding: 0.9rem 4vw;

        overflow-x: visible;
        overflow-y: visible;

        top: 0 !important;
        z-index: 140;
    }

    .category-pills a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* Mobile keeps swipeable single-row navigation */
@media (max-width: 700px) {

    .category-pills {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0.8rem 5vw;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .category-pills::-webkit-scrollbar {
        display: none;
    }

    .category-pills a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}



/* =========================================================
   Mobile treatment price readability
   ========================================================= */

@media (max-width: 700px) {

    .price-list .treatment > strong,
    .price-category .treatment > strong,
    .treatment strong,
    .treatment-price {
        font-family:
            Montserrat,
            Arial,
            Helvetica,
            sans-serif !important;

        font-style: normal !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;

        color: var(--plum, #5b2e4a) !important;
        text-align: right;
        white-space: nowrap;
    }

    .treatment small,
    .treatment .duration,
    .treatment-duration {
        font-family:
            Montserrat,
            Arial,
            Helvetica,
            sans-serif !important;

        font-style: normal !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
    }
}



/* =========================================================
   Final treatment price typography
   ========================================================= */

.tm-treatment-price {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 1rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: var(--plum, #5b2e4a) !important;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .price-list .treatment .tm-treatment-price,
    .price-category .treatment .tm-treatment-price,
    .treatment .tm-treatment-price {
        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 1rem !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.3 !important;
    }
}



/* =========================================================
   About & Policies page
   ========================================================= */

.tm-about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
    background: #ffffff;
}

.tm-about-intro-copy {
    max-width: 780px;
}

.tm-about-intro-copy > p:not(.section-kicker) {
    color: var(--muted);
    font-size: 1.02rem;
}

.tm-about-highlight {
    min-height: 280px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(91, 46, 74, 0.09);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at top right,
            rgba(231, 169, 182, 0.18),
            transparent 55%
        ),
        #faf6f2;
    box-shadow: 0 18px 44px rgba(91, 46, 74, 0.07);
    text-align: center;
}

.tm-about-highlight > span {
    margin-bottom: 1rem;
    color: var(--rose);
    font-size: 3rem;
    line-height: 1;
}

.tm-about-highlight p {
    margin: 0;
    color: var(--plum);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.35;
}


.tm-info-section {
    padding: clamp(4.5rem, 8vw, 7rem) 8vw;
}

.tm-location-section {
    background: #faf8f6;
}

.tm-voucher-section {
    background: #ffffff;
}

.tm-cancellation-section {
    background: #faf8f6;
}

.tm-section-heading {
    max-width: 1250px;
    margin: 0 auto 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.tm-section-heading h2 {
    margin-bottom: 0;
}

.tm-section-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91, 46, 74, 0.1);
    border-radius: 50%;
    background: #ffffff;
    color: var(--rose);
    font-size: 1.5rem;
    box-shadow: 0 9px 24px rgba(91, 46, 74, 0.06);
}


.tm-address-card {
    max-width: 1250px;
    margin: 0 auto 1.2rem;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border: 1px solid rgba(91, 46, 74, 0.09);
    border-radius: 24px;
    background: var(--plum);
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(91, 46, 74, 0.13);
}

.tm-card-label {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--pink);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tm-address-card address {
    display: flex;
    flex-direction: column;
    font-style: normal;
}

.tm-address-card address strong {
    color: #ffffff;
    font-family: var(--serif);
    font-size: 1.55rem;
}

.tm-address-card address span {
    color: #eadde2;
}

.tm-address-card .button-ghost {
    flex: 0 0 auto;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.tm-address-card .button-ghost:hover,
.tm-address-card .button-ghost:focus-visible {
    background: #ffffff !important;
    color: var(--plum) !important;
}


.tm-policy-grid {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tm-policy-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tm-policy-card {
    position: relative;
    min-height: 280px;
    padding: clamp(1.6rem, 3vw, 2.2rem);
    overflow: hidden;
    border: 1px solid rgba(91, 46, 74, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 36px rgba(91, 46, 74, 0.055);
}

.tm-policy-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
    font-size: 1.45rem;
}

.tm-policy-card p,
.tm-policy-card li {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.tm-policy-card p:last-child {
    margin-bottom: 0;
}

.tm-policy-card strong {
    color: var(--plum);
}

.tm-policy-number {
    position: absolute;
    right: 1rem;
    bottom: -0.8rem;
    color: rgba(165, 106, 127, 0.09);
    font-family: var(--serif);
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.tm-policy-list {
    margin: 0;
    padding-left: 1.2rem;
}

.tm-policy-list li + li {
    margin-top: 0.85rem;
}

.tm-policy-card-featured {
    border-color: rgba(165, 106, 127, 0.19);
    background:
        radial-gradient(
            circle at top right,
            rgba(231, 169, 182, 0.13),
            transparent 58%
        ),
        #ffffff;
}


.tm-feature-panel {
    max-width: 1250px;
    margin: 0 auto 1rem;
    padding: clamp(2rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    border-radius: 28px;
    background:
        linear-gradient(
            120deg,
            var(--plum),
            #75445f
        );
    color: #ffffff;
    box-shadow: 0 20px 48px rgba(91, 46, 74, 0.16);
}

.tm-feature-copy h3 {
    color: #ffffff;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
}

.tm-feature-copy p {
    color: #eadde2;
}

.tm-feature-points {
    display: grid;
    gap: 0.8rem;
}

.tm-feature-points > div {
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
}

.tm-feature-points strong,
.tm-feature-points span {
    display: block;
}

.tm-feature-points strong {
    color: #ffffff;
    font-family: var(--serif);
    font-size: 1.15rem;
}

.tm-feature-points span {
    margin-top: 0.2rem;
    color: #eadde2;
    font-size: 0.72rem;
}


.tm-note-card {
    max-width: 1250px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border: 1px solid rgba(91, 46, 74, 0.09);
    border-radius: 22px;
    background: #faf8f6;
}

.tm-note-card > strong {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--plum);
    font-family: var(--serif);
    font-size: 1.35rem;
}

.tm-note-card p {
    color: var(--muted);
    font-size: 0.88rem;
}

.tm-note-card p:last-child {
    margin-bottom: 0;
}


.tm-final-policy-note {
    padding: clamp(2.2rem, 5vw, 3.5rem) 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
    background: var(--rose);
    color: #ffffff;
    text-align: left;
}

.tm-final-policy-note > span {
    font-size: 2rem;
}

.tm-final-policy-note strong {
    display: block;
    color: #ffffff;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.tm-final-policy-note p {
    max-width: 760px;
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
}


@media (max-width: 950px) {

    .tm-about-intro,
    .tm-feature-panel {
        grid-template-columns: 1fr;
    }

    .tm-policy-grid-three {
        grid-template-columns: 1fr 1fr;
    }

    .tm-about-highlight {
        min-height: 220px;
    }
}


@media (max-width: 700px) {

    .tm-about-intro {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .tm-info-section {
        padding: 4.2rem 5vw;
    }

    .tm-section-heading {
        align-items: flex-start;
    }

    .tm-section-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 1.15rem;
    }

    .tm-address-card {
        align-items: stretch;
        flex-direction: column;
        border-radius: 20px;
    }

    .tm-address-card .button {
        width: 100%;
    }

    .tm-policy-grid,
    .tm-policy-grid-three {
        grid-template-columns: 1fr;
    }

    .tm-policy-card {
        min-height: 0;
        padding: 1.5rem;
        border-radius: 20px;
    }

    .tm-policy-number {
        font-size: 5.2rem;
    }

    .tm-feature-panel {
        padding: 2rem 1.4rem;
        border-radius: 22px;
    }

    .tm-final-policy-note {
        align-items: flex-start;
        padding-right: 5vw;
        padding-left: 5vw;
    }
}



/* =========================================================
   Responsive public-header navigation
   Phone: bottom navigation
   Tablet: navigation row under branding
   Desktop: inline navigation
   ========================================================= */


/* Wide desktop */

@media (min-width: 1180px) {

    .tm-header-main {
        width: min(1240px, calc(100% - 40px));
        grid-template-columns: minmax(390px, 1fr) auto auto;
        gap: 26px;
    }

    .tm-desktop-nav {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(18px, 1.8vw, 28px);
    }

    .tm-desktop-nav a {
        font-size: 0.72rem;
        letter-spacing: 0.065em;
        white-space: nowrap;
    }

    .tm-header-book {
        display: inline-flex;
    }
}


/* Tablets and narrower desktop windows */

@media (min-width: 701px) and (max-width: 1179px) {

    .tm-header-main {
        width: min(100% - 30px, 980px);
        min-height: auto;

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;

        padding-top: 12px;
    }

    .tm-header-brand {
        width: 100%;
        min-height: 88px;
        justify-content: center;
    }

    .tm-header-mark {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }

    .tm-header-title-group {
        max-width: min(620px, calc(100vw - 150px));
    }

    .tm-header-title {
        font-size: clamp(1.25rem, 3vw, 1.85rem);
        white-space: normal;
    }

    .tm-header-book {
        display: none !important;
    }

    .tm-desktop-nav {
        width: 100%;

        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        gap: 0.25rem 1.4rem;

        margin-top: 8px;
        padding: 7px 10px 12px;

        border-top: 1px solid rgba(91, 46, 74, 0.08);
    }

    .tm-desktop-nav a {
        padding: 11px 2px;

        font-size: 0.68rem;
        letter-spacing: 0.055em;

        white-space: nowrap;
    }

    .tm-desktop-nav a::after {
        bottom: 5px;
    }
}


/* Phones */

@media (max-width: 700px) {

    .tm-desktop-nav {
        display: none !important;
    }

    .tm-header-book {
        display: none !important;
    }

    .tm-header-main {
        grid-template-columns: 1fr;
    }
}


/* Ensure the fixed phone navigation is shown only on phones */

@media (min-width: 701px) {

    .mobile-tabbar,
    .tm-mobile-navigation,
    .mobile-bottom-nav {
        display: none !important;
    }
}



/* =========================================================
   Gavai site credit
   ========================================================= */

.tm-site-credit{
    width:min(1280px,calc(100% - 40px));
    margin:3rem auto 1rem;

    padding-top:1rem;

    border-top:1px solid rgba(91,46,74,.08);

    text-align:right;

    color:#9b8d94;

    font-size:.72rem;
    font-family:Montserrat,Arial,sans-serif;
}

.tm-site-credit span{
    color:#e7a9b6;
}

.tm-site-credit a{
    color:#a56a7f;
    text-decoration:none;
    font-weight:600;

    transition:color .2s ease;
}

.tm-site-credit a:hover{
    color:#5b2e4a;
}

@media (max-width:700px){

    .tm-site-credit{

        width:calc(100% - 30px);

        margin:2rem auto calc(5.5rem + env(safe-area-inset-bottom));

        text-align:center;

        font-size:.68rem;
    }

}



/* =========================================================
   Mobile navigation icon balancing
   ========================================================= */

.mobile-tabbar .tab-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    line-height:1;
}

/* Home */

.mobile-tabbar a:nth-child(1) .tab-icon{
    font-size:1.45rem;
}

/* Treatments */

.mobile-tabbar a:nth-child(2) .tab-icon{
    font-size:1.42rem;
}

/* About */

.mobile-tabbar a:nth-child(3) .tab-icon{
    font-size:1.65rem;
}

/* Contact */

.mobile-tabbar a:nth-child(4) .tab-icon{
    font-size:1.55rem;
}



/* =========================================================
   v1.0.1 Typography refinement
   ========================================================= */

/* ---------- Public treatments ---------- */

.treatment-card h3,
.treatment-name,
.treatment-title{
    font-size:1.2rem;
    line-height:1.3;
}

.treatment-card p,
.treatment-description,
.treatment-body{
    font-size:1.03rem;
    line-height:1.75;
}

.treatment-duration{
    font-size:.95rem;
}

.treatment-price,
.price{
    font-size:1.25rem;
    font-weight:700;
}

/* ---------- Admin ---------- */

.admin-table,
.admin-table td,
.admin-table th{
    font-size:1.02rem;
}

.admin-card{
    font-size:1.02rem;
}

.admin-card h2,
.admin-card h3{
    font-size:1.28rem;
}

.admin-actions .button,
.admin-actions button,
.admin-table .button{
    font-size:.92rem;
}

.admin-form label{
    font-size:1rem;
    font-weight:600;
}

.admin-form input,
.admin-form textarea,
.admin-form select{
    font-size:1.05rem;
}

.admin-modal h2{
    font-size:1.45rem;
}

/* ---------- Mobile ---------- */

@media (max-width:700px){

    .treatment-card h3,
    .treatment-name{
        font-size:1.15rem;
    }

    .treatment-card p,
    .treatment-description{
        font-size:1rem;
    }

    .treatment-price{
        font-size:1.2rem;
    }

    .admin-table,
    .admin-card{
        font-size:1rem;
    }

    .admin-actions .button,
    .admin-actions button{
        font-size:.95rem;
    }

}


/* =========================================================
   Public mobile typography refinement
   ========================================================= */

@media (max-width:860px){

    .treatment-card h3{
        font-size:1.18rem;
    }

    .treatment-card p,
    .treatment-description{
        font-size:1.03rem;
        line-height:1.7;
    }

    .treatment-duration{
        font-size:.98rem;
    }

    .treatment-price,
    .price{
        font-size:1.25rem;
    }

    .card,
    .service-card,
    .about-card,
    .contact-card{
        font-size:1.03rem;
    }

    .button{
        font-size:1rem;
    }

    input,
    textarea,
    select{
        font-size:1.02rem;
    }

}



/* =========================================================
   Tranquil Moments unified public typography
   Small:  0.9rem
   Normal: 1rem
   Large:  1.2rem
   ========================================================= */

:root {
    --tm-text-small: 0.9rem;
    --tm-text-normal: 1rem;
    --tm-text-large: 1.2rem;
}


/* Standard body and descriptive copy */

body:not(.admin-shell),
body:not(.admin-shell) p,
body:not(.admin-shell) li,
body:not(.admin-shell) address,
body:not(.admin-shell) .lead,
body:not(.admin-shell) .treatment p,
body:not(.admin-shell) .tm-policy-card p,
body:not(.admin-shell) .tm-policy-card li,
body:not(.admin-shell) .tm-note-card p,
body:not(.admin-shell) .tm-feature-copy p,
body:not(.admin-shell) .contact-line,
body:not(.admin-shell) .hours {
    font-size: var(--tm-text-normal) !important;
}


/* Small supporting text */

body:not(.admin-shell) small,
body:not(.admin-shell) .eyebrow,
body:not(.admin-shell) .section-kicker,
body:not(.admin-shell) .tm-card-label,
body:not(.admin-shell) .category-pills a,
body:not(.admin-shell) .trust-row,
body:not(.admin-shell) .treatment small,
body:not(.admin-shell) .treatment-card p,
body:not(.admin-shell) .details-strip span,
body:not(.admin-shell) .tm-feature-points span,
body:not(.admin-shell) .tm-site-credit,
body:not(.admin-shell) .mobile-tabbar a > span:last-child {
    font-size: var(--tm-text-small) !important;
}


/* Large UI text */

body:not(.admin-shell) .button,
body:not(.admin-shell) button,
body:not(.admin-shell) input,
body:not(.admin-shell) textarea,
body:not(.admin-shell) select,
body:not(.admin-shell) .treatment h3,
body:not(.admin-shell) .treatment strong,
body:not(.admin-shell) .tm-treatment-price,
body:not(.admin-shell) .details-strip strong,
body:not(.admin-shell) .contact-line strong,
body:not(.admin-shell) .hours strong,
body:not(.admin-shell) .treatment-card h3 {
    font-size: var(--tm-text-large) !important;
}


/* Keep form labels readable without making them oversized */

body:not(.admin-shell) label {
    font-size: var(--tm-text-normal) !important;
}


/* Preserve major headings above the three-level UI scale */

body:not(.admin-shell) h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
}

body:not(.admin-shell) h2 {
    font-size: clamp(2.1rem, 4.6vw, 4rem);
}

body:not(.admin-shell) h3:not(.treatment h3):not(.treatment-card h3) {
    font-size: var(--tm-text-large);
}


/* Mobile remains readable without shrinking below the system */

@media (max-width: 700px) {

    body:not(.admin-shell),
    body:not(.admin-shell) p,
    body:not(.admin-shell) li,
    body:not(.admin-shell) input,
    body:not(.admin-shell) textarea,
    body:not(.admin-shell) select,
    body:not(.admin-shell) .button {
        font-size: var(--tm-text-normal) !important;
    }

    body:not(.admin-shell) small,
    body:not(.admin-shell) .eyebrow,
    body:not(.admin-shell) .section-kicker,
    body:not(.admin-shell) .mobile-tabbar a > span:last-child {
        font-size: var(--tm-text-small) !important;
    }

    body:not(.admin-shell) .treatment h3,
    body:not(.admin-shell) .treatment strong,
    body:not(.admin-shell) .tm-treatment-price,
    body:not(.admin-shell) .treatment-card h3 {
        font-size: var(--tm-text-large) !important;
    }
}



/* =========================================================
   Desktop treatment category heading correction
   Prevent headings such as "Nail Enhancements" overlapping
   the treatment list.
   ========================================================= */

@media (min-width: 861px) {

    .price-category {
        display: grid !important;
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
        column-gap: clamp(34px, 5vw, 72px) !important;
        align-items: start !important;
    }

    .category-title {
        min-width: 0 !important;
        max-width: 300px !important;
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .category-title > div {
        min-width: 0 !important;
    }

    .category-title h2 {
        max-width: 100% !important;
        margin: 0 !important;

        font-size: clamp(1.65rem, 2.35vw, 2.35rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.02em !important;

        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .category-title img {
        width: 88px !important;
        height: 88px !important;
        object-fit: contain !important;
    }

    .price-items {
        min-width: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
}


/* Give very long category names a little more room on
   wide desktop displays. */

@media (min-width: 1400px) {

    .price-category {
        grid-template-columns: minmax(250px, 340px) minmax(0, 1fr) !important;
    }

    .category-title {
        max-width: 340px !important;
    }
}



/* =========================================================
   Treatment category responsive layout
   Prevent category headings overlapping at tablet and
   medium desktop widths.
   ========================================================= */


/* Tablet and medium-width browsers:
   place the category heading above its treatments. */

@media (min-width: 701px) and (max-width: 1100px) {

    .price-category {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    .category-title {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;
        gap: 1.25rem !important;
    }

    .category-title > div {
        min-width: 0 !important;
    }

    .category-title img {
        width: 76px !important;
        height: 76px !important;
        flex: 0 0 76px !important;
        object-fit: contain !important;
    }

    .category-title h2 {
        max-width: 100% !important;
        margin: 0 !important;

        font-size: 2rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.015em !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .category-title span {
        display: block;
        margin-bottom: 0.3rem;
    }

    .price-items {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* Full desktop two-column treatment layout. */

@media (min-width: 1101px) {

    .price-category {
        display: grid !important;
        grid-template-columns:
            minmax(230px, 310px)
            minmax(0, 1fr) !important;

        column-gap: clamp(34px, 4vw, 68px) !important;
        align-items: start !important;
    }

    .category-title {
        min-width: 0 !important;
        max-width: 310px !important;

        display: grid !important;
        grid-template-columns:
            82px
            minmax(0, 1fr) !important;

        gap: 17px !important;
        align-items: start !important;
    }

    .category-title > div {
        min-width: 0 !important;
    }

    .category-title img {
        width: 82px !important;
        height: 82px !important;
        object-fit: contain !important;
    }

    .category-title h2 {
        max-width: 100% !important;
        margin: 0 !important;

        font-size: clamp(1.65rem, 2.15vw, 2.25rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.02em !important;

        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .price-items {
        min-width: 0 !important;
    }
}


/* More room on very wide screens. */

@media (min-width: 1450px) {

    .price-category {
        grid-template-columns:
            minmax(270px, 350px)
            minmax(0, 1fr) !important;
    }

    .category-title {
        max-width: 350px !important;
    }
}



/* =========================================================
   Medium-width treatment category positioning
   Disable the desktop sticky category title when it is
   displayed above the treatment list.
   ========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {

    .price-category {
        position: relative !important;
        overflow: visible !important;
    }

    .category-title {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        z-index: auto !important;

        align-self: auto !important;
        transform: none !important;
    }

    .category-title > div,
    .category-title h2 {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
    }

    .price-items {
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }

    .price-items .treatment {
        position: relative !important;
        z-index: 1 !important;
    }

    .price-items .treatment h3,
    .price-items .treatment p,
    .price-items .treatment small,
    .price-items .tm-treatment-price {
        position: static !important;
        z-index: auto !important;
    }
}


/* Sticky category headings are suitable only when the
   heading remains in the separate desktop left column. */

@media (min-width: 1101px) {

    .category-title {
        position: sticky !important;
        top: 2rem !important;
        align-self: start !important;
    }
}