/* ==========================================================
   PEDICURE PURPLE ROSE
   STYLE.CSS
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
    /* Brand */
    --primary: #8A5F85;
    --primary-dark: #6F456B;
    --primary-light: #A77BA2;

    /* Backgrounds */
    --secondary: #EDE4EC;
    --light: #F9F7F6;
    --white: #FFFFFF;
    --dark: #2F2933;

    /* Text */
    --text: #4B474D;
    --text-dark: #3E3A40;
    --heading: #4A3F4C;

    /* Layout */
    --max-width: 1200px;
    --header-width: 1280px;
    --radius: 18px;

    /* Shadows */
    --shadow:
        0 12px 35px rgba(0, 0, 0, .08);

    --shadow-large:
        0 30px 70px rgba(38, 28, 50, .12),
        0 6px 16px rgba(38, 28, 50, .05);

    /* Typography */
    --font-heading: 'Marcellus', serif;
    --font-body: 'Manrope', sans-serif;

    /* Transitions */
    --transition: .35s ease;

}

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--text);
    background: #FAF8F8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--heading);
}

h1 {
    line-height: 1.05;
}

h2 {
    font-size: clamp(2.8rem, 3.75vw, 3.375rem);
    line-height: 1.2;
}

h3 {
    font-size: 2rem;
    line-height: 1.25;
    color: #6E4F67;
}

p {
    margin-bottom: 1.5rem;
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container {
    width: min(90%, var(--max-width));
    margin-inline: auto;
}

/* ==========================================================
   HEADER
   ========================================================== */

/*
   De header is bewust losgekoppeld van de navigation.
   Hierdoor kan dezelfde navigation.php op iedere pagina
   worden gebruikt.
*/

/* ==========================================================
   HEADER & NAVIGATION
   VASTE BASIS VOOR ALLE PAGINA'S
========================================================== */


/* ==========================================================
   HEADER & NAVIGATION
   ========================================================== */

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
}

/* Zwevende navigatiebalk */

header .container {
    width: min(1180px, calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;
    padding: 0 34px;
    display: flex;
    align-items: center;
    /* Logo links, navigation rechts */
    justify-content: space-between;
    box-sizing: border-box;
    background: rgba(248, 243, 248, 0.94);
    border-radius: 22px;
    box-shadow:
        0 18px 45px rgba(54, 42, 53, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ==========================================================
   LOGO
   ========================================================== */

header .logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

header .logo img {
    display: block;
    width: auto;
    height: 54px;
}

/* ==========================================================
   NAVIGATION WRAPPER
========================================================== */

.navigation {
    display: flex;
    align-items: center;
    /* Duwt het menu volledig naar rechts */
    margin-left: auto;
    /* Voorkomt dat de navigation onnodig uitrekt */
    flex: 0 0 auto;
    height: 100%;
}

/* ==========================================================
   DESKTOP MENU
========================================================== */

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Belangrijk: menu neemt niet de volledige breedte in */
    width: auto;
    flex: 0 0 auto;
}

/* ==========================================================
   MENU TOGGLE - DESKTOP
   ========================================================== */

.menu-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 0;
    margin: 0;

    border: 0;
    outline: 0;

    background: transparent;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

.menu-toggle span {
    display: block;

    width: 22px;
    height: 1.5px;

    margin: 0;
    padding: 0;

    background: #4B474D;

    border-radius: 2px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* ==========================================================
   NAVIGATION LINKS
========================================================== */

.nav-menu li {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
}

.nav-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    color: #4B474D;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* ==========================================================
   HOVER & ACTIVE LIJN
========================================================== */

.nav-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -8px;

    height: 1.5px;

    background: var(--primary, #8C5B87);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease;
}

.nav-menu a:hover {
    color: var(--primary, #8C5B87);
}

.nav-menu a:hover::after {
    transform: scaleX(1);
}

.nav-menu a.active {
    color: var(--primary, #8C5B87);
}

.nav-menu a.active::after {
    transform: scaleX(1);
}




/* ==========================================================
   HERO
   ========================================================== */

.hero {

    position: relative;

    min-height: 88vh;

    padding-top: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: var(--white);

    background:
        linear-gradient(
            rgba(40, 35, 45, .45),
            rgba(40, 35, 45, .45)
        ),
        url("../images/header.png")
        center center / cover no-repeat;
}


.hero-content {

    max-width: 760px;

    padding: 20px;
}


.subtitle {

    display: inline-block;

    margin-bottom: 22px;

    color: #F4E9F1;

    font-size: .78rem;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.hero h1 {

    margin-bottom: 30px;

    color: var(--white);

    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 7vw, 5.8rem);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1px;
}


.hero h1::first-letter {

    font-size: 115%;
}


.hero p {

    max-width: 650px;

    margin: 0 auto 45px;

    color: rgba(255, 255, 255, .95);

    font-size: 1.2rem;
    font-weight: 300;

    line-height: 1.8;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 16px 40px;

    border: 2px solid transparent;
    border-radius: 50px;

    background: var(--primary);

    color: var(--white);

    font-size: .92rem;
    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 10px 25px rgba(138, 95, 133, .20);

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.button:hover {

    background: var(--primary-dark);

    color: var(--white);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(111, 69, 107, .25);
}


.button:focus-visible {

    outline: 3px solid rgba(138, 95, 133, .35);

    outline-offset: 4px;
}


/* ==========================================================
   SECONDARY BUTTON
   ========================================================== */

.button.secondary {

    background: transparent;

    color: var(--primary);

    border-color: var(--primary);

    box-shadow: none;
}


.button.secondary:hover {

    background: var(--primary);

    color: var(--white);

    border-color: var(--primary);
}


/* ==========================================================
   SECTIONS
   ========================================================== */

section {

    padding: 100px 0;
}


.section-title {

    text-align: center;

    margin-bottom: 60px;
}


.section-title span {

    display: inline-block;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .85rem;
}


.section-title h2 {

    margin-top: 15px;

    font-family: var(--font-heading);

    font-size: clamp(2.8rem, 3.75vw, 3.375rem);

    font-weight: 400;
}


/* ==========================================================
   SERVICES
   ========================================================== */

.service-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;
}


.service-card {

    overflow: hidden;

    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.service-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .12);
}


.service-card img {

    width: 100%;
    height: 320px;

    object-fit: cover;
}


.service-card .content {

    padding: 30px;
}


.service-card h3 {

    margin-bottom: 18px;

    color: var(--primary);

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 400;
}


.service-card p {

    color: var(--text);

    line-height: 1.8;
}


.service-card span {

    display: inline-block;

    margin-top: 25px;

    color: var(--primary);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* ==========================================================
   ABOUT
   ========================================================== */

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


.about img {

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


.about span {

    display: inline-block;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .85rem;
}


.about h2 {

    margin: 15px 0 42px;

    font-family: var(--font-heading);

    font-size: clamp(2.8rem, 3.75vw, 3.375rem);

    font-weight: 400;

    line-height: 1.2;
}


.about p {

    max-width: 650px;

    margin-bottom: 30px;

    line-height: 1.9;
}


.about .button {

    margin-top: 10px;
}


/* ==========================================================
   USP
   ========================================================== */

.usp {

    background: var(--secondary);
}


.usp-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    text-align: center;
}


.usp-grid > div {

    padding: 40px;

    background: var(--white);

    border-radius: var(--radius);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .04);
}


.usp-grid h3 {

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 1.8rem;
}


.usp-grid p {

    font-size: .95rem;

    line-height: 1.7;
}


/* ==========================================================
   CTA
   ========================================================== */

.cta {
    position: relative;
    overflow: hidden;
    padding: 120px 20px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            #8A5F85 0%,
            #9D7297 50%,
            #7C5778 100%
        );
}


.cta::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -150px;
    left: -100px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .06);

    pointer-events: none;
}


.cta::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -80px;
    bottom: -120px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    pointer-events: none;
}


