/* ═══════════════════════════════════════
   MAIN.CSS - Land O' Goshen Farm Event Center
   Global styles: reset, variables, type, layout, buttons, top bar, nav, footer
   Each page also loads its own stylesheet (css/<page>.css) for its sections.
═══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Colors sampled from the Land O' Goshen logo badge. */
  --green: #004D3A;          /* Logo green: top bar, nav links, headings, footer */
  --green-dark: #00332A;     /* Darker green: button shadows, hover on green */
  --gold: #B8924A;           /* Logo gold: rules, accents, icons (not for small text on cream) */
  --gold-dark: #85662C;      /* Gold dark enough for text and labels on light backgrounds */
  --gold-light: #E2C387;     /* Light gold for text and lines on green or photo backgrounds */
  --cream: #F8F0E0;          /* Logo cream: alternate section backgrounds */
  --cream-light: #FCF8F0;    /* Light panels and cards */
  --white: #FFFFFF;          /* Main backgrounds, text on green */
  --text: #1F2421;           /* Body text */
  --muted: #4E5551;          /* Minor text (captions, card descriptions) */
  --line: #E4DCCB;           /* Thin borders and dividers on light backgrounds */

  --font-display: 'Playfair Display', Georgia, serif;           /* Eyebrow text above headings */
  --font-head: 'Libre Baskerville', Georgia, serif;              /* All titles (h1 to h6), buttons, nav, numbers */
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;   /* Body text and lists */
  --font-script: 'Pinyon Script', cursive;                       /* Homepage hero greeting only (loaded on index.html) */

  --container: 1200px;
  --gutter: 2rem;
  --section-pad: 5rem 0;
  --topbar-height: 40px;
  --nav-height: 88px;
  --radius: 6px;
}

html { scroll-behavior: smooth; }
/* Visitors who turn off motion in their device settings get instant jumps
   and no hover slides. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
/* Links that jump to a spot on the page stop just below the sticky top bar
   and nav, so the heading they point at is not hidden underneath. */
[id] { scroll-margin-top: calc(var(--topbar-height) + var(--nav-height) + 1.5rem); }

body {
  margin: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); }

ul { margin: 0; padding: 0; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--green);
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  text-wrap: balance;
}

/* Page and section titles use the lighter 400 weight, like the homepage. */
h1, h2 { font-weight: 400; }

h3 { font-size: 1.2rem; }

strong, b { font-weight: 700; }

/* Small uppercase label above a heading. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.6rem;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.7;
}

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding: var(--section-pad); }

/* Alternate section backgrounds, so neighbouring sections read as separate. */
/* Cream sections have the faint dotted paper from the homepage reviews. */
.section-cream { background: var(--cream) radial-gradient(rgba(184, 146, 74, 0.08) 1px, transparent 1px) 0 0 / 6px 6px; }
.section-green { background: var(--green); color: var(--white); }
.section-green h2,
.section-green h3 { color: var(--white); }
.section-green .eyebrow { color: var(--gold-light); }

.section-head {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-head p { margin-top: 1rem; font-size: 1.15rem; }
/* The label sits between two short gold rules, like the dashes either side
   of "Farm Event Center" on the logo. */
.section-head .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
}

.section-cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* Page title band at the top of inner pages. Each page can add its own photo
   background in its own stylesheet. */
.page-hero {
  background: var(--white);
  border-bottom: 3px solid var(--gold);
  padding: 4.5rem 0 4rem;
  text-align: center;
}
.page-hero .lead {
  max-width: 680px;
  margin: 1rem auto 0;
}
.page-hero .btn-group {
  justify-content: center;
  margin-top: 1.75rem;
}
/* A thin gold line with a diamond under the title, like the homepage hero. */
.page-hero h1::after {
  content: "";
  display: block;
  width: 180px;
  height: 9px;
  margin: 1.1rem auto 0;
  background:
    linear-gradient(var(--gold), var(--gold)) left center / calc(50% - 12px) 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / calc(50% - 12px) 1px no-repeat,
    linear-gradient(45deg, transparent 30%, var(--gold) 30% 70%, transparent 70%) center / 9px 9px no-repeat;
}

