/* Image assets — real files so the browser caches them across every page. */
:root {
  --bc-buck-creek-logo: url("../img/buck-creek-logo.webp");
  --bc-buck-mascot:     url("../img/buck-mascot.webp");
  --bc-covered-pads:    url("../img/covered-pads.webp");
  --bc-office-windmill: url("../img/office-windmill.webp");
  --bc-park-aerial-900: url("../img/park-aerial-900.webp");
  --bc-park-aerial:     url("../img/park-aerial.webp");
  --bc-shared-kitchen:  url("../img/shared-kitchen.webp");
  --bc-shower:          url("../img/shower.webp");

  /* Tye RV Park */
  --bc-tye-office:   url("../img/tye-office.webp");
  --bc-tye-laundry:  url("../img/tye-laundry.webp");
  --bc-tye-dog-park: url("../img/tye-dog-park.webp");
  --bc-tye-sites:    url("../img/tye-sites.webp");
  --bc-tye-pond:     url("../img/tye-pond.webp");

  /* Buck Creek + Patriot */
  --bc-bc-sites:      url("../img/bc-sites.webp");
  --bc-bc-aerial:     url("../img/bc-aerial.webp");
  --bc-bc-tiny-homes: url("../img/bc-tiny-homes.webp");
  --bc-patriot-site:  url("../img/patriot-site.webp");
}

/* ==========================================================================
   Buck Creek Communities — site.css
   Shared across every page. Loaded first, before home.css / property.css.

   Contents
   1. Design tokens
   2. Base + reset
   3. Layout primitives
   4. Typography
   5. Buttons
   6. Header + navigation
   7. Hero + search dock
   8. Shared blocks (icon tile, note box, footer, form note)
   9. Responsive
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------
   Single source of truth. Change a value here and it changes everywhere.
   Navy and gold are sampled from the Buck Creek logo artwork.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:        #102b42;
  --navy-2:      #17364d;
  --navy-deep:   #0b1f30;
  --gold:        #d5ad5c;
  --gold-soft:   #efd99f;   /* gold legible on navy — eyebrows, footer headings */
  --rust:        #b45d32;
  --green:       #3f6b55;

  /* Neutrals */
  --cream:       #f7f1e7;
  --cream-2:     #efe4d2;
  --ink:         #15232e;
  --muted:       #687984;
  --line:        #dfe5e8;
  --line-warm:   #ece4d6;
  --white:       #fff;

  /* Text on dark backgrounds */
  --on-dark:     #ffffff;
  --on-dark-mut: #cbd8de;

  /* Type */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --content-width: 1200px;
  --gutter: 40px;
  --section-y: 120px;
  --hero-min: 820px;

  /* Radius */
  --r-sm: 12px;
  --r-md: 17px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 6px 18px rgba(16, 43, 66, .07);
  --shadow-md: 0 12px 30px rgba(16, 43, 66, .12);
  --shadow-lg: 0 20px 60px rgba(16, 43, 66, .22);

  /* Motion */
  --ease: .2s ease;
}

@media (max-width: 660px) {
  :root {
    --gutter: 20px;
    --section-y: 90px;
    --hero-min: 740px;
  }
}

/* 2. Base + reset ---------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
ul { margin: 0; padding: 0; }

/* Keyboard focus stays visible everywhere. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--navy);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 800;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 3. Layout primitives ----------------------------------------------------- */
.container {
  width: min(var(--content-width), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding: var(--section-y) 0; }
.section--tight { padding-top: 90px; }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--cream { background: var(--cream); }

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center p { margin-inline: auto; }

/* 4. Typography ------------------------------------------------------------ */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.035em; }

h1 {
  font: 700 clamp(44px, 7vw, 90px)/.95 var(--font-display);
  margin-top: 20px;
}
h2 { font: 700 clamp(34px, 4.5vw, 56px)/1.02 var(--font-display); }
h3 { font-size: 23px; }

.section-title { margin-top: 18px; }

.kicker {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold-soft);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rust);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 31px;
  height: 2px;
  background: var(--gold);
}
/* On navy, rust goes muddy — switch to the soft gold. */
.section--navy .eyebrow,
.eyebrow--on-dark { color: var(--gold-soft); }

.lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
  margin-top: 22px;
}
.section--navy .lead { color: var(--on-dark-mut); }

/* 5. Buttons ---------------------------------------------------------------
   Four variants, used site-wide. Do not add page-local button styles.
   btn-gold    primary action on any background
   btn-navy    primary action on light backgrounds
   btn-outline secondary action on light backgrounds
   btn-ghost   secondary action on photos / dark backgrounds
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 53px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  transition: transform var(--ease), background-color var(--ease), color var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-gold    { background: var(--gold); color: var(--navy); }
.btn-navy    { background: var(--navy); color: var(--on-dark); }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--on-dark); }
.btn-ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .62);
  color: var(--on-dark);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }

/* 6. Header + navigation ---------------------------------------------------
   Announcement bar and header sit in one absolutely positioned stack over the
   hero, so no page needs to hard-code the announcement bar's height.
   -------------------------------------------------------------------------- */
.site-top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  color: var(--on-dark);
}