.cta .container {

    position: relative;

    z-index: 2;
}


.cta h2 {

    margin-bottom: 45px;

    color: var(--white);

    font-family: var(--font-heading);

    font-size: clamp(2.8rem, 3.75vw, 3.375rem);

    font-weight: 400;

    line-height: 1.2;
}


/*
   De CTA-knop moet vooraf duidelijk een knop zijn.
*/

.cta .button {

    background: var(--white);

    color: var(--primary);

    border-color: var(--white);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .15);
}


.cta .button:hover {

    background: #F9F4F8;

    color: var(--primary-dark);

    transform: translateY(-4px);

    box-shadow:
        0 22px 45px rgba(0, 0, 0, .22);
}


/* ==========================================================
   GENERIC INTRO
   Voor data-driven productpagina's
   ========================================================== */

.intro {

    padding: 100px 0;
}


.intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


.intro-content {

    max-width: 650px;
}


.intro-label {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.intro h2 {

    margin-bottom: 30px;
}


.intro-image {

    overflow: hidden;

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


.intro-image img {

    width: 100%;

    height: 100%;

    min-height: 450px;

    object-fit: cover;
}


/* ==========================================================
   PRICING
   ========================================================== */

.pricing {

    background: var(--light);
}


.pricing-list {

    max-width: 900px;

    margin: 0 auto;
}


.pricing-category {

    margin-bottom: 55px;
}


.pricing-category:last-child {

    margin-bottom: 0;
}


.pricing-category h3 {

    margin-bottom: 20px;

    padding-bottom: 12px;

    color: var(--primary);

    border-bottom: 1px solid rgba(138, 95, 133, .25);
}


.pricing-item {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 30px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(0, 0, 0, .08);
}


.pricing-item:last-child {

    border-bottom: none;
}


.pricing-item-name {

    font-weight: 500;
}


.pricing-item-description {

    margin-left: auto;

    color: #777;

    font-size: .9rem;
}


.pricing-item-price {

    flex-shrink: 0;

    color: var(--primary);

    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================
   GALLERY
   ========================================================== */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.gallery-item {

    overflow: hidden;

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


.gallery-item img {

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    transition: transform .6s ease;
}


.gallery-item:hover img {

    transform: scale(1.04);
}


/* ==========================================================
   FAQ
   ========================================================== */

.faq-list {

    max-width: 900px;

    margin: 0 auto;
}


.faq-item {

    padding: 25px 0;

    border-bottom: 1px solid rgba(0, 0, 0, .10);
}


.faq-item h3 {

    margin-bottom: 10px;

    color: var(--heading);

    font-family: var(--font-body);

    font-size: 1.1rem;

    font-weight: 600;
}


.faq-item p {

    color: var(--text);

    font-size: .95rem;

    line-height: 1.8;
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

    background: #3f3540;
    color: #f8f3f8;

    padding: 90px 0 30px;

}


/* ==========================================================
   FOOTER GRID
========================================================== */

.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1.2fr
        1fr;

    gap: 70px;

    padding-bottom: 70px;

}


/* ==========================================================
   FOOTER COLUMNS
========================================================== */

.footer-column h3 {

    margin: 0 0 24px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 1.7rem;
    font-weight: 500;

    color: #ffffff;

}


.footer-column p {

    max-width: 320px;

    margin: 0;

    font-family: 'Manrope', sans-serif;

    font-size: 0.9rem;
    line-height: 1.8;

    color: rgba(255,255,255,0.68);

}




/* ==========================================================
   MENU
========================================================== */

.footer-column ul {

    margin: 0;
    padding: 0;

    list-style: none;

}


.footer-column li {

    margin: 0 0 12px;

}


.footer-column li:last-child {

    margin-bottom: 0;

}


.footer-column li a {

    color: rgba(255,255,255,0.72);

    font-family: 'Manrope', sans-serif;

    font-size: 0.88rem;

    text-decoration: none;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;

}


.footer-column li a:hover {

    color: #ffffff;

    padding-left: 4px;

}


/* ==========================================================
   BEZOEKADRES
========================================================== */

.footer-location address {

    margin: 0;

    font-style: normal;

}


.footer-address {

    display: inline-flex;

    flex-direction: column;

    gap: 5px;

    color: rgba(255,255,255,0.72);

    font-family: 'Manrope', sans-serif;

    text-decoration: none;

}


.address-street {

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 500;

}


.address-city {

    font-size: 0.88rem;

}


.address-route {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 12px;

    color: #c99bc3;

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition: gap 0.3s ease;

}


.footer-address:hover .address-route {

    gap: 13px;

}


/* ==========================================================
   CONTACT
========================================================== */

.footer-contact {

    margin-bottom: 28px !important;

}


.footer-contact li {

    margin-bottom: 10px;

}


.footer-contact a {

    color: rgba(255,255,255,0.72);

}


/* =========================================================
   FOOTER SOCIALS
========================================================= */

.footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-social h3 {
    margin-bottom: 20px;
}


/* ---------------------------------------------------------
   SOCIAL LINKS
--------------------------------------------------------- */

.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ---------------------------------------------------------
   SOCIAL ICON BUTTON
--------------------------------------------------------- */

.social-links a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(140, 91, 135, 0.35);
    border-radius: 50%;

    color: var(--primary, #8C5B87);

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


/* ---------------------------------------------------------
   SVG
--------------------------------------------------------- */

.social-links svg {
    width: 19px;
    height: 19px;

    display: block;

    fill: currentColor;
}


/* Instagram outline */

.social-links svg rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.social-links svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.social-links svg .social-dot {
    fill: currentColor;
    stroke: none;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.social-links a:hover {
    color: #ffffff;

    background: var(--primary, #8C5B87);
    border-color: var(--primary, #8C5B87);

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   FOCUS
--------------------------------------------------------- */

.social-links a:focus-visible {
    outline: 2px solid var(--primary, #8C5B87);
    outline-offset: 4px;
}

/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,0.12);

}


.footer-bottom p {

    margin: 0;

    color: rgba(255,255,255,0.45);

    font-family: 'Manrope', sans-serif;

    font-size: 0.72rem;

}


.footer-bottom .developer {

    text-align: right;

}


.footer-bottom .developer a {

    color: rgba(255,255,255,0.75);

    text-decoration: none;

    transition: color 0.3s ease;

}


.footer-bottom .developer a:hover {

    color: #ffffff;

}


/* ==========================================================
   COPYRIGHT
   ========================================================== */

.copyright {

    margin-top: 50px;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, .15);

    text-align: center;

    color: rgba(255, 255, 255, .65);

    font-size: .9rem;
}



/* ============================================================
   PEDICURE PAGE
   Pedicure Purple Rose
   ============================================================ */


/* ============================================================
   PAGE HERO
   ============================================================ */

.page-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    height: 88vh;
    max-height: 900px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #4b3d4b;
}


/* Hero image */

.page-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}


/* Subtle luxury overlay */

.page-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(43, 34, 43, 0.72) 0%,
            rgba(43, 34, 43, 0.48) 38%,
            rgba(43, 34, 43, 0.12) 75%,
            rgba(43, 34, 43, 0.05) 100%
        );
}


/* Hero content */

.page-hero-content {
    position: relative;
    z-index: 3;

    padding-top: 120px;
    padding-bottom: 80px;

    color: #ffffff;

    max-width: 1280px;
}


.page-hero-content .eyebrow {
    display: block;

    margin-bottom: 24px;

    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.24em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.9);
}


.page-hero-content h1 {
    max-width: 780px;

    margin: 0 0 30px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.4rem, 6vw, 5.6rem);
    font-weight: 400;

    line-height: 0.98;
    letter-spacing: -0.025em;

    color: #ffffff;
}


