/* =========================== 
    Split Layout
 =============================*/

 .layout-split {
   display: grid;
   gap: var(--space-lg);
   grid-template-columns: 1fr;
   align-items: center;

}

.layout-split-stretch {
   align-items: stretch;
}





@media (min-width: 800px) {
   .layout-split {
       grid-template-columns: 1fr 1fr;
       gap: var(--space-xl);
   }

   .layout-split.image-left {
       grid-template-columns: 0.8fr 1.2fr;
   }

   .layout-split.image-right {
       grid-template-columns: 1.2fr 0.8fr;
   } 
}

@media (max-width: 800px) {
   .mobile-reverse .media-frame {
       grid-row: 2;
     }
   
     .mobile-reverse .split-content {
       grid-row: 1;
     }

     .mobile-reverse2 .media-frame {
       grid-row: 1;
     }

     .mobile-reverse2.split-content {
       grid-row: 2;
     }

     .media-frame {
       padding-top: var(--space-lg);
     }


}



/* =========================== 
 Grid
=============================*/

.grid {
   display: grid;
   gap: var(--space-xl);
   grid-template-columns: 1fr;
   align-items: stretch;
}

@media (min-width: 768px) {
   .grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.grid-lg {
   gap: var(--space-xl);
}

.grid-sm {
   gap: var(--space-md);
}

/* =========================== 
Carousel
=============================*/


.carousel {
   display: flex;
   gap: var(--space-lg);
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
   scroll-snap-type: x proximity;
   padding-bottom: var(--space-sm);
   align-items: center;
   -webkit-overflow-scrolling: touch;
}

.carousel > * {
   scroll-snap-align: start;
   flex: 0 0 auto;
}



/* ===========================
  GRID: 3 COLUMN
=========================== */

.grid-3 {
   display: grid;
   gap: var(--space-lg);
   grid-template-columns: 1fr;
}

.grid-3-narrow {
   width: 100%;
   margin-inline: auto;
   max-width: 900px;
  
}

@media (min-width: 768px) {
   .grid-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 768px) {
   .grid-3-narrow {
       grid-template-columns: repeat(2, 1fr);
       
   }

   .grid-3-narrow > :last-child {
       grid-column: 1 / -1;
       justify-self: center;
     }



   
}

.special-grid {
   grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
}


/* ===========================
   CONTAINERS
=========================== */

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

/* Reading / storytelling content */
.container-narrow {
   width: min(90%, 900px);
}

/* Card grids / visual layouts */
.container-wide {
   width: min(90%, 1400px);
}

/* Full-width sections */
.container-full {
   max-width: none;
   width: 100%;
}

/* ===========================
  Section Vertical Spacing 
=========================== */
/* Default */
.section {
padding-block: var(--space-xl);
}

.section-sub {
   padding-bottom: 0;
}

.section-tight {
   padding-top: 0;
}

.section-hero {
   padding-bottom: var(--space-xl);
   padding-top: 0;
}

.section-sub-hero {
   padding-top: var(--space-2xl);
}

/* =========================== 
    GLOBAL RESET
 =============================*/
/* Box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default spacing */
* {
    margin: 0;
    padding: 0;
}

/* Improve text rendering */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

    /* =========================== 
   Page defaults
 =============================*/

body {
    min-height: 100vh;
    min-height: 100svh;
    line-height: 1.5;
}

    /* =========================== 
    Media behavior
 =============================*/

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    max-width: 100%;
}

figure {
    margin: 0;
}


    /* =========================== 
    Link reset 
 =============================*/

ul,
ol {
    list-style: none;
}

/* Links reset */
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

    /* =========================== 
    Form Base
 =============================*/

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

textarea {
    resize: vertical;
}

/* Button behavior */
button {
    cursor: pointer;
}

:root {
    /* ================================================== 
    COLORS
 ====================================================*/

    /* =========================== 
    Brand Colors
 =============================*/

    /* Primary brand color - buttons */
    --clr-primary: #9dac93;
    --clr-primary-hover: #8EA481;

    /* Secondary brand color - highlights */
    --clr-secondary: #7C8B72;

    /* Warm accent (lines, dividers, subtle highlights) */
    --clr-accent: #A89975;

     /* =========================== 
    Cards
 =============================*/

    /* Standard cards (service cards, package cards) */
    --clr-card: #F6EFE6;
    --clr-card-hover: #f1e9de;

    /* Elevated cards (forms, testimonials, popups) */
    --clr-card-elevated: #fffbf9;
    --clr-card-elevated-hover: #f7f2ef;

    /* =========================== 
    Text
 =============================*/
    --clr-text-heading: #494439;
    --clr-text-body: #3F3F38;
    --clr-text-accent: #9F8A5C;
    --clr-text-cta: #fffbf2;
    --clr-text-muted: #7A7A72;

    /* =========================== 
    Default background 
 =============================*/
 --clr-bg: #fdfaf6;

 /* =========================== 
    Default border
 =============================*/
 --clr-border: rgba(0,0,0,.3);


  /* =========================== 
   Vertical Spacing
 =============================*/
    /* eyebrow */
    --space-xxs: 0.3rem;

    /* tight grouping */
    --space-xs: 0.5rem;

    /* small grouping*/
    --space-sm: 0.75rem;

    /* default */
    --space-md: 1.25rem;

    /* Content grouping */
    --space-lg: 2rem;

    --space-xlg: 3rem;

    /* Layout Spacing */
    --space-xl: 4rem;

    /* Section Spacing */
    --space-2xl: 7rem;

        /* ===========================
   Shadows
=============================*/

    /* Barely lifted */
    --shadow-xs:  0 4px 10px rgba(0, 0, 0, 0.05);

    /* Cards */
    --shadow-sm: 
    0 8px 20px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);

    /* Interactive hover */
    --shadow-md: 
    0 16px 40px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.05);

    /* Hero panels */
    --shadow-lg:
    0 24px 60px rgba(0, 0, 0, 0.12);

    /* Mouse focusing */
    --shadow-focus: 0 0 0 3px rgba(124,139,114,0.25);


    /* =========================== 
    Fonts
 =============================*/
 --Playfair: "Playfair Display", serif;
 --DM: "DM Sans", sans-serif;
}

