/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=League+Spartan:wght@200;300;400;500&family=Pinyon+Script&display=swap');

:root {
    --color-bg: #eee8de;
    /* Updated to match new logo background */
    --color-text: #533A2C;
    /* Secondary Brown */
    --color-primary: #844f39;
    /* Matches reference brown */
    --color-white: #ffffff;

    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'League Spartan', sans-serif;
    --font-script: 'Pinyon Script', cursive;

    --max-width: 1400px;
    --padding-sides: 50px;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.8;
    overflow-x: hidden;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

/* Typography Constants */
.secondary-header {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 20px;
    display: block;
}

.script-text {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 300;
    font-style: italic;
    color: var(--color-primary);
    margin-bottom: 10px;
    display: block;
    letter-spacing: 0.05em;
    z-index: 10;
    position: relative;
    opacity: 0.85;
}

/* Buttons */
.btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 18px 40px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border: 1px solid var(--color-primary);
    cursor: pointer;
    font-weight: 400;
    margin-top: 30px;
    transition: all 0.4s ease;
}

.btn:hover {
    background-color: transparent;
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Header */
header {
    padding: 20px 50px 0;
    /* Reduced bottom padding */
    background-color: var(--color-bg);
    position: relative;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: var(--max-width);
    margin: 0 auto;
}

.nav-group {
    flex: 1;
    display: flex;
    gap: 40px;
    font-family: var(--font-body);
    /* Using Spartan to mimic Oregon Light */
    font-size: 12px;
    /* Exact reference size */
    text-transform: uppercase;
    letter-spacing: 2.4px;
    /* Exact reference spacing */
    color: var(--color-primary);
    font-weight: 300;
}

.nav-group.left {
    justify-content: flex-end;
    padding-right: 60px;
}

.nav-group.right {
    justify-content: flex-start;
    padding-left: 60px;
}

/* Logo Updates */
.logo-container {
    flex: 0 0 320px;
    display: flex;
    justify-content: center;
    position: relative;
    /* top: -75px; Removed to make logo visible */
    margin-bottom: 0px;
}

/* collapsing space */

.logo-container img {
    width: 340px;
    /* Reduced to ~340px as requested */
    height: auto;
}



/* --- PARALLAX & HERO --- */

.hero-section {
    position: relative;
    max-width: 1600px;
    margin: 40px auto 60px;
    /* Added 40px (1cm) top margin */
    /* Removed top margin */
    height: 800px;
    display: flex;
    align-items: center;
    align-items: center;
    padding-left: 0;
    /* Removed 5% padding to fill left side */
}

/* The container must clip the tall image */
.hero-image-container {
    width: 60%;
    /* Increased to 60% to create overlap with text */
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Vital for parallax */
    border-top-right-radius: 200px;
    /* Rounded top right corner */
}

/* The parallax image is taller than container and moved by JS */
.parallax-img {
    width: 100%;
    height: 120%;
    /* Taller to allow movement */
    object-fit: cover;
    position: absolute;
    top: -10%;
    will-change: transform;
}

.hero-text-container {
    width: 40%;
    background-color: #eae4dc;
    /* Darker beige */
    padding: 60px;
    position: absolute;
    right: 5%;
    top: 115px;
    /* Moved down 3cm (115px) from top */
    top: 115px;
    /* Moved down 3cm (115px) from top */
    transform: none;
    /* Reset transform, overlap handled by wider image */
    z-index: 2;
    margin-left: 0;
    /* Removed ineffective margin */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Stronger shadow request */
    /* Subtle depth */
}

.hero-heading {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    color: var(--color-primary);
    line-height: 1.1;
    margin-top: 10px;
    font-weight: 300;
}

/* About Section */
.about-section {
    max-width: 1200px;
    margin: 0 auto 0;
    /* Removed bottom margin to connect to next section */
    display: flex;
    position: relative;
    position: relative;
    padding: 0 50px;
    /* overflow: hidden; Removed so flower can be seen fully */
}

.about-bg-flower {
    position: absolute;
    left: -140px;
    /* Moved left another 2cm (-80px) from -60px */
    transform: rotate(15deg);
    top: -50px;
    width: 750px;
    /* Increased to 750px to extend lines further */
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.about-text {
    width: 40%;
    padding-right: 50px;
    padding-top: 50px;
}

.about-text h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 20px;
    font-weight: 300;
}

.about-images-container {
    width: 60%;
    position: relative;
    height: 600px;
}

.img-overlap-1 {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 500px;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.1s linear;
    /* Smooth parallax */
}

.img-overlap-2 {
    position: absolute;
    left: 50px;
    top: 150px;
    width: 45%;
    height: 350px;
    object-fit: cover;
    z-index: 2;
    border: 15px solid var(--color-bg);
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.05);
    /* Pop */
}

