/*
 * Skin Specialist Centre brand layer — 11 August 2026
 * Building-inspired charcoal and stone palette with the Clinical Nameplate.
 * Loaded after the 20260803 visual refresh so it remains independently reversible.
 */

:root {
    --ssc-paper: #fdfcf9;
    --ssc-ivory: #f4f1ec;
    --ssc-taupe: #303638;
    --ssc-heading: #303638;
    --ssc-coral: #78716a;
    --ssc-coral-dark: #5d5954;
    --ssc-text: #424648;
    --ssc-charcoal: #303638;
    --ssc-charcoal-deep: #24292b;
    --ssc-greige: #78716a;
    --ssc-render: #f4f1ec;
    --ssc-stone: #d4cfc7;
}

::selection {
    color: #fff;
    background: var(--ssc-charcoal);
}

body,
.main {
    color: var(--ssc-text);
    background: var(--ssc-paper);
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
    color: var(--ssc-heading);
}

a {
    color: var(--ssc-coral-dark);
}

a:active,
a:focus,
a:hover {
    color: var(--ssc-charcoal-deep);
}

/* The vector nameplate remains sharp at every screen density. */
.site-header {
    background: var(--ssc-paper);
}

.site-header .logo {
    width: 150px;
}

.site-header .logo img {
    width: 150px;
    height: 96px;
    object-fit: contain;
    object-position: left center;
}

.site-header nav {
    color: var(--ssc-paper);
    background: var(--ssc-charcoal);
    border-bottom: 4px solid var(--ssc-greige);
}

.site-header nav a,
.site-header nav a.selected,
.site-header nav li.tel a {
    color: var(--ssc-paper);
}

.site-header nav a:active,
.site-header nav a:focus,
.site-header nav a:hover,
.site-header nav a.selected:active,
.site-header nav a.selected:focus,
.site-header nav a.selected:hover {
    color: #fff;
    opacity: 1;
}

.site-header .treatment {
    color: var(--ssc-heading);
    border-bottom-color: rgba(120, 113, 106, .42);
}

.site-header .treatment span,
.site-header .tel-mob,
.team-dropdown-module .categories a.active {
    color: var(--ssc-coral-dark);
}

#site-header nav li.contact-cta a {
    color: #fff;
    background: var(--ssc-greige);
    box-shadow: none;
}

#site-header nav li.tel a {
    color: var(--ssc-paper);
    background: transparent;
    border-color: rgba(253, 252, 249, .48);
}

#site-header nav li.contact-cta a:focus,
#site-header nav li.contact-cta a:hover,
#site-header nav li.tel a:focus,
#site-header nav li.tel a:hover {
    color: #fff;
    background: var(--ssc-charcoal-deep);
    border-color: rgba(253, 252, 249, .72);
}

@media (min-width: 64em) {
    .site-header .logo {
        width: 190px;
    }

    .site-header .logo img {
        width: 190px;
        height: 116px;
    }
}

/* Neutral navigation surfaces and calmer interaction states. */
#mobile-menu,
.dropdown-module,
.team-dropdown-module .categories,
.team-dropdown-module .team-module,
.dropdown-module::before,
.team-dropdown-module .content-slider-width::before {
    background: var(--ssc-paper);
}

.dropdown-module .col a.parent,
.team-dropdown-module .categories,
.team-dropdown-module .categories a.active,
.selectric,
.selectric-focus .selectric,
.selectric-hover .selectric,
.selectric-open .selectric,
.selectric-items {
    border-color: var(--ssc-greige);
}

.dropdown-module .ssc-treatment-menu-group {
    background: rgba(253, 252, 249, .9);
    border-color: rgba(48, 54, 56, .16);
    border-top-color: var(--ssc-greige);
}

.dropdown-module .ssc-treatment-menu-group .children a,
.dropdown-module .ssc-treatment-menu-directory a {
    border-bottom-color: rgba(48, 54, 56, .1);
}

.dropdown-module .ssc-treatment-menu-group .children a:focus,
.dropdown-module .ssc-treatment-menu-group .children a:hover,
.dropdown-module .ssc-treatment-menu-directory a:focus,
.dropdown-module .ssc-treatment-menu-directory a:hover {
    color: var(--ssc-charcoal);
    background: rgba(120, 113, 106, .1);
}

.dropdown-module .ssc-treatment-menu-all,
.dropdown-module .ssc-treatment-menu-directory {
    border-color: rgba(48, 54, 56, .16);
}

/* The reception photograph gives the homepage a more active, clinical welcome. */
.page-home .hero-container {
    background-image:
        linear-gradient(90deg,
            rgba(244, 241, 236, .93) 0%,
            rgba(244, 241, 236, .82) 31%,
            rgba(244, 241, 236, .20) 63%,
            rgba(244, 241, 236, .02) 82%),
        url('/images/ssc-reception-homepage-frosted-2026.webp') !important;
    background-position: 58% 62% !important;
}