/* ── PHOTO HERO ──
   The homepage hero: a full-width photo with the text centered over it, a
   script greeting, a thin gold line with a diamond, and gold and white
   outline buttons. The homepage rotates five photos (css/index.css); every
   other page has one photo, positioned in its own stylesheet. */
.photo-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(520px, 72vh, 720px);
  padding: 0;
  text-align: center;
  color: var(--white);
  background: var(--green-dark);
  border-bottom: 4px solid var(--gold);
}
.photo-hero-photo { position: absolute; inset: 0; overflow: hidden; }
.photo-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 30, 22, 0.62), rgba(0, 30, 22, 0.3) 70%);
}
.photo-hero-inner { position: relative; z-index: 1; max-width: 820px; padding: 0 1.25rem; }
.photo-hero-script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.1;
  color: var(--gold-light);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.photo-hero h1 {
  margin-top: 0.5rem;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.photo-hero-rule { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1.4rem 0; }
.photo-hero-rule::before,
.photo-hero-rule::after { content: ""; width: 80px; height: 1px; background: var(--gold-light); }
.photo-hero-rule span { width: 8px; height: 8px; background: var(--gold-light); transform: rotate(45deg); }
.photo-hero-lead { max-width: 600px; margin: 0 auto; font-size: 1.2rem; text-align: center; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.photo-hero .btn-group { justify-content: center; margin-top: 2rem; }

/* ── BUTTONS ──
   Solid green fill with a solid darker shadow down and to the right. Hover
   swaps to another solid color, no opacity and no fades. */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  background: var(--green);
  color: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 0.9rem 1.7rem;
  box-shadow: 4px 4px 0 var(--gold);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover,
.btn:focus-visible {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

/* White fill, green text and border. */
.btn-outline {
  background: var(--white);
  color: var(--green);
  border-color: var(--green);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--cream);
  color: var(--green-dark);
  border-color: var(--green-dark);
}

/* For use on green backgrounds. */
.btn-light {
  background: var(--white);
  color: var(--green);
  border-color: var(--white);
  box-shadow: 4px 4px 0 var(--green-dark);
}
.btn-light:hover,
.btn-light:focus-visible {
  background: var(--cream);
  color: var(--green-dark);
  border-color: var(--cream);
}

/* Gold fill, for the main button over a photo. */
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--green-dark); box-shadow: none; }
.btn-gold:hover,
.btn-gold:focus-visible { background: var(--gold-light); border-color: var(--gold-light); color: var(--green-dark); }
/* White outline, for the second button over a photo. */
.btn-ghost { background: transparent; border-color: var(--white); color: var(--white); box-shadow: none; }
.btn-ghost:hover,
.btn-ghost:focus-visible { background: var(--white); border-color: var(--white); color: var(--green); }
/* Thin gold outline, for buttons on dark green. */
.btn-line { background: transparent; border: 1px solid var(--gold); color: var(--cream-light); box-shadow: none; }
.btn-line:hover,
.btn-line:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--green-dark); }

/* Larger button for a section's main call to action. */
.btn-lg {
  font-size: 1.25rem;
  padding: 1.1rem 2.4rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ── TOP BAR ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 220;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  height: var(--topbar-height);
  white-space: nowrap;
  overflow: hidden;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}
.topbar a {
  color: var(--white);
  text-decoration: none;
}
.topbar a:hover { text-decoration: underline; }
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.topbar svg {
  width: 15px;
  height: 15px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  vertical-align: -2px;
  margin-right: 0.35rem;
}

/* ── NAV ── */
.nav {
  position: sticky;
  top: var(--topbar-height);
  z-index: 200;
  height: var(--nav-height);
  background: var(--white);
  border-bottom: 3px solid var(--gold);
}
.nav-inner {
  position: relative;
  z-index: 205;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  background: var(--white);
}

.nav-logo {
  position: relative;
  z-index: 201;
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img { height: 72px; width: auto; display: block; }

/* ── Links (desktop) ── */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav-links-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1vw, 0.85rem);
}
.nav-link {
  position: relative;
  display: inline-block;
  color: var(--green);
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem 0.7rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--gold);
  transition: right 0.25s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--green-dark); }
.nav-link:hover::after,
.nav-link.active::after { right: 0.7rem; }