.page-hero-content p {
    max-width: 570px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 1.08rem;
    font-weight: 400;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.92);
}


/* ============================================================
   GENERAL SECTION SETTINGS
   ============================================================ */

.pedicure-intro {
    position: relative;

    padding: 130px 0;
}


.pedicure-intro {
    background: #faf8f9;
}


/* ==========================================================
   BEHANDELINGEN INTRO
========================================================== */

.pedicure-services {
    width: 100%;
    background: #f4eef3;
}

.pedicure-services > .container {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}

/* ==========================================================
   PEDICURE SERVICES — INTRO
========================================================== */

.pedicure-services .section-title {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 80px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* Klein label boven de titel */
.pedicure-services .section-title > span {
    display: block;
    margin-bottom: 18px;

    text-align: center;
}

/* Hoofdtitel */
.pedicure-services .section-title h2 {
    width: 100%;
    margin: 0 auto 28px;

    text-align: center;
}

/* Introductietekst */
.pedicure-services .section-title p {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


/* ============================================================
   SECTION TITLE
   ============================================================ */

.pedicure-intro .section-title,
.pedicure-services .section-title {
    max-width: 850px;

    margin-bottom: 70px;
}


.pedicure-intro .section-title > span,
.pedicure-services .section-title > span {
    display: block;

    margin-bottom: 18px;

    font-family: "Manrope", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: #95618e;
}


.pedicure-intro .section-title h2,
.pedicure-services .section-title h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.7rem, 5vw, 3.4rem);
    font-weight: 400;

    line-height: 1.08;
    letter-spacing: -0.02em;

    color: #4b3d4b;
}


.pedicure-services .section-title p {
    max-width: 680px;

    margin: 25px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    line-height: 1.8;

    color: #625a62;
}


/* ============================================================
   INTRO GRID
   ============================================================ */

.pedicure-intro-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);

    gap: 100px;

    align-items: start;
}


/* Intro text */

.pedicure-intro-text {
    max-width: 760px;
}


.pedicure-intro-text p {
    margin: 0 0 25px;

    font-family: "Manrope", sans-serif;
    font-size: 1.02rem;
    font-weight: 400;

    line-height: 1.9;

    color: #514b52;
}


.pedicure-intro-text p:last-child {
    margin-bottom: 0;
}


.pedicure-intro-text .lead {
    margin-bottom: 30px;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.75rem;
    line-height: 1.45;

    color: #4b3d4b;
}


/* ============================================================
   PROVOET TRUST BLOCK
   ============================================================ */

.pedicure-trust {
    position: relative;

    padding: 45px 42px;

    background: #ffffff;

    border: 1px solid rgba(149, 97, 142, 0.14);

    box-shadow:
        0 20px 55px rgba(74, 55, 72, 0.08);
}


.pedicure-trust::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: #95618e;
}


.pedicure-trust .trust-label {
    display: block;

    margin-bottom: 18px;

    font-family: "Manrope", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #95618e;
}


.pedicure-trust h3 {
    margin: 0 0 20px;

    font-family: "Cormorant Garamond", serif;
    font-size: 2.2rem;
    font-weight: 500;

    line-height: 1.1;

    color: #4b3d4b;
}


.pedicure-trust p {
    margin: 0 0 16px;

    font-family: "Manrope", sans-serif;
    font-size: 0.92rem;

    line-height: 1.75;

    color: #625a62;
}


.pedicure-trust p:last-of-type {
    margin-bottom: 25px;
}


