@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  --color-bg: #F8F6F0; /* Pale warm cream */
  --color-surface: #FFFFFF; /* Pure White */
  --color-surface-alt: #F4F0E6; /* Slightly darker cream for cards */
  --color-sage: #E8EDE3; /* Pastel green note */
  --color-clay: #F2EBE5; /* Pastel clay note */
  --color-sand: #F4EEDF; /* Pastel sand note */
  
  --color-text: #191B1A; /* Inky dark */
  --color-text-light: #4A504D; /* Darkened for WCAG AA */
  --color-border: #E2DDD3; /* Subtle dividing lines */
  --color-primary: #191B1A;
  --color-accent: #C9A96E; /* Warm golden ochre */
  
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Mulish', sans-serif;
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 9rem;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Typography elements */
h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--color-text);}
h2 { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: var(--spacing-md); color: var(--color-text);}
h3 { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; color: var(--color-text); margin-bottom: var(--spacing-md);}
h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--spacing-xs); color: var(--color-text);}
p { font-size: 1.125rem; color: var(--color-text-light); margin-bottom: 1.4rem; line-height: 1.75; }
a { color: var(--color-text); text-decoration: none; transition: var(--transition); }

/* Editorial italic emphasis on a key word in headings */
h1 em, h2 em, h3 em, h4 em, .massive-quote em, .testimonial-quote em { font-style: italic; font-weight: 400; }

.meta-label {
  font-size: 0.75rem; 
  text-transform: uppercase; 
  letter-spacing: 0.1em; 
  color: var(--color-text-light); 
  display: block; 
  margin-bottom: var(--spacing-sm); 
  font-weight: 600;
}

/* Containers & Base Padding */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}
.container-narrow { max-width: 780px; margin: 0 auto; }

.section { padding: var(--spacing-xl) 0; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.p-0 { padding: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.text-center { text-align: center; }

.bg-surface { background-color: transparent; }
.bg-surface-alt { background-color: transparent; }
.bg-dark { background-color: var(--color-text); color: var(--color-bg); }
.bg-dark h2, .bg-dark p { color: var(--color-bg); }
.bg-dark .meta-label { color: rgba(248, 246, 240, 0.6); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-lg); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-lg); }

/* Buttons */
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  padding: 1.125rem 2.5rem;
  border-radius: 100px;
  white-space: nowrap;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  text-decoration: none; transition: var(--transition); cursor: pointer; border: none;
}
/* Frosted glass primary CTA — picks up the colour of whatever sits behind it */
.btn-primary {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(25, 27, 26, 0.10);
  color: var(--color-text);
  box-shadow: 0 8px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.65);
}
@supports (backdrop-filter: blur(18px)) {
  .btn-primary { background: rgba(255, 255, 255, 0.28); }
}
.btn-primary:hover { background: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.11), inset 0 1px 0 rgba(255,255,255,0.7); }
.btn-primary:active { transform: scale(0.98); }

.btn-glass {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@supports (backdrop-filter: blur(15px)) {
    .btn-glass { background: rgba(255, 255, 255, 0.25); }
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-text); }

.btn-link { font-weight: 500; font-size: 0.95rem; color: var(--color-text); border-bottom: 1px solid var(--color-text); padding-bottom: 2px; }
.btn-link:hover { opacity: 0.6; }

/* Navigation Refined */
.nav-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; border-bottom: 1px solid transparent; background: transparent; transition: all 0.4s ease; }
.nav-header.scrolled { background: rgba(248, 246, 240, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(226, 221, 211, 0.5); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.nav-logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: var(--spacing-md); align-items: center; }
.nav-link { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--color-text-light); }
.nav-link:hover, .nav-link.active { color: var(--color-text); }