/* =========================== 
    Typography
 =============================*/

/* Base body text */
body {
    font-family: "DM Sans", sans-serif;
    color: var(--clr-text-body);
    font-size: 1.15rem;
    line-height: 1.75;
}

/* Headings*/
h1,
h2,
h3,
h4
 {
    font-family: "Playfair Display", serif;
    color: var(--clr-text-heading);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Hierarchy scale */

h1 {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
}

h2 {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 600;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.1rem;
}

/* For long writings, not for cards, UI components */
.prose-p {
    max-width: 60ch;
    margin-inline: auto;
}

.prose-sm {
    max-width: 55ch
}

@media (max-width: 768px) {
    .prose-p,
    .prose-sm {
      max-width: none;
    }
  }

small {
    color: var(--clr-text-muted);
}

/* Strong emphasis inside paragraphs */
strong {
    color: var(--clr-text-heading);
    font-weight: 600;
}

.text-muted {
    color: var(--clr-text-muted);
   
}


/* =========================== 
    Background Textures
=============================*/

.section-default {
    background-image: url("../assets/textures/default.webp");
    background-attachment: fixed;
}

@media (max-width: 800px) {
    .section-default {
        background-attachment: scroll;
    }
}

.section-reading-panel {
    background-image: url("../assets/textures/reading-panel.webp");
}

.section-highlight {
    background-image: url("../assets/textures/highlight.webp");
    background-position: center bottom;
}

.section-education {
    background-image: url("../assets/textures/education.webp");
}

.section-service {
    background-image: url("../assets/textures/servicetexture.webp");
    background-position: left bottom;
}

.section-default,
.section-reading-panel,
.section-highlight,
.section-education,
.section-service {
  background-repeat: no-repeat;
  background-size: cover;
}

.section-plain {
    background-color: var(--clr-card-elevated);
}

/* =========================== 
    TEXT ALIGNMENT
=============================*/
.text-center {
   text-align: center;
   margin-inline: auto;

 }

 /* =========================== 
   Vertical spacing for reading
=============================*/

.flow > * + * {
   margin-top: var(--space-md);
}

.flow-tight > * + * {
   margin-top: var(--space-xs);
}

.flow-loose > * + * {
   margin-top: var(--space-lg);
}


 /* =========================== 
   Vertical spacing for UI Components 
=============================*/

.stack {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

.stack-md {
   gap: var(--space-md);
}

.stack-lg {
   gap: var(--space-xl);
}

.stack-tight {
   gap: var(--space-sm);
}


 /* =========================== 
   Link underlining animation
=============================*/
.link-underline {
   position: relative;
   display: inline-block;
}

.link-underline::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -3px;
   width: 0%;
   height: 2.3px;
   background-color: currentColor;
   transition: width 0.5s ease;
   opacity: 0.7;
}

.link-underline:hover::after, .link-underline.active::after {
   width: 100%;
}

.link-accent::after{
   background-color: var(--clr-text-accent);
}

 /* =========================== 
   Typography 
=============================*/
.text-white {
   color: var(--clr-text-cta);
}

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

@media (max-width: 600px) {
br.mobile-remove {
   display: none;
 }
}





/* ===========================
  Hierarchy spacing 
=========================== */
.top-space-sm {
   margin-top: var(--space-sm);
}
.top-space-md {
   margin-top: var(--space-md);
}

.top-space-lg {
   margin-top: var(--space-lg);
}

.top-space-xlg {
   margin-top: var(--space-xlg);
}


.top-space-xl {
   margin-top: var(--space-xl);
}

.bottom-space-xl {
   margin-bottom: var(--space-xl);
}




/* ===========================
 Image Positioning
=========================== */
.img-cb {
   object-position: center bottom;
}

.img-ct {
   object-position: center top;
}


/* Layout buttons */
.button-group {
   display: flex;
   gap: var(--space-xl);
   align-items: center;
   justify-content: center;

   width: 100%;
}

.button-group .btn {
   flex: 1;
   max-width: 300px;
   text-align: center;
}



@media (max-width: 768px) {

   .button-group {
       flex-direction: column;
       gap: var(--space-md);
   }

   .button-group .btn {
       width: 100%;
       max-width: 300px;
   }

}

/* Default Button */ 
.btn {
   display: inline-flex;
   align-items: center;
   font-weight: 500;
   letter-spacing: 0.02em;
   border-radius: 7px;
   justify-content: center;
   transition: all 0.3s ease;
   white-space: nowrap;
   position: relative;

 }

 .btn-lg {
   min-width: 300px;
 }

 .btn-md {
   min-width: 200px;
 }




 /* Primary Button */
.btn-primary {
 background-color: var(--clr-primary);
 color: var(--clr-card-elevated);
 border: 1px solid transparent;
 box-shadow: var(--shadow-sm);
 padding: var(--space-xxs) var(--space-lg);
}

.btn-primary:hover {
 background-color: var(--clr-primary-hover);
 transform: translateY(-5px);
 box-shadow: var(--shadow-md);
}

/* Outlined button */
.btn-outline {
 background-color: var(--clr-card);
 border: 1px solid var(--clr-primary);
 box-shadow: var(--shadow-sm);
 padding: var(--space-xxs) var(--space-lg);
}

.btn-outline:hover {
 background-color: var(--clr-card-hover);
 transform: translateY(-5px);
}

/* Glass Button */
.glass-btn {
   background: rgba(255, 255, 255, 0.18);
   backdrop-filter: blur(10px) saturate(140%);
   -webkit-backdrop-filter: blur(10px) saturate(140%);
   border: 1px solid rgba(255, 255, 255, 0.45);
   box-shadow: var(--shadow-sm);
   color: white;
   padding: var(--space-xs) var(--space-xlg);
 }
 
 .glass-btn::after {
   content: "";
   position: absolute;
   inset: 0;
 
   background: linear-gradient(to bottom,
       rgba(255, 255, 255, 0.45),
       rgba(255, 255, 255, 0.05) 40%,
       rgba(255, 255, 255, 0) 60%);
   pointer-events: none;
   border-radius: 7px;
 }
 
 .glass-btn:hover {
   background: rgba(255, 255, 255, 0.28);
   /* glass becomes clearer */
   border-color: rgba(255, 255, 255, 0.7);
   /* edge sharpens */
   transform: translateY(-2px);
   /* gentle lift */
 
   box-shadow:
 0 10px 20px rgba(0,0,0,0.18),
 inset 0 1px 0 rgba(255,255,255,0.6);
 }

 /* Arrow Button */
 .btn-arrow {
   color: var(--clr-text-accent);
   padding: 0;
  
 }
 
 .btn-arrow i {
   font-size: 1.3rem;
   opacity: 0.9;
   padding-left: var(--space-sm);
 }

 .btn-dark {
   background-color: var(--clr-secondary);
 }

/* ===========================
   Default Card
=============================*/
.card {
   border-radius: 18px;
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: all 0.3s ease;
   display: block;
   display: flex;
   flex-direction: column;
}

.card:hover {
   box-shadow: var(--shadow-md);
   transform: scale(1.01);
 }


/* ===========================
  Icon Card
=============================*/
.icon-card {
   display: flex;
   align-items: center;
   gap: var(--space-md);
   background: var(--clr-card);
   padding: var(--space-sm) var(--space-md);
   border-radius: 18px;
   box-shadow: var(--shadow-sm);
   transition: all 0.3s ease;
 }

 .icon-card.c2:hover {
   box-shadow: none;
   transform: none;
 }
 
 .icon-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-4px);
 }
 
 .icon-card-vertical {
   flex-direction: column;
   text-align: center;
   gap: var(--space-xs);
 }

 .icon-card-img {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   border: 1px solid var(--clr-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .c2.icon-card-img {
   border: 1px solid var(--clr-accent);
   width: 50px;
   height: 50px;
 }

 .icon-card-img img {
   width:50px;
   height: 50px;
 }

 .icon-card.c2 .icon-card-img img {
   width: 30px;
   height: 30px;
 }

 .icon-card.c2 {
   background: none;
   box-shadow: none;
   gap: var(--space-sm);
   text-align: left;
}

.icon-card.c2:first-child::after {
   content: "";
   position: absolute;
   right: -2.5rem;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   height: 70px;
   background: rgba(120, 120, 120, 0.2);
}


.bottom-nav h2 {
   font-size: 1.7rem;
}
.divider-after {
   position: relative;
}

.divider-after::after {
   content: "";
   position: absolute;
   right: 2rem;
   top: 50%;
   transform: translateY(-50%);
   width: 2px;
   height: 70px;
   background: rgba(120,120,120,0.18);
}

.div {
   margin-left: 4rem;
}

.icon-contact {
   display: flex;
   justify-content: center;
}

@media (max-width: 768px) {
   .icon-contact {
      flex-direction: column;
      align-items:center;
     
   }

   .icon-card.c2 {
      width: 100%;
      max-width: 320px;
  }

   .divider-after::after {
      display: none;
   }

   .div {
      margin-left: 0;
   }
}


 /* Service beenfits icon */
 .s-benefits .icon-card-img {
   border: none;
 }

 .s-benefits .icon-card-img img {
   width: 100px;
   height: 100px;
 }

 .s-benefits h3 {
   font-size: 1.2rem;
 }

 .s-benefits {
   max-width: 500px;
 }


/* ===========================
  Carousel Service Cards
=============================*/

 /* Carousel Cards */
 .card-service {
   flex: 0 0 350px;
   background: var(--clr-card-elevated);
 }

 .card-media img {
   width: 100%; 

   height: 220px;
   object-fit: cover
 }

 .card-service .card-content { 
   padding: var(--space-md);
 }

 .card-service.sp img {
   max-width: 350px;
 }

 .card-color {
   background: var(--clr-card);
 }


.carousel::-webkit-scrollbar {
   height: 5px;
   /* thin */
 }


 
 .carousel::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.05);
   border-radius: 20px;
 }
 
 .carousel::-webkit-scrollbar-thumb {
   background: var(--clr-primary);
   border-radius: 20px;
   opacity: 0.7;
   transition: all 0.3s ease;
 }
 
 .carousel::-webkit-scrollbar-thumb:hover {
   background: var(--clr-primary-hover);
   opacity: 0.75;
 }

 /* ===========================
  Container Highlight
=============================*/

