
/*  VARIABLES & RESET */
 :root { --cream: #fbf8f4; --brown: #6B4226; --charcoal: #2a2622; --white: #ffffff; --border-light: rgba(42,38,34,.2); --font-serif: 'Playfair Display',serif; --font-sans: 'Inter',sans-serif; --space-sm: 6px; --space-md: 12px; --space-lg: 20px; --space-ml: 26px; --space-xl: 38px; --space-xxl: 64px; --space-xxxl: 120px }
* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--charcoal); background-color: var(--cream); overflow-x: hidden !important }
img { max-width: 100%; height: auto; display: block; object-fit: cover }
iframe { width: 100%; border: 0 }
body::-webkit-scrollbar,.mobile-nav::-webkit-scrollbar { width: 10px }
body::-webkit-scrollbar-track,.mobile-nav::-webkit-scrollbar-track { background: var(--cream) }
body::-webkit-scrollbar-thumb,.mobile-nav::-webkit-scrollbar-thumb { background-color: var(--brown); border-radius: 5px; border: 2px solid var(--cream) }
@supports (scrollbar-color:auto) { body { scrollbar-color: var(--brown) var(--cream); scrollbar-width: thin }}

/*  TYPOGRAPHY */
 h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 2px }
h1 {font-size: 45px;margin-bottom: var(--space-md);}
h2 { font-size: 34px; text-align: center }
h3 { font-size: 16px }
p {margin-bottom: var(--space-md);}
a:hover { color: #555 }
a:focus-visible,.btn:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px }
ul {margin-bottom: var(--space-md);}
.text-link { color: var(--charcoal); font-weight: 500; text-decoration: underline }
.small-print { font-size: 12px;  }
.urgency-text { font-size: 12px; text-align: center; margin-top: var(--space-lg); max-width: none }
@media(max-width: 768px) { h1 { font-size: 24px }
h2 { font-size: 20px }
.mobile-text-center { text-align: center }
.mobile-text-center p { margin-left: auto; margin-right: auto }}


/*  SPLIT LAYOUT SYSTEM (GRID) */
 .split-layout {display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-xl);align-items: flex-start;width: 100%}
.split-layout__content {display: flex;flex-direction: column;height: 100%;flex-wrap: wrap;gap: 20px;place-content: center;}
/* .split-layout__content > *:not(:first-child) { margin-top: var(--space-ml) } */
.split-layout__visual { display: flex; flex-direction: column; height: 100%; min-height: 0 }
@media(max-width: 768px) { .split-layout { display: flex; flex-direction: column; gap: var(--space-xl) }
.split-layout__content { align-items: center }
.split-layout__content > *:not(:first-child) { margin-top: var(--space-sm) }
.mobile-order-1 { order: 1 }
.mobile-order-2 { order: 2 }}

/*  COMPONENT: FEATURE GRID (3 Images - Full Height) */
 .feature-grid { display: flex; flex-direction: column; gap: var(--space-md); height: 100%; width: 100% }
.feature-grid__primary { flex: 1 1 auto; position: relative; min-height: 200px; }
.feature-grid__primary img { 
/*  position: absolute; */
 aspect-ratio: 1; inset: 0; width: 100%; height: 100%; object-fit: cover }
.feature-grid__secondary { display: flex; gap: var(--space-md); flex: 0 0 auto }
.feature-grid__secondary img { flex: 1; width: 0; aspect-ratio: 1; object-fit: cover }

/*  COMPONENT: MEDIA STACK (Video + Rows - Auto Height) */
 .media-stack {display: flex;flex-direction: column;gap: var(--space-lg);width: 100%}
.media-stack__row { display: flex; gap: var(--space-md); width: 100% }
.media-stack__row > img, .media-stack__row > .video-cover { flex: 1; width: 0; aspect-ratio: 16/9; object-fit: cover }
@media(max-width: 768px) { .media-stack, .media-stack__row { gap: var(--space-sm) }
.media-stack__row.mobile-stack { flex-direction: column }
.media-stack__row.mobile-stack > img { width: 100%; height: auto }}

/*  VISIBILITY HELPERS */
 @media(min-width: 769px) { .hide-desktop { display: none !important }}
