/* ============================================================
   BEACON NEST: SITE HEADER AND HERO, IN THE HOMEPAGE'S LANGUAGE
   Top strip, bordered logo square, tracked-caps menu, square buttons,
   and a dark editorial page hero with a fine grid. Loaded after theme-luxe.css.
   ============================================================ */

/* ---- top strip ---- */
.topstrip { background: #090F0D; color: rgba(245,242,234,0.72); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.topstrip .wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; }
.topstrip span:last-child { color: #BDA17C; }
@media (max-width: 560px) { .topstrip span:last-child { display: none; } }

/* ---- header ---- */
.site-header { background: rgba(9,15,13,0.94); border-bottom: 1px solid rgba(245,242,234,0.15); }
.site-header .wrap { gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-sq { width: 40px; height: 40px; border: 1px solid #B58C5A; display: inline-flex; align-items: center; justify-content: center; color: #D1B18A; flex: none; }
.logo-sq svg { width: 22px; height: 22px; }
.logo-tx { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-size: 0.95rem; letter-spacing: 0.22em; color: #F5F2EA; font-weight: 500; }
.logo-sub { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,234,0.62); margin-top: 6px; }
@media (max-width: 420px) { .logo-sub { display: none; } }

/* The menu needs more room than before, so it switches to the button at 1180px. */
.main-nav { display: none; }
.nav-toggle { display: inline-flex; border-radius: 0; border-color: rgba(245,242,234,0.5); }
.nav-toggle span { background: #F5F2EA; }
.hdr-btn { display: none; }
@media (min-width: 1500px) {
  .main-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; margin-right: 8px; }
  .main-nav a { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,234,0.8); padding: 8px 0; }
  .main-nav a:hover, .main-nav a[aria-current="page"] { color: #D1B18A; }
  .main-nav a::after { background: #B58C5A; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}
@media (min-width: 1060px) and (max-width: 1499px) {
  .nav-toggle { display: inline-flex; }
  .mobile-nav:not([hidden]) { display: block !important; }
}
@media (min-width: 1500px) { .hdr-btn { display: inline-flex; } }
.header-actions { margin-left: auto; }
@media (min-width: 1500px) { .header-actions { margin-left: 0; } }

/* ---- full-screen menu on small screens ---- */
.mobile-nav { background: #090F0D; }
.mobile-nav nav a { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; color: #F5F2EA; border-bottom: 1px solid rgba(245,242,234,0.12); }
.mobile-nav nav a[aria-current="page"] { color: #D1B18A; }
.mobile-nav-sub a { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: #D1B18A; }
.mobile-nav-cta { display: grid; gap: 10px; margin-top: 26px; }
.mobile-nav-cta .btn { justify-content: center; }
.mobile-nav-foot a { color: rgba(245,242,234,0.8); }

/* ---- page hero: dark, editorial, fine grid ---- */
.page-hero {
  background-color: #101A16;
  background-image:
    linear-gradient(rgba(181,140,90,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181,140,90,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  padding-block: clamp(56px, 8vw, 112px);
}
.page-hero h1 { font-size: clamp(2.7rem, 1.2rem + 6.4vw, 6.2rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 16ch; }
.page-hero .lede { max-width: 56ch; font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem); }
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero::before { opacity: 0.9; }

/* ---- section headings lean editorial ---- */
.section-head h2, .section > .wrap > h2 { letter-spacing: -0.03em; }
.section-head .eyebrow { margin-bottom: 14px; }

/* ---- footer in the same hairline language ---- */
.site-footer { background: #090F0D; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #D1B18A; }
.wa-float { background: #B58C5A; color: #101A16; border-radius: 0; }
.wa-float:hover { background: #D1B18A; }

/* ---- wider canvas, like the concept; menu items never squeeze each other ---- */
:root { --max: 1360px; }
.main-nav a { flex: none; white-space: nowrap; }
.header-actions { flex: none; }
.header-actions .btn { white-space: nowrap; }
@media (min-width: 1500px) {
  .main-nav { gap: 18px; }
  .main-nav a { letter-spacing: 0.12em; font-size: 0.74rem; }
  .hdr-btn { font-size: 0.7rem; padding: 0.8em 1.05em; letter-spacing: 0.12em; }
  .header-actions { gap: 8px; }
}

/* the ad landing page's own stylesheet loads last, so these need a little more weight */
body.lp .lp-foot-small { color: rgba(245,242,234,0.74); }
body.lp .lp-hero-note { color: rgba(245,242,234,0.78); }

/* ---------------------------------------------------------------- footer, concept style */
.site-footer { padding-block: clamp(44px, 6vw, 72px) 28px; border-top: 1px solid rgba(245,242,234,0.14); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(245,242,234,0.12); }
.footer-line { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); color: #D1B18A; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-block: 26px; border-bottom: 1px solid rgba(245,242,234,0.12); }
.footer-links a { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,234,0.82); }
.footer-links a:hover { color: #D1B18A; }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 22px; font-size: 0.95rem; }
.footer-contact a { color: rgba(245,242,234,0.86); }
.footer-contact a:hover { color: #D1B18A; }
.footer-contact .footer-note { color: rgba(245,242,234,0.62); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(245,242,234,0.7); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(245,242,234,0.78); }
.footer-legal a:hover { color: #D1B18A; }
.footer-disclaimer { margin-top: 14px; max-width: 110ch; font-size: 0.78rem; line-height: 1.7; color: rgba(245,242,234,0.58); }

/* Larger reading size across the site (many visitors are older). Everything is in rem, so this scales text. */
html { font-size: 112.5%; }
@media (min-width: 1500px) { .main-nav a { font-size: 0.7rem; letter-spacing: 0.12em; } }
.site-header .wrap { max-width: 1640px; }
@media (min-width: 1500px) { .main-nav { gap: 16px; } .main-nav a { letter-spacing: 0.1em; } }

/* ---- property page: residence types ---- */
.unit-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .unit-grid { grid-template-columns: 1fr 1fr; } }
.unit-card { margin: 0; border: 1px solid rgba(16,26,22,.18); background: #FAF8F2; display: grid; }
.unit-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-bottom: 1px solid rgba(16,26,22,.12); }
.unit-card figcaption { padding: 16px 18px 18px; display: grid; gap: 4px; color: #101A16; }
.unit-card figcaption b { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.unit-card figcaption span { color: #4a5550; }
.unit-card figcaption em { color: #6F4F2B; font-style: normal; letter-spacing: .06em; font-size: .85rem; }

/* property images that should be shown whole (towers): fit inside the frame */
.img-frame.is-contain { background: #0e1914; }
.img-frame.is-contain img { object-fit: contain; }