/* Dropdown */
.nav-item { position: relative; }
/* Desktop: stretch the item to the full nav height so the dropdown opens
   below the nav bar. */
@media (min-width: 1081px) {
  .nav-links,
  .nav-links-center { align-self: stretch; }
  .nav-item {
    align-self: stretch;
    display: flex;
    align-items: center;
  }
}
.nav-item > .nav-link { padding-right: 1.55rem; }
.nav-item > .nav-link::before {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}
.nav-dropdown {
  list-style: none;
  position: absolute;
  top: 100%;
  left: -10px;
  width: 560px;
  background: var(--white);
  border: 2px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.85rem;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  z-index: 210;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item.open > .nav-dropdown { display: grid; }
.nav-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 0.85rem 0.95rem;
  border: 2px solid var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  color: var(--green);
  text-decoration: none;
}
.nav-dropdown-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.nav-dropdown-desc {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
.nav-dropdown a.active {
  background: var(--green);
  border-color: var(--green);
  border-left-color: var(--gold);
  color: var(--white);
}
.nav-dropdown a:hover .nav-dropdown-desc,
.nav-dropdown a:focus-visible .nav-dropdown-desc,
.nav-dropdown a.active .nav-dropdown-desc { color: var(--white); }

.nav-cta {
  flex-shrink: 0;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 1.4rem;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--gold); /* the same shadow as the other buttons */
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  margin-left: 1rem;
  white-space: nowrap;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

/* ── Hamburger ── */
.nav-toggle {
  position: relative;
  z-index: 210;
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile nav ── */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    inset: calc(var(--topbar-height) + var(--nav-height)) 0 auto 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 3px solid var(--gold);
    padding: 0.5rem var(--gutter) 1.4rem;
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, visibility 0.25s;
    max-height: calc(100vh - var(--topbar-height) - var(--nav-height));
    overflow-y: auto;
    z-index: 199;
  }
  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links-center { display: contents; }

  .nav-link {
    display: block;
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.1rem;
    white-space: normal;
  }
  /* On touch screens a tapped link keeps its hover and focus state. In the
     mobile menu a link is marked only for the current page or while its
     submenu is open. */
  .nav-link:hover,
  .nav-link:focus { color: var(--green); }
  .nav-link.active,
  .nav-item.open > .nav-link { color: var(--gold-dark); }
  .nav-link::after { display: none; }

  .nav-item > .nav-link { padding-right: 2rem; }
  .nav-item > .nav-link::before { right: 0.5rem; }
  .nav-item.open > .nav-link::before { transform: translateY(-30%) rotate(-135deg); }
  .nav-item:hover > .nav-dropdown,
  .nav-item:focus-within > .nav-dropdown { display: none; }
  .nav-item.open > .nav-dropdown { display: grid; }
  .nav-dropdown {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0;
    gap: 0.5rem;
  }

  .nav-cta {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 1.1rem;
    padding: 0.9rem 1.5rem;
  }
}

/* ── FOOTER ──
   Only the page footer. A <footer> inside a blockquote (the reviewer's name
   under a quote) keeps the quote's own styles. */
body > footer {
  background: var(--green);
  color: var(--white);
  padding: 4rem 0 2rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1.2fr 1.15fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 1.5rem;
}
.footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
}
.footer-logo img { height: 110px; width: auto; }
.footer-tagline {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 320px;
}

.footer-heading {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  padding-bottom: 0.35rem;
  margin: 0 0 1.1rem;
}
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 0.55rem; }
.footer-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-nav a:hover { text-decoration: underline; }

/* The contact details are marked up as the business's address for search
   engines; browsers would otherwise show them in italics. */
.footer-address { font-style: normal; }
.footer-contact-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.footer-contact-item a { color: var(--white); text-decoration: none; }
.footer-contact-item a:hover { text-decoration: underline; }
.footer-contact-item svg {
  width: 18px; height: 18px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-hours {
  list-style: none;
  font-size: 0.95rem;
}
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.footer-hours li:last-child { border-bottom: 0; }
.footer-hours span:first-child { font-weight: 700; white-space: nowrap; }
.footer-hours span:last-child { text-align: right; }

.footer-heading-follow { margin-top: 1.75rem; }
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: var(--radius);
  color: var(--green);
}
.footer-social a:hover,
.footer-social a:focus-visible { border-color: var(--gold); color: var(--gold-dark); }
.footer-social svg { width: 24px; height: 24px; fill: currentColor; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  font-size: 0.85rem;
  text-align: center;
}
.footer-bottom a {
  color: var(--white);
  text-decoration: underline;
}
.footer-bottom a:hover { color: var(--gold); }