/* Hero Splits */
.section-pt { padding-top: calc(80px + var(--spacing-xl)); padding-bottom: calc(var(--spacing-xl) / 2); }
.hero-left { padding-right: var(--spacing-md); }
.hero-right { padding-left: var(--spacing-md); max-width: 900px; }
.lead-text { font-size: 1.5rem; color: var(--color-text-light); margin-top: var(--spacing-md); line-height: 1.65; }
.lead-strong { font-size: 1.5rem; font-weight: 500; color: var(--color-text); margin-top: var(--spacing-sm); }

.hero-image-bleed { width: 100vw; height: clamp(400px, 60vh, 800px); margin-left: calc(50% - 50vw); margin-top: var(--spacing-xl); }

/* Border Lists (Swiss grid style) */
.border-top-list { border-top: 1px solid var(--color-border); padding-top: var(--spacing-md); }
.list-rows { display: flex; flex-direction: column; }
.row-item {
  display: grid; grid-template-columns: 80px 1fr;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border);
}
.row-item:first-child { padding-top: 0; }
.row-item:last-child { border-bottom: none; padding-bottom: 0; }
.number-icon { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; color: var(--color-text-light); line-height: 1; display: block; margin-top: -0.25rem; }

/* Quotes */
.massive-quote {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg);
  color: var(--color-text);
  position: relative; z-index: 2;
}
.massive-quote cite {
  display: block; font-family: var(--font-body); font-size: 0.875rem; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-light);
  margin-top: var(--spacing-md); font-weight: 600;
}

/* Cards (Frosted Minimal) */
.card {
  padding: var(--spacing-lg) 2.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: flex; flex-direction: column;
  transition: var(--transition);
  height: 100%; position: relative; z-index: 5;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }
.card-frost {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.card-sand { background: rgba(244, 238, 223, 0.85); }
.card-sage { background: rgba(232, 237, 227, 0.85); }
.card-clay { background: rgba(242, 235, 229, 0.85); }
@supports (backdrop-filter: blur(20px)) {
  .card-frost { background: rgba(255, 255, 255, 0.1); }
  .card-sand { background: rgba(244, 238, 223, 0.4); }
  .card-sage { background: rgba(232, 237, 227, 0.4); }
  .card-clay { background: rgba(242, 235, 229, 0.4); }
}
.card-meta { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-xl); color: var(--color-text-light); }
.card p { color: var(--color-text-light); margin-bottom: var(--spacing-xl); flex-grow: 1; font-size: 1rem; }