/* Full Width Parallax Divider (New) */
.parallax-divider {
    width: 100vw;
    height: 400px;
    /* Slightly reduced height */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    margin-bottom: 80px;
    /* Reduced from 150px */
}

/* Section Separator */
.section-separator {
    text-align: center;
    padding: 60px 20px 40px;
    background-color: var(--color-white);
    position: relative;
    z-index: 5;
    /* Cover the flower */
}

/* Services Grid */
.services-section {
    padding: 20px 50px 60px;
    /* Reduced top padding to 20px */
    background-color: var(--color-white);
    position: relative;
    z-index: 5;
    /* Cover the flower */
}

/* Section Separator */
.section-separator {
    text-align: center;
    padding: 30px 20px 20px;
    /* Reduced padding significantly */
    background-color: var(--color-white);
}

.separator-subtitle {
    font-family: var(--font-heading);
    /* Changed to heading font for 'nicer' look */
    font-size: 1.1rem;
    /* Slightly larger */
    text-transform: uppercase;
    letter-spacing: 4px;
    /* More spacing for elegance */
    color: var(--color-accent);
    display: block;
    margin-bottom: 10px;
    font-style: italic;
    /* Added italic for 'nicer style' */
}

.separator-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-primary);
    font-weight: 300;
}

/* Service Card Notch */
.service-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 35px;
    /* Semicircle depth */
    background-color: var(--color-white);
    /* Match section bg */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5px;
}

.service-notch img {
    width: 15px;
    height: auto;
    opacity: 0.6;
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.service-card {
    position: relative;
    text-align: center;
}

.service-img-wrap {
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-bottom: 15px;
    /* Reduced margin */
    position: relative;
    border-radius: 8px;
    /* Soft rounded corners as subtle replacement */
}

.service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    /* Focus on faces */
    transition: transform 0.6s ease;
}

.service-card:hover .service-img-wrap img {
    transform: scale(1.05);
}

.service-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 300;
    margin-bottom: 8px;
    /* Reduced from 15px */
}

.service-desc {
    font-size: 0.95rem;
    padding: 0 20px;
    margin-bottom: 15px;
    /* Reduced from 25px */
    line-height: 1.4;
}

/* Footer */
/* Instagram Section */
.clean-text-small {
    font-family: var(--font-body);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
    display: block;
    margin-bottom: 5px;
}