.pedicure-trust strong {
    font-weight: 700;
    color: #4b3d4b;
}

/* ==========================================================
   KALKNAGELS / LASERBEHANDELING
   ========================================================== */

.laser-treatment {
    position: relative;
    padding: 110px 0;
    background: #f8f4f7;
    overflow: hidden;
}


/* ==========================================================
   GRID
   ========================================================== */

.laser-treatment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 90px;
    align-items: center;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.laser-treatment-content {
    max-width: 680px;
}

.laser-treatment-content .eyebrow {
    display: block;
    margin-bottom: 22px;
}

.laser-treatment-content h2 {
    max-width: 620px;
    margin: 0 0 30px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: #3d293b;
}

.laser-treatment-content p {
    max-width: 620px;
    margin: 0 0 22px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.98rem;
    line-height: 1.8;
    color: #5d5660;
}

.laser-treatment-content .laser-lead {
    max-width: 580px;
    margin-bottom: 28px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #4b414b;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.laser-treatment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}


/* ==========================================================
   RECHTER DETAILBLOK
   ========================================================== */

.laser-treatment-detail {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    box-sizing: border-box;
    background: #8c5b87;
    border-radius: 140px 30px 140px 30px;
    overflow: hidden;
}


/*
   Subtiele decoratieve vorm
*/

.laser-treatment-detail::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -100px;
    right: -80px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}

.laser-treatment-detail::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    bottom: -190px;
    left: -130px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}


/* ==========================================================
   DETAIL CONTENT
   ========================================================== */

.laser-treatment-detail-inner {
    position: relative;
    z-index: 2;
    max-width: 340px;
    color: #ffffff;
}

.laser-detail-label {
    display: block;
    margin-bottom: 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.laser-treatment-detail h3 {
    margin: 0 0 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.laser-treatment-detail p {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.84);
}


/* Text link */

.text-link {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    text-decoration: none;

    color: #95618e;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.text-link span {
    font-size: 1.1rem;

    transition: transform 0.3s ease;
}


.text-link:hover {
    color: #6e4569;
    gap: 16px;
}


.text-link:hover span {
    transform: translateX(4px);
}


/* ============================================================
   PRICE LIST
   ============================================================ */

.price-list {
    max-width: 1100px;

    margin: 0 auto;
}


/* Category */

.price-category {
    margin-bottom: 75px;
}


.price-category:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   PRICE CATEGORY
========================================================== */

/* ==========================================================
   PRICE CATEGORY
========================================================== */

.price-category-header {
    display: block;
    margin-bottom: 28px;
}

.price-category-header h3 {
    margin: 0 0 8px;
}

.price-category-header p {
    margin: 0;
}


/* Price items */

.price-items {
    border-bottom: 1px solid rgba(75, 61, 75, 0.12);
}


.price-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 28px 5px;

    border-bottom: 1px solid rgba(75, 61, 75, 0.09);

    transition:
        padding 0.3s ease,
        background-color 0.3s ease;
}


.price-item:last-child {
    border-bottom: none;
}


.price-item:hover {
    padding-left: 15px;
    padding-right: 15px;

    background: rgba(255, 255, 255, 0.45);
}


.price-info {
    min-width: 0;
}


.price-info h4 {
    margin: 0 0 6px;

    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 600;

    line-height: 1.5;

    color: #4b454c;
}


.price-info span {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;

    letter-spacing: 0.02em;

    color: #8b838a;
}


.price-item strong {
    flex: 0 0 auto;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.65rem;
    font-weight: 600;

    white-space: nowrap;

    color: #95618e;
}


/* ============================================================
   CTA
   ============================================================ */

.pedicure-cta {
    position: relative;

    padding: 135px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #8f638c 0%,
            #80587e 100%
        );

    overflow: hidden;
}


/* Decorative circle */

.pedicure-cta::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -230px;
    right: -100px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
}


.pedicure-cta::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -190px;
    left: -80px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
}


.pedicure-cta .container {
    position: relative;
    z-index: 2;
}


.pedicure-cta .eyebrow {
    display: block;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.23em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.82);
}


.pedicure-cta h2 {
    margin: 0 0 22px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 3.6rem);
    font-weight: 400;

    line-height: 1.05;
    letter-spacing: -0.02em;

    color: #ffffff;
}


.pedicure-cta p {
    max-width: 560px;

    margin: 0 auto 40px;

    font-family: "Manrope", sans-serif;
    font-size: 1rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.88);
}


/* CTA button */

.pedicure-cta .button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 230px;

    padding: 17px 32px;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50px;

    background: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;

    color: #795274;

    box-shadow: 0 12px 30px rgba(40, 27, 40, 0.15);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.pedicure-cta .button:hover {
    transform: translateY(-3px);

    background: #f8f1f7;

    box-shadow: 0 18px 40px rgba(40, 27, 40, 0.22);
}


/* ============================================================
   HEADER / HERO OVERLAP
   ============================================================ */

/*
 * De hero moet helemaal bovenaan beginnen.
 * Het menu blijft als zwevend element boven de hero liggen.
 */

header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;
}


/*
 * Zorg ervoor dat de container van de header
 * boven de hero blijft staan.
 */

header .container {
    position: relative;
    z-index: 1001;
}



/* ==========================================================
   SCHOONHEIDSSALON
   Pedicure Purple Rose
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.beauty-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    overflow: hidden;

    display: flex;
    align-items: center;
}


.beauty-hero-image {
    position: absolute;
    inset: 0;

    z-index: 0;
}


.beauty-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


.beauty-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(49, 38, 48, 0.68) 0%,
            rgba(49, 38, 48, 0.38) 42%,
            rgba(49, 38, 48, 0.08) 75%,
            rgba(49, 38, 48, 0.02) 100%
        );
}


.beauty-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1180px;

    padding-top: 100px;
}


.beauty-hero-content .eyebrow {
    display: block;

    margin-bottom: 22px;

    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #ffffff;
}


.beauty-hero-content h1 {
    max-width: 780px;

    margin: 0 0 28px;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(3.2rem, 6vw, 5.2rem);
    font-weight: 400;

    line-height: 0.98;

    color: #ffffff;
}


.beauty-hero-content p {
    max-width: 560px;

    margin: 0 0 38px;

    font-family: 'Manrope', sans-serif;

    font-size: 1.05rem;
    line-height: 1.8;

    color: rgba(255,255,255,0.9);
}


/* ==========================================================
   INTRO
========================================================== */

