/* Broker★Agent Advisor: shared site styles (header, footer, tokens).
   Newly written for the BRAG rebuild. Values measured from the live site's own
   stylesheets (reference BRAG-REFERENCE30); no legacy code is included. */

/* Display face: Cormorant Garamond (SIL OFL 1.1), the same files the live site uses. */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-display: swap; src: url(fonts/cormorant-garamond-300.ttf) format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-400.ttf) format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500.ttf) format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-600.ttf) format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-display: swap; src: url(fonts/cormorant-garamond-700.ttf) format("truetype"); }

:root {
  --gold: #E4B446;
  --bronze: #916342;
  --ink: #111111;
  --cream: #FAF8F2;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: Arial, Helvetica, sans-serif;
  /* Page frame around the homepage content (see home.css). */
  --page-bg: #FFFFFF;
  --content-max: 1240px;
  --page-gutter: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: var(--font-body); }
img { max-width: 100%; }

.visually-hidden, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus { position: absolute; z-index: 10000; top: 8px; left: 8px; padding: 10px 16px; background: var(--gold); color: var(--ink); }

/* ---------- Header ----------
   Values from the live header stylesheet and rendered measurements
   (reference BRAG-REFERENCE32): 70px bar, 1180px row, 300px logo,
   14px links 24px apart, Top 100 bold; phone: 68px bar, 220px logo,
   full-width menu of 48px rows. */
.site-header { position: relative; z-index: 9999; background: var(--ink); padding: 0 32px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1180px; min-height: 70px; margin: 0 auto; }
.site-header__logo { display: block; flex: 0 0 300px; width: 300px; line-height: 0; }
.site-header__logo img { display: block; width: 300px; height: auto; }
.site-header a:focus-visible, .site-nav__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.site-nav { flex: 1 1 0%; min-width: 0; }
.site-nav ul { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: flex; align-items: center; padding: 12px 0; color: #F5F5F5; font: 500 14px/1.4 var(--font-body); text-decoration: none; transition: color .3s cubic-bezier(.42, .01, .58, 1); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav .site-nav__strong { font-weight: 700; }

.site-nav__toggle { display: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #F5F5F5; cursor: pointer; justify-content: flex-end; align-items: center; }
.site-nav__toggle svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.site-nav__icon-close { display: none !important; }
.site-nav__toggle[aria-expanded="true"] .site-nav__icon-open { display: none !important; }
.site-nav__toggle[aria-expanded="true"] .site-nav__icon-close { display: block !important; }

@media (max-width: 980px) {
  .site-header { padding: 0 20px; }
  .site-header__inner { min-height: 68px; gap: 20px; }
  .site-header__logo { flex-basis: 220px; width: 220px; }
  .site-header__logo img { width: 220px; }
  .site-nav { flex: 0 0 auto; }
  .site-nav__toggle { display: flex; }
  .site-nav ul { display: none; position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100dvh - 60px); overflow-y: auto; background: var(--ink); }
  .site-nav.is-open ul { display: block; }
  .site-nav li + li { border-top: 1px solid #333333; }
  .site-nav a { min-height: 48px; padding: 0 22.5px; font-size: 15px; font-weight: 400; }
}
@media (max-width: 480px) {
  .site-header { padding: 0 18px; }
}

/* ---------- Footer ---------- */
/* 17px / 1.7 is the footer's measured inherited text size on the live site (BRAG-REFERENCE32). */
.site-footer { border-top: 1px solid var(--bronze); background: var(--ink); color: #F5F5F5; font: 17px/1.7 var(--font-body); }
.site-footer__inner { width: calc(100% - 64px); max-width: 1180px; margin: 0 auto; padding: 44px 0 24px; }
.site-footer__main { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.site-footer__main > * { min-width: 0; }
.site-footer strong { font-weight: 700; }
.site-footer__star { color: var(--gold); font-weight: 800; }
.site-footer__logo { display: inline-block; max-width: 100%; margin-bottom: 18px; line-height: 0; }
.site-footer__logo img { display: block; width: 300px; max-width: 100%; height: auto; }
.site-footer__positioning { max-width: 390px; margin: 0 0 16px; color: #D5D5D5; font-size: 15px; line-height: 1.65; }
.site-footer__signoff { margin: 0; font-size: 17px; line-height: 1.5; }
.site-footer__signoff strong { color: var(--gold); }
.site-footer__column h2 { margin: 0 0 12px; color: var(--gold); font: 700 12px/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.site-footer__column ul { margin: 0; padding: 0; list-style: none; }
.site-footer__column a { display: inline-block; padding: 8px 0; color: #F5F5F5; font-size: 14px; line-height: 1.5; text-decoration: none; }
.site-footer__column a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #333333; }
.site-footer__copyright { margin: 0; color: #BDBDBD; font-size: 12px; line-height: 1.7; }
.site-footer__copyright strong { color: #F5F5F5; }
.site-footer__tagline { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; margin: 0; color: #BDBDBD; font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__tagline span { white-space: nowrap; }

@media (max-width: 980px) {
  .site-footer__inner { width: calc(100% - 40px); }
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer__tagline { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .site-footer__tagline { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 480px) {
  .site-footer__inner { width: calc(100% - 36px); padding: 36px 0 24px; }
  .site-footer__logo img { width: 220px; }
  .site-footer__main { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__bottom { margin-top: 24px; }
}