.instagram-section {
    background-color: #F8F5F2;
    padding: 30px 50px 60px;
    /* Reduced top padding to move text up */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.insta-bg-flower {
    position: absolute;
    right: -100px;
    /* Keep it on the right */
    top: -50px;
    /* Moved up to be behind photos/header */
    width: 700px;
    /* Larger to cover more area */
    opacity: 0.15;
    /* Consistent subtle opacity */
    transform: rotate(-15deg);
    z-index: 0;
    pointer-events: none;
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.insta-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.insta-item:hover img {
    transform: scale(1.03);
}

.insta-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 5px;
    font-weight: 300;
}

.insta-header p {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    text-transform: uppercase;
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.insta-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.insta-grid img:hover {
    transform: scale(1.02);
}

/* New Footer Styles */
footer {
    background-color: var(--color-primary);
    color: #fff;
    padding: 80px 50px 60px;
}

.footer-main {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1fr;
    /* 4 columns roughly: nav, nav, center, contact */
    /* Adjusting to 3 column logic visually */
    grid-template-areas: "col1 col2 center col3";
    gap: 40px;
    align-items: flex-start;
}

/* We want 3 distinct sections visually, might be better to use flex or grid with even spacing */
/* Re-doing footer-main grid to match description more closely: 
   Left: Nav (split in 2 lists perhaps), Center: Brand, Right: Contact 
*/
.footer-main {
    grid-template-columns: 1fr 1fr 1.5fr 1fr;
    grid-template-areas: "left1 left2 center right";
}

.footer-col.left {
    grid-area: left1;
}

.footer-col.left-center {
    grid-area: left2;
}

.footer-center-brand {
    grid-area: center;
    text-align: center;
    padding: 0 20px;
}

.footer-col.right {
    grid-area: right;
}

.footer-col h4 {
    font-family: var(--font-script);
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 400;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-decoration: none;
    color: #eaddd3;
}

.footer-col a:hover {
    color: #fff;
}

.footer-center-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.curved-text-holder {
    width: 200px;
    height: 100px;
    position: relative;
    margin-top: -40px;
    /* Pull it up a bit */
    margin-bottom: 20px;
}

.sun-graphic {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.brand-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #eaddd3;
}

.social-icons span {
    font-family: sans-serif;
    /* Placeholder for icon font */
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 0.8rem;
}

.footer-col.right p {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #eaddd3;
    line-height: 1.5;
    margin: 0;
}

.btn-outline {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-top: 30px;
    font-family: var(--font-heading);
    font-style: italic;
    /* "Boek jouw shoot" usually script/italic style? Or button style */
    font-family: var(--font-body);
    /* Reset to body font for button text */
    font-style: normal;
}

.btn-outline:hover {
    background-color: #fff;
    color: var(--color-primary);
}

/* --- SCROLL ANIMATIONS --- */

/* Base class for elements that should animate in */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Class added by JS when in view */
.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* Decorative Flower Element */
.flower-decoration {
    position: absolute;
    right: 5%;
    /* Position relative to screen or container */
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    /* Adjust size */
    opacity: 0.8;
    /* More visible */
    pointer-events: none;
    z-index: 1;
    /* Behind text but visible context */
    /* Behind text block (which is z-index 2) */
    /* To make it "behind the block" and "peeking out", we need to position it relative to the hero section potentially,
       but currently it's in body. Let's move it or position it carefully. 
       The user said "behind the box" and "halfway visible". 
       The text box is at right: 5%.
       If we put flower at right: 5% + box width? Or just behind it.
    */
    display: block !important;
    /* Override previous display:none in media query if needed, or fix structure */
}

/* We need to ensure the flower is physically positioned near the hero text block. 
   Currently it's a direct child of body in HTML (lines 46-61). 
   The hero text block is in .hero-section .hero-text-container.
   To position it relative to that, it might be better inside the hero section, 
   BUT I only edited the HTML to replace the tag in place.
   So I will use absolute positioning on body approx where the hero is.
   Hero is top: 50% of viewport approx? No, it's just in normal flow.
   Wait, .hero-text-container uses position: absolute; right: 5%; top: 50% (of hero-section).
   So if I move flower into hero-section it's easier. 
   But I cannot easily move HTML structure with replace_content in one go without replacing huge block.
   
   Let's check where it is currently. It's after hero-section in HTML.
   So standard flow.
   I should probably move it INTO the hero section for better control?
   HTML Change was: replaced internal SVG lines 46-61. 
   Hero section ends at line 43. 
   So it is OUTSIDE hero.
   
   CSS approach: 
   .flower-decoration needs absolute position, but relative to what? Body?
   .hero-section is `position: relative`.
   If I want it behind the text block (which is inside hero), 
   I should ideally put it inside hero. 
   
   However, with `position: absolute; top: ...` on body I can guess-timating it.
   Hero starts at roughly top of page (header is ~150px?).
   Hero height 800px.
   Text block is centered in hero.
   
   Let's try to target `top: 600px; right: 0px;` roughly.
   
   BETTER: The user prompt: "This must be adjusted with the flower... behind the box... halfway visible".
   The text box is `.hero-text-container`.
   
   Actually, I can just update the CSS to match the likely position.
*/

.flower-decoration {
    position: absolute;
    right: 0;
    top: 500px;
    /* Approx middle of hero */
    width: 400px;
    z-index: 1;
    /* Hero text need z-index > 1. Hero text is z-index 2 */
    opacity: 1;
    /* As requested "half visible" likely means half occluded, not transparent */
    /* If it is partially occluded by the box, the box needs a background color.
       .hero-text-container has background-color: var(--color-bg); which is #eee8de.
       So if I place flower BEHIND it (lower z-index), existing opacity/bg of box will hide it.
    */
}

/* Responsive */
@media (max-width: 1100px) {
    .header-inner {
        flex-direction: column;
        gap: 10px;
    }

    .logo-container {
        order: -1;
        /* Ensure logo is first on mobile if column direction */
        margin-bottom: 0;
    }

    .logo-container img {
        width: 300px;
        /* Smaller on mobile */
    }

    .hero-section {
        flex-direction: column;
        height: auto;
        padding: 0;
        margin-top: 0;
    }

    .hero-image-container {
        width: 100%;
        height: 500px;
    }

    .hero-text-container {
        width: 90%;
        position: relative;
        right: auto;
        top: -50px;
        transform: none;
        margin: 0 auto;
        margin-left: auto;
    }

    .about-section {
        flex-direction: column;
        padding: 0 20px;
    }

    .about-text {
        width: 100%;
        margin-bottom: 50px;
        padding: 0;
    }

    .about-images-container {
        width: 100%;
        height: 500px;
    }

    .grid-3-col {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .flower-decoration {
        display: none;
        /* Hide on mobile for now or adjust */
    }

    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .footer-col {
        text-align: center;
    }

    .insta-grid {
        grid-template-columns: 1fr 1fr;
        /* 2x2 on mobile */
    }
}

/* --- NEWBORN PAGE STYLES --- */

.page-header {
    text-align: center;
    padding: 120px 20px 60px;
    max-width: 900px;
    margin: 0 auto;
}

.page-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--color-primary);
    font-weight: 300;
    margin-bottom: 20px;
    line-height: 1.2;
}

.page-subtitle {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-text);
    font-style: italic;
    line-height: 1.6;
}