.announcement {
  background: var(--navy);
  color: #dce6eb;
  text-align: center;
  font-size: 13px;
  padding: 9px 15px;
}

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo {
  width: 148px;
  height: auto;
  filter: drop-shadow(0 6px 15px rgba(0, 0, 0, .28));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 800;
}
.nav-links a { opacity: .96; }
.nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.nav-links .nav-cta {
  padding: 12px 19px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: var(--r-pill);
  background: rgba(10, 30, 44, .15);
  backdrop-filter: blur(8px);
}
.nav-links .nav-cta:hover { text-decoration: none; background: rgba(10, 30, 44, .4); }

/* Marks the current page in the nav. */
.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--on-dark);
  font-size: 26px;
  line-height: 1;
  padding: 6px 4px;
  cursor: pointer;
}

/* Mobile drawer. Hidden by default; site.js flips [data-open]. */
.nav-drawer {
  display: none;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 0 22px;
}
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer a {
  display: block;
  padding: 14px 0;
  font-weight: 800;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-drawer .btn { width: 100%; margin-top: 18px; }

/* Breadcrumb — property pages need a visible route back to the portfolio. */
.breadcrumb {
  font-size: 13px;
  font-weight: 700;
  color: var(--on-dark-mut);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb span[aria-hidden] { opacity: .5; margin: 0 8px; }

/* 7. Hero + search dock ----------------------------------------------------
   Each page sets its own photo with --hero-image. The small file loads first;
   larger screens swap in the full-size one.
   -------------------------------------------------------------------------- */
.hero {
  --hero-image: var(--bc-park-aerial-900);
  position: relative;
  min-height: var(--hero-min);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--on-dark);
  background-image:
    linear-gradient(90deg, rgba(7, 23, 35, .88) 0%, rgba(7, 23, 35, .52) 46%, rgba(7, 23, 35, .12) 78%),
    linear-gradient(0deg, rgba(7, 23, 35, .72) 0%, transparent 44%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}
@media (min-width: 701px) {
  .hero { --hero-image: var(--bc-park-aerial); }
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 190px 0 150px;
  max-width: 820px;
}
.hero-copy p {
  font-size: 20px;
  color: #edf3f5;
  max-width: 700px;
  margin: 25px 0 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 35px;
}
.actions--center { justify-content: center; }

/* The dock sits in normal flow with a negative offset, so it lifts over the
   hero without any page needing compensating padding underneath. */
.search-dock {
  position: relative;
  z-index: 5;
  margin-top: -70px;
}

.search-panel {
  width: min(var(--content-width), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding: 23px;
  background: var(--white);
  color: var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr auto;
  gap: 13px;
  align-items: end;
}
/* Property pages carry fewer fields than the portfolio homepage. */
.search-panel--compact { grid-template-columns: 1.3fr 1fr 1fr auto; }

.field label,
.field .field-label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px 4px;
}

.control {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fafbfb;
  color: var(--ink);
  font-weight: 750;
}
/* Read-only summary value, styled to match a real control. */
.control--static { background: #f4f6f7; color: var(--navy); }

/* 8. Shared blocks --------------------------------------------------------- */
.icon-tile {
  --icon-bg: var(--white);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 14px;
  background: var(--icon-bg);
  color: var(--navy);
  font-size: 23px;
  box-shadow: var(--shadow-sm);
}

/* Icons. Drawn as one set at a single stroke weight and masked so they take
   the tile's own colour — the previous Unicode glyphs (⌂ ⚡ ☂ ✓) came from
   whatever font each device had, so they rendered at four different weights
   and ⚡ arrived as a colour emoji on most phones. */
.icon-tile[data-icon]::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-tile[data-icon="calendar"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.2%22 y=%224.9%22 width=%2217.6%22 height=%2215.9%22 rx=%222.4%22/%3E%3Cpath d=%22M3.2 9.9h17.6M8.2 2.9v4M15.8 2.9v4%22/%3E%3Ccircle cx=%228.1%22 cy=%2214.3%22 r=%221.15%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="plug"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 2.9v4.2M15 2.9v4.2%22/%3E%3Cpath d=%22M6.4 7.1h11.2v3.6a5.6 5.6 0 0 1-11.2 0z%22/%3E%3Cpath d=%22M12 16.3v4.8%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="canopy"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.9 10.7 12 4.5l9.1 6.2%22/%3E%3Cpath d=%22M5.6 10.9v9.6M18.4 10.9v9.6%22/%3E%3Crect x=%228.2%22 y=%2214.6%22 width=%227.6%22 height=%224.4%22 rx=%221.3%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="shield"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.1 19 5.9v5.1c0 4.4-2.9 7.4-7 8.9-4.1-1.5-7-4.5-7-8.9V5.9z%22/%3E%3Cpath d=%22M9.1 11.7 11.2 13.8l3.9-4.1%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="wifi"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.2 9.5a11 11 0 0 1 15.6 0%22/%3E%3Cpath d=%22M7.4 12.9a6.6 6.6 0 0 1 9.2 0%22/%3E%3Cpath d=%22M10.4 16.3a2.3 2.3 0 0 1 3.2 0%22/%3E%3Ccircle cx=%2212%22 cy=%2219.3%22 r=%221.05%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="laundry"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%223.1%22 width=%2216%22 height=%2217.8%22 rx=%222.4%22/%3E%3Cpath d=%22M4 7.7h16%22/%3E%3Ccircle cx=%2212%22 cy=%2214.4%22 r=%223.9%22/%3E%3Ccircle cx=%227.3%22 cy=%225.4%22 r=%22.95%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="shower"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.7v3.3%22/%3E%3Cpath d=%22M6.8 9.7a5.2 5.2 0 0 1 10.4 0z%22/%3E%3Cpath d=%22M9 12.9v1.7M12 13.5v1.7M15 12.9v1.7M10.5 17.3V19M13.5 17.3V19%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="restroom"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12.6h16v2.1a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z%22/%3E%3Cpath d=%22M12 12.6V6.5a2.6 2.6 0 0 1 2.6-2.6h2.6%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="kitchen"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 9.6h15v5.3a5 5 0 0 1-5 5H9.5a5 5 0 0 1-5-5z%22/%3E%3Cpath d=%22M2.7 9.6h18.6%22/%3E%3Cpath d=%22M8.6 6.4V4.5M12 6.4V4.5M15.4 6.4V4.5%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="paw"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%226.7%22 cy=%2210.6%22 rx=%221.85%22 ry=%222.35%22/%3E%3Cellipse cx=%2210.7%22 cy=%227.5%22 rx=%221.85%22 ry=%222.45%22/%3E%3Cellipse cx=%2215.1%22 cy=%227.5%22 rx=%221.85%22 ry=%222.45%22/%3E%3Cellipse cx=%2218.5%22 cy=%2210.8%22 rx=%221.85%22 ry=%222.35%22/%3E%3Cpath d=%22M12.6 13.3c3.1 0 5.3 2.1 5.3 4.2s-2 3.3-5.3 3.3-5.3-1.1-5.3-3.3 2.2-4.2 5.3-4.2z%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="fish"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.6 12c-2 3.2-4.6 4.8-7.6 4.8S4.4 15.2 2.4 12c2-3.2 4.6-4.8 7.6-4.8s5.6 1.6 7.6 4.8z%22/%3E%3Cpath d=%22m17.6 12 4-3.4v6.8z%22/%3E%3Ccircle cx=%227.4%22 cy=%2210.9%22 r=%22.95%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="pullthru"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.7 12h18.6%22/%3E%3Cpath d=%22M6.3 8.4 2.7 12l3.6 3.6M17.7 8.4 21.3 12l-3.6 3.6%22/%3E%3C/svg%3E"); }
.icon-tile[data-icon="highway"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8.7 3.2 4.5 20.8M15.3 3.2l4.2 17.6%22/%3E%3Cpath d=%22M12 4.7v2.6M12 10.5v2.9M12 16.5v3.4%22/%3E%3C/svg%3E"); }

.note-box {
  margin-top: 26px;
  padding: 18px 20px;
  max-width: 640px;
  background: #f7f2e8;
  border: 1px dashed #ccb071;
  border-radius: 14px;
}
.note-box strong { display: block; color: var(--navy); margin-bottom: 6px; }
.note-box p { margin: 0; color: var(--muted); font-size: 14px; }

.utility-strip {
  margin-top: 30px;
  padding: 18px 20px;
  background: #f8f5ee;
  border-left: 4px solid var(--gold);
  font-size: 14px;
  color: var(--muted);
}

/* Full-bleed closing call to action, photo behind a navy wash. */
.final-cta {
  padding: 100px 0;
  text-align: center;
  color: var(--on-dark);
  background:
    linear-gradient(rgba(16, 43, 66, .9), rgba(16, 43, 66, .9)),
    var(--hero-image, var(--bc-park-aerial)) center / cover;
}
.final-cta p {
  max-width: 700px;
  margin: 22px auto 30px;
  color: #d8e2e7;
  font-size: 18px;
}

/* Footer */
.site-footer {
  background: var(--navy-deep);
  color: #cad6dc;
  padding: 58px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, .7fr);
  gap: 45px;
}
.footer-logo { width: 190px; height: auto; margin-bottom: 20px; }
.footer-grid h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gold-soft);
  margin-bottom: 15px;
}
.footer-grid a,
.footer-grid p {
  display: block;
  color: #aebdc5;
  font-size: 14px;
  margin: 8px 0;
}
.footer-grid a:hover { color: var(--white); }
.legal {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #8398a3;
  font-size: 12px;
}

/* Availability form feedback — hidden until the script fills it in. */
.form-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: rgba(180, 93, 50, .1);
  border: 1px solid rgba(180, 93, 50, .3);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

/* 9. Responsive ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .search-panel { grid-template-columns: 1fr 1fr; }
  .search-panel .btn { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 660px) {
  .brand-logo { width: 122px; }
  .hero-copy { padding: 165px 0 110px; }
  .hero-copy p { font-size: 17px; }
  .search-panel { grid-template-columns: 1fr; }
  .search-dock { margin-top: -40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .legal { flex-direction: column; }
}