.beauty-intro {
    padding: 140px 0 120px;

    background: #faf7fa;
}


.beauty-intro .section-title {
    width: 100%;
    max-width: 850px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.beauty-intro .section-title span {
    display: block;

    margin-bottom: 18px;

    font-family: 'Manrope', sans-serif;

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--primary);
}


.beauty-intro .section-title h2 {
    width: 100%;

    margin: 0 0 28px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 54px;
    font-weight: 400;

    line-height: 1.08;

    text-align: center;

    color: #4b414b;
}


.beauty-intro .section-title p {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    font-family: 'Manrope', sans-serif;

    font-size: 1rem;
    line-height: 1.9;

    text-align: center;

    color: #625963;
}


/* ==========================================================
   TRUST
========================================================== */

.beauty-trust {
    padding: 0 0 130px;

    background: #faf7fa;
}


.beauty-trust-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top: 1px solid rgba(75,65,75,0.16);
}


.beauty-trust-item {
    padding: 55px 45px 50px;

    border-right: 1px solid rgba(75,65,75,0.16);
}


.beauty-trust-item:first-child {
    padding-left: 0;
}


.beauty-trust-item:last-child {
    border-right: none;

    padding-right: 0;
}


.beauty-trust-label {
    display: block;

    margin-bottom: 16px;

    font-family: 'Manrope', sans-serif;

    font-size: 0.74rem;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--primary);
}


.beauty-trust-item h3 {
    margin: 0 0 14px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 32px;
    font-weight: 400;

    color: #4b414b;
}


.beauty-trust-item p {
    max-width: 320px;

    margin: 0;

    font-family: 'Manrope', sans-serif;

    font-size: 0.92rem;
    line-height: 1.8;

    color: #675e66;
}


/* ==========================================================
   BEHANDELINGEN
========================================================== */

.beauty-services {
    padding: 140px 0 150px;

    background: #f4eef4;
}


.beauty-services > .container {
    width: min(1100px, calc(100% - 40px));

    margin: 0 auto;
}


/* ==========================================================
   BEHANDELINGEN INTRO
========================================================== */

.beauty-services > .container > .section-title {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 100px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.beauty-services .section-title > span {
    display: block;

    margin-bottom: 18px;

    font-family: 'Manrope', sans-serif;

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--primary);
}


.beauty-services .section-title h2 {
    width: 100%;

    margin: 0 auto 28px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 54px;
    font-weight: 400;

    line-height: 1.1;

    text-align: center;

    color: #4b414b;
}


.beauty-services .section-title p {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    font-family: 'Manrope', sans-serif;

    font-size: 1rem;
    line-height: 1.85;

    text-align: center;

    color: #625963;
}


/* ==========================================================
   PRICE CATEGORY
========================================================== */

.price-category {
    margin-bottom: 110px;
}


.price-category:last-of-type {
    margin-bottom: 0;
}


.price-category-header {
    display: block;

    margin-bottom: 30px;
}


.price-category-header h3 {
    margin: 0 0 8px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;
    font-weight: 400;

    line-height: 1.1;

    color: #4b414b;
}


.price-category-header p {
    margin: 0;

    font-family: 'Manrope', sans-serif;

    font-size: 0.92rem;
    line-height: 1.7;

    color: #706771;
}


/* ==========================================================
   SUBCATEGORY
========================================================== */

.price-subcategory {
    margin-top: 55px;
    margin-bottom: 0;
}


.price-subcategory h4 {
    margin: 0;

    font-family: 'Manrope', sans-serif;

    font-size: 0.88rem;
    font-weight: 600;

    letter-spacing: 0.03em;

    color: #625963;
}


/* ==========================================================
   PRICE LIST
========================================================== */

.price-list {
    width: 100%;

    border-top: 1px solid rgba(75,65,75,0.18);
}


.price-item {
    min-height: 110px;

    padding: 27px 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-bottom: 1px solid rgba(75,65,75,0.12);
}


.price-info {
    min-width: 0;
}


.price-info h4 {
    margin: 0 0 7px;

    font-family: 'Manrope', sans-serif;

    font-size: 0.95rem;
    font-weight: 500;

    line-height: 1.5;

    color: #433c43;
}


.price-info span {
    display: block;

    font-family: 'Manrope', sans-serif;

    font-size: 0.82rem;
    line-height: 1.5;

    color: #857b84;
}


.price-item strong {
    flex: 0 0 auto;

    font-family: 'Cormorant Garamond', serif;

    font-size: 1.35rem;
    font-weight: 500;

    color: var(--primary);
}


/* ==========================================================
   BEAUTY BOOKING / CTA
   VOLLEDIGE BREEDTE
========================================================== */