.content-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 100px;
}

.hero-container {
    width: 100%;
    height: 70vh;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 80px;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.intro-text {
    max-width: 800px;
    margin: 0 auto 80px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 2;
    color: var(--color-text);
}

.intro-text p {
    margin-bottom: 30px;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.portfolio-item {
    height: 500px;
    overflow: hidden;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

/* Process Section */
.process-section {
    margin-bottom: 100px;
    text-align: center;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 50px;
    font-weight: 300;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.step {
    padding: 20px;
}

.step-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #dccbc3;
    margin-bottom: 10px;
    font-weight: 600;
}

.step h4 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.step p {
    font-size: 0.95rem;
    color: var(--color-text);

}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto 60px;
}

.info-block {
    background-color: #fff;
    padding: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.info-block h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 30px;
    text-align: center;
}

.info-block ul {
    list-style: none;
    padding: 0;
}

.info-block li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    font-size: 1rem;
}

.info-block li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.cta-container {
    text-align: center;
    margin-bottom: 100px;
}

.back-link {
    display: block;
    text-align: center;
    margin-top: 60px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
}

/* FAQ Details override */
.faq-section {
    max-width: 800px;
    margin: 0 auto;
}

.faq-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 40px;
}

details {
    border-bottom: 1px solid #dccbc3;
    padding: 25px 0;
}

