/* ═══════════════════════════════════════
   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: #8A6A2E;      /* Gold dark enough for text and labels on light 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 */

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

html { scroll-behavior: smooth; }
/* 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;
}

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. */
.section-cream { background: var(--cream); }
.section-green { background: var(--green); color: var(--white); }
.section-green h2,
.section-green h3 { color: var(--white); }
.section-green .eyebrow { color: var(--gold); }

.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(--cream);
  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;
}

/* ── 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);
}

/* 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; }
  .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. */
.split-head {
  max-width: 800px;
  margin-bottom: 2.25rem;
  border-left: 5px solid var(--gold);
  padding-left: 1.5rem;
}
.split-head p { margin-top: 1rem; font-size: 1.15rem; }

/* ── 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. */
.guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  background: var(--green);
  color: var(--white);
}
.guide-photo { position: relative; min-height: 420px; }
.guide-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-copy { padding: 4rem max(2rem, calc((100vw - 1200px) / 2 + 2rem)) 4rem 3.5rem; }
.guide-copy h2 { color: var(--white); }
.guide-copy .eyebrow { color: #E2C387; }
.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: 240px;
  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) 10%, rgba(0, 40, 30, 0.15) 70%);
}
.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: 2.25rem 1fr;
  column-gap: 1rem;
}
.process-num {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-dark);
}
.process-step h3 { margin-bottom: 0.4rem; }
.process-step p { font-size: 1rem; }
.process .section-cta { margin-top: 1.75rem; text-align: left; }

/* ── 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;
}
.faq-item {
  background: var(--cream-light);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.faq-item[open] { border-color: var(--gold); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus sign that turns into a minus when the answer is open. */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 16px;
  height: 3px;
  background: var(--gold-dark);
  transform: translateY(-50%);
  transition: transform 0.2s;
}
.faq-item summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(0); }
.faq-item p {
  padding: 0 1.25rem 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; }
.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; }
  .guide,
  .offer-grid,
  .reviews-inner,
  .process-inner { grid-template-columns: 1fr; }
  .guide-photo { min-height: 300px; }
  .guide-copy { padding: 2.5rem 1.25rem; }
  .offer-grid { grid-template-rows: auto; }
  .offer-card:first-child { grid-row: auto; min-height: 420px; }
  .offer-card:first-child::after { background: linear-gradient(to top, rgba(0, 40, 30, 0.92) 45%, rgba(0, 40, 30, 0.15) 90%); }
  .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; }

  .trust-strip { padding: 1.5rem 0; }
  .trust-number { font-size: 1.75rem; }
  .trust-label { font-size: 1rem; }
  .trust-logo { justify-content: flex-start; }

  .split-head {
    max-width: none;
    border-left: 0;
    padding-left: 0;
    text-align: center;
  }
  .split-head h2 { font-size: 2.1rem; }
  .split-head h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    background: var(--gold);
    margin: 1.1rem auto 0;
  }

  .why-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .why-card p,
  .process-step p,
  .faq-item p,
  .pricing-list li { font-size: 1.05rem; }

  .pricing-card { padding: 2rem 1.5rem; }
  .faq-item summary { font-size: 1.1rem; padding-right: 3rem; }

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

/* ══════════════════════
   SMALL PHONES (≤ 360px)
══════════════════════ */
@media (max-width: 360px) {
  .trust-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .trust-label { max-width: none; }
}