/* ============================================================
   Ocean Area Living — Legal pages (Privacy Policy, Terms)
   Used only by privacy-policy.html and terms.html.
   Scoped to .lg-* so nothing else on the site is affected.
   ============================================================ */

/* ---------- Solid nav on a light page ----------
   Mirrors the .page-light rules other light pages get from their own
   stylesheets. Without these the fixed nav stays transparent and its
   content collides with the page heading. */
.page-light .nav { background: var(--white); border-bottom-color: var(--navy-line); }
.page-light .nav .brand,
.page-light .nav .nav-links a { color: var(--navy); }
.page-light .nav .nav-cta { background: var(--navy); color: var(--paper); }
.page-light .nav .nav-burger span { background: var(--navy); }
.page-light .nav .nav-call { border-color: var(--navy); }

.lg-main { background: var(--white); }

/* ---------- Masthead ---------- */
.lg-head {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 168px 64px 56px;
}
.lg-folio {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--navy); opacity: .6;
}
.lg-h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 64px); line-height: 1.08;
  color: var(--navy); margin: 20px 0 0; letter-spacing: -.01em;
}
.lg-h1 i {
  font-family: var(--font-voice); font-style: italic;
  color: var(--dusted-deep);
}
.lg-effective {
  font-family: var(--font-voice); font-style: italic;
  font-size: 19px; color: var(--ink); opacity: .7;
  margin: 22px 0 0;
}

/* ---------- Body ---------- */
.lg-body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 64px 120px;
}
.lg-rule {
  height: 1px; background: var(--navy-line);
  margin: 0 0 56px;
}
.lg-content { max-width: 68ch; }

.lg-content p {
  font-family: var(--font-ui); font-weight: 400;
  font-size: 15.5px; line-height: 1.85;
  color: var(--ink); margin: 0 0 22px;
}
.lg-content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.25;
  color: var(--navy);
  margin: 52px 0 18px;
  padding-top: 4px;
}
.lg-content h2:first-child { margin-top: 0; }

.lg-content ul { margin: 0 0 22px; padding-left: 22px; list-style: none; }
.lg-content li {
  font-family: var(--font-ui); font-weight: 400;
  font-size: 15.5px; line-height: 1.85;
  color: var(--ink); position: relative; margin-bottom: 10px;
}
.lg-content li::before {
  content: '';
  position: absolute;
  left: -18px; top: 12px;
  width: 8px; height: 1px;
  background: var(--dusted-deep);
}
.lg-content a {
  color: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  transition: border-color .2s ease;
}
.lg-content a:hover { border-bottom-color: var(--navy); }
.lg-content strong { font-weight: 600; color: var(--navy); }

/* Contact block at the end */
.lg-contact {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--navy-line);
}
.lg-contact p { margin-bottom: 6px; }
.lg-contact .lg-org {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--navy);
}

/* Back link */
.lg-back { margin-top: 56px; }
.lg-back a {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); opacity: .7;
  border-bottom: 1px solid var(--navy-line);
  padding-bottom: 3px;
}
.lg-back a:hover { opacity: 1; border-bottom-color: var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lg-head { padding: 148px 40px 48px; }
  .lg-body { padding: 0 40px 96px; }
}
@media (max-width: 860px) {
  .lg-head { padding: 128px 24px 40px; }
  .lg-body { padding: 0 24px 72px; }
  .lg-content { max-width: none; }
  .lg-content h2 { font-size: 23px; margin-top: 40px; }
  .lg-content p, .lg-content li { font-size: 15px; }
}