/* Split Banner for "About" */
.split-banner { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 80vh; background: transparent; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.split-image { background-size: cover; background-position: center; border-right: 1px solid var(--color-border); border-radius: 0; }
.split-text { padding: 10% 12%; display: flex; flex-direction: column; justify-content: center; background: transparent; }

/* Testimonial Cards */
.testimonial-card {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-xl) clamp(1.25rem, 5vw, var(--spacing-lg));
  border: 1px solid rgba(25, 27, 26, 0.08); /* Clean thin outline */
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.testimonial-card > * { position: relative; z-index: 2; }


/* Organic Evolving Watercolor Tint (Bottom 40%) */
.testimonial-card::before {
    content: '';
    position: absolute;
    bottom: -20%; left: -20%; right: -20%;
    height: 70%;
    filter: blur(25px);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* Hover Effect: Paint it Away */
.testimonial-card:hover::before {
    opacity: 0;
    filter: blur(40px);
}

/* Unique Theme 1 (Warm / Peach & Sunflower) */
.testimonial-card:nth-child(3n+1)::before,
.testimonial-card.theme-warm::before {
    background: radial-gradient(ellipse at 30% 100%, rgba(235,145,100,0.4) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 100%, rgba(240,180,90,0.3) 0%, transparent 60%),
                radial-gradient(circle at 50% 100%, rgba(220,130,120,0.2) 0%, transparent 70%);
    animation: evolveWatercolorA 16s infinite alternate ease-in-out;
}

/* Unique Theme 2 (Cool / Sage & Dusty Blue) */
.testimonial-card:nth-child(3n+2)::before,
.testimonial-card.theme-cool::before {
    background: radial-gradient(ellipse at 20% 100%, rgba(138,154,91,0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(150,170,180,0.3) 0%, transparent 60%),
                radial-gradient(circle at 50% 100%, rgba(110,130,120,0.2) 0%, transparent 70%);
    animation: evolveWatercolorB 19s infinite alternate ease-in-out;
    animation-delay: -3s;
}

/* Unique Theme 3 (Earthy / Terracotta & Ochre) */
.testimonial-card:nth-child(3n)::before,
.testimonial-card.theme-earthy::before {
    background: radial-gradient(ellipse at 40% 100%, rgba(205,120,110,0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(220,180,150,0.4) 0%, transparent 60%),
                radial-gradient(circle at 20% 100%, rgba(160,150,100,0.25) 0%, transparent 70%);
    animation: evolveWatercolorC 14s infinite alternate ease-in-out;
    animation-delay: -7s;
}

/* Distinct Animations for true organic randomness */
@keyframes evolveWatercolorA {
    0% { transform: translateY(15%) rotate(-2deg) scale(1); opacity: 0.6; }
    50% { transform: translateY(-3%) rotate(1deg) scale(1.05); opacity: 1; }
    100% { transform: translateY(8%) rotate(3deg) scale(0.95); opacity: 0.8; }
}
@keyframes evolveWatercolorB {
    0% { transform: translateY(10%) rotate(2deg) scale(1.05); opacity: 0.8; }
    50% { transform: translateY(5%) rotate(-1deg) scale(0.98); opacity: 0.6; }
    100% { transform: translateY(-5%) rotate(-3deg) scale(1.1); opacity: 1; }
}
@keyframes evolveWatercolorC {
    0% { transform: translateY(-2%) rotate(-1deg) scale(1.1); opacity: 1; }
    50% { transform: translateY(10%) rotate(3deg) scale(0.95); opacity: 0.7; }
    100% { transform: translateY(4%) rotate(-2deg) scale(1.02); opacity: 0.9; }
}

.testimonial-quote { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.4; margin-bottom: var(--spacing-md); }
.testimonial-author { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); font-weight: 600; }

/* Breadcrumbs & Page Headers */
.page-header { padding: calc(80px + var(--spacing-xl)) 0 var(--spacing-xl); position: relative; z-index: 2; border-bottom: 1px solid var(--color-border); }
.page-header-grainy {
    position: relative; overflow: hidden;
    padding: calc(120px + var(--spacing-xl)) 0 var(--spacing-xl);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.page-header-grainy .relative-z { position: relative; z-index: 2; }

/* Grainy Section */
.section-grainy {
    position: relative; overflow: hidden;
    background-color: var(--color-bg);
}
.breadcrumbs { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-light); margin-bottom: var(--spacing-md); }
.breadcrumbs span { margin: 0 0.5rem; }

/* Service Detail Sections */
.service-block { padding: var(--spacing-xl) 0; position: relative; z-index: 2; border-bottom: 1px solid var(--color-border); }
.bg-surface-alt { background-color: transparent; }
.service-block:last-child { border-bottom: none; }
.service-icon-box { background: rgba(255,255,255,0.4); padding: var(--spacing-lg); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(20px); text-align: center; }

/* FAQ Accordion Styled Premium */
.faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; text-align: left; padding: var(--spacing-md) 0;
  background: none; border: none; font-size: 1.25rem; font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-answer { padding: 0 0 var(--spacing-md); display: none; }
.faq-item.active .faq-answer { display: block; }
.faq-question span { font-family: var(--font-body); font-weight: 300; font-size: 2rem; color: var(--color-text-light); transition: var(--transition); }
.faq-item.active .faq-question span { transform: rotate(45deg); display: inline-block; }

/* Contact Styles */
.contact-block { padding: clamp(1.5rem, 5vw, var(--spacing-xl)); background: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-md); position: relative; z-index: 2; }
.form-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: clamp(1.5rem, 5vw, var(--spacing-xl)); border-radius: var(--radius-md); box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}
@supports (backdrop-filter: blur(20px)) {
    .contact-block { background: rgba(255,255,255,0.4); backdrop-filter: blur(20px); }
    .form-glass { background: rgba(255, 255, 255, 0.4); }
}
.contact-phone-large { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.04em; display: inline-block; margin: var(--spacing-md) 0; }
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--color-text-light); margin-bottom: 0.5rem; }
.form-control { width: 100%; padding: 1.25rem; border: 1px solid rgba(226, 221, 211, 0.8); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; background: rgba(255, 255, 255, 0.6); outline: none; transition: var(--transition); }
.form-control:focus { border-color: var(--color-text); background: rgba(255, 255, 255, 0.9); }
textarea.form-control { min-height: 180px; resize: vertical; }