.beauty-booking {
    width: 100%;
    margin: 0;
    padding: 100px 40px;

    box-sizing: border-box;

    background: var(--primary, #8C5B87);

    text-align: center;
}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.beauty-booking-content {
    width: min(900px, 100%);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ----------------------------------------------------------
   EYEBROW
---------------------------------------------------------- */

.beauty-booking-content > span {
    display: block;

    margin-bottom: 18px;

    color: rgba(255, 255, 255, 0.85);

    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   TITEL
---------------------------------------------------------- */

.beauty-booking-content h2 {
    margin: 0 0 22px;

    color: #ffffff;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;

    text-align: center;
}


/* ----------------------------------------------------------
   TEKST
---------------------------------------------------------- */

.beauty-booking-content p {
    max-width: 620px;
    margin: 0 0 36px;

    color: rgba(255, 255, 255, 0.9);

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.7;

    text-align: center;
}


/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.beauty-booking-content .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 250px;

    padding: 16px 32px;

    background: #ffffff;
    color: var(--primary, #8C5B87);

    border-radius: 999px;

    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.beauty-booking-content .button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(54, 42, 53, 0.18);
}
/* =========================================================
   BEAUTY TREATMENTS
========================================================= */

.beauty-treatments {
    width: 100%;
    background: var(--background, #fcf9f5);
}


/* =========================================================
   TREATMENT BLOCK
========================================================= */

.beauty-treatment {
    width: min(1400px, calc(100% - 56px));
    margin: 0 auto;

    min-height: 540px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;
    gap: 70px;

    padding: 90px 0;
}


/* =========================================================
   ALTERNATING LAYOUT
========================================================= */

.beauty-treatment-reverse {
    grid-template-columns: 1fr 1fr;
}

.beauty-treatment-reverse .beauty-treatment-content {
    order: 2;
}

.beauty-treatment-reverse .beauty-treatment-image {
    order: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.beauty-treatment-content {
    max-width: 620px;
}

.beauty-treatment-label {
    display: block;

    margin-bottom: 14px;

    color: var(--primary, #8c5b87);

    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.beauty-treatment-content h2 {
    margin: 0 0 10px;

    color: #4b3f4b;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 4vw, 4rem);
    font-weight: 400;

    line-height: 1.05;
}


.beauty-treatment-duration {
    display: block;

    margin-bottom: 28px;

    color: var(--primary, #8c5b87);

    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 600;
}


.beauty-treatment-content p {
    margin: 0 0 18px;

    color: #514c53;

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 400;

    line-height: 1.75;
}


.beauty-treatment-content p strong {
    font-weight: 700;
    color: #4b3f4b;
}


/* =========================================================
   BUTTON
========================================================= */

.beauty-treatment-content .button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 250px;

    margin-top: 12px;
}


/* =========================================================
   IMAGE
========================================================= */

.beauty-treatment-image {
    width: 100%;
    height: 460px;

    overflow: hidden;

    border-radius: 180px 180px 180px 40px;
}


.beauty-treatment-reverse .beauty-treatment-image {
    border-radius: 180px 40px 180px 180px;
}


.beauty-treatment-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.beauty-treatment:hover .beauty-treatment-image img {
    transform: scale(1.025);
}


/* =========================================================
   SEPARATION
========================================================= */

.beauty-treatment + .beauty-treatment {
    border-top: 1px solid rgba(75, 63, 75, 0.10);
}

/* =========================================================
   404 PAGE
========================================================= */

.page-404 {
    min-height: 70vh;
}

.error-section {
    min-height: 70vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 160px 20px 100px;

    background: var(--background);
}

.error-content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.error-content .section-label {
    display: block;

    margin-bottom: 20px;

    font-family: 'Manrope', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--primary);
}

.error-content h1 {
    margin: 0 0 28px;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;

    color: var(--text-dark);
}

.error-content p {
    max-width: 600px;

    margin: 0 auto 40px;

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.8;

    color: var(--text);
}

/* =========================================================
   ABOUT PAGE
   OVER MIJ
========================================================= */


/* =========================================================
   HERO
========================================================= */

.about-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(54, 39, 53, 0.68),
            rgba(54, 39, 53, 0.18)
        ),
        url("../images/overmij-hero.png") center center / cover no-repeat;
    color: #fff;

}


.about-hero-content {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding-top: 90px;
}


.about-hero .eyebrow {
    display: block;
    margin-bottom: 22px;
    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.about-hero h1 {
    max-width: 720px;
    margin: 0 0 24px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.4rem, 6vw, 6rem);
    font-weight: 400;
    color: var(--light);
    line-height: 0.95;
}


.about-hero p {
    max-width: 520px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   INTRO
========================================================= */

.about-intro {
    padding: 120px 0;
    background: #f8f3f8;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 90px;
    align-items: center;
}


.about-intro-image {
    overflow: hidden;
}


.about-intro-image img {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
    border-radius: 0 90px 0 90px;
}


.about-intro-content {
    max-width: 560px;
}


.section-label {
    display: block;
    margin-bottom: 20px;
    font-family: "Manrope", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary, #8c5b87);
}


.about-intro-content h2,
.about-salon-content h2,
.about-mission-content h2 {

    margin: 0 0 28px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(2.8rem, 4vw, 4.4rem);

    font-weight: 400;

    line-height: 1;

    color: #493f49;

}


.about-intro-content p,
.about-salon-content p,
.about-mission-content p {

    margin: 0 0 20px;

    font-family: "Manrope", sans-serif;

    font-size: 1rem;

    line-height: 1.85;

    color: #625a63;

}


.about-intro-content p:last-child,
.about-salon-content p:last-child,
.about-mission-content p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   SPECIALISATIES
========================================================= */

.about-specialties {

    padding: 130px 0;

    background: #fff;

}

.about-specialties .section-title {
    max-width: 760px;
    margin: 0 auto 80px;
    text-align: center;
}

.about-specialties .section-title span {
    display: block;
    margin-bottom: 18px;
    font-family: "Manrope", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary, #8c5b87);
}

.about-specialties .section-title h2 {
    margin: 0 0 25px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    color: #493f49;
}

.about-specialties .section-title p {
    max-width: 650px;
    margin: 0 auto;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #6b626b;
}


.specialties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #ddd4dc;
    border-top: 1px solid #ddd4dc;
    border-left: 1px solid #ddd4dc;
}


.specialty-card {
    min-height: 260px;
    padding: 42px;
    background: #fff;
    border-right: 1px solid #ddd4dc;
    border-bottom: 1px solid #ddd4dc;
}


.specialty-number {
    display: none;
}


.specialty-card h3 {
    margin: 0 0 12px;
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 500;
    color: #493f49;
}


.specialty-card p {
    max-width: 330px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #716972;
}


/* =========================================================
   SALON
========================================================= */

.about-salon {

    padding: 120px 0;

    background: #f8f3f8;

}


.about-salon-grid {

    display: grid;

    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    gap: 90px;

    align-items: center;

}


.about-salon-content {

    max-width: 520px;

}


.about-salon-image {

    overflow: hidden;

}


.about-salon-image img {

    display: block;

    width: 100%;

    height: 560px;

    object-fit: cover;

    border-radius: 90px 0 90px 0;

}


/* =========================================================
   MISSIE
========================================================= */

.about-mission {

    padding: 120px 0;

    background: #fff;

}


.about-mission-grid {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: 90px;

    align-items: center;

}


.about-mission-image {

    order: 1;

    overflow: hidden;

}


.about-mission-content {

    order: 2;

    max-width: 520px;

}


.about-mission-image img {

    display: block;

    width: 100%;

    height: 560px;

    object-fit: cover;

    border-radius: 0 90px 0 90px;

}


/* =========================================================
   CTA
========================================================= */

.about-cta {
    width: 100%;
    padding: 120px 20px;
    box-sizing: border-box;
    background: var(--primary, #8c5b87);
    color: #fff;
}


.about-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


.about-cta .eyebrow {
    display: block;
    margin-bottom: 20px;
    font-family: "Manrope", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}


.about-cta h2 {
    margin: 0 0 20px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 400;
    color: var(--light);
    line-height: 1;
}

.about-cta p {
    margin: 0 auto 35px;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}

.about-cta .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    border-radius: 999px;
    background: #fff;
    color: var(--primary, #8c5b87);
    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-cta .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.about-testimonials {

    padding: 120px 0;

    background: #f8f3f8;

}


.about-testimonials .section-title {

    margin-bottom: 70px;

    text-align: center;

}


.about-testimonials .section-title span {

    display: block;

    margin-bottom: 18px;

    font-family: "Manrope", sans-serif;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--primary, #8c5b87);

}


.about-testimonials .section-title h2 {

    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(3rem, 5vw, 4.4rem);

    font-weight: 400;

    color: #493f49;

}


.testimonial-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.testimonial {

    padding: 42px;

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid rgba(140, 91, 135, 0.12);

}


.testimonial-stars {

    margin-bottom: 25px;

    color: var(--primary, #8c5b87);

    letter-spacing: 0.12em;

}


.testimonial p {

    margin: 0 0 30px;

    font-family: "Manrope", sans-serif;

    font-size: 0.95rem;

    line-height: 1.8;

    color: #5f5760;

}


.testimonial span {

    font-family: "Manrope", sans-serif;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: #493f49;

}

/* ==========================================================
   SPRAY TANNING PAGE
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.spray-tanning-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(47, 35, 43, 0.58),
            rgba(47, 35, 43, 0.16)
        ),
        url("../images/spray-tanning-hero.png");

    background-size: cover;
    background-position: center;
    min-height: 680px;

    display: flex;
    align-items: center;

    position: relative;
}


.spray-tanning-hero .container {
    position: relative;
    z-index: 2;
}


.page-hero-content {
    max-width: 680px;
    color: #fff;
}


.page-hero-content .eyebrow {
    display: block;

    margin-bottom: 24px;

    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.page-hero-content h1 {
    margin: 0 0 24px;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}


.page-hero-content p {
    margin: 0;

    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
}


/* ==========================================================
   INTRO
========================================================== */

.spray-intro {
    padding: 140px 0;
    background: #faf7fa;
}


.spray-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.spray-intro-text {
    max-width: 580px;
}


.section-label {
    display: block;

    margin-bottom: 20px;

    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: var(--primary, #8c5b87);
}


.spray-intro-text h2,
.sienna-content h2 {
    margin: 0 0 28px;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 4vw, 4.3rem);
    font-weight: 400;
    line-height: 1;
    color: #403640;
}


.spray-intro-text p,
.sienna-content p {
    margin: 0 0 20px;

    color: #625b63;

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
}


.spray-intro-text .button {
    margin-top: 18px;
}


.spray-intro-image {
    overflow: hidden;

    border-radius: 120px 30px 120px 30px;
}


.spray-intro-image img {
    display: block;

    width: 100%;
    height: 620px;

    object-fit: cover;
}


/* ==========================================================
   BENEFITS
========================================================== */

.spray-benefits {
    padding: 140px 0;

    background: #f3edf3;
}


.spray-benefits .section-title {
    max-width: 760px;

    margin: 0 auto 75px;

    text-align: center;
}


.spray-benefits .section-title span,
.spray-care .section-title span {
    display: block;

    margin-bottom: 18px;

    color: var(--primary, #8c5b87);

    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.spray-benefits .section-title h2,
.spray-care .section-title h2,
.treatment-prices .section-title h2 {
    margin: 0 0 25px;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;

    color: #403640;
}


.spray-benefits .section-title p,
.spray-care .section-title p,
.treatment-prices .section-title p {
    max-width: 700px;

    margin: 0 auto;

    color: #625b63;

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
}


.benefits-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1px;

    background: rgba(80, 60, 75, 0.16);
}


.benefit-card {
    padding: 45px 35px;

    background: #f3edf3;
}


.benefit-card h3 {
    margin: 0 0 16px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 500;

    color: #403640;
}


.benefit-card p {
    margin: 0;

    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    line-height: 1.75;

    color: #625b63;
}


/* ==========================================================
   SIENNA-X
========================================================== */

.sienna-section {
    padding: 140px 0;

    background: #faf7fa;
}


.sienna-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.sienna-image {
    overflow: hidden;

    border-radius: 30px 120px 30px 120px;
}


.sienna-image img {
    display: block;

    width: 100%;
    height: 600px;

    object-fit: cover;
}


.sienna-content {
    max-width: 580px;
}


.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;

    color: var(--primary, #8c5b87);

    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    text-decoration: none;
}


.text-link span {
    font-size: 1.2rem;

    transition: transform 0.3s ease;
}


.text-link:hover span {
    transform: translateX(5px);
}


/* ==========================================================
   CARE / VOORBEREIDING
========================================================== */

.spray-care {
    padding: 140px 0;

    background: #f3edf3;
}


.spray-care .section-title {
    text-align: center;

    max-width: 760px;

    margin: 0 auto 75px;
}


.care-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}


.care-card {
    padding: 45px;

    background: #faf7fa;

    border: 1px solid rgba(80, 60, 75, 0.12);
}


.care-number {
    display: block;

    margin-bottom: 25px;

    color: var(--primary, #8c5b87);

    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.care-card h3 {
    margin: 0 0 16px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 500;

    color: #403640;
}


.care-card p {
    margin: 0;

    color: #625b63;

    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    line-height: 1.8;
}


/* ==========================================================
   PRIJSLIJST
========================================================== */

.spray-prices {
    padding: 140px 0;

    background: #faf7fa;
}


.spray-prices .section-title {
    text-align: center;

    margin-bottom: 70px;
}


.price-list {
    max-width: 1100px;

    margin: 0 auto;

    border-top: 1px solid rgba(80, 60, 75, 0.16);
}


.price-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 30px 5px;

    border-bottom: 1px solid rgba(80, 60, 75, 0.16);
}


.price-info h3 {
    margin: 0 0 7px;

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 500;

    color: #403640;
}


.price-info span {
    color: #8a818b;

    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
}


.price {
    flex: 0 0 auto;

    color: var(--primary, #8c5b87);

    font-family: 'Cormorant Garamond', serif;
    font-size: 1.65rem;
}


.price-note {
    max-width: 1100px;

    margin: 25px auto 0;

    color: #8a818b;

    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    line-height: 1.6;
}


/* ==========================================================
   CTA
========================================================== */

.spray-cta {
    width: 100%;
    padding: 130px 0;
    color: #fff;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            #8A5F85 0%,
            #9D7297 50%,
            #7C5778 100%
        );
}


.page-cta-content {
    max-width: 760px;
    margin: 0 auto;
}


.page-cta-content > span {
    display: block;
    margin-bottom: 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.page-cta-content h2 {
    margin: 0 0 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    color: var(--light);
    line-height: 1;
}


.page-cta-content p {
    margin: 0 auto 35px;

    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}


.button.light {
    background: #fff;
    color: var(--primary, #8c5b87);
}


.button.light:hover {
    background: #f3edf3;
}

/* ==========================================================
   CONTACT PAGE
   ========================================================== */


/* ==========================================================
   HERO
   ========================================================== */

.contact-hero {

    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #f2e9f1 0%,
            #eee3ed 55%,
            #e7dce6 100%
        );

    overflow: hidden;
}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(138, 95, 133, 0.08);
}


.contact-hero::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    bottom: -220px;
    left: -100px;

    border-radius: 50%;

    background:
        rgba(138, 95, 133, 0.06);
}


.contact-hero .container {

    position: relative;

    z-index: 2;
}


.contact-hero-content {

    max-width: 760px;

    padding-top: 120px;
    padding-bottom: 80px;
}


.contact-hero .eyebrow {

    display: block;

    margin-bottom: 22px;

    font-family: "Manrope", sans-serif;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--primary);
}


.contact-hero h1 {

    max-width: 700px;

    margin: 0 0 28px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(
        3.8rem,
        7vw,
        6rem
    );

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.025em;

    color: #4b3d4b;
}


.contact-hero p {

    max-width: 570px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 1.05rem;

    line-height: 1.85;

    color: #625a62;
}


/* ==========================================================
   CONTACT SECTION
   ========================================================== */

.contact-section {

    padding: 130px 0;

    background: #faf8f9;
}


.contact-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 110px;

    align-items: start;
}


/* ==========================================================
   CONTACT INFO
   ========================================================== */

.contact-info {

    max-width: 520px;
}


.section-label {

    display: block;

    margin-bottom: 18px;

    font-family: "Manrope", sans-serif;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--primary);
}


.contact-info h2 {

    margin: 0 0 28px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(
        2.8rem,
        5vw,
        4rem
    );

    font-weight: 400;

    line-height: 1.05;

    color: #4b3d4b;
}


.contact-info p {

    margin: 0 0 22px;

    font-family: "Manrope", sans-serif;

    font-size: 1rem;

    line-height: 1.85;

    color: #625a62;
}


.contact-info .contact-intro {

    font-size: 1.08rem;

    color: #514b52;
}


/* ==========================================================
   CONTACT DETAILS
   ========================================================== */

.contact-details {

    margin-top: 55px;

    border-top:
        1px solid
        rgba(74, 63, 76, 0.15);
}


.contact-detail {

    padding: 24px 0;

    border-bottom:
        1px solid
        rgba(74, 63, 76, 0.15);
}


.contact-detail > span {

    display: block;

    margin-bottom: 7px;

    font-family: "Manrope", sans-serif;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: #95618e;
}


.contact-detail a,
.contact-detail p {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 0.95rem;

    line-height: 1.7;

    color: #4b474d;

    transition:
        color 0.3s ease;
}


.contact-detail a:hover {

    color: var(--primary);
}


/* ==========================================================
   FORM WRAPPER
   ========================================================== */

.contact-form-wrapper {

    padding: 55px 55px 50px;

    background: #ffffff;

    border:
        1px solid
        rgba(149, 97, 142, 0.12);

    box-shadow:
        0 25px 70px
        rgba(74, 55, 72, 0.08);
}


/* ==========================================================
   FORM
   ========================================================== */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 28px;
}


.form-field {

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.form-field label {

    font-family: "Manrope", sans-serif;

    font-size: 0.78rem;
    font-weight: 600;

    color: #4b474d;
}


.form-field label span {

    color: var(--primary);
}


.form-field input,
.form-field textarea {

    width: 100%;

    padding: 15px 16px;

    border:
        1px solid
        rgba(74, 63, 76, 0.18);

    border-radius: 2px;

    background: #faf8f9;

    font-family: "Manrope", sans-serif;

    font-size: 0.95rem;

    color: #4b474d;

    outline: none;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.form-field textarea {

    min-height: 180px;

    resize: vertical;
}


.form-field input:focus,
.form-field textarea:focus {

    border-color: var(--primary);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(138, 95, 133, 0.08);
}


.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {

    border-color:
        rgba(170, 70, 70, 0.5);
}


/* ==========================================================
   ERRORS
   ========================================================== */

.form-error {

    display: block;

    font-family: "Manrope", sans-serif;

    font-size: 0.75rem;

    line-height: 1.5;

    color: #a24f58;
}


.form-message {

    margin-bottom: 25px;

    padding: 16px 18px;

    font-family: "Manrope", sans-serif;

    font-size: 0.85rem;

    line-height: 1.6;
}


.form-message-error {

    background: #faf0f1;

    color: #8d4650;

    border-left:
        3px solid
        #a24f58;
}


/* ==========================================================
   HONEYPOT
   ========================================================== */

.form-honeypot {

    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


/* ==========================================================
   TURNSTILE
   ========================================================== */

.contact-security {

    min-height: 1px;
}


/*
 * Invisible Turnstile moet geen ruimte
 * of visuele elementen veroorzaken.
 */

.contact-security .cf-turnstile {

    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

.contact-submit {

    align-self: flex-start;

    min-width: 220px;

    border: none;

    cursor: pointer;
}


.form-required {

    margin: -12px 0 0 !important;

    font-size: 0.72rem !important;

    color: #8b838a !important;
}


/* ==========================================================
   SUCCESS
   ========================================================== */

.contact-success {

    padding: 30px 0;
}


.contact-success h3 {

    margin: 0 0 20px;

    font-family: "Cormorant Garamond", serif;

    font-size: 2.7rem;

    font-weight: 400;

    line-height: 1.1;

    color: #4b3d4b;
}


.contact-success p {

    max-width: 500px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: #625a62;
}