.container-highlight {
   background:
     linear-gradient(to bottom,
       rgba(246, 239, 230, 0.98) 0%,
       rgba(246, 239, 230, 0.95) 18%,
       rgba(246, 239, 230, 0.85) 40%,
       rgba(246, 239, 230, 0.65) 60%,
       rgba(246, 239, 230, 0.38) 78%,
       rgba(246, 239, 230, 0.15) 90%,
       rgba(246, 239, 230, 0.00) 100%);
   padding: var(--space-xl) var(--space-lg);
   border-radius: 18px;
   transition: transform 0.3s ease;
 }
 
 
 @media (max-width: 850px) {
   .container-highlight {
 
     width: 100%;
     margin: 0;
   }
 }
 

 /* ===========================
  Value Cards
=============================*/


.value-card {
 display: flex;
 flex-direction: column;
 justify-content: center;
 background: var(--clr-card);
 border-radius: 18px;
 box-shadow: var(--shadow-sm);
 transition: all 0.3s ease;
 gap: var(--space-sm);
 text-align: center;
 justify-content: center;
 align-items: center;
 padding: var(--space-md);
}

.value-card-img img{
 display: block;
 width: 100%;
 height: auto; 
}

.value-card-img {
 height: 70px;
 width: 70px;
}

.value-card h3 {
 font-size: 1.2rem;
}