/* Footer */
.footer { padding: var(--spacing-xl) 0 var(--spacing-md); border-top: 1px solid rgba(25, 27, 26, 0.1); background: var(--color-bg); position: relative; z-index: 5; }
.footer-logo { font-family: var(--font-heading); font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; margin-bottom: 0.5rem; display: block; color: var(--color-text); }
.footer h4 { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-light); margin-bottom: 1.5rem; font-weight: 600; }
.footer p, .footer ul { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; }
.footer a { color: var(--color-text-light); text-decoration: none; transition: var(--transition); }
.footer a:hover { opacity: 0.6; color: var(--color-text); }
.footer .grid-3 > div:nth-child(2) p { margin-bottom: 0.25rem; }
.footer .grid-3 > div:nth-child(2) p a { color: var(--color-text); font-size: 1.125rem; font-weight: 500; }
.footer .grid-3 > div:nth-child(2) p.mt-sm { margin-top: 1.5rem; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.75rem; }
.footer li a { color: var(--color-text); font-weight: 500; font-size: 1rem; }
.footer-bottom { margin-top: var(--spacing-xl); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--color-text-light); }

/* Checkmark or bullet custom */
.bullet-list { list-style: none; }
.bullet-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text-light); font-size: 1.125rem; }
.bullet-list li::before { content: "—"; position: absolute; left: 0; color: var(--color-text); font-weight: 600; }

/* Mobile Menu Button */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 101; }
.mobile-menu-btn span { display: block; width: 24px; height: 1px; background-color: var(--color-text); margin-bottom: 6px; transition: var(--transition); }

@media (max-width: 1024px) {
  .grid-2, .grid-3, .grid-1-2, .grid-2-1, .split-banner { grid-template-columns: 1fr; }
  .grid-1-2 { gap: var(--spacing-md); }
  .cta-container { align-items: flex-start !important; text-align: left !important; }
  .grid-1-2 > :first-child { margin-bottom: var(--spacing-md); }
  .hero-left { padding-right: 0; }
  .hero-right { padding-left: 0; }
  .split-image { min-height: 300px; order: -1; border-right: none; border-bottom: 1px solid var(--color-border); }
  .split-text { padding: var(--spacing-lg) clamp(20px, 5vw, 60px); }
  
  .nav-links { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: var(--color-bg); flex-direction: column; padding: calc(80px + var(--spacing-lg)) clamp(20px, 5vw, 60px); justify-content: flex-start; align-items: flex-start; transition: var(--transition); z-index: 99; }
  .nav-links.active { left: 0; }
  .mobile-menu-btn { display: block; }
  
  .section { padding: var(--spacing-lg) 0; }
  .section-pt { padding-top: calc(80px + var(--spacing-md)); padding-bottom: var(--spacing-lg); }
  .massive-quote { font-size: 1.75rem; }
  .hero-image-bleed { margin-top: var(--spacing-lg); }
  .card { padding: var(--spacing-lg) }
  
  /* Make typography more legible on mobile */
  h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
  h2 { font-size: clamp(1.75rem, 7vw, 3rem); }
  .lead-text, .lead-strong { font-size: 1.25rem; }
  .container { padding: 0 clamp(20px, 5vw, 60px); }
  
  /* Footer adjustments for sticky CTA */
  .footer { padding-bottom: calc(var(--spacing-md) + 90px); }
  .grid-3 { gap: var(--spacing-lg); }
}

