:root {
  /* Colors - Untouched */
  --color-bg-primary: #D9E8F5;
  --color-bg-secondary: #F0F7FA;
  --color-text-primary: #1A2F4C;
  --color-text-secondary: #4A6D8C;
  --color-accent: #6BA4CC;
  
  /* Typography - Untouched */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Outfit', sans-serif;

  /* Spacing System (Strict 8pt/4pt linear scale) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 256px;
  --space-7xl: 320px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* =========================================
   LAYOUT WRAPPERS & SECTIONS
   ========================================= */

.section-hero {
  background-color: var(--color-bg-primary);
  /* Replaced arbitrary 40px with a very tight 8px token for top padding */
  padding: var(--space-xs) var(--space-md) var(--space-7xl) var(--space-md);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Replaced navbar bottom margin with parent Flex gap */
  gap: var(--space-4xl); 
}

.section-services {
  background-color: var(--color-bg-secondary);
  /* Top padding clears overlapping image */
  padding: var(--space-6xl) var(--space-md) var(--space-xl) var(--space-md);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-footer {
  background-color: var(--color-bg-primary);
  padding: var(--space-3xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================
   HERO IMAGE OVERLAP
   ========================================= */

.hero-image-container {
  position: absolute;
  /* Snapped -225px to -224px (8pt grid: 8 * 28) */
  bottom: -224px; 
  /* Calc accounts for horizontal section padding (24px * 2) */
  width: calc(100% - var(--space-2xl)); 
  max-width: 1040px;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.hero-image {
  width: 100%;
  /* Snapped 450px to 448px (8pt grid: 8 * 56) */
  height: 448px; 
  object-fit: cover;
  border-radius: var(--space-sm);
  box-shadow: 0 20px 40px rgba(38, 28, 20, 0.15);
}

/* =========================================
   TYPOGRAPHY & CONTENT BLOCKS
   ========================================= */

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Removed individual margins from leaf text nodes, pushed to parent gap */
  gap: var(--space-md); 
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  /* Margin removed in favor of parent flex gap */
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  line-height: 1.4;
  /* Margin removed in favor of parent flex gap */
}

.services-content {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Replaced title margin with parent gap */
  gap: var(--space-2xl); 
}

.services-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  /* Margin removed */
}

/* =========================================
   BUTTONS
   ========================================= */

.hero-buttons {
  display: flex;
  /* 16px gap */
  gap: var(--space-sm); 
  justify-content: center;
}

.btn {
  /* Standardized to 12px (4pt scale) and 32px (8pt scale) */
  padding: 12px var(--space-lg); 
  border-radius: var(--space-xl);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  font-family: var(--font-sans);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

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

.btn-primary {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.btn-secondary {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid rgba(38, 28, 20, 0.15);
}

/* =========================================
   CARDS GRID
   ========================================= */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 24px gap */
  gap: var(--space-md); 
  width: 100%;
}

.card {
  height: auto;
  border-radius: var(--space-sm);
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-lg); 
  box-shadow: 0 10px 30px rgba(38, 28, 20, 0.03);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(38, 28, 20, 0.12);
}

.card-dark {
  background-color: var(--color-bg-primary);
}

.card-medium {
  background-color: #E4F0F7;
}

.card-light {
  background-color: var(--color-bg-secondary);
}

.card-img {
  width: 100%; 
  aspect-ratio: 1 / 1; 
  height: auto;
  object-fit: cover;
  object-position: top;
  border-radius: var(--space-xs); 
  transition: filter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: brightness(0.95) contrast(1.02);
}

.card:hover .card-img {
  filter: brightness(1.05) contrast(1.1);
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  width: 100%;
}

.card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.card-price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: #1B75BC; /* Brand Blue */
}

.card-desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* =========================================
   NAVIGATION & FOOTER
   ========================================= */

.navbar {
  width: 100%;
  max-width: 100%; /* Pushed to extreme edges */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom removed, pushed to parent section flex gap */
}

.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.custom-logo-img {
  height: 110px;
  width: auto;
  object-fit: contain;
}

.brand-icon {
  position: relative;
  margin-left: -15px;
  margin-bottom: -15px;
  z-index: 10;
  pointer-events: none;
}

.brand-icon svg {
  width: 150px;
  height: 75px;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  transform: scaleY(1.15);
  transform-origin: bottom left;
  margin-bottom: 5px;
}

.text-blue {
  color: #1B75BC;
}

.text-dark {
  color: #333333;
}

.brand-subtitle {
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 700;
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.nav-links {
  display: flex;
  gap: var(--space-xl); /* 40px gap */
}

.nav-links a {
  text-decoration: none;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 0.6;
}

/* =========================================
   FOOTER SECTION
   ========================================= */

.section-footer {
  background-color: var(--color-bg-primary);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid rgba(68, 43, 27, 0.25);
}

.footer-container {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Replaced by .brand-logo */

.footer-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.footer-text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.footer-link {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.footer-link:hover {
  opacity: 0.7;
}

.footer-hours {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--color-text-secondary);
  border-bottom: 1px dashed rgba(68, 43, 27, 0.15);
  padding-bottom: 4px;
}

.footer-bottom {
  width: 100%;
  max-width: 1040px;
  text-align: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(68, 43, 27, 0.25);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* =========================================
   ABOUT SECTION
   ========================================= */

.section-about {
  background-color: var(--color-bg-primary);
  padding: var(--space-3xl) var(--space-md) var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-container {
  width: 100%;
  max-width: 1040px;
  display: flex;
  gap: var(--space-4xl); /* 96px gap */
  align-items: center;
}

.about-image-wrapper {
  flex: 1;
}

.about-image {
  width: 100%;
  height: 512px; /* 8pt grid */
  object-fit: cover;
  object-position: top center; /* Prevents heads from being cut off */
  border-radius: var(--space-sm);
  box-shadow: 0 20px 40px rgba(38, 28, 20, 0.15);
}

.about-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.section-title {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.about-description {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 480px;
}

/* =========================================
   GALLERY PAGE
   ========================================= */

.section-gallery-header {
  background-color: var(--color-bg-primary);
  padding: var(--space-xl) var(--space-md) var(--space-2xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-title-wrapper {
  margin-top: var(--space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.section-gallery {
  background-color: var(--color-bg-secondary);
  padding: var(--space-3xl) var(--space-md) var(--space-6xl) var(--space-md);
  display: flex;
  justify-content: center;
}

.gallery-grid {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}

.gallery-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.gallery-img-wrapper {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--color-bg-primary);
  border-radius: var(--space-sm);
  overflow: hidden;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  mix-blend-mode: multiply;
  transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), filter 1.2s cubic-bezier(0.2, 0, 0.2, 1);
  filter: brightness(0.92);
}

.gallery-item:hover .gallery-img,
.gallery-img-wrapper:hover .gallery-img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.gallery-desc {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* =========================================
   HAMBURGER MENU
   ========================================= */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  width: 32px;
  height: 32px;
  z-index: 110;
}

.menu-toggle svg {
  width: 100%;
  height: 100%;
}

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
  .section-hero {
    padding: var(--space-xs) var(--space-sm) var(--space-5xl) var(--space-sm);
    gap: var(--space-2xl);
  }

  .navbar {
    flex-direction: row;
    position: relative;
    gap: 0;
  }
  
  .menu-toggle {
    display: block;
  }
  
  .brand-logo {
    margin-right: 0;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(217, 232, 245, 0.85); /* Light blue tint */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    flex-direction: column;
    padding: var(--space-md);
    box-shadow: 0 10px 20px rgba(38, 28, 20, 0.1);
    z-index: 100;
    gap: var(--space-md);
    display: none;
    border-radius: var(--space-sm);
    margin-top: var(--space-sm);
  }

  .nav-links.active {
    display: flex;
  }

  .hero-content {
    padding-bottom: 150px; /* Space for hero image overlap */
  }

  .hero-image-container {
    bottom: -100px;
    width: calc(100% - var(--space-md));
  }

  .hero-image {
    height: 300px;
  }

  .section-services {
    padding-top: 150px; /* Clear hero image overlap */
  }

  .cards-grid, 
  .gallery-grid, 
  .footer-container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .section-title {
    font-size: 2rem;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .services-title {
    font-size: 2.2rem;
  }
  
  .about-container {
    flex-direction: column;
    text-align: center;
  }
  
  .about-text {
    align-items: center;
  }

  .about-image {
    height: 350px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

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

/* =========================================
   MOBILE STICKY BAR
   ========================================= */

/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(360deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg);
  }
}

.animate-flip-in {
  opacity: 0;
  animation: flipIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.reveal-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-heading.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-from-left {
  opacity: 0;
  transform: translateX(-150px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-from-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-flip-scroll {
  opacity: 0;
  transform: perspective(600px) rotateX(360deg);
  transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reveal-flip-scroll.revealed {
  opacity: 1;
  transform: perspective(600px) rotateX(0deg);
}

@keyframes flipInLeft {
  from {
    opacity: 0;
    transform: perspective(600px) translateX(-100vw) rotateY(-360deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) translateX(0) rotateY(0deg);
  }
}
@keyframes flipInRight {
  from {
    opacity: 0;
    transform: perspective(600px) translateX(100vw) rotateY(360deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) translateX(0) rotateY(0deg);
  }
}
.animate-flip-in-left {
  display: inline-block;
  opacity: 0;
  animation: flipInLeft 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.animate-flip-in-right {
  display: inline-block;
  opacity: 0;
  animation: flipInRight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Card dispersal animations */
.reveal-hidden {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1), transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@media (min-width: 769px) {
  .cards-grid .card.reveal-hidden:not(.revealed):nth-child(3n+1),
  .gallery-grid .gallery-item.reveal-hidden:not(.revealed):nth-child(3n+1) {
    transform: translateX(calc(100% + var(--space-md))) !important;
  }
  .cards-grid .card.reveal-hidden:not(.revealed):nth-child(3n+2),
  .gallery-grid .gallery-item.reveal-hidden:not(.revealed):nth-child(3n+2) {
    transform: translateY(150px) !important;
  }
  .cards-grid .card.reveal-hidden:not(.revealed):nth-child(3n),
  .gallery-grid .gallery-item.reveal-hidden:not(.revealed):nth-child(3n) {
    transform: translateX(calc(-100% - var(--space-md))) !important;
  }
}

@media (max-width: 768px) {
  .cards-grid .card.reveal-hidden:not(.revealed):nth-child(odd),
  .gallery-grid .gallery-item.reveal-hidden:not(.revealed):nth-child(odd) {
    transform: translateX(-150px) !important;
  }
  .cards-grid .card.reveal-hidden:not(.revealed):nth-child(even),
  .gallery-grid .gallery-item.reveal-hidden:not(.revealed):nth-child(even) {
    transform: translateX(150px) !important;
  }
}

.reveal-hidden.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
.reveal-hidden

 opacity: 0; transform: translateY(40px); 

.reveal-hidden.revealed

 opacity: 1; transform: translateY(0); 



/* =========================================
   BLOG STYLES
   ========================================= */

.blog-content h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.blog-content p {
  margin-bottom: var(--space-md);
}


/* =========================================
   STICKY FOOTER CTA
   ========================================= */
.sticky-footer-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg-primary);
  box-shadow: 0 -4px 20px rgba(26, 47, 76, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  z-index: 9999;
  border-top: 1px solid rgba(26, 47, 76, 0.08);
}

.sticky-btn {
  flex: 1;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.95rem;
  padding: 14px var(--space-md);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Adjust body padding so content isn't hidden behind the sticky footer */
body {
  padding-bottom: 80px;
}

@media (max-width: 480px) {
  .sticky-btn {
    font-size: 0.85rem;
    padding: 12px var(--space-xs);
  }
}


/* Hide old CTA section on desktop */
@media (min-width: 769px) {
  .section-cta {
    display: none !important;
  }
}