.value-card:hover {
 box-shadow: var(--shadow-md);
 transform: translateY(-4px);
}



 /* ===========================
  Overlay Cards
=============================*/
.overlay-card {
 max-height: 350px;
 position: relative
}

.overlay-card img {
 object-fit: cover;
}



.text-overlay-card {
 position: absolute;
 bottom: 25px;
 left: 0;
 right: 0;
 margin-inline: auto;
 width: fit-content;
 max-width: 400px;
 z-index: 2;
 display: flex;
 flex-direction: column;
 gap: var(--space-xs);
 align-items: center;
 justify-content: center;
 text-align: center;
 color: var(--clr-text-cta);
 padding-inline: var(--space-sm);

}

.text-overlay-card h3 {
 font-size: 1.7rem;
 color: var(--clr-text-cta);
}

.text-overlay-card p {
 text-align: left;
}

.overlay-card::after {
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.3);
 z-index: 1;
 pointer-events: none;
 overflow: hidden;
}

@media (max-width: 768px) {
 .text-overlay-card p {
   padding-left: var(--space-sm);
 }
}


.info-card {
 background: var(--clr-card);
}
.card-media img {
 max-height: 350px;
 object-position: center 70%;
}

.info-card-text h3 {
 font-weight: 600;
 font-size: 1.7rem;
}

.info-card-text {
 padding: var(--space-md);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: var(--space-sm);
}

.info-card-text p {
 margin-bottom: var(--space-xs);
}


.contact-layout {
   display: grid;
   gap: var(--space-xl);
   grid-template-columns: 1fr;
   position: relative;
   align-items: stretch;
   width: 100%;
}

@media (min-width: 768px) {
   .contact-layout {
       grid-template-columns: repeat(2, minmax(300px, 560px));
       justify-content: center;
   }

   .contact-layout .map-wrap {
       grid-column: 1 / -1;
       /* span both columns */
   }
}


/* ===========================
  Contact Section
=============================*/

.card-contact,
.form-card {
   background: rgba(246, 239, 230, 0.3);
   padding: var(--space-sm) var(--space-lg);
   backdrop-filter: blur(7px) saturate(110%);


}

.card-contact .card-content,
.form-card .card-content {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-inline: 0;
   text-align: left;
   width: 100%;
}

/* Contact items (icon + text) */
.contact-item {
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);

}

.contact-item i {
   color: var(--clr-text-accent);
   margin-top: 7px;
}

.contact-divider {
   height: 2px;
   background: var(--clr-accent);
   opacity: 0.4;
   margin-top: var(--space-md);
   margin-bottom:var(--space-lg);
}

.card-content h3 {
   margin-bottom: var(--space-sm);
}

.contact-card-row {
   position: relative;
}

@media (min-width: 800px) {
   .contact-card-row {
       grid-template-columns: repeat(2, 1fr);
   }
}


.botanical {
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 0;
   pointer-events: none;
   width: 100%;
   display: flex;
   justify-content: center;
}