/* ── ACCESSIBILITY ── */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--green);
  color: var(--white);
  padding: 0.75rem 1rem;
  z-index: 999;
  font-family: var(--font-head);
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Text for screen readers and search engines only, e.g. the rest of a short
   link: "See pricing<span class="visually-hidden"> for weddings</span>". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  :root { --section-pad: 4.5rem 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* ══════════════════════
   MOBILE (≤ 768px)
══════════════════════ */
@media (max-width: 768px) {
  :root { --section-pad: 3.5rem 0; --gutter: 1.25rem; --nav-height: 76px; }

  /* Paragraphs read left-aligned on phones, even in centred sections. */
  p { text-align: left; }

  .nav-logo-img { height: 60px; }

  /* Two centered rows: tours and event season side by side, then a larger
     phone number on its own. The text scales down slightly so the top row fits
     on small phones. display: contents lets the phone and tours sit in
     separate rows. The sticky nav and mobile menu follow --topbar-height. */
  :root { --topbar-height: 56px; }
  .topbar { font-size: clamp(0.69rem, 3.45vw, 0.8125rem); line-height: 1.25; }
  .topbar .container {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    gap: 0.05rem 0.75rem;
  }
  .topbar-left { display: contents; }
  .topbar-note { order: 1; }
  .topbar-right { order: 2; }
  .topbar-right svg { display: none; }
  .topbar-left a {
    order: 3;
    grid-column: 1 / -1;
    justify-self: center;
    font-size: 1.3rem;
    font-weight: 800;
  }
  .topbar-right span:last-child { display: none; }

  .page-hero { padding: 3.25rem 0 3rem; }
  .photo-hero { height: 600px; }
  /* Sized so a greeting like "Welcome to Land O' Goshen" stays on one line */
  .photo-hero-script { font-size: clamp(1.8rem, 8.2vw, 2.4rem); }
  .page-hero .lead { text-align: center; }

  .btn { padding: 0.95rem 1.5rem; }
  .footer-tagline,
  .footer-nav a,
  .footer-contact-item,
  .footer-hours { font-size: 1.05rem; }
  .footer-bottom { font-size: 0.95rem; }

  body > footer { padding: 3rem 0 1.5rem; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-contact-item a { min-width: 0; overflow-wrap: anywhere; }
  .footer-bottom { flex-direction: column; gap: 0.3rem; }
  .footer-bottom .sep { display: none; }
}

@media (max-width: 480px) {
  .nav-logo-img { height: 54px; }
  .btn { width: 100%; }
}

/* ═══════════════════════════════════════
   SHARED PAGE SECTIONS
   The design elements built on the homepage, reused on every page: hero, trust
   strip, photo cards, green panel, numbered list, feature cards, reviews,
   framed pricing card, FAQ and tour form. Add a page's own photo positions to
   that page's stylesheet.
═══════════════════════════════════════ */

/* ── HERO ── */
/* Full-width photo, with the text in a cream card overlapping its bottom left
   corner and the proof list beside the card. */
.hero {
  background: var(--cream);
  border-bottom: 3px solid var(--gold);
  padding: 0 0 3rem;
}
.hero-photo {
  height: clamp(380px, 56vh, 640px);
  overflow: hidden;
  border-bottom: 4px solid var(--gold);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 3rem;
  align-items: end;
}
.hero-card {
  position: relative;
  background: var(--cream-light);
  border-top: 4px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -13rem;
  padding: 2rem 2.25rem;
}
.hero h1 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  margin-top: 0.75rem;
}
.hero .lead { margin-top: 1.25rem; }
.hero .btn-group { margin-top: 1.75rem; }
/* The proof stats beside the card: a white card with three equal columns,
   a big number over a short label, and thin dividers between them. */
.hero-proof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 0;
  text-align: center;
  color: var(--green);
}
.hero-proof li { padding-inline: 0.75rem; }
.hero-proof li + li { border-left: 1px solid var(--line); }
.hero-proof a { display: block; color: inherit; text-decoration: none; }
.hero-proof a:hover span,
.hero-proof a:focus-visible span { text-decoration: underline; }
.hero-proof strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  white-space: nowrap;
}
.hero-proof span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The stats need about 380px beside the card; below that they move under the card. */
@media (max-width: 1180px) {
  .hero-inner { grid-template-columns: minmax(0, 640px); gap: 2rem; }
}

