/* Cleaner, consistent layout: no overlap, simple parchment background, embedded images */
:root{
  --ink:#1d1b17;
  --muted:#5b564c;
  --paper:#f4f1eb;
  --line:rgba(29,27,23,.12);
  --green:#2f5d3f;
  --green2:#244b33;
  --shadow:0 16px 40px rgba(0,0,0,.10);
  --shadow2:0 10px 24px rgba(0,0,0,.08);
  --max:1120px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--paper);
}
.container{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(244,241,235,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.brand-name{ font-family:"Playfair Display", Georgia, serif; font-weight:700; font-size:20px; }
.brand-tag{ color:var(--muted); font-size:12px; margin-top:2px; }

.nav{ display:flex; align-items:center; gap:18px; }
.nav a{ text-decoration:none; color:var(--ink); font-weight:600; opacity:.88; }
.nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:6px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color:#fff; text-decoration:none; font-weight:700;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow2);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); opacity:.92; }
.btn-call{ padding:10px 14px; }
.btn-call-lg{ font-size:18px; padding:14px 18px; }

.menu{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.7); }
.menu span{ display:block; height:2px; width:18px; margin:5px auto; background:#2a2721; border-radius:999px; }

/* Hero */
.hero{ padding: 24px 0 6px; }
.hero-card{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.hero-img{ width:100%; height:auto; display:block; }
.hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(18px, 3.2vw, 42px);
  max-width: 720px;
  color:#fff;
  background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.18), rgba(0,0,0,0));
}
.hero-kicker{
  margin:0 0 10px;
  display:inline-flex; width:fit-content;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  font-weight:700; font-size:13px;
}
.hero-overlay h1{
  margin:0 0 8px;
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.hero-lead{ margin:0 0 16px; max-width: 58ch; color: rgba(255,255,255,.92); }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.btn-ghost-on-image{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: none;
}
.btn-ghost-on-image:hover{ box-shadow: var(--shadow2); }

/* Sections */
.section{ padding: 52px 0; }
.section-alt{
  background: rgba(255,255,255,.55);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{ max-width: 70ch; margin-bottom: 18px; }
.section-head h2{ margin:0 0 8px; font-family:"Playfair Display", Georgia, serif; font-size: clamp(24px, 2.2vw, 34px); }
.section-head p{ margin:0; color: var(--muted); }

.split{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; }
.panel{
  background: rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow2);
}
.panel h2{ margin:0 0 10px; font-family:"Playfair Display", Georgia, serif; }
.panel p{ margin:0 0 12px; color: var(--muted); }
.bullets{ margin:0; padding-left: 18px; }
.bullets li{ margin:8px 0; color: var(--muted); }

.media{
  margin:0;
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  background:#fff;
  aspect-ratio: 16 / 10;
}
.media img{ width:100%; height:100%; object-fit: cover; object-position: center; display:block; }

/* Cards */
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.card{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow2);
  background:#fff;
}
.card img{ width:100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display:block; }
.card-body{ padding: 14px 16px 18px; }
.card-body h3{ margin:0 0 6px; font-family:"Playfair Display", Georgia, serif; }
.card-body p{ margin:0; color: var(--muted); }

.cta-strip{
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
  border:1px solid rgba(47,93,63,.22);
  background: rgba(47,93,63,.08);
  display:flex; justify-content:space-between; align-items:center; gap: 14px;
}
.cta-strip h3{ margin:0 0 6px; font-family:"Playfair Display", Georgia, serif; }
.cta-strip p{ margin:0; color: var(--muted); max-width: 70ch; }

/* Standards */
.standards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.standard{
  background: rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow2);
}
.standard h3{ margin:0 0 6px; font-family:"Playfair Display", Georgia, serif; }
.standard p{ margin:0; color: var(--muted); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.contact-card{
  background: rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.contact-card h2{ margin:0 0 8px; font-family:"Playfair Display", Georgia, serif; }
.contact-card p{ margin:0 0 14px; color: var(--muted); }
.contact-details{ margin-top: 14px; display:grid; gap: 10px; }
.contact-details > div{
  display:flex; justify-content: space-between; gap: 12px;
  padding: 12px; border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
}
.contact-details span{ color: var(--muted); font-weight:600; }
.contact-details strong{ font-weight:800; }

/* Footer */
.footer{ border-top:1px solid var(--line); padding: 20px 0; background: rgba(244,241,235,.92); }
.footer-inner{ display:flex; justify-content:space-between; gap: 16px; }
.footer-brand{ font-weight:900; font-family:"Playfair Display", Georgia, serif; }
.footer-note{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.footer-right{ text-align:right; }
.footer-right a{ text-decoration:none; font-weight:800; color: var(--ink); }
.footer-right a:hover{ text-decoration: underline; text-underline-offset: 5px; }

/* Responsive */
@media (max-width: 980px){
  .split, .contact-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .standards{ grid-template-columns: 1fr; }
  .cta-strip{ flex-direction: column; align-items:flex-start; }
  .hero-overlay{ max-width: none; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.10)); }
  .nav{
    position:absolute; left:16px; right:16px; top:64px;
    display:none; flex-direction:column; gap:10px; padding:14px;
    background: rgba(244,241,235,.96);
    border:1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .nav.open{ display:flex; }
  .menu{ display:block; }
}

/* Email button options (CTA + Contact) */

.cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn-outline{
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
  box-shadow: none;
}

.btn-outline:hover{
  background: var(--green);
  color:#fff;
}

.btn-outline-lg{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.btn-outline-lg:hover{
  background: var(--green);
  color:#fff;
}

/* Contact Form Styling */

.contact-form {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 600;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-family: Inter, sans-serif;
  font-size: 14px;
  background: #fff;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(47,93,63,.15);
}

/* --- Layout corrections for balanced width + contact image sizing --- */

/* Ensure container width is consistent everywhere */
.container{
  width: min(var(--max), calc(100% - 32px));
}

/* Make all media blocks consistent, but let contact have its own ratio */
.media{
  aspect-ratio: 16 / 10;
}

/* Contact section: force the image to match the card height more closely */
.contact-grid{
  align-items: stretch;
}

/* Give the contact image a slightly shorter ratio (closer to prior look) */
.contact .media{
  aspect-ratio: 16 / 12;  /* less wide/tall than 16/10 look */
  max-height: 520px;      /* prevents oversized look on large screens */
}

/* Keep the contact image from stretching too tall */
.contact .media img{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Optional: keep the contact card from getting too short compared to image */
.contact-card{
  min-height: 520px;
}


/* --- FIX: Contact image overflow + height mismatch --- */

/* Prevent any section from pushing past the page width */
html, body { overflow-x: hidden; }

/* Make sure grid items can shrink and never overflow the container */
.contact-grid,
.split,
.cards,
.standards {
  min-width: 0;
}

.contact-grid > * {
  min-width: 0;
}

/* Force contact image to stay inside the rounded frame */
.contact .media {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Make the contact image frame match the contact card height */
@media (min-width: 981px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .contact .media {
    height: 100%;
    max-height: 597px; /* adjust if you want slightly taller/shorter */
    aspect-ratio: auto; /* stop ratio from forcing odd sizing */
  }

  .contact .media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .contact-card {
    min-height: 560px; /* keep both sides equal height */
  }
}