.botanical img {
   width: min(520px, 60%);
   opacity: .35;
   max-height: 550px;
   filter: blur(.6px);
}

@media (max-width: 768px) {

   .botanical img {
       display: none;
   }
}

iframe {
   border-radius: 18px;
}


.contact-subhead {
   display: flex;
   align-items: center;
   gap: 1rem;
   justify-content: center;
   width: 100%;
}

.line {
   margin-top: 3px;
   flex: 1;
   height: 2px;
   background: var(--clr-text-accent);
   opacity: .3;
}

.contact-subhead h4 {
   font-size: 1.4rem;
}


.form-card form {
   display: grid;
   gap: .75rem;
   height: 100%;
}

.form-card form input,
.form-card form textarea {
   width: 100%;
   border-radius: 9px;
   border: 1px solid rgba(0, 0, 0, 0.10);
   background: rgba(255, 255, 255, 0.82);
   padding: .5rem .95rem;
   font-size: 1rem;
   outline: none;
}

.form-card form textarea {
   min-height: 70px;
   line-height: 1.1;
   resize: vertical;
}

.form-card input:focus,
.form-card textarea:focus {
   border-color: rgba(124, 139, 114, 0.75);
   box-shadow: 0 0 0 4px rgba(124, 139, 114, 0.18);
}

.form-submit {
   margin-inline: auto;
}

.hero-media {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.main-hero {
   height: 100svh;
}

.secondary-hero {
   height: 70svh;
}




.hero-overlay {
   position: relative;
   height: 100%;

}

.main-hero-overlay::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.3);
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
}

.secondary-hero-overlay::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.4);
}

.text-overlay {
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   margin-inline: auto;
   width: 100%;
}


.hero-title {
   letter-spacing: 0.05em;
   font-weight: 400;
   text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   text-align: center;
   font-size: clamp(2rem, 7vw, 4.1rem);
 }

 
 .hero-tagline {
   font-style: italic;
   font-weight: 300;
   text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   font-size: clamp(1.5rem, 5vw, 2.5rem);
   text-wrap: balance;
 }





/* Service Hero */

 
 .eyebrow-service i {
   padding-right: var(--space-sm);
 }
 
 .layout-split.service {
   min-height: 80svh;
 }
 
 .layout-split.service .split-content {
   display: flex;
   align-items: center;
   padding: var(--space-sm) var(--space-xl);
   position: relative;
   z-index: 2;
 }
 
 .service-card-text {
   margin-right: -120px; /* bleeds text into the faded image area */
 }
 
 .split-media.service img {
   height: 100%;
   display: block;
   width: 100%;
   object-fit: cover;
   -webkit-mask-image:
     radial-gradient(circle at 85% 50%, black 60%, transparent 100%),
     linear-gradient(to left, black 30%, transparent 100%);
   mask-image:
     radial-gradient(circle at 85% 50%, black 60%, transparent 100%),
     linear-gradient(to left, black 30%, transparent 100%);
   -webkit-mask-composite: source-over;
   mask-composite: intersect;
   filter: saturate(0.97) contrast(1.02);
 }
 

.text-icons {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: var(--space-xl);

}

.text-icon {
 display: flex;
 align-items: center;
 gap: var(--space-xs);
 white-space: nowrap;
}

.text-icon p {
 font-size: 1.2rem;
 letter-spacing: 0.02em;
 font-weight: 500;
 font-family: var(--Playfair);
}

.text-icon i{ 
 color:var(--clr-primary);
 font-size: 1.7rem;
}



 @media (max-width: 950px) {
   .layout-split.service {
     display: flex;
     flex-direction: column-reverse;
     gap: 0;
   
   }
 
   .layout-split.service .split-content {
     padding: var(--space-lg) var(--space-md);
   }
 
   .split-media.service img {
     -webkit-mask-image: none;
     mask-image: none;
     order: -1;
     object-fit: contain;
     padding-top: var(--space-lg);
     max-width: 90vw;

   }

   .split-media.service {
       height: 70svh;
   }
 
   .service-card-text {
     margin-right: 0;
     width: 95%;
   }

 }

 
 @media (max-width: 800px) {
   .text-icons {
      flex-wrap: wrap;
       gap: var(--space-lg);
       
   }

 }


 .cta-text-overlay {
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   text-align: center;
}

/* ===========================
   Media Frame
=============================*/

.split-media {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-sm);
 }
 
 .media-frame {
   position: relative;
   width: 100%;
 }
 
 .media-frame img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 18px;
   object-fit: cover;
   position: relative;
   z-index: 2;
 }
 
 /* decorative frame */
 
 .frame-right::after,
 .frame-left::after {
   content: "";
   position: absolute;
   inset: 0;
   border: 2px solid var(--clr-accent);
   border-radius: 18px;
   z-index: 1;
 }
 
 .frame-right::after {
   transform: translate(16px, -12px);
 }
 
 .frame-left::after {
   transform: translate(-16px, -12px);
 }
 
 .split-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
 /* mobile */
 
 @media (max-width: 800px) {
 
   .frame-left::after,
   .frame-right::after {
     display: none;
   }

   .media-frame {
      overflow: hidden;
   }

   .media-frame img {
     border: 3px solid var(--clr-accent);
     height: auto;
     max-height: 350px;
     width: auto;
     margin-inline: auto;
   }
   
 
 }


 
 .founder img {
   max-height: 500px;
 }

