:root {
  --cream: #fefaf4;

  --gold: #83622a;

  --olive: #414833;

  --ink: #24251f;

  --muted: #77776d;

}

* { box-sizing: border-box;
 }
html { scroll-behavior: smooth;
 scroll-padding-top: 92px;
 }
body { margin: 0;
 background: var(--cream);
 color: var(--ink);
 font-family: Georgia, 'Times New Roman', serif;
 line-height: 1.6;
 }
a { color: inherit;
 }

.site-header {
  position: fixed;

  inset: 0 0 auto 0;

  z-index: 1000;

  min-height: 76px;

  display: grid;

  grid-template-columns: minmax(160px, 1fr) auto minmax(100px, 1fr);

  align-items: center;

  gap: 24px;

  padding: 12px clamp(18px, 4vw, 56px);

  background: rgba(254, 250, 244, .97);

  border-bottom: 1px solid rgba(36, 37, 31, .2);

  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);

}
.brand { color: var(--gold);
 font-size: 1.25rem;
 font-weight: bold;
 text-decoration: none;
 white-space: nowrap;
 letter-spacing: .02em;
 }
.main-nav { display: flex;
 justify-content: center;
 align-items: center;
 gap: clamp(14px, 2.5vw, 34px);
 }
.main-nav a { font-family: Arial, sans-serif;
 font-size: .86rem;
 text-decoration: none;
 white-space: nowrap;
 }
.main-nav a:hover, .site-footer a:hover { color: var(--gold);
 text-decoration: underline;
 text-underline-offset: 4px;
 }
.social-links { display: flex;
 justify-content: flex-end;
 align-items: center;
 gap: 15px;
 }
.social-links a { display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 27px;
 height: 27px;
 color: var(--gold);
 }
.social-links svg { width: 24px;
 height: 24px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }
.social-links .icon-dot { fill: currentColor;
 stroke: none;
 }

main { padding-top: 76px;
 }
.hero { min-height: 520px;

 display: grid;
 place-items: center;
 padding: 80px 24px;
 text-align: center;
 background: var(--olive);
 color: var(--cream);
 }
.hero-inner { max-width: 760px;
 }
.eyebrow { margin: 0 0 12px;
 color: var(--gold);
 font-family: Arial, sans-serif;
 font-size: .76rem;
 font-weight: bold;
 letter-spacing: .16em;
 text-transform: uppercase;
 }
.hero .eyebrow { color: #e3c995;
 }
h1, h2, h3, p { margin-top: 0;
 }
h1 { margin-bottom: 18px;
 font-size: clamp(2.8rem, 7vw, 5.2rem);
 font-weight: normal;
 line-height: 1.08;
 }
h2 { margin-bottom: 18px;
 font-size: clamp(2rem, 4vw, 3.1rem);
 font-weight: normal;
 line-height: 1.15;
 }
h3 { margin: 18px 0 8px;
 font-size: 1.35rem;
 font-weight: normal;
 }
.hero-copy { max-width: 590px;
 margin: 0 auto 28px;
 font-size: 1.12rem;
 }
.primary-link { display: inline-block;
 padding: 11px 22px;
 border: 1px solid #e3c995;
 color: var(--cream);
 text-decoration: none;
 font-family: Arial, sans-serif;
 font-size: .9rem;
 }
.primary-link:hover { background: var(--cream);
 color: var(--olive);
 }
.content-section { padding: clamp(64px, 9vw, 112px) clamp(22px, 8vw, 120px);
 scroll-margin-top: 76px;
 }
.intro-section { display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
 align-items: center;
 gap: clamp(35px, 7vw, 100px);
 }
.section-copy { max-width: 600px;
 }
.section-copy p:last-child, .content-section > p:not(.eyebrow) { color: var(--muted);
 }
.photo-about-us{
    display: grid;

    place-items: center;

    min-height: 220px;

    background: linear-gradient(135deg, #e7dfd1, #d3c6b2);

    color: #766c5d;

    font-family: Arial, sans-serif;

    font-size: .9rem;

    letter-spacing: .06em;
 }
.image-tall{
  max-height: 800px;

}
.header-image{
  max-height: 100%;


}
.photo-tall { min-height: 360px;
 }
.packages-section, .gallery-section { text-align: center;
 background: #f4eee4;
 }
.feature-grid { display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
 margin-top: 36px;
 text-align: left;
 }
.feature-card { padding: 14px;
 background: var(--cream);
 }
.feature-card .photo-about-us { min-height: 230px;
 }
.feature-card p { margin-bottom: 8px;
 color: var(--muted);
 }
.faq-section { text-align: center;
 min-height: 300px;
 }
.gallery-grid { display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
 margin-top: 32px;
 }
.gallery-grid .photo-about-us { min-height: 230px;
 }
.site-footer { display: flex;
 justify-content: space-between;
 gap: 20px;
 padding: 24px clamp(22px, 8vw, 120px);
 background: var(--olive);
 color: var(--cream);
 font-family: Arial, sans-serif;
 font-size: .85rem;
 }
.site-footer a { text-decoration: none;
 }

@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto;
 gap: 10px 18px;
 padding: 12px 18px;
 }
  .brand { font-size: 1.1rem;
 }
  .main-nav { grid-column: 1 / -1;
 grid-row: 2;
 order: 3;
 gap: clamp(12px, 4vw, 28px);
 padding-bottom: 3px;
 }
  .social-links { grid-column: 2;
 grid-row: 1;
 }
  main { padding-top: 105px;
 }
  .content-section { scroll-margin-top: 105px;
 }
  .intro-section { grid-template-columns: 1fr;
 }
  .photo-tall { min-height: 300px;
 }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}
@media (max-width: 520px) {
  .main-nav { justify-content: space-between;
 gap: 8px;
 }
  .main-nav a { font-size: .76rem;
 }
  main { padding-top: 104px;
 }
  .hero { min-height: 440px;
 }
  .feature-grid { grid-template-columns: 1fr;
 }
  .gallery-grid { gap: 10px;
 }
  .gallery-grid .photo-about-us { min-height: 170px;
 }
  .site-footer { flex-direction: column;
 align-items: center;
 text-align: center;
 }
}