@media (max-width: 600px) {
  .page-header { padding: calc(60px + var(--spacing-md)) 0 var(--spacing-lg); }
  .page-header-grainy { padding: calc(80px + var(--spacing-md)) 0 var(--spacing-lg); }
  .split-image { min-height: 250px; }
  .btn { width: 100%; text-align: center; }
  .cta-container { align-items: center !important; text-align: center !important; }
  .local-noise { animation: none; opacity: 0.1; } /* Save mobile battery */
}

/* Procedural Constrained Grainy Banners (The Pastel Notes) */
.parallax-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; }
.relative-z { position: relative; z-index: 2; }

.grainy-banner {
    width: 100vw;
    height: clamp(300px, 50vh, 600px);
    margin-left: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    background-color: #F8F6F0; /* Fallback bg */
}

/* Spacing variations */
.banner-xl { height: clamp(400px, 65vh, 800px); }
.mt-bleed { margin-top: var(--spacing-xl); }

/* Banner Themes */
.theme-sundown { background-color: var(--color-bg); }
.theme-shadows { background-color: var(--color-bg); }
.theme-flow { background-color: var(--color-bg); }
.theme-horizon { background-color: var(--color-bg); }

.grainy-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    min-width: 600px;
    min-height: 600px;
}

.cta-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* Local Noise Overlay */
.local-noise {
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    z-index: 10; pointer-events: none;
    opacity: 0.15;
    background-size: 150px 150px;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="4" stitchTiles="stitch"/%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    mix-blend-mode: overlay;
    animation: banner-grain 8s steps(10) infinite;
}

/* Blob Variations */
.blob-sundown {
    width: 60vw; height: 60vw; background-color: #f7a97b;
    top: -20%; left: 20%; filter: blur(120px); opacity: 0.6;
    animation: banner-pulse 15s infinite alternate ease-in-out;
}

.blob-shadow-1 {
    width: 60vw; height: 60vw; background-color: #7b8e6c;
    top: -10%; left: -10%; filter: blur(140px); opacity: 0.5;
    animation: banner-float 20s infinite alternate ease-in-out;
}
.blob-shadow-2 {
    width: 50vw; height: 50vw; background-color: #5c7052;
    bottom: -10%; right: -5%; filter: blur(150px); opacity: 0.5;
    animation: banner-float 25s infinite alternate-reverse ease-in-out;
}

.blob-flow-1 {
    width: 55vw; height: 150%; border-radius: 100px; background-color: #efbba9;
    top: -25%; left: 15%; filter: blur(120px); opacity: 0.5;
    animation: banner-flow-y 15s infinite alternate ease-in-out;
}
.blob-flow-2 {
    width: 45vw; height: 150%; border-radius: 100px; background-color: #f1cf7c;
    top: -25%; right: 15%; filter: blur(120px); opacity: 0.5;
    animation: banner-flow-y 20s infinite alternate-reverse ease-in-out;
}

.blob-horizon {
    width: 140vw; height: 150%; border-radius: 50%; background-color: #ef9c67;
    top: -50%; left: -10%; filter: blur(140px); opacity: 0.6;
    animation: banner-pulse 18s infinite alternate ease-in-out;
}

/* Animations */
@keyframes banner-pulse {
    0% { transform: scale(1) translateY(0); opacity: 0.5; }
    100% { transform: scale(1.05) translateY(-5%); opacity: 0.8; }
}
@keyframes banner-float {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(5vw, -5vh) scale(1.05) rotate(5deg); }
}
@keyframes banner-flow-y {
    0% { transform: translateY(0) scaleX(1); }
    100% { transform: translateY(10%) scaleX(1.1); }
}
@keyframes banner-grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