summary {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
}

details[open] summary::after {
    content: "-";
}

details p {
    margin-top: 20px;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.7;
}

/* Animation Helper */
.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {

    .portfolio-grid,
    .process-steps,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .hero-container {
        height: 50vh;
    }

    .page-title {
        font-size: 2.5rem;
    }
}

/* Testimonials */
.testimonials-section {
    padding: 80px 20px;
    background-color: #fafafa;
    text-align: center;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.testimonial {
    background: #fff;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    position: relative;
}

.testimonial p {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.testimonial h5 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-text);
    font-weight: 600;
}

@media (max-width: 768px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* --- DYNAMIC VISUAL UPDATES --- */

/* Ken Burns Effect */
@keyframes kenBurns {
    0% {
        transform: scale(1) translateY(0);
    }

    100% {
        transform: scale(1.1) translateY(0);
    }
}

.ken-burns {
    animation: kenBurns 20s ease-out infinite alternate;
    will-change: transform;
}

/* Wrapper for parallax + ken burns combo (if needed) */
.kb-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.kb-effect {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurns 25s linear infinite alternate;
}

/* Marquee Section */
.marquee-section {
    padding: 20px 0;
    background-color: var(--color-white);
    /* border-top: 1px solid #eee; */
    /* border-bottom: 1px solid #eee; */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    margin: 40px 0;
}

/* Better Marquee: duplicate content */
.marquee-track {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 0;
    width: fit-content;
    animation: scrollInfinite 60s linear infinite;
}

@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-item {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-style: italic;
    color: #eaddd3;
    /* Subtle text color */
    text-transform: uppercase;
    padding: 0 40px;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Masonry Grid (CSS Columns) */
.masonry-grid {
    column-count: 3;
    column-gap: 20px;
    max-width: 1400px;
    margin: 60px auto 100px;
    padding: 0 20px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
    /* Fix for column break */
    width: 100%;
}

.masonry-item img {
    width: 100%;
    display: block;
    transition: transform 0.8s ease;
}

.masonry-item:hover img {
    transform: scale(1.05);
    /* Zoom on hover */
}

@media (max-width: 900px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* --- HERO OVERLAY UPDATE --- */

.hero-section {
    position: relative;
    height: 90vh;
    /* Make it tall and impactful */
    overflow: hidden;
}

.hero-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
    color: #fff;
    /* Ensure contrast */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for readability */
}

/* Service Nav Links inside Hero */
.hero-service-nav {
    margin-bottom: 20px;
    font-family: var(--font-heading);
    /* Or sans-serif if preferred */
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.9;
}

.hero-service-nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    transition: opacity 0.3s;
}

.hero-service-nav a:hover {
    opacity: 0.7;
}

.hero-service-nav span {
    opacity: 0.5;
}

/* Specific Hero Title Override */
.hero-heading-large {
    font-family: var(--font-heading);
    /* Use the elegant serif */
    font-size: 5rem;
    /* Large! */
    font-weight: 300;
    margin: 0;
    letter-spacing: 5px;
    line-height: 1.1;
    text-transform: uppercase;
}

/* Ensure Logo in Header is big */
.logo-container img {
    height: auto;
    width: 200px;
    /* Big logo */
    max-width: 100%;
}

@media (max-width: 768px) {
    .header-logo img {
        width: 150px;
    }

    .hero-heading-large {
        font-size: 3rem;
    }

    .hero-service-nav {
        font-size: 0.6rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --- Service Page Hero Updates --- */

/* Specific modifier for service heroes to be full width */
.hero-section.service-hero {
    height: 85vh;
    /* Taller for dramatic effect */
    max-width: 100%;
    /* Full screen width */
    margin: 0;
    /* Remove margins */
    display: block;
    /* Standard block for full width image */
    overflow: hidden;
}

.hero-image-container.full-width {
    width: 100%;
    height: 100%;
    border-top-right-radius: 0;
    /* Remove standard radius */
    clip-path: none;
    /* Ensure no clipping if used elsewhere */
}

/* Ensure image covers fully */
.hero-image-container.full-width .parallax-img {
    width: 100%;
    height: 120%;
    /* Allow for parallax movement */
    top: -10%;
    left: 0;
}

.hero-image-container.full-width .parallax-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    /* Focus typically a bit higher */
}

/* Overlay Text Container */
.hero-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 80%;
    color: #fff;
    /* Start with white, adjust based on image */
}

.overlay-content {
    position: relative;
    padding: 40px;
    display: inline-block;
}

/* The red box border effect */
.red-box-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 6px solid #e3342f;
    /* Bright red as per request/example */
    pointer-events: none;
    z-index: 1;
    /* Behind text? No, usually around it. */
    display: block;
}