@media (min-width: 64em) {
    .page-home .hero-container {
        min-height: 560px;
        background-position: center 66% !important;
    }
}

.page-home .info-container {
    background: var(--ssc-charcoal);
    border-top-color: var(--ssc-greige);
}

/* Compact SSC mark replaces the retired petal symbol as a quiet watermark. */
.page-home .info-container::after {
    content: "" !important;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: none !important;
    width: 80px;
    height: 80px;
    background: url('/images/ssc-mark-reverse.svg?v=20260811') no-repeat center / contain !important;
    opacity: .07;
    pointer-events: none;
}

@media (min-width: 64em) {
    .page-home .info-container::after {
        right: -20px;
        bottom: 32px;
        width: 180px;
        height: 180px;
        opacity: .065;
    }
}

.page-home .treatment-container,
.page-home .info-container-v2,
.page-treatment-detail .white-container,
.page-treatment-detail .white-container h3.special-title {
    background: var(--ssc-paper);
}

.page-treatment-detail .whats-next-container {
    background: var(--ssc-render);
}

.page-treatment-detail .dark-container,
.page-treatment-detail .dark-container h3.special-title,
.page-treatment-detail .tabs-container .tabs a.active,
.page-treatment-detail .tabs-container .tab-content,
.page-treatment-detail .tabs-container h3.special-title,
.page-about .image-container::after {
    background: var(--ssc-charcoal);
}

.page-treatment-detail .white-container h3.special-title,
.page-treatment-detail .tabs-container .tabs a,
.page-treatment-detail .results-container article .image span,
.page-treatment-detail .detail-container .right nav,
.page-team-detail .detail-container .col2 p.position {
    border-color: var(--ssc-greige);
}

/* Calls to action use charcoal; greige is an accent rather than a dominant fill. */
.button.peach,
.button.orange,
.button-field button,
.button-field input[type="reset"],
.button-field input[type="submit"],
.signup-module form button {
    color: #fff;
    background: var(--ssc-charcoal);
    box-shadow: inset 0 -3px 0 var(--ssc-greige);
}

.button.peach:active,
.button.peach:focus,
.button.peach:hover,
.button.orange:active,
.button.orange:focus,
.button.orange:hover,
.button-field button:active,
.button-field button:focus,
.button-field button:hover,
.button-field input[type="reset"]:active,
.button-field input[type="reset"]:focus,
.button-field input[type="reset"]:hover,
.button-field input[type="submit"]:active,
.button-field input[type="submit"]:focus,
.button-field input[type="submit"]:hover,
.signup-module form button:active,
.signup-module form button:focus,
.signup-module form button:hover {
    color: #fff;
    background: var(--ssc-charcoal-deep);
}

input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
    border-color: var(--ssc-greige);
}

#contactForm {
    background: var(--ssc-paper);
    border-color: rgba(48, 54, 56, .18);
    box-shadow: 0 10px 28px rgba(48, 54, 56, .08);
}

/* Footer uses the compact mark as the secondary identity. */
.site-footer {
    background: var(--ssc-paper);
    border-top-color: var(--ssc-greige);
}

.site-footer .footer-links::before {
    right: 18px;
    bottom: 32px;
    width: 138px;
    height: 138px;
    background-image: url('/images/ssc-mark-outline.svg?v=20260811') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    opacity: .25;
}

.site-footer .footer-links .links .cat a,
.site-footer .footer-links .contact p,
.site-footer .footer-links .contact .ph,
.site-footer .footer-links .contact .fb,
.site-footer .footer-legal a,
.site-footer .footer-legal p {
    color: var(--ssc-coral-dark);
}

.site-footer .footer-links .contact::before {
    background: var(--ssc-greige);
}

@media (max-width: 47.999em) {
    .ssc-mobile-quick-actions {
        background: rgba(253, 252, 249, .97);
        border-top-color: rgba(48, 54, 56, .2);
        box-shadow: 0 -5px 18px rgba(48, 54, 56, .12);
    }

    .ssc-mobile-quick-actions__call {
        color: var(--ssc-charcoal);
        background: var(--ssc-paper);
        border-color: rgba(48, 54, 56, .55);
    }

    .ssc-mobile-quick-actions__enquire {
        color: #fff;
        background: var(--ssc-charcoal);
        border-color: var(--ssc-charcoal);
        box-shadow: inset 0 -3px 0 var(--ssc-greige);
    }

    .ssc-mobile-quick-actions a:active,
    .ssc-mobile-quick-actions a:focus,
    .ssc-mobile-quick-actions a:hover {
        color: #fff;
        background: var(--ssc-charcoal-deep);
        border-color: var(--ssc-charcoal-deep);
        outline-color: var(--ssc-greige);
    }
}