/* ============================================================
   EXTENDED PALETTE — per-page moods
   Iris = violet (index hero & CTA) · Rose = soft warm pink (index quote)
   Sage = portrait tones (à propos, soin harmonie) · Tide = teal (contact — exclusive)
   ============================================================ */
.theme-iris, .theme-rose, .theme-sage, .theme-tide { background-color: var(--color-bg); }

/* Iris — lavender / violet */
.blob-iris-1 {
    width: 55vw; height: 150%; border-radius: 100px; background-color: #9a86c9;
    top: -25%; left: 15%; filter: blur(125px); opacity: 0.42;
    animation: banner-flow-y 16s infinite alternate ease-in-out;
}
.blob-iris-2 {
    width: 45vw; height: 150%; border-radius: 100px; background-color: #c4a0d4;
    top: -25%; right: 13%; filter: blur(125px); opacity: 0.38;
    animation: banner-flow-y 21s infinite alternate-reverse ease-in-out;
}

/* Rose — dusty rose / mauve (warm, not orange) */
.blob-rose-1 {
    width: 55vw; height: 150%; border-radius: 100px; background-color: #d99ba2;
    top: -25%; left: 17%; filter: blur(120px); opacity: 0.42;
    animation: banner-flow-y 17s infinite alternate ease-in-out;
}
.blob-rose-2 {
    width: 45vw; height: 150%; border-radius: 100px; background-color: #cf9bb6;
    top: -25%; right: 15%; filter: blur(120px); opacity: 0.36;
    animation: banner-flow-y 22s infinite alternate-reverse ease-in-out;
}

/* Sage — eucalyptus + warm camel (from the portrait) */
.blob-sage-1 {
    width: 60vw; height: 60vw; background-color: #a8bfa3;
    top: -12%; left: -8%; filter: blur(140px); opacity: 0.5;
    animation: banner-float 20s infinite alternate ease-in-out;
}
.blob-sage-2 {
    width: 52vw; height: 52vw; background-color: #cdbb95;
    bottom: -12%; right: -6%; filter: blur(150px); opacity: 0.5;
    animation: banner-float 25s infinite alternate-reverse ease-in-out;
}

/* Tide — soft teal (contact, exclusive) */
.blob-tide-1 {
    width: 58vw; height: 150%; border-radius: 100px; background-color: #6fa8b5;
    top: -25%; left: 13%; filter: blur(130px); opacity: 0.44;
    animation: banner-flow-y 18s infinite alternate ease-in-out;
}
.blob-tide-2 {
    width: 48vw; height: 150%; border-radius: 100px; background-color: #8ec6ce;
    top: -25%; right: 12%; filter: blur(130px); opacity: 0.38;
    animation: banner-flow-y 23s infinite alternate-reverse ease-in-out;
}

/* Additional testimonial tints — clearly distinct hues per person */
.testimonial-card.theme-iris::before {
    background: radial-gradient(ellipse at 30% 100%, rgba(150,120,200,0.40) 0%, transparent 60%),
                radial-gradient(ellipse at 75% 100%, rgba(190,150,215,0.30) 0%, transparent 60%),
                radial-gradient(circle at 50% 100%, rgba(130,110,185,0.22) 0%, transparent 70%);
    animation: evolveWatercolorB 18s infinite alternate ease-in-out;
    animation-delay: -5s;
}
.testimonial-card.theme-sage::before {
    background: radial-gradient(ellipse at 25% 100%, rgba(120,162,120,0.36) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(165,182,142,0.32) 0%, transparent 60%),
                radial-gradient(circle at 50% 100%, rgba(95,142,110,0.22) 0%, transparent 70%);
    animation: evolveWatercolorC 15s infinite alternate ease-in-out;
    animation-delay: -2s;
}