/* ===========================
   Nav Bar
=============================*/
.site-header {
   background: rgba(124, 139, 114, 0.82);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   padding-block: var(--space-xs);
   font-size: 1.07rem;
   position: sticky;
   top: 0;
   z-index: 1000;
   color: var(--clr-text-cta);
   font-weight: 500;
   will-change: transform;
}

/* Logo*/
.brand {
   display: flex;
   align-items: center;
}

.brand img {
   width: 5rem;
}

/* Nav Layout */
.nav-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.container.nav-bar {
   width:min(95%, 1400px);
}

.nav-main,
.nav-actions {
   display: flex;
   gap: var(--space-lg);
   align-items: center;
}

.nav-actions {
   position: relative;
}

.nav-phone {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   gap: var(--space-xs);
}

.nav-phone i {
   font-size: 1.3rem;
}

/* Desktop menu */
.nav-menu {
   display: flex;
   gap: var(--space-md);
   align-items: center;
}

/* Dropdown (desktop hover) */
.has-dropdown {
   position: relative;
}

/* Desktop dropdown base */
.dropdown {
   position: absolute;
   top: calc(100% + 0.1rem);
   left: 0;
   min-width: 240px;
   background: var(--clr-card-elevated);
   border-radius: 7px;
   box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
   opacity: 0;
   visibility: hidden;
   transform: translateY(6px);
   transition: opacity .3s ease, transform .3s ease;
   pointer-events: none;
}

/* Hover state */
.has-dropdown:hover>.dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   pointer-events: auto;
}


.dropdown a {
   display: block;
   position: relative;
   padding: .8rem 1.4rem;
   font-size: 0.95rem;
   color: var(--clr-text-body);
   opacity: 1;
   transition: all .3s ease;
}

.dropdown a:hover {
   background: var(--clr-card-elevated-hover);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
   border-left: 3px solid var(--clr-primary);
   border-radius: 7px;
}

.dropdown a::before {
   display: block;
   padding: .8rem 1.4rem;
   font-size: 0.95rem;
   color: var(--clr-text-body);
   transition: all .25s ease;
}

.dropdown a:hover::before {
   height: 60%;
}

.dropdown li+li {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-toggle {
   background: none;
   border: none;
   color: var(--clr-text-cta);
   font: inherit;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: .4rem;
   font-size: 1.1rem;
}



/* Hamburger */
.hamburger {
   display: none;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0.4rem;
}

.hamburger span {
   display: block;
   width: 26px;
   height: 2px;
   background: var(--clr-text-cta);
   color: var(--clr-text-cta);
   margin: 5px 0;
   transition: transform 0.35s ease, opacity 0.35s ease;
   border-radius: 3px;
}


@media (max-width: 850px) {

   /* Show hamburger */
   .hamburger {
       display: block;
   }

   /* Stack nav */
   .nav-menu {
       display: none;
       position: absolute;
       top: 100%;
       right: 0;
       width: 100%;
       flex-direction: column;
       background: rgba(124, 139, 114, 0.98);
       padding: var(--space-lg) 0;
       gap: 0;
   }

   .nav-menu.open {
       display: flex;
   }

   .nav-menu>li {
       width: 100%;
   }

   .nav-menu>li>a,
   .nav-menu .dropdown-toggle {
       width: 100%;
       padding: var(--space-sm) var(--space-md);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }


   /* Mobile dropdown */

   .dropdown {
       position: static;
       display: none;
       box-shadow: none;
       border-radius: 0;
       border-left: 2px solid var(--clr-border);
       opacity: 1;
       visibility: visible;
       transform: none;
       pointer-events: auto;
   }

   .has-dropdown.open>.dropdown {
       display: block;
   }

   .dropdown a {
       padding: var(--space-xs) var(--space-lg);
   }

   .nav-menu a::after,
   .nav-menu .dropdown-toggle::after {
       content: none;
   }

   /* Top-level menu items only (Home, About, Services button, etc.) */
   .nav-menu>li>a:active,
   .nav-menu>li>a:hover,
   .nav-menu>li>.dropdown-toggle:active,
   .nav-menu>li>.dropdown-toggle:hover {
       background: rgba(255, 255, 255, 0.15);
   }

   .dropdown a:active,
   .dropdown a:hover {
       background: var(--clr-card-hover);
   }


   .phone-text {
       display: none;
   }

   .nav-main,
   .nav-actions {
       gap: var(--space-sm);
   }
}












/* ===========================
  Footer
=============================*/
footer {
   background: var(--clr-secondary);
   color: var(--clr-text-cta);
   padding-top: var(--space-xl);
}

footer h4 {
   color: #f1e8d1;
   font-weight: 500;
   letter-spacing: 0.02em;
   font-size: 1.2rem;
}
.footer-grid {
   display: grid;
   grid-template-columns: 240px 1fr;
   justify-content: center;
   padding-bottom: var(--space-xl);
   gap: var(--space-xl);
}

.footer-brand img {
   border-radius: 18px;
}

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

   .footer-brand img{
       margin-inline: auto;
       max-width: 250px;
       height: auto;
   }

}
.info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--space-xl);
 
}

