/* 1. Fonts (self-hosted) ------------------------------------------------ */
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display/playfair-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display/playfair-display-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display/playfair-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Variables ----------------------------------------------------------- */
:root {
    --color-green: #075e4a;
    --color-dark-green: #064c3c;
    --color-blue: #007bc7;
    --color-dark-blue: #005b94;
    --color-dark: #343434;
    --color-white: #fff;
    --color-light-gray: #d8d8d8;
    --color-light-green: #e8f7ef;
    --color-dark-gray: #484848;
    --color-gold: #b8935f;
    --color-gold-dark: #a17f4d;
    --color-cream: #faf9f3;

    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --radius-lg: 1.25rem;
    --radius-md: .75rem;
    --shadow-soft: 0 10px 30px rgba(7, 94, 74, 0.08);
}

/* 3. Global ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
}

a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: .75rem;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
}

.btn-brand {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
  border-radius: 50px;
  padding: .7rem 1.6rem;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-brand:hover, .btn-brand:focus {
  background-color: var(--color-dark-green);
  border-color: var(--color-dark-green);
  color: var(--color-white);
  transform: translateY(-1px);
}

.btn-outline-brand {
  border: 1px solid var(--color-green);
  color: var(--color-green);
  border-radius: 50px;
  padding: .65rem 1.5rem;
  font-weight: 600;
  background: transparent;
  transition: all .2s ease;
}
.btn-outline-brand:hover, .btn-outline-brand:focus {
  background-color: var(--color-green);
  color: var(--color-white);
}

.btn-gold {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
  border-radius: 50px;
  padding: .7rem 1.8rem;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-gold:hover, .btn-gold:focus {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

.leaf-decor {
  position: absolute;
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.leaf-decor.top-left     { top: -24px; left: -24px; transform: rotate(-18deg); }
.leaf-decor.top-right    { top: -24px; right: -24px; transform: rotate(18deg) scaleX(-1); }
.leaf-decor.bottom-left  { bottom: -24px; left: -24px; transform: rotate(160deg) scaleX(-1); }
.leaf-decor.bottom-right { bottom: -24px; right: -24px; transform: rotate(160deg); }
.leaf-decor.left-mid     { top: 50%; left: -16px; transform: translateY(-50%) rotate(-8deg); }
.leaf-decor.right-mid    { top: 50%; right: -16px; transform: translateY(-50%) rotate(8deg) scaleX(-1); }
@media (max-width: 767.98px) {
  .leaf-decor { width: 80px !important; height: 100px !important; opacity: .35; }
}

/* Real leaf-photo corner accents (leaf-corner-1.webp / leaf-corner-2.webp) */
.leaf-photo {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .95;
  width: 140px;
  height: auto;
}
.leaf-photo.corner-tl { top: -14px; left: -14px; }
.leaf-photo.corner-tr { top: -14px; right: -14px; transform: scaleX(-1); }
.leaf-photo.corner-bl { bottom: -14px; left: -14px; transform: scaleX(-1); }
.leaf-photo.corner-br { bottom: -14px; right: -14px; }
.leaf-photo.size-sm { width: 95px; }
.leaf-photo.size-lg { width: 190px; }
@media (max-width: 767.98px) {
  .leaf-photo { width: 70px !important; opacity: .55; }
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Reveal-on-scroll (progressive enhancement, no JS = visible by default) */
.reveal { opacity: 1; transform: none; }
.reveal.js-enabled { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.js-enabled.is-visible { opacity: 1; transform: none; }

/* 4. Typography ------------------------------------------------------------ */
h1, h2, h3, h4,
.font-heading {
  font-family: var(--font-heading);
  color: var(--color-green);
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.25; }
h3 { font-size: 1.25rem; }

h1 span.accent, h2 span.accent { color: var(--color-gold); }

p { color: var(--color-dark-gray); line-height: 1.7; }

/* 5. Header ----------------------------------------------------------------- */
.site-header { background: var(--color-white); position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.navbar { padding-top: .9rem; padding-bottom: .9rem; }

.brand-initials { display: none; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green);
  line-height: 1.1;
  font-size: 1rem;
}

.brand-logo {
  width: 145px !important;
  height: 55px !important;
  max-width: 145px !important;
  max-height: 55px !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.navbar-nav .nav-link {
  color: var(--color-dark);
  font-weight: 500;
  padding: .5rem 1rem;
  position: relative;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--color-green);
}
.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .1rem;
  height: 2px;
  background: var(--color-green);
}

.phone-link { color: var(--color-dark); font-weight: 600; white-space: nowrap; }
.phone-link i { color: var(--color-green); }

/* 6. Hero -------------------------------------------------------------------- */
.hero-section {
  background: var(--color-cream);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.hero-section .lead-text { font-size: 1.05rem; max-width: 46ch; }
.hero-media { position: relative; }
.hero-media img { filter: drop-shadow(0 18px 24px rgba(7, 94, 74, 0.18)); }

/* 7. Feature strip ------------------------------------------------------------ */
.feature-strip { background: var(--color-light-green); padding: 2.2rem 0; }
.feature-item { display: flex; align-items: center; gap: 1rem; }
.feature-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-green);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-green);
  font-size: 1.2rem;
  background: var(--color-white);
}
.feature-item h3 { font-size: 1rem; margin-bottom: .15rem; font-family: var(--font-body); color: var(--color-dark); font-weight: 700; }
.feature-item p { font-size: .85rem; margin-bottom: 0; }