/* Specific Typography for the Hero */
.top-nav-service {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.top-nav-service .active {
    color: #fff;
    font-weight: 700;
}

.hero-title-large {
    font-family: var(--font-heading);
    font-size: 5rem;
    /* Very large */
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Slight shadow for readability */
}

/* Ensure header is on top and transparent if needed, or white? 
   User said "header... same as homepage". 
   Homepage header has white background (technically var(--color-bg)). 
   If we want it to look "standard", we keep it. 
*/

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-title-large {
        font-size: 2.5rem;
    }

    .top-nav-service {
        font-size: 0.6rem;
    }

    .red-box-border {
        border-width: 3px;
    }

    .hero-section.service-hero {
        height: 60vh;
    }
}

/* --- Newborn Page Specific Styles (Added) --- */

.emotional-heading {
    font-family: var(--font-heading);
    /* Changed from script to heading font */
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 40px;
    line-height: 1.2;
    font-weight: 300;
}

.details-section {
    max-width: 1100px;
    /* Reduced from 1400px */
    margin: 50px auto;
    /* Reduced from 100px */
    padding: 0 50px;
}

.details-grid-2-col {
    display: flex;
    align-items: center;
    gap: 50px;
    /* Reduced from 80px */
}

.details-text-col {
    flex: 1;
}

/* Creative underline for label */
.detail-item {
    margin-bottom: 30px;
    /* Reduced from 60px - closer together */
    position: relative;
    padding-left: 30px;
    border-left: 1px solid rgba(132, 79, 57, 0.2);
}

.detail-item:last-child {
    margin-bottom: 0;
    border-left: none;
    /* No line for last item if we want continuous flow, or keep it */
    padding-left: 31px;
    /* Maintain alignment */
}

.detail-label {
    display: block;
    font-family: var(--font-heading);
    /* Elegant serif for label */
    font-size: 1.5rem;
    /* Larger, more prominent */
    font-style: italic;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.detail-label::after {
    /* Removed small underline, replaced with side line */
    content: none;
}

.detail-item p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
    max-width: 90%;
}

.details-image-col {
    flex: 1.2;
}

.rounded-left-img-container img {
    width: 100%;
    height: 450px;
    /* Smaller height as requested */
    object-fit: cover;
    border-top-left-radius: 225px;
    /* Adjusted to half of new height */
    border-bottom-left-radius: 0;
    box-shadow: -15px 15px 40px rgba(132, 79, 57, 0.1);
}

@media (max-width: 1000px) {
    .details-grid-2-col {
        flex-direction: column;
        gap: 50px;
    }

    .emotional-heading {
        font-size: 2.5rem;
    }

    .rounded-left-img-container img {
        height: auto;
        min-height: 300px;
        border-radius: 20px;
        /* Reset odd shape for mobile */
    }
}

/* --- Pricing Section (Info & Tarieven) --- */

.pricing-section {
    width: 100vw;
    /* Strict Full Viewport Width */
    max-width: 100vw;
    margin: 80px 0;
    margin-left: calc(50% - 50vw);
    /* Force break out of any container */
    margin-right: calc(50% - 50vw);
    display: flex;
    background-color: var(--color-bg);
}