/* ── TRUST STRIP ── */
.trust-strip {
  background: var(--white);
  border-bottom: 3px solid var(--gold);
  padding: 1.75rem 0;
}
.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.trust-number {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
}
.trust-label {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--muted);
  max-width: 13rem;
}
.trust-logo { justify-content: center; }
.trust-logo img { height: 68px; width: auto; }

/* ── WHY AND WHAT WE HOST HEADINGS ── */
/* Desktop: left aligned with a gold bar down the side.
   Phones: centered, with a larger title and a short gold line under it. */
/* Styled like the homepage headings, with no side bar. A heading that opens
   a section (directly inside .container) is centered; one inside a column or
   card stays left-aligned. */
.split-head {
  max-width: 800px;
  margin-bottom: 2.25rem;
}
.split-head p { margin-top: 1rem; font-size: 1.15rem; }
.container > .split-head {
  max-width: 760px;
  margin: 0 auto 3.25rem;
  text-align: center;
}

/* ── WHY COUPLES CHOOSE THE FARM ── */
/* A wider container than the rest of the page so the four card headings
   have room to wrap in two lines instead of three. What We Host matches it
   so the two left-aligned headings line up. */
.why .container,
.offer .container { max-width: 1400px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.why-card {
  background: var(--cream-light);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.why-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.why-body { padding: 1.5rem; }
.why-card h3 { margin-bottom: 0.6rem; }
.why-card p { font-size: 1.1rem; }

/* ── MEET IAN AND CLAIR ── */
/* The photo runs to the left edge of the screen, with a green panel beside it. */
/* The photo fills the section, with a dark green card on the right, like
   Meet Ian and Clair on the homepage. */
.guide {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  padding: 6rem max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: var(--green-dark);
  color: var(--cream);
}
.guide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 25, 20, 0.1), rgba(0, 25, 20, 0.75) 60%);
}
.guide-photo { position: absolute; inset: 0; }
.guide-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-copy {
  position: relative;
  z-index: 1;
  max-width: 580px;
  padding: 3rem;
  background: rgba(0, 40, 30, 0.78);
  border: 1px solid var(--gold);
  backdrop-filter: blur(6px);
}
.guide-copy h2 { color: var(--cream-light); }
.guide-copy .eyebrow { color: var(--gold-light); }
.guide-copy .lead { margin: 1rem 0 1.25rem; }
.guide-copy .btn { margin-top: 1.75rem; }

/* ── WHAT WE HOST ── */
/* Weddings is the large card; the other two stack beside it. */
.offer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
}
.offer-card {
  position: relative;
  display: block;
  min-height: 300px;
  background: var(--green-dark);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  transition: transform 0.2s;
}
.offer-card:first-child { grid-row: 1 / 3; min-height: 500px; }
.offer-card:hover,
.offer-card:focus-visible { transform: translateY(-4px); }
.offer-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 40, 30, 0.92) 40%, rgba(0, 40, 30, 0.15) 90%);
}
.offer-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.5rem;
}
.offer-best {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.offer-body h3 { font-size: 1.45rem; color: var(--white); margin-bottom: 0.4rem; }
.offer-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  border-bottom: 3px solid var(--gold);
}

/* ── REVIEWS ── */
.reviews-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.reviews-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.reviews-head { margin-bottom: 1.5rem; }
.review-card {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
}
.review-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.review-card footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.95rem;
}
.review-card strong {
  font-family: var(--font-head);
  color: var(--green);
}
.review-card footer span { color: var(--muted); }
.reviews .section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  text-align: left;
}

