/*
// ===================================================================
// BORN HEALER - STYLESHEET (Updated with a warmer, fuller color palette)
// ===================================================================
*/

/* --- Global Styles & CSS Variables (New Palette) --- */
:root {
    --primary-color: #8E44AD; /* Wisteria Purple */
    --primary-darker: #7D3C98; /* Darker shade for gradients */
    --secondary-color: #D2B4DE; /* Pastel Lilac */
    --accent-color: #FADBD8; /* Pastel Pink */
    --pastel-brown: #EAE0D5; /* Lighter Pastel Brown */
    --pastel-purple-bg: #F3F0F7; /* New background color */
    --card-bg: #FFFFFF; /* White for cards to stand out */
    --text-color: #34282C; /* Charcoal */
    --text-on-brown: #4a3c31; /* Sharper text color for brown backgrounds */
    --headings-color: #34282C;
    --bg-color: var(--pastel-purple-bg); 
    --light-overlay: rgba(243, 240, 247, 0.9);
    --whatsapp-green: #25D366;
    --cta-gradient-start: #6A357C;
    --cta-gradient-end: #5B2C6F;
    --testimonial-gradient: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-color) 100%);

    --heading-font: 'Playfair Display', serif;
    --body-font: 'Montserrat', sans-serif;
    
    --container-width: 1100px;
    --border-radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* Prevent horizontal scrollbars / right‑side white gutter on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
/* Clip any child overflow from sections that use decorative SVGs or transforms */
.main-header, .hero, section, .page-hero, .curvy-divider { overflow-x: clip; }
/* Ensure images/SVG never exceed viewport width */
img, svg { max-width: 100%; height: auto; }
body { 
    font-family: var(--body-font); 
    line-height: 1.7; 
    color: var(--text-color); 
    background-color: var(--bg-color);
    font-weight: 500; /* Bolder body text for readability */
}
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 {
    font-family: var(--heading-font); 
    line-height: 1.3;
    margin-bottom: 1rem; 
    color: var(--headings-color);
    font-weight: 900; /* Bolder headings */
}
h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); color: var(--primary-color); }
h2 { font-size: clamp(2rem, 5vw, 2.75rem); text-align: center; }
.hero-subheading {
    font-family: var(--body-font); font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 500; /* Kept this slightly lighter to contrast with main heading */
    margin-bottom: 1rem; color: #fff;
}
h3 { font-size: 1.5rem; color: var(--primary-color); }
h4 { font-size: 1.2rem; color: var(--text-color); font-weight: 700; }

section { 
    padding: 50px 0; 
    position: relative;
    animation: fadeIn 1s ease-in-out forwards;
    opacity: 0;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }    
}

section:not(.hero):not(.page-hero) { padding-top: 40px; } 

/* --- Curvy Shape Dividers --- */
.has-curvy-divider { padding-bottom: 150px; }
.curvy-divider {
    pointer-events: none;   /* allow taps to “pass through” to the button */
    position: absolute; bottom: -1px; left: 0;
    width: 100%; overflow: hidden; line-height: 0;
    transform: rotate(180deg);
}
.curvy-divider svg {
    position: relative; display: block;
    width: 100%; height: 120px;
}
.curvy-divider .shape-fill { fill: var(--bg-color); }