@media (max-width: 900px) {
   .info-grid {
       margin-inline: auto;
   }
}

.footer-col {
   display: flex;
   flex-direction: column;
 
}

.col-content {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin-top: var(--space-sm);
}

.col-content-contact {
   gap: var(--space-md);
}

/* Socials */
.socials {
   display: flex;
   gap: .7rem;
}

.social {
   width: 34px;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   background: rgba(255, 255, 255, .10);
   color: rgba(255, 255, 255, .92);
   text-decoration: none;
   box-shadow: var(--shadow-sm);
   transition: all 0.3s ease;
}

.social:hover {
   transform: translateY(-1px);
   background: rgba(255, 255, 255, .16);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .14);
   padding: .95rem 0;
   background: rgba(0, 0, 0, 0.10);
}

.footer-bottom p {
   max-width: min(1100px, 95%);
   margin: 0 auto;
   color: rgba(255, 255, 255, .72);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: .55rem;
   text-align: center;
   font-family: var(--Playfair);
}


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

/* ===========================
   Section header
=============================*/
.section-header {
   text-align: center;
}

.section-header-inner {
   display: inline-block;
   text-align: left;
}


.eyebrow {
   display: block;
   color: var(--clr-accent);
   font-weight: 600;
}

.eyebrow.cta {
 text-align: center;

}

.heading-divider {
   width: clamp(120px, 20vw, 250px);
   height: 3px;
   background: var(--clr-accent);
   opacity: 0.5;
   margin-inline: auto;
   margin-top: var(--space-sm);
}

.heading-divider.cta {
 width: 75px;
 background: var(--clr-secondary);
 opacity: 1;
}


@media (max-width: 768px) {
   .section-header-inner {
       text-align: center;
   }
}


.mini-section {
   text-align: center;
}

.mini-section h3 {
   font-size: 1.7rem;
   font-weight: 600;
   margin-bottom: -0.2rem;
}

.mini-section .tagline {
   font-size: 1.5rem;
}







/* ===========================
    Tagline
 =============================*/
.tagline {
   display: block;
   font-family: "Playfair Display", serif;
   font-size: 1.2rem;
   line-height: 1.5;
   color: var(--clr-text-accent);
   font-style: italic;
   text-align: center;
   letter-spacing: 0.02em;
   max-width: 40ch;
   margin-inline: auto;
   font-weight: 500;
}

.tagline.long-tagline {
   max-width: 70ch;
}



/* ===========================
Dividers
=============================*/

/* Section divider */
.section-divider {
   display: flex;
   width: 100%;
   justify-content: center;
   align-items: center;
   padding-block: var(--space-xl);
 }
 
 
 .divider-icon {
   width: 19rem;
   height: auto;
   display: block;
   margin-inline: auto;
 }
 
 .divider-line {
   flex: 1;
   min-width: 0;
   height: 1.1px;
   background-color: var(--clr-accent);
   opacity: 0.5;
   transform: translateY(3.9px);
 }


 /* ===========================
Signature Divider
=============================*/

 h4.signature {
   font-family:"Italianno", sans-serif;
   display: inline-block;
   font-size: 3rem;
   color: var(--clr-text-muted);
}

.contact-subhead {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: var(--space-sm);
   margin-top: var(--space-sm);
   justify-content: center;
   width: 100%;
}

.line {
   flex: 1;
   height: 2px;
   background: var(--clr-text-accent);
   opacity: .3;
}

.nav-cta {
   font-size: 1.7rem;
   font-weight: 300;
}



/* Bottom Navigation */
.bottom-nav {
   margin-bottom: -3rem;
   text-align: center;
   margin-inline: auto;
 }
 
 .bottom-nav span {
   padding: 0 var(--space-sm);
   color: var(--clr-text-accent);
 }
 
 .bottom-nav a {
   color: var(--clr-text-body);
 }
 
 .bottom-nav a:hover,
 .bottom-nav a:active {
   color: var(--clr-text-accent);
 }
 
 .bottom-nav h4 {
   font-size: 1.4rem;
 }
 
 @media (max-width: 768px) {
   .bottom-nav span {
     display: none;
   }
 
   .bottom-nav p {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: var(--space-sm);
   }
 }


 .conditions-list {
   list-style: none;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px 30px;





 }
 
 .conditions-list li {
   position: relative;
   padding-left: 19px;
 }
 
 /* subtle accent marker */
 .conditions-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 10px;
   width: 6px;
   height: 6px;
   background: var(--clr-accent);
   border-radius: 50%;
 }


 .procedure {
   display: flex;
   flex-direction: column;
   gap: 50px;
   position: relative;
  
 }
 
 /* EACH ROW */
 .p-item {
   display: flex;
   align-items: center;
   gap: 24px;
   position: relative;
 }
 
 /* ICON */
 .p-icon {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   border: 1px solid rgba(168, 153, 117, 0.35);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   background: var(--clr-card-elevated);
 }
 
 .p-icon img {
   width: 50px;
   height: 50px;
   opacity: 0.7;
 }
 
 .procedure::before {
   content: "";
   position: absolute;
   top: 45px;
   bottom: 45px;
   left: 45px;
   width: 1.5px;
 
   background: linear-gradient(
     to bottom,
     rgba(168,153,117,0.4),
     rgba(168,153,117,0.1)
   );
 }
 
 /* TEXT */
 .p-text h3 {
   font-size: 1.6rem;
   margin-bottom: var(--space-xs);
   color: #494439;
 }

 .ctah2 {
   color:#494439;
 }

 .pcta {
   max-width: 500px;
 }
 

 .tapered-divider {
   width: 80%;
   height: 1px;
   margin-top: var(--space-xl);
   margin-inline: auto;
   background: linear-gradient(
     to right,
     transparent,
     rgba(168,153,117,0.5),
     transparent
   );
 }

 .disclaimer {
   color: var(--clr-text-muted);

   margin-top: var(--space-xs);
 }
 /* Testimonial Card */