/* Left Image Column */
/* Left Image Column */
.pricing-image-col {
    flex: 1;
    position: relative;
    min-height: 350px;
    /* Reduced further to compress height */
}

.pricing-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-right-radius: 20px;
    /* Small rounding on right */
    border-bottom-right-radius: 20px;
}

/* Right Content Column */
/* Right Content Column */
/* Right Content Column */
.pricing-content-col {
    flex: 2;
    padding: 20px 5%;
    /* Minimized padding */
    display: flex;
    /* Reduced vertical padding */
    flex-direction: column;
    justify-content: center;
}

/* Overlay Text on Feet Image */
.divider-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 80%;
    text-align: center;
}

.divider-overlay-text p {
    font-family: var(--font-heading);
    /* Elegant serif */
    font-size: 2.5rem;
    /* Large and readable */
    color: #fff;
    /* White */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Readable against image */
    font-style: italic;
    line-height: 1.3;
    font-weight: 300;
}

.pricing-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    /* Reduced from 30px */
    letter-spacing: 0.05em;
    font-weight: 300;
    text-transform: uppercase;
}

.pricing-desc {
    font-size: 1rem;
    line-height: 1.6;
    /* Reduced line height */
    color: var(--color-text);
    margin-bottom: 0;
    max-width: 600px;
}

/* Beige Includes Box */
/* Beige Includes Box */
.includes-box {
    background-color: #f3efe9;
    padding: 20px;
    /* Halved padding */
    margin-top: 20px;
    /* Reduced from 30px */
    margin-bottom: 20px;
    /* Reduced from 40px */
    border-radius: 4px;
}

.includes-title {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 15px;
    /* Reduced from 30px */
    display: block;
}

.check-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
    /* Reduced vertical gap from 20px to 10px */
}

.check-item {
    font-size: 0.95rem;
    color: #555;
    position: relative;
    padding-left: 25px;
    line-height: 1.5;
}

.check-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 1rem;
}

.check-item a {
    text-decoration: underline;
    color: inherit;
}

/* Pricing Footer */
.pricing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(132, 79, 57, 0.2);
    padding-top: 30px;
    flex-wrap: nowrap;
    /* Prevent wrapping */
}

.price-display {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    /* Keep on one line */
    display: flex;
    align-items: baseline;
}

.price-amount {
    font-size: 2.5rem;
    /* Slightly larger */
    font-weight: 400;
    margin: 0 8px;
}

.pricing-actions {
    display: flex;
    gap: 20px;
    margin-left: auto;
    /* Push to right */
    padding-left: 20px;
}