/* Corrected fill colors for each divider instance */
.hero .curvy-divider .shape-fill, .page-hero .curvy-divider .shape-fill { fill: var(--primary-color); }
.specializations-section .curvy-divider .shape-fill { fill: var(--pastel-brown); }
.about-section .curvy-divider .shape-fill { fill: var(--cta-gradient-start); }
.cta-section .curvy-divider .shape-fill { fill: var(--bg-color); }
.new-media-section .curvy-divider .shape-fill { fill: var(--bg-color); }
.media-section .curvy-divider .shape-fill { fill: var(--bg-color); }
.services-overview-section .curvy-divider .shape-fill { fill: var(--card-bg); }
.testimonials-section .curvy-divider .shape-fill { fill: #fff; }
.instagram-section .curvy-divider .shape-fill { fill: var(--bg-color); }


/* --- Header & Navigation --- */
.main-header {
    background-color: var(--light-overlay); backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100;
}
.main-header .container { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.logo { font-family: var(--heading-font); font-size: 1.8rem; color: var(--primary-color); text-decoration: none; font-weight: 700; }
.main-nav ul { list-style: none; display: flex; gap: 30px; }
.main-nav a { text-decoration: none; color: var(--text-color); font-weight: 700; transition: color 0.3s ease; }
.main-nav a:hover { color: var(--primary-color); }
.nav-toggle { display: none; }

/* --- Hero Section --- */
.hero {
    background: linear-gradient(to top, rgba(86, 10, 119, 0.7), rgba(40, 2, 57, 0.4)), url('./img/HealingTouchHero.webp') no-repeat center center/cover;
    min-height: 80vh; display: flex; align-items: center; text-align: center; padding: 40px 0; color: #fff;
}
.hero h1, .hero p, .hero h2 { color: #fff; text-shadow: 1px 1px 4px rgba(0,0,0,0.6); }
.hero h1 { margin-bottom: 0.5rem; color: #fff; }
.hero .subtitle { font-size: 1.5rem; margin-bottom: 1rem; }
.hero .subtitle-small { font-size: 1.1rem; margin-bottom: 2rem; font-weight: 700; }

.cta-button {
    background-color: var(--accent-color); color: var(--headings-color); padding: 15px 35px;
    text-decoration: none; font-weight: 700; border-radius: 50px;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cta-button:hover { background-color: #F8C3BE; transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }

/* --- Sections Styling --- */
.specializations-section {
    background: var(--primary-color) ;
    color: #fff; text-align: center;

}
.specializations-section h2 { color: #fff; font-family: var(--body-font); font-size: 1.7rem; line-height: 1.6; max-width: 900px; margin: 0 auto; font-weight: 700;}

.about-section { background: var(--pastel-brown); }
.about-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 50px; align-items: center; } 
.about-image img { 
    width: 100%; max-width: 400px; display: block; margin: 0 auto;
    border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    transition: transform 0.4s ease;
}
.about-image:hover img { transform: scale(1.03); }
.about-text p { 
    margin-bottom: 1em;
    color: var(--text-on-brown);
    font-weight: 600;
}
.about-text h2 { color: #4a3c31; }

/* --- CTA Section --- */
.cta-section {
    background: var(--cta-gradient-start) ;
    color: #fff; text-align: center;
}
.cta-section h2 { color: #fff; }
.cta-section p { max-width: 600px; margin: 0 auto 1.5rem auto; opacity: 0.9; }

/* --- Media Section (Newspaper etc) --- */
.new-media-section { background: var(--pastel-brown); color: var(--text-on-brown); }
.new-media-section h2 { color: #5B4E41; }
.media-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 2rem;
}
.media-item {
    display: block;
    text-decoration: none;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: auto; /* Let content define width */
    flex-shrink: 0;
}
.media-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.media-item img {
    height: 300px; /* Set a fixed height */
    width: auto;    /* Allow width to be flexible based on aspect ratio */
    display: block;
}
.media-overlay {
    padding: 1rem 1.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-on-brown);
}


/* --- Media Section (YouTube) --- */
.media-section { background-color: var(--bg-color); padding-bottom: 20px; }
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto 0 auto;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    /* Using modern aspect-ratio property for perfect proportions */
    aspect-ratio: 16 / 9;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* --- Service Card Grid Styles --- */
.services-overview-section { background-color: var(--bg-color); }
.services-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-top: 2rem; 
}
.service-card {
    background: var(--card-bg); border-radius: var(--border-radius); text-align: center;
    padding: 2rem 1.5rem; border: 1px solid #EAEAEA;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(130, 30, 153, 0.1); }
.service-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }
.service-card h3 { font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--headings-color); }
.service-card p { font-size: 0.95rem; line-height: 1.6; min-height: 100px; font-weight: 500;}
.service-read-more {
    display: inline-block; background: var(--secondary-color); color: var(--text-color);
    padding: 8px 20px; border-radius: 20px; font-weight: 700;
    text-decoration: none; margin-top: 1rem; transition: background-color 0.3s;
}
.service-read-more:hover { background-color: #C197D4; }

/* --- Service Detail Section Styles --- */
.service-detail-section { padding: 60px 0; background-color: var(--card-bg); }
.service-detail-section.alt-bg { background-color: var(--pastel-brown); }
.service-detail-section.alt-bg h2, .service-detail-section.alt-bg h4 { color: #4a3c31; }
.service-detail-section.alt-bg p { color: var(--text-on-brown); font-weight: 600; }
.service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.service-detail-grid.reverse-grid { grid-template-columns: 1fr 1fr; }
.service-detail-image img { 
    width: 100%; max-width: 450px; display: block; margin: 0 auto;
    border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform 0.4s ease;
}
.service-detail-image:hover img { transform: scale(1.03); }
.service-detail-image figcaption { text-align: center; font-style: italic; margin-top: 1rem; font-size: 0.9rem; }
.service-detail-text h2 { text-align: left; }
.service-detail-text p { margin-bottom: 1em; }

/* --- Testimonials Section (Homepage) --- */
.testimonials-section { background: var(--testimonial-gradient); text-align: center; }
.testimonials-section h2 { color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.testimonials-section blockquote {
    max-width: 800px; margin: 0 auto 30px auto; font-size: 1.3rem; font-style: italic; padding: 1.5rem;
    background: rgba(255,255,255,0.7); border-radius: var(--border-radius); box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.testimonials-section footer { font-style: normal; font-weight: 700; color: var(--primary-color); margin-top: 0.5rem; }

/* --- Testimonials Page Styles --- */
.page-hero { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-darker) 100%); color: #fff; text-align: center; padding-top: 50px;}
.page-hero h1, .page-hero p { color: #fff; }
.testimonials-full-page { background: var(--bg-color); padding-top: 0; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.testimonial-card {
    background: var(--card-bg); padding: 2rem; border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-top: 5px solid var(--secondary-color);
}
.testimonial-card h4 { color: var(--primary-color); font-size: 1.3rem; }
.testimonial-card p { font-style: italic; }
.thank-you-content { text-align: center; background-color: var(--bg-color); padding: 40px 0;}
.thank-you-actions { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; }
.thank-you-actions .secondary-cta { background-color: var(--secondary-color); color: var(--text-color); }
.thank-you-actions .secondary-cta:hover { background-color: #C197D4; }


/* ================================
   Instagram section (enhanced)
   ================================ */
.instagram-section{ background:#5e4c74; color:#efeaf7; position:relative; padding:56px 0; }
.instagram-section .container{ max-width:1100px; }

.instagram-header{ display:grid; gap:.4rem; justify-items:center; text-align:center; margin-bottom:18px; }
.instagram-header h2{ color:#e9defa; font-weight:800; display:flex; align-items:center; gap:.6rem; margin:0; }
.instagram-header h2 i{ color:#d2b86e; }
.ig-sub{ color:#cfc5df; margin:0; font-weight:500; }
.ig-cta{ display:inline-flex; align-items:center; gap:.5rem; background:#c6ac5f; color:#1f1500; font-weight:800; padding:.65rem 1rem; border-radius:999px; box-shadow:0 10px 26px rgba(198,172,95,.28); border:0; text-decoration:none; }
.ig-cta:hover{ background:#d4bf76; text-decoration:none; }

/* Grid with one featured tile */
.instagram-grid.enhanced{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; margin-top:14px; }
.instagram-post{ position:relative; border-radius:14px; overflow:hidden; isolation:isolate; box-shadow:0 10px 24px rgba(0,0,0,.25); background:radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,0)); }
.instagram-post img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .5s ease, filter .5s ease; }

/* layout: featured spans 2x rows/cols on desktop */
.instagram-post.featured{ grid-column: span 6; grid-row: span 2; min-height: 360px; }
.instagram-grid.enhanced .instagram-post:not(.featured){ grid-column: span 3; min-height: 170px; }

/* gradient border accent */
.instagram-post::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:14px;
  background:linear-gradient(135deg, rgba(198,172,95,.85), rgba(126,87,194,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.7;
}

/* hover/focus reveal */
.ig-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:10px; background:linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(0,0,0,.55) 92%); color:#fff; opacity:0; transition:opacity .35s ease; }
.instagram-post:hover .ig-overlay, .instagram-post:focus-visible .ig-overlay{ opacity:1; }
.ig-caption{ font-size:.95rem; line-height:1.35; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.ig-meta{ position:absolute; top:8px; right:10px; display:flex; align-items:center; gap:.45rem; font-weight:700; background:rgba(0,0,0,.35); padding:.35rem .55rem; border-radius:999px; backdrop-filter: blur(6px); }
.ig-meta i{ color:#ffd966; }

/* motion */
.instagram-post:hover img{ transform:scale(1.06); filter:saturate(1.05); }

/* Accessibility focus */
.instagram-post:focus-visible{ outline:3px solid #c6ac5f; outline-offset:2px; }

.ig-bottom-cta{ display:flex; justify-content:center; margin-top:14px; }

/* responsive */
@media (max-width:960px){
  .instagram-post.featured{ grid-column: span 12; grid-row: span 1; min-height:260px; }
  .instagram-grid.enhanced .instagram-post:not(.featured){ grid-column: span 6; }
}
@media (max-width:640px){
  .instagram-grid.enhanced{ grid-template-columns:repeat(6,1fr); }
  .instagram-post.featured{ grid-column:span 6; min-height:220px; }
  .instagram-grid.enhanced .instagram-post:not(.featured){ grid-column:span 3; min-height:140px; }
}

/* --- Contact Section & Form --- */
.contact-section { background-color: var(--bg-color); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.working-hours-box {
    background-color: #c75249; color: #fff; padding: 2rem;
    border-radius: var(--border-radius); box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.working-hours-box h3 {
    color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.75rem; margin-bottom: 1rem;
}
.working-hours-box p, .working-hours-box li { color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; }
.working-hours-box strong { color: #fff; font-weight: 700; }
.working-hours-box ul { list-style: none; padding: 0; margin-top: 1rem; }

.contact-form-container {
    background-color: var(--pastel-brown); padding: 2rem; border-radius: var(--border-radius);
}
.contact-form-container h3 { margin-bottom: 1.5rem; text-align: center; color: var(--text-on-brown); }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--text-on-brown); }
.form-group input,
.form-group textarea {
    width: 100%; padding: 12px; border-radius: 5px; border: 1px solid var(--secondary-color);
    background-color: #fff; font-family: var(--body-font); font-size: 1rem; transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}
.contact-form .form-button { width: 100%; border: none; margin-top: 1rem; }

.extra-info-container {
    text-align: center; margin-top: 3rem; padding: 2rem;
    background-color: var(--pastel-brown); border-radius: var(--border-radius);
}
.extra-info-container h3 { margin-bottom: 1.5rem; color: var(--text-on-brown); }
.social-icons { display: flex; justify-content: center; gap: 1.5rem; }
.social-icons a {
    color: var(--text-on-brown); font-size: 1.8rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.social-icons a:hover { color: var(--primary-color); transform: scale(1.1); }

.main-footer {
    background: linear-gradient(135deg, #6A357C 0%, #5B2C6F 100%);
    color: #fff; text-align: center; padding: 40px 20px;
}

/* --- Floating WhatsApp Button --- */
.floating-whatsapp-btn {
    position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px;
    background-color: var(--whatsapp-green); color: #FFF; border-radius: 50%;
    text-align: center; font-size: 30px; box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: transform 0.3s ease;
}
.floating-whatsapp-btn:hover { transform: scale(1.1); }

/* --- Responsive Styles --- */
@media (max-width: 992px) {
    .about-grid, .service-detail-grid, .service-detail-grid.reverse-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .service-detail-grid.reverse-grid .service-detail-image { grid-row: 1; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Mobile nav panel: sits flush under the sticky header */
  .main-nav{
    display: none;
    position: absolute; left: 0; right: 0;
    top: var(--header-h);
    background: var(--bg-color);
    flex-direction: column; text-align: center;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    z-index: 100; /* under the toggle (z-index:101) */
  }
  .main-nav.active { display: flex; }
  .main-nav ul { flex-direction: column; width: 100%; gap: 0; }
  .main-nav li { width: 100%; }
  .main-nav li a { display: block; padding: 20px; border-top: 1px solid #EAEAEA; }

  /* Toggle button: proper thumb target */
  .nav-toggle { display: block; background: none; border: none; cursor: pointer; padding: 0; z-index: 101; }
  .nav-toggle{ display:inline-grid; place-items:center; width:44px; height:44px; margin:0 8px 0 0; }

  /* Centered hamburger with symmetric X */
  .hamburger{ position: relative; width: 24px; height: 2px; background: var(--primary-color); border-radius: 1px; }
  .hamburger::before, .hamburger::after{
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 24px; height: 2px; background: var(--primary-color); border-radius: 1px;
    transform: translate(-50%, -50%);
  }
  /* three-bar offsets */
  .hamburger::before{ transform: translate(-50%, calc(-50% - 6px)); }
  .hamburger::after { transform: translate(-50%, calc(-50% + 6px)); }

  /* active to X */
  .nav-toggle.active .hamburger{ background: transparent; }
  .nav-toggle.active .hamburger::before{ transform: translate(-50%, -50%) rotate(45deg); }
  .nav-toggle.active .hamburger::after{  transform: translate(-50%, -50%) rotate(-45deg); }

  /* Mobile grids */
  .services-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .instagram-grid{overflow:hidden;}
  .curvy-divider svg{ width:100%; }
}
/* --- Styles for Healing Method Details --- */
.service-detail-text .method-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--secondary-color);
}
.service-detail-text.alt-bg .method-section {
    border-top-color: #d8c8b8;
}

.service-detail-text .method-section h5 {
    font-family: var(--body-font);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.service-detail-text .method-section ul {
    list-style: none;
    padding-left: 1rem;
    margin: 1rem 0;
}

.service-detail-text .method-section li {
    padding-left: 1.8rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.service-detail-text .method-section li::before {
    content: '\f00d'; /* Font Awesome 'x' (times) icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #c75249; /* Red color from contact box */
}

/* Specific icon for the exorcism feedback points */
#spirit-release-detail .method-section:last-of-type li::before {
    content: '\f0a9'; /* Font Awesome 'hand-point-right' icon */
    color: var(--primary-color);
}


.service-detail-text strong {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    margin: 1.5rem 0;
    letter-spacing: 1px;
    color: #c75249;
    font-weight: 900;
}


      /* Compact contact strip (phone + email with small icons) */
      .contact-mini { 
        color: #eae6f4; 
        font: 600 0.95rem/1.2 Montserrat, system-ui; 
        padding: 50px 0; 
      }
      .contact-mini .container { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 22px; 
        flex-wrap: wrap; 
      }
      .contact-mini a { color: #eae6f4; text-decoration: none; }
      .contact-mini a:hover { text-decoration: underline; }
      .contact-mini i { font-size: 0.95rem; margin-right: 8px; color: #ffffff; }
      @media (max-width: 520px){
        .contact-mini { font-size: 0.9rem; }
      }


      /* WhatsApp quick-response note */
.whatsapp-note{
  display:flex; align-items:center; gap:.55rem;
  margin:6px 0 16px; padding:.65rem .85rem;
  border:1px solid #25D366;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(184, 184, 184, 0.08), rgba(0, 0, 0, 0.03));
  color:#505050;
}
.whatsapp-note i{ color:#25D366; font-size:1.05rem; }
.whatsapp-note a{ color:#25D366; font-weight:800; text-decoration:none; }
.whatsapp-note a:hover{ text-decoration:underline; }
@media (max-width:600px){ .whatsapp-note{ flex-wrap:wrap; } }


/* ================================
   FAQ Section (improved styling)
   ================================ */
.faq-section{ background: var(--card-bg); }
.faq-section .container{ max-width: 900px; }
.faq-section h2{ margin-bottom: 12px; }
.faq-intro{ color: var(--text-color); opacity:.85; text-align:center; margin-bottom: 14px; }

/* Accordion cards */
.faq-list{ display:grid; gap: 12px; margin-top: 10px; }
.faq-list details{
  background:#fff; border:1px solid #E6E0EF; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.faq-list summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:800; color: var(--primary-color);
  display:flex; align-items:center; gap:.6rem; position:relative;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:after{ content:"\f067"; font-family: 'Font Awesome 6 Free'; font-weight:900; margin-left:auto; color:#9a8bb7; transition: transform .25s ease; }
.faq-list details[open] summary:after{ content:"\f068"; transform: rotate(180deg); }
.faq-list .answer{ padding: 0 16px 14px 16px; color:#43384c; }

/* Focus & hover states for accessibility */
.faq-list summary:focus-visible{ outline:3px solid #c6ac5f; outline-offset:4px; border-radius:10px; }
.faq-list summary:hover{ background: #FBF9FF; }

/* Contact callouts (form hidden) */
.contact-callouts{ display:grid; gap:12px; }
/* Contact callouts — refined layout */
.contact-callouts .callout{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  border:1px solid #E6E0EF; border-radius:12px; background:var(--card-bg);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
/* Make label left, CTA right; keep your current HTML */
.contact-callouts .callout > div{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:12px;
}

/* Icon tone + size */
.contact-callouts .callout i{ color: var(--primary-color); margin-top:0; font-size:1.1rem; }

/* Label */
.contact-callouts .callout strong{ color: var(--headings-color); font-size:1rem; margin:0; }

/* Button – smaller, solid, no giant pill */
.contact-callouts .callout .cta-button{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:.55rem .9rem; border-radius:8px; box-shadow:none; font-weight:800;
  background: var(--secondary-color); color: var(--text-color);
}
.contact-callouts .callout .cta-button:hover{ background:#C197D4; transform:none; }

/* Mobile: stack and make button full-width */
@media (max-width:520px){
  .contact-callouts .callout { flex-direction:column; align-items:stretch; }
  .contact-callouts .callout > div{ flex-direction:column; align-items:flex-start; gap:8px; }
  .contact-callouts .callout .cta-button{ width:100%; text-align:center; }
}

/* ===== Contact section: mobile structure & polish ===== */
@media (max-width: 640px){
  /* One clean column with tighter rhythm */
  .contact-grid{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Working-hours card spacing & readability */
  .working-hours-box{
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    margin-bottom: 8px;         /* space before next card */
  }
  .working-hours-box h3{
    font-size: 1.15rem;
    margin-bottom: .75rem;
    text-align: left;
  }

  /* Contact card (the right column) as a tidy card on mobile */
  .contact-form-container{
    background: var(--card-bg);
    border: 1px solid #E6E0EF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  .contact-form-container h3{
    text-align: left;
    margin-bottom: .75rem;
  }

  /* Callouts: consistent card rows with left icon + label, CTA below */
  .contact-callouts{ gap: 10px; }
  .contact-callouts .callout{
    display: grid;
    grid-template-columns: auto 1fr;  /* icon + label row */
    grid-auto-rows: auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid #E6E0EF;
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
  }
  /* icon cell */
  .contact-callouts .callout i{
    grid-column: 1;
    font-size: 1.1rem;
    color: var(--primary-color);
  }
  /* label + button container */
  .contact-callouts .callout > div{
    grid-column: 2;
    display: grid;
    gap: 8px;                    /* label above button */
  }
  .contact-callouts .callout strong{
    font-size: 1rem;
    color: var(--headings-color);
  }
  .contact-callouts .callout .cta-button{
    width: 100%;                 /* big, easy tap target */
    border-radius: 8px;
    padding: .65rem 1rem;
    font-weight: 800;
    background: var(--secondary-color);
    color: var(--text-color);
    box-shadow: none;
  }

  /* Prevent overlap with floating WhatsApp button near the footer */
  .contact-section{ padding-bottom: 90px; }
}

/* ===== Fix: hero wave overlay blocking CTA ===== */
/* Make the wave non-interactive and behind the content */
.hero .curvy-divider,
.hero .curvy-divider svg {
  pointer-events: none;   /* allow taps to “pass through” to the button */
  z-index: 0;
}

/* Ensure hero content (incl. button) sits above the wave */
.hero, .hero .container { position: relative; z-index: 1; }
.hero .cta-button { position: relative; z-index: 5; }

/* Give the hero a touch more bottom padding on small screens
   so the button doesn’t sit *inside* the curve */
@media (max-width: 640px){
  .hero { padding-bottom: 28px; }
  .has-curvy-divider { padding-bottom: 90px; } /* was larger on desktop */
}
/* ============ Consistent header height (single source of truth) ============ */
:root { --header-h: 68px; }             /* adjust to your exact header height */

/* Header & mobile menu aligned to the same height */
.main-header .container { height: var(--header-h); }

/* Mobile menu panel sits flush under header (no mysterious gap) */
@media (max-width: 768px){
  .main-nav{
    top: var(--header-h) !important;    /* was a fixed px value */
  }
}

/* Optional: ensure the wave never sits above anything interactive globally */
.curvy-divider { z-index: 0; }

/* Prevent SVG waves from blocking taps */
.hero .curvy-divider,
.hero .curvy-divider svg{ pointer-events:none; z-index:0; }
.hero, .hero .container{ position:relative; z-index:1; }
.hero .cta-button{ position:relative; z-index:5; }

/* Mobile nav alignment + panel position */
:root{ --header-h:68px; } /* keep in sync with critical CSS */
.main-header .container{ height:var(--header-h); }
@media (max-width:768px){
  .main-nav{ top:var(--header-h); }
  .nav-toggle{ width:44px;height:44px; }
  .hamburger{ position:relative;width:24px;height:2px;background:var(--primary-color);border-radius:1px; }
  .hamburger::before,.hamburger::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:2px;background:var(--primary-color);border-radius:1px;transform:translate(-50%,-50%);}
  .hamburger::before{ transform:translate(-50%, calc(-50% - 6px)); }
  .hamburger::after{  transform:translate(-50%, calc(-50% + 6px)); }
  .nav-toggle.active .hamburger{ background:transparent; }
  .nav-toggle.active .hamburger::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .nav-toggle.active .hamburger::after{  transform:translate(-50%,-50%) rotate(-45deg); }
}

/* Fonts: avoid layout jumps if Google Fonts lag */
@font-face{
  font-family:"Playfair Display-fallback";
  src: local("Times New Roman");
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 8%;
}