/* The site header and footer on the estimator page, and nothing else.

   Every rule is scoped under .hs-shell (the header and footer) or .hs-mounted
   (the estimator page's body), so none of it can reach the estimator's own
   markup, and the site's normal stylesheets are never loaded here. Tokens are
   declared on .hs-shell rather than :root, because the estimator defines
   variables with the same names on :root.

   Font weights are limited to what the estimator already embeds: Cormorant
   Garamond 600, and Jost 300, 400 and 600. */

.hs-shell {
  --cream: #F7F3EC; --paper: #FCFAF6; --linen: #EFE7D8; --navy: #16304F;
  --ink: #0A1621; --gold: #C3A268; --brass-hi: #E2CB99; --brass-lo: #8A6C33;
  --border: #E6DAC4; --body: #5B6B7A; --muted: #7D7161;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Century Gothic", "Trebuchet MS", sans-serif;
  font-family: var(--sans); font-weight: 300; line-height: 1.5; box-sizing: border-box;
}
.hs-shell *, .hs-shell *::before, .hs-shell *::after { box-sizing: border-box; }
.hs-shell :focus-visible { outline: 2px solid var(--brass-lo); outline-offset: 3px; }

/* The estimator's own top bar repeats the brand mark the site header now carries. */
.hs-mounted .masthead { display: none; }

/* Header */
.hs-shell.site-header { display: flex; align-items: center; gap: 1rem 1.6rem;
  padding: .8rem 20px; padding-top: calc(.8rem + env(safe-area-inset-top, 0px));
  position: sticky; top: 0; z-index: 20; background: var(--cream); color: var(--navy);
  border-bottom: 1px solid var(--border); }
.hs-shell .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-inline-end: auto; }
.hs-shell .brand img { display: block; height: 38px; width: auto; }
.hs-shell .brand-name { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; line-height: 1;
  color: var(--navy); white-space: nowrap; }
.hs-shell .site-nav { display: flex; gap: 1.15rem; align-items: center; }
.hs-shell .site-nav a { font-size: .8rem; letter-spacing: .04em; color: var(--body); white-space: nowrap;
  text-decoration: none; padding-block: .25rem; border-bottom: 1px solid transparent; }
.hs-shell .site-nav a:hover, .hs-shell .site-nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
.hs-shell .hs-cta { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; padding: .7rem 1.1rem; white-space: nowrap;
  border-radius: 2px; background: var(--navy); color: var(--cream); border: 1px solid var(--navy); }
.hs-shell .menu-toggle { display: none; font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy); background: transparent;
  border: 1px solid var(--border); border-radius: 2px; padding: .7rem .9rem; cursor: pointer; }

@media (min-width: 1180px) { .hs-shell .site-nav .nav-secondary { display: none; } }

@media (max-width: 1179px) {
  .hs-shell.site-header { flex-wrap: wrap; }
  .hs-shell .menu-toggle { display: inline-block; }
  .hs-shell .site-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-block: .6rem 1rem; border-top: 1px solid var(--border); }
  .hs-shell.site-header.nav-open .site-nav { display: flex; max-height: calc(100dvh - 5rem); overflow-y: auto; }
  .hs-shell .site-nav a { font-size: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--border); }
  .hs-shell .site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
}

@media (max-width: 520px) {
  .hs-shell.site-header { gap: .6rem; }
  .hs-shell .brand { gap: .5rem; }
  .hs-shell .brand img { height: 34px; }
  .hs-shell .brand-name { font-size: 1.05rem; line-height: 1.05; white-space: normal; max-width: 6.2em; }
  .hs-shell .hs-cta { padding: .62rem .8rem; letter-spacing: .12em; }
  .hs-shell .menu-toggle { padding: .62rem .75rem; letter-spacing: .12em; }
  .hs-shell .cta-long { display: none; }
}

/* Footer */
.hs-shell.hs-footer { background: var(--ink); color: var(--cream); padding: clamp(3rem, 7vw, 5rem) 20px; }
.hs-shell .hs-wrap { max-width: 1120px; margin-inline: auto; }
.hs-shell .footer-logo { height: 120px; width: auto; display: block; }
.hs-shell .footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-block: 2rem 1rem; }
.hs-shell .footer-nav a { font-size: .86rem; color: var(--linen); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: .15rem; }
.hs-shell .footer-nav a:hover { border-bottom-color: var(--brass-hi); }
.hs-shell address { font-style: normal; font-size: .92rem; line-height: 1.8; color: var(--linen); margin-block: 1.4rem; }
.hs-shell .foot { font-size: .82rem; line-height: 1.6; color: var(--muted); margin: 0; }