.btn-pricing {
    padding: 15px 30px;
    font-size: 0.75rem;
    border: 1px solid var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-pricing.primary {
    background-color: var(--color-primary);
    color: #fff;
}

.btn-pricing.outline {
    background-color: transparent;
    color: var(--color-primary);
}

.btn-pricing:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

@media (max-width: 1000px) {
    .pricing-section {
        flex-direction: column;
    }

    .pricing-image-col {
        height: 400px;
        min-height: auto;
    }

    .pricing-content-col {
        padding: 40px 20px;
    }

    .check-list-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .pricing-footer {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
}

/* --- Flower Process Visualization --- */
/* --- Flower Process Visualization --- */
/* --- Flower Process Visualization (Staging Layout) --- */
/* --- Process Section Final --- */
/* --- Process Section Final --- */
/* --- Process Section Final --- */
.process-section-final {
    margin: 0;
    padding: 100px 0;
    /* Use padding to allow overflow-hidden to include this space */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
    z-index: 10;
    /* Ensure high z-index to pop over previous sections if overlap occurs */
}

.process-final-title {
    position: relative;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* Reads bottom to top */
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-primary);
    opacity: 1;
    /* Fully visible */
    margin: 0 40px 0 0;
    /* Space between title and flower */
    white-space: nowrap;
    z-index: 2;
    text-transform: uppercase;
    pointer-events: auto;
    left: auto;
    top: auto;
}

.process-final-grid {
    display: grid;
    /* Left column 2fr, Right column 1fr */
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: center;
    position: relative;
    z-index: 1;
}

.process-col-left {
    padding: 0 5% 0 10%;
    /* Left padding adjustments */
    display: flex;
    flex-direction: row;
    /* Side by side title and image */
    justify-content: center;
    align-items: center;
}

.process-graph-img {
    width: 100%;
    /* Max width removed */
    max-width: none;
    height: auto;
    object-fit: contain;
    /* Move up and left to break grid alignment */
    transform: translate(-40px, -80px);
}

.process-col-right {
    position: relative;
    width: 100%;
    display: flex;
    padding: 0;
    margin: 0;
}

.rounded-left-subtle-img-container {
    width: 100%;
    display: flex;
}

.rounded-left-subtle-img-container img {
    width: 100%;
    height: 700px;
    /* Taller */
    object-fit: cover;
    border-top-left-radius: 50px;
    /* Subtle rounding */
    border-bottom-left-radius: 50px;
    display: block;
}

@media (max-width: 1000px) {
    .process-final-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .process-col-left {
        padding: 0 20px;
        order: 1;
        /* Text/Process first */
        flex-direction: column;
    }

    .process-col-right {
        order: 2;
    }

    .rounded-left-subtle-img-container img {
        height: 400px;
        border-radius: 0;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .process-final-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 2rem;
        text-align: center;
        margin: 0 0 30px 0;
        width: 100%;
        display: block;
    }

    .process-graph-img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
    }
}

/* --- New Footer Layout (Compact Brown) --- */
footer {
    background-color: var(--color-primary);
    padding: 60px 0;
    /* Reduced padding */
    color: var(--color-white);
    border-top: none;
}

.footer-main-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Changed to flex-start for column alignment */
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 5%;
}

.footer-col-new {
    flex: 1;
}

.footer-col-new.nav-col {
    text-align: left;
    padding-top: 20px;
    /* Align text with logo center visually */
}

.footer-col-new.contact-col {
    text-align: right;
    padding-top: 20px;
    /* Align text with logo center visually */
}

.footer-col-new.logo-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-col-new h4 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-col-new ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col-new ul li {
    margin-bottom: 8px;
    /* Tighter spacing */
}

.footer-col-new ul li a {
    text-decoration: none;
    color: var(--color-white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
    opacity: 0.9;
}

.footer-col-new ul li a:hover {
    opacity: 0.6;
}

.footer-logo-img {
    max-width: 280px;
    height: auto;
    display: block;
    margin: -30px auto 20px;
    /* Negative top margin to move logo UP */
    filter: brightness(0) invert(1);
}

.footer-col-new.contact-col p,
.footer-col-new.contact-col a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-bottom: 5px;
}

/* Compact Social Icons & Legal Text (Inside Logo Col) */
.footer-social-icons.compact {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 15px;
}

.footer-social-link svg {
    width: 18px;
    height: 18px;
    fill: var(--color-white);
    transition: transform 0.3s, opacity 0.3s;
}

.footer-social-link:hover svg {
    opacity: 0.8;
    transform: translateY(-2px);
}

.footer-legal-text.compact {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-white);
    opacity: 0.6;
    text-align: center;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .footer-main-new {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        text-align: center;
    }

    .footer-col-new.nav-col,
    .footer-col-new.contact-col {
        text-align: center;
        padding-top: 0;
    }

    .footer-logo-img {
        margin-top: 0;
        /* Reset negative margin on mobile */
    }

    .footer-col-new.nav-col {
        order: 2;
    }

    .footer-col-new.logo-col {
        order: 1;
        margin-bottom: 20px;
    }

    .footer-col-new.contact-col {
        order: 3;
    }
}