/* 8. Products ----------------------------------------------------------------- */
.products-section { padding: 5rem 0; background: var(--color-white); }
.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.product-card img { border-radius: var(--radius-md); margin-bottom: 1rem; }
.product-card h3 { font-family: var(--font-heading); color: var(--color-green); font-size: 1.15rem; }
.product-card p { font-size: .9rem; }

/* 9. About ---------------------------------------------------------------------- */
.about-preview { padding: 4rem 0; background: var(--color-cream); position: relative; overflow: hidden; }
.about-preview img {
    width: 80%;
    max-width: 450px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* 10. Why choose us ---------------------------------------------------------------- */
.why-section { padding: 5rem 0; background: var(--color-white); }
.why-card {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  border: 1px solid rgba(184,147,95,.2);
}
.why-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-light-green);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 1rem;
}
.why-card h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; color: var(--color-dark); }
.why-card p { font-size: .9rem; margin-bottom: 0; }

/* 11. CTA ----------------------------------------------------------------------------- */
.cta-banner {
  background: var(--color-green);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.cta-banner h2 { color: var(--color-white); margin-bottom: 1.5rem; }
.cta-banner .section-eyebrow { color: var(--color-gold); }
.cta-banner .section-eyebrow::before, .cta-banner .section-eyebrow::after { background: rgba(255,255,255,.4); }
.cta-wrap { padding: 2rem 0 5rem; }

/* 12. Footer -------------------------------------------------------------------------- */
.site-footer { background: var(--color-dark-green); color: rgba(255,255,255,.85); }
.footer-title { font-family: var(--font-heading); color: var(--color-white); font-weight: 700; font-size: 1.15rem; }
.footer-tagline { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-gold); }
.footer-about { font-size: .9rem; color: rgba(255,255,255,.75); max-width: 32ch; }
.footer-heading { color: var(--color-white); font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.footer-links li, .footer-contact li { margin-bottom: .6rem; font-size: .9rem; }
.footer-links a { color: rgba(255,255,255,.75); }
.footer-links a:hover { color: var(--color-gold); }
.footer-contact a { color: rgba(255,255,255,.75); }
.footer-contact i { color: var(--color-gold); width: 18px; }
.footer-motto p { font-family: var(--font-heading); font-style: italic; color: var(--color-white); font-size: 1.1rem; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white);
  transition: background-color .2s ease;
}
.footer-socials a:hover { background: var(--color-gold); border-color: var(--color-gold); }
.footer-divider { border-color: rgba(255,255,255,.15); margin: 2rem 0 1.5rem; }
.footer-copy { font-size: .82rem; color: rgba(255,255,255,.6); }

/* 13. About page --------------------------------------------------------------------- */
.page-hero {
  background: var(--color-cream);
  padding: 3.5rem 0;
  text-align: center;
}
.value-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  height: 100%;
}

/* 14. Contact page -------------------------------------------------------------------- */
.contact-info-card {
  background: var(--color-light-green);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.contact-info-list li { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.contact-info-list i { color: var(--color-green); font-size: 1.2rem; margin-top: .2rem; }
.contact-form-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.form-control:focus { border-color: var(--color-green); box-shadow: 0 0 0 .2rem rgba(7,94,74,.15); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #c0392b; }
#formStatus { font-size: .9rem; }

/* 15. Blog / Why page ------------------------------------------------------------------- */
.blog-card {
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  background: var(--color-white);
}
.blog-card img { border-radius: 0; }
.blog-card .blog-body { padding: 1.5rem; }
.blog-meta { font-size: .8rem; color: var(--color-gold-dark); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }

/* 16. Responsive overrides ------------------------------------------------------------- */
@media (min-width: 576px) {
  .brand-initials { display: none; }
}
@media (max-width: 991.98px) {
  .navbar-nav { text-align: center; }
  .navbar-collapse { padding-top: 1rem; }
}
@media (max-width: 767.98px) {
  .brand-logo {
    width: 125px !important;
    height: 48px !important;
    max-width: 125px !important;
    max-height: 48px !important;
  }

  .hero-section {
    padding: 2.5rem 0 2rem;
    text-align: center;
  }

  .hero-section .lead-text {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-banner {
    padding: 2.5rem 1.25rem;
  }
}