@media(max-width: 768px) { .hide-mobile { display: none !important }}

/*  BUTTONS */
 .btn { display: inline-flex; align-items: center; justify-content: center; background-color: #000; color: #FFD9FF; font-family: var(--font-sans); font-weight: 500; text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; padding: 12px 24px; border: 2px solid #000; transition: all .3s ease; cursor: pointer }
.btn:hover { background-color: #FFD9FF; color: #000 }
.btn-inverted { background-color: #FFD9FF !important; color: #000 !important }
.btn-inverted:hover { background-color: #000; color: #FFD9FF }
.btn-overlay { background-color: rgba(255,255,255,0.14); border-color: #fff; color: #fff }
.btn-overlay:hover { background-color: #fff; color: #000 }

/*  HEADER & NAV */
 .main-header { padding: var(--space-md) 0; border-bottom: 1px solid var(--border-light) }
.header-content { display: flex; justify-content: space-between; align-items: center; gap: 20px }
.logo { font-family: var(--font-serif); font-size: 20px; text-decoration: none; color: var(--charcoal) }
.main-nav { display: flex; gap: var(--space-xl) }
.main-nav a { color: var(--charcoal); text-decoration: none; padding-bottom: var(--space-sm); border-bottom: 2px solid transparent }
.main-nav a:hover,.main-nav a.active { border-bottom-color: var(--charcoal) }
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001 }
.hamburger-btn svg { width: 32px; height: 32px; stroke: var(--charcoal) }
.mobile-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cream); z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-xl); transform: translateX(100%); transition: transform .3s ease-in-out }
.mobile-nav a { font-size: 20px; text-decoration: none; color: var(--charcoal) }
body.mobile-nav-open .mobile-nav { transform: translateX(0) }
body.mobile-nav-open { overflow: hidden }
@media(max-width: 768px) { .main-nav,.header-cta-wrapper { display: none }
.hamburger-btn { display: block }}

/*  HERO SECTION */
 .hero-checklist { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md) }
.hero-checklist li { display: flex; align-items: center; gap: var(--space-md); font-size: 15px; font-weight: 500; padding: var(--space-sm) 0 }
.logo-list-row { display: flex; flex-direction: row; align-items: center; width: 100% }
#hero .contact-logo {width: 50%;display: flex;justify-content: center;align-items: center;}
#contact .contact-logo {width: 30%;display: flex;justify-content: center;align-items: center;}
.hero-ctas-wrapper { width: 100%; text-align: center; margin-top: var(--space-xl) }
.hero-ctas {display: flex;gap: var(--space-md);justify-content: center;/* margin-top: auto; */padding-top: var(--space-ml)}
.mobile-hero-img { width: 100%; max-height: 360px; object-fit: cover; object-position: 0% 20%; margin: .75rem 0 }
@media(max-width: 768px) { .hero-ctas .btn { width: 100% }}
@media (max-width: 420px) { .logo-list-row { align-items: flex-start; gap: var(--space-md) }
.hero-checklist { font-size: clamp(12px, 1.6vw, 15px) }
.hero-checklist li { gap: clamp(6px, 1vw, 12px); padding: 2px 0 }
.hero-checklist img { width: clamp(16px, 2.2vw, 24px) }
.contact-logo { margin-left: auto; align-items: flex-start }}

/*  TESTIMONIALS */
 .testimonial-grid { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center }
.testimonial-grid > * { flex: 1 1 300px; min-width: 260px }
.testimonial-card { text-align: center }
.testimonial-card img { display: block; width: 100%; margin-bottom: var(--space-md); aspect-ratio: 1; object-fit: cover }
.testimonial-card blockquote { font-family: var(--font-serif); font-style: italic; font-size: 16px; margin-bottom: var(--space-sm) }
.testimonial-card cite { display: block; font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 12px; color: #777 }
@media(max-width: 960px) { .testimonial-card img { max-height: 360px }}
@media(max-width: 768px) { .testimonial-grid > * { flex: 1 1 calc((100% - var(--space-md)) / 2); min-width: 220px }
.testimonial-grid .testimonial-card:nth-child(3) { flex-basis: 100% }}
.centered-content h2 { margin-bottom: 20px }
h2 { margin-bottom: 20px }

/*  ABOUT SECTION */
 .about-text-section p { margin-bottom: var(--space-md) }
.image-pos-top { object-position: center top }
.image-pos-bottom { object-position: center bottom }
.image-pos-center { object-position: center center }
.speak-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) }
.speak-bullets { display: flex; flex-direction: column; justify-content: center }
.speak-img img {width: 100%;aspect-ratio: 4/3;object-fit: cover;display: block}
.speak-bullets .detail-includes-list li{margin-bottom:10px}
@media(max-width: 900px) { .speak-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media(max-width: 768px) { .speak-grid-3 { grid-template-columns: 1fr } }
.video-cover { position: relative; display: block; width: 100%; border: none; background: none; cursor: pointer; overflow: hidden; min-height: 260px; padding: 0 }
.video-cover-img { transition: transform .25s ease, filter .25s ease; width: 100%; height: 100%; object-fit: cover }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.40)); pointer-events: none; transition: opacity .25s ease }
.video-title { position: absolute; top: 14px; left: 16px; color: #fff; font-size: 18px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.6); pointer-events: none; max-width: 85%; text-align: left }
.video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; background: rgba(0,0,0,0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background .25s ease, transform .25s ease }
.video-cover:hover .video-cover-img { filter: brightness(0.85); transform: scale(1.02) }
.image-modal-trigger { cursor: zoom-in }

/*  IMAGE MODAL */
.image-modal { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.85); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 10000; touch-action: pan-y; pointer-events: auto; user-select: none }
.image-modal__backdrop { position: absolute; inset: 0; z-index: 0 }
.image-modal.is-open { display: flex }
.image-modal__content { position: relative; max-width: 92vw; max-height: 92vh; z-index: 1; user-select: none }
.image-modal__img { max-width: 92vw; max-height: 92vh; display: block; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); user-select: none; -webkit-user-drag: none; }
.image-modal__img.is-dragging { transition: none }
.image-modal__close { position: absolute; top: -16px; right: -16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--white); color: #222; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25); user-select: none; z-index: 2 }
.image-modal__nav { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; gap: 12px }
.image-modal__nav-btn { width: 40px; height: 40px; border: 0; border-radius: 6px; background: var(--white); color: #222; font-size: 20px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25) }
.video-cover:hover .video-play-icon { background: rgba(0,0,0,0.75); transform: translate(-50%, -50%) scale(1.08) }
.video-embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; aspect-ratio: 2 }
@media(max-width: 768px) { .about-text-section { text-align: center }
.about-text-section p { max-width: 90%; margin-left: auto; margin-right: auto }}