/* ── HOW IT WORKS ── */
.process-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.process-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.process-head { margin-bottom: 1.5rem; }
.process-head p { margin-top: 1rem; font-size: 1.15rem; }
.process-steps {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
/* The big gold number sits to the left of the step's title and text. */
.process-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1.25rem;
}
.process-num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font: 700 1.3rem/1 var(--font-head);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold);
}
.process-step h3 { margin-bottom: 0.4rem; }
.process-step p { font-size: 1rem; }
.process .section-cta { margin-top: 1.75rem; text-align: left; }

/* ── FINAL CTA ── */
/* A full-width photo with a cream card overlapping its bottom edge. Each page
   sets its own photo position in css/<page>.css. */
/* Like Schedule a Tour on the homepage. Desktop: the photo fills the section
   and a framed cream card sits on the right. Phones: the photo is an arch
   above the card on cream, and a script "Land O' Goshen" line replaces the
   eyebrow. */
.page-cta {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--green-dark);
}
.page-cta-photo { position: absolute; inset: 0; }
.page-cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.page-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 25, 20, 0.45);
}
.page-cta .container { position: relative; z-index: 1; }
.page-cta-card {
  max-width: 640px;
  margin-left: auto;
  padding: 2.75rem;
  background: var(--cream-light);
  outline: 1px solid var(--gold);
  outline-offset: -12px;
}
.page-cta-script { display: none; }

/* ── LINK CARDS ── */
/* Cards that send visitors on to other pages, used on the thank-you and 404 pages. */
.link-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.link-grid a {
  display: block;
  height: 100%;
  padding: 1.75rem;
  background: var(--cream-light);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -8px;
  color: var(--text);
  text-decoration: none;
}
.link-grid a:hover,
.link-grid a:focus-visible { background: var(--white); }
.link-grid strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--green);
}

/* ── PRICING ── */
/* One card with a gold frame over a darkened photo of the deck. */
.pricing {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);
}
.pricing-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 30, 0.72);
}
.pricing .container { position: relative; z-index: 1; }
.pricing-card {
  max-width: 760px;
  margin-inline: auto;
  background: var(--cream-light);
  border: 2px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -10px;
  padding: 2.75rem;
  text-align: center;
}
.pricing-card .lead { margin: 1rem 0 1.5rem; }
.pricing-card .lead strong { color: var(--green); }
.pricing-card .btn-group { justify-content: center; }
.pricing-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.pricing-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
}
.pricing-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--gold-dark);
  border-bottom: 3px solid var(--gold-dark);
  transform: rotate(-45deg);
}
.pricing-note {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
/* ── FAQ ── */
.faq-inner { max-width: 860px; }
.faq-intro { margin-bottom: 2.25rem; text-align: center; }
.faq-intro p { margin-top: 1rem; }
.faq-list {
  display: grid;
  gap: 0.75rem;
}
/* Soft rounded cream rows, like the homepage FAQ. A plus turns into a dash
   when the answer is open. */
.faq-item {
  padding: 0 1.5rem;
  background: var(--cream-light);
  border-radius: 20px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.2rem 2.5rem 1.2rem 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--green);
}
.section-cream .faq-item { background: var(--white); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.6rem/1 var(--font-head);
  color: var(--gold-dark);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  padding: 0 0 1.25rem;
  font-size: 1rem;
}

/* ── SCHEDULE A TOUR ── */
/* The photo is wider than the section and shifted left, which keeps the couple
   clear of the form card. */