.testimonial-card {
   padding: var(--space-md) var(--space-lg);
   background: var(--clr-card-elevated);
   display: flex;
   flex-direction: column;
   align-items: center;
   width: min(900px, 90%);
 }
 
 
 
 .testimonial-card i {
   font-size: 3rem;
   color: var(--clr-accent);
   opacity: 0.7;
   margin-bottom: var(--space-sm);
 }
 
 .testimonial-card p {
   text-align: left;
 }
 
 .testimonial-slider {
   overflow: hidden;
   position: relative;
   width: 100%;
 
 }
 
 .testimonial-track {
   display: flex;
   transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
   will-change: transform;
 }
 
 .testimonial-slide {
   min-width: 100%;
   display: flex;
   justify-content: center;
   padding-inline: 50px;
 
 }
 
 .testimonial-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 
   background: none;
   border: none;
 
   font-size: 3rem;
   color: var(--clr-accent);
 
   cursor: pointer;
   padding: var(--space-xs);
   z-index: 10;
   opacity: 0.6;
   transition: opacity 0.3s ease, transform 0.2s ease;
 }
 
 .testimonial-btn.prev {
   left: 50px;
 }
 
 .testimonial-btn.next {
   right: 40px;
 }
 
 @media (max-width: 1200px) {
   .testimonial-btn.prev {
     left: 5px;
   }
 
   .testimonial-btn.next {
     right: 5px;
   }
 }
 
 .testimonial-dots {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: var(--space-md);
 
 }
 
 .testimonial-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--clr-accent);
   opacity: 0.3;
   cursor: pointer;
   transition: opacity 0.3s ease, transform 0.2s ease;
 }
 
 .testimonial-dot.active {
   opacity: 0.7;
   transform: scale(1.2);
 }


 .paragraph-divider {
   display: block;
   width: 120px;
   margin-inline: auto;
   height: 2px;
   background: var(--clr-accent);
   opacity: 0.5;
   align-self: center;
   margin-top: var(--space-md);
 }

 @media (max-width: 768px) {

   .testimonial-card {
     width: 100%;
     padding: var(--space-md) var(--space-md);
   }
 
   .testimonial-slide {
       padding-inline: 16px;
     }

   .testimonial-btn {
       display: none;
     }
   
 
 }
 


 /* FAQs */
 .faq-list {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: var(--space-md);
   max-width: 700px;
   margin-inline: auto;
 }
 
 .faq-item {
   border: 1px solid var(--clr-border);
   border-radius: 7px;
   background: var(--clr-card-elevated);
   
 }
 
 .faq-question {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--space-sm) var(--space-md);
   background: none;
   border: none;
   font-family: var(--Playfair);
   font-size: 1.15rem;
   font-weight: 500;
   color: var(--clr-text-heading);
   cursor: pointer;
   text-align: left;
 }
 
 .faq-icon {
   font-size: 1.5rem;
   transition: transform 0.3s ease;
   color: var(--clr-primary);
 }
 
 .faq-item.active .faq-icon {
   transform: rotate(45deg);
 }
 
 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .faq-item.active .faq-answer {
   border-top: solid 2px var(--clr-border);
   background: var(--clr-card-elevated-hover);
 }
 
 .faq-answer p {
   padding: var(--space-sm) var(--space-md);
   color: var(--clr-text-body);
   line-height: 1.75;
 }

 .vagaro {
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
}

.vagaro iframe {
   width: 100% !important;
   min-width: 1200px !important;
   height: 1400px !important;
   border: none;
}


.privacy-content ul {
   list-style-type: square;
 }
 
 .privacy-content ul > li > ul {
   list-style-type: circle;
 }
 
 .privacy-content ul > li > ul > li > ul {
   list-style-type: square;
 }
 
 .privacy-content ol li {
   font-family: 'DM Sans', sans-serif;
 }
 .privacy-content {
   max-width: 900px;
   margin-inline: auto;
   line-height: 1.8;
   color: #595959;
}

.privacy-content * {
   font-family: 'DM Sans', sans-serif;
}

.privacy-content h1,
.privacy-content h2,
.privacy-content h3,
.privacy-content h4 {
   font-family: 'Playfair Display', serif;
   color: #2f3a2f;
   margin-top: 2rem;
}

.privacy-content a {
   color: #9F8A5C;
}

.privacy-content ul,
.privacy-content ol {
   padding-left: 1.5rem;
}