/*  PROCESS SECTION */
 .process-list { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-xl); max-width: 800px; margin-left: auto; margin-right: auto }
.process-step { display: flex; align-items: flex-start; gap: var(--space-xl); text-align: left; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border-light); width: 100% }
.process-step:last-child { border-bottom: none }
.step-number { font-family: var(--font-serif); font-size: 48px; color: var(--brown); line-height: 1; margin-right: var(--space-lg); min-width: 50px; text-align: right }
.step-note { display: block; margin-top: var(--space-sm); font-size: 0.9em; color: #555 }
@media(max-width: 768px) { .process-step { flex-direction: column; text-align: center; gap: var(--space-md); align-items: center }
.step-number { margin-right: 0 }}

/*  PRICING SECTION */
 .detail-includes-list {margin-top: var(--space-sm);padding-left: 1.25rem;column-gap: var(--space-xxl);}
.services-box { background-color: #e1ccbe; padding: var(--space-xl); border-radius: 8px; margin-top: var(--space-xl) }
.pricing-grid { display: flex; gap: var(--space-lg); justify-content: center }
.service-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); padding: var(--space-lg); background: var(--cream); border: 2px solid #000 }
.service-header { min-height: 100px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; margin-top: 20px }
.service-price { font-family: var(--font-serif); font-size: 56px; line-height: 1.1; margin-bottom: var(--space-lg) }
.service-price del { color: #999; font-size: 32px; display: block }
.service-title { font-family: var(--font-serif); font-size: 24px; text-transform: none; letter-spacing: 0 }
.service-desc ul { list-style: none; padding: 0; margin-bottom: 2rem; line-height: 1.8 }
.service-item .btn { margin-top: auto; width: 100% }
.promo-card { background: #f8f1e9; border-color: var(--brown) }
.promo-card .btn { background-color: var(--brown); border-color: var(--brown); color: var(--cream) }
.promo-card .btn:hover { background-color: transparent; color: var(--brown) }
@media(max-width: 768px) { .detail-includes-list { column-count: 1; padding-left: 0; list-style-position: inside }
.services-box { padding: 0; background: none }
.pricing-grid { flex-direction: column; gap: var(--space-sm) }
.service-header { margin-top: 0 }}

/*  QUOTE SECTION */
 #quote { min-height: 50vh; display: flex; align-items: center; justify-content: center; position: relative; background-color: var(--charcoal);  background-size: cover; background-position: center; color: var(--white); text-align: center; padding: var(--space-xxxl) var(--space-lg) }
#quote::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.6) }
.quote-content { position: relative; z-index: 1; max-width: 80%; display: flex; flex-direction: column; align-items: center }
.quote-text { font-size: clamp(26px, 5vw, 38px); font-family: var(--font-serif); text-shadow: 0 2px 4px rgba(0,0,0,.5) }

/*  CONTACT SECTION */
 .contact-info-item { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); width: 100% }
.contact-info-item svg { width: 24px; height: 24px; color: var(--brown) }
.contact-footer-row { width: 100%; display: flex; align-items: center; justify-content: space-between }
.contact-footer-row .links {width: 60%;}
#contact .contact-logo {width: 40%;display: flex;justify-content: flex-end;}
.contact-email-row { display: flex; gap: 10px; align-items: center }
.social-icons { display: flex; gap: var(--space-lg); align-items: center; margin-top: var(--space-ml) }
.social-icons svg { width: 32px; height: 32px; color: var(--charcoal); transition: transform .2s }
.social-icons a:hover svg { color: #555; transform: scale(1.1) }
#contact-form { margin: 2rem auto 0; padding: 1rem 0; border: 1px solid #888; width: 100%; background: #fff; max-height: 540px; overflow: hidden }

/*  FOOTER */
 .main-footer { padding: var(--space-xl) var(--space-lg); border-top: 1px solid var(--border-light) }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-lg) }
.footer-bottom { text-align: center; font-size: 12px }
@media(max-width: 768px) { .footer-content { flex-direction: column; text-align: center }}

/*  CALENDLY POPUP */
 .calendly-popup-overlay { position: fixed; inset: 0; background: rgba(42,38,34,0.8); z-index: 9999; display: none; justify-content: center; align-items: center; padding: 20px }
.calendly-popup-container { position: relative; width: 100%; max-width: 1024px; height: 90%; max-height: 720px; background: var(--white); border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.3); overflow: hidden; display: none }
.calendly-popup-close-btn { position: absolute; top: 5px; right: 10px; background: none; border: none; font-size: 32px; color: #555; cursor: pointer; z-index: 10001 }
.calendly-inline-widget { width: 100%; height: 100% }


/*  LAYOUT UTILITIES OVERRIDES */
 .container { max-width: 1200px; margin: 0 auto; padding-left: var(--space-lg); padding-right: var(--space-lg) }
.shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg) }
.centered-content { max-width: 900px; margin: 0 auto; text-align: center }
.section-pad { padding-top: var(--space-xl); padding-bottom: var(--space-xl) }
.section-pad-sm { padding-top: var(--space-ml); padding-bottom: var(--space-ml) }
.section-pad-lg { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl) }
.bg-cream { background-color: var(--cream) }
.bg-alt { background-color: #f8f1e9 }
.mb-sm { margin-bottom: var(--space-sm) }
.mb-lg { margin-bottom: var(--space-lg) }
.mt-xl { margin-top: var(--space-xl) }
.mx-auto { margin-left: auto; margin-right: auto }
.justify-start { justify-content: flex-start }
.flex-place-spacebetween {place-content:space-between; gap:0}
.nogap {gap:0}
 .split-layout.columns-2-3 { grid-template-columns: 2fr 3fr;}
 .split-layout.columns-3-2 { grid-template-columns: 3fr 2fr;}