.contact {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);
}
.contact-bg {
  position: absolute;
  top: 0;
  left: -45%;
  width: 150%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 30, 0.25);
}
.contact .container { position: relative; z-index: 1; }
.contact-form-card {
  max-width: 620px;
  margin-left: auto;
  background: var(--white);
  color: var(--text);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem;
}
.contact-form-card .lead { margin: 1rem 0 1.5rem; }
.contact-alt { margin-top: 1rem; font-size: 1rem; text-align: center; }
.contact-alt a { font-weight: 700; word-break: break-word; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-field { margin-bottom: 1rem; }
.form-field > label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: var(--green);
}
.form-req { color: var(--gold-dark); }
.form-optional { font-weight: 400; color: var(--muted); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
}
.contact-form textarea { display: block; resize: vertical; }
.contact-form input::placeholder { color: #8A8F8B; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 77, 58, 0.15);
}
.contact-form .is-invalid { border-color: #B3261E; }
/* Space for the Turnstile spam check, so the button doesn't jump when it loads. */
.form-turnstile { min-height: 65px; margin-bottom: 0.5rem; }
.contact-submit { width: 100%; margin-top: 0.5rem; }
.form-next {
  margin-top: 1rem;
  font-size: 0.95rem;
  text-align: center;
  color: var(--muted);
}
/* The honeypot field is kept off screen, not display:none, so bots still see it. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
}
.form-status.is-success { background: var(--green); color: var(--white); }
.form-status.is-error { background: var(--white); border: 2px solid #B3261E; color: #B3261E; }

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  .trust-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .why-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════
   SMALL TABLET (≤ 900px)
══════════════════════ */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-card { margin-top: -5rem; padding: 1.5rem; }
  .offer-grid,
  .reviews-inner,
  .process-inner { grid-template-columns: 1fr; }
  .guide { justify-content: center; padding: 4rem var(--gutter); }
  .guide::after { background: rgba(0, 25, 20, 0.55); }
  .guide-copy { padding: 2rem 1.5rem; }
  .offer-grid { grid-template-rows: auto; }
  .offer-card { min-height: 360px; }
  .offer-card:first-child { grid-row: auto; min-height: 420px; }
  .offer-card::after { background: linear-gradient(to top, rgba(0, 40, 30, 0.92) 50%, rgba(0, 40, 30, 0.15) 95%); }
  .reviews-photo img,
  .process-photo img { aspect-ratio: 3 / 2; }

  /* On phones the photo sits above the form so the couple isn't hidden. */
  .contact { padding: 0 0 2.5rem; background: var(--cream); }
  .contact::after { display: none; }
  .contact-bg { position: static; left: 0; width: 100%; height: 280px; display: block; }
  .contact-form-card { max-width: none; margin: -3rem 0 0; }
}

/* ══════════════════════
   MOBILE (≤ 768px)
══════════════════════ */
@media (max-width: 768px) {
  .hero { padding: 0 0 2.5rem; }
  .hero-photo { height: 300px; min-height: 0; }
  .hero-card { margin-top: -3rem; }
  .hero .lead { text-align: left; }
  .hero-proof { padding-block: 1rem; }
  .hero-proof li { padding-inline: 0.4rem; }
  .hero-proof span { font-size: 0.8rem; }

  /* Each number sits above its label, so the labels get the full column. */
  .trust-strip { padding: 1.75rem 0; }
  .trust-inner { gap: 1.75rem 1.25rem; align-items: start; }
  .trust-item { flex-direction: column; gap: 0.4rem; text-align: center; }
  .trust-number { font-size: 1.75rem; }
  .trust-label { font-size: 1rem; max-width: none; }
  .trust-logo { justify-content: center; align-self: center; }

  .split-head {
    max-width: none;
    text-align: center;
  }
  .split-head p { text-align: center; }
  .split-head h2 { font-size: 2rem; }

  .why-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .link-grid { grid-template-columns: minmax(0, 1fr); }
  .page-cta { padding: 4rem 0; background: var(--cream); }
  .page-cta::after,
  .page-cta-card .eyebrow { display: none; }
  .page-cta-photo {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: 420px;
    aspect-ratio: 4 / 5;
    margin: 0 auto 2.5rem;
    border-radius: 999px 999px 0 0;
    overflow: hidden;
  }
  .page-cta-card { max-width: none; padding: 0; background: none; outline: 0; }
  .page-cta-card .split-head,
  .page-cta-card .split-head p { text-align: left; }
  .page-cta-script {
    display: block;
    font: 400 2.6rem/1.1 var(--font-script);
    color: var(--gold-dark);
  }
  .why-card p,
  .process-step p,
  .faq-item p,
  .pricing-list li { font-size: 1.05rem; }

  .pricing-card { padding: 2rem 1.5rem; }
  .faq-item { padding: 0 1.1rem; }

  .contact-form-card { padding: 1.5rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}