/* Shared homepage masthead across Home, Pricing, About, and Portfolio. */
body { --site-header-height: 92px; }
body.photo-editing { --site-header-top: var(--editor-height,116px); }
body.text-editing { --site-header-top: var(--text-editor-height,72px); }
body.combined-editor.text-editing.photo-editing { --site-header-top: var(--combined-editor-height,160px); }
body.layout-editing { --site-layout-top: var(--layout-editor-height,122px); }
body:has(> .site-header) main [id] { scroll-margin-top: var(--site-header-height); }
.site-header {
  height: var(--site-header-height);
  padding-inline: clamp(22px, 4.4vw, 76px);
  position: sticky;
  top: max(var(--site-header-top,0px),var(--site-layout-top,0px));
  gap: 30px;
  border-bottom: 1px solid #252d3024;
  background: #ffffff;
  background-image: none;
  color: #252d30;
}
.site-header .brand { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.site-header .brand .brand-art { width: 230px; }
.site-header .menu-toggle { display: none; }
.site-header .site-nav,
.site-header .site-nav.is-open {
  display: flex;
  position: static;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  background-image: none;
}
.site-header .nav-group { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); }
.site-header .site-nav a,
.site-header .site-nav.is-open a {
  font: 400 10px/1.5 Body, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  min-height: 44px;
}
.site-header .site-nav a::after { background: #252d30; bottom: 9px; }
.site-header .site-nav .nav-inquire {
  min-height: 38px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid #252d304a;
  background: transparent;
  border-radius: 0;
}
.site-header .site-nav .nav-inquire::after { content: none; }
.site-header .site-nav .nav-inquire:hover { background: #252d30; color: #fafaf8; }
.site-header :focus-visible { outline-color: currentColor; }
.site-header .menu-icon::before, .site-header .menu-icon::after { background: currentColor; }
@media (min-width: 1500px) {
  .site-header { padding-inline: max(76px, calc((100vw - 1370px) / 2)); }
}
/* A compact bar also fits laptop windows and narrow desktop preview panels. */
@media (min-width: 601px) and (max-width: 1050px) {
  body { --site-header-height: 82px; }
  .site-header { gap: 18px; padding-inline: 22px; }
  .site-header .brand .brand-art { width: 170px; }
  .site-header .nav-group { gap: 16px; }
  .site-header .site-nav a, .site-header .site-nav.is-open a { letter-spacing: .08em; }
  .site-header .site-nav .nav-inquire { padding-inline: 12px; }
}
@media (max-width: 600px) {
  body { --site-header-height: 76px; }
  .site-header { gap: 20px; }
  .site-header .brand { position: static; transform: none; }
  .site-header .brand .brand-art { width: 194px; }
  .site-header .menu-toggle { display: inline-flex; }
  .site-header .menu-toggle .micro { font: 400 10px/1.7 Body, Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
  .site-header .site-nav { display: none; }
  .site-header .site-nav.is-open {
    display: flex;
    position: fixed;
    z-index: 20;
    inset: calc(var(--site-header-height) + max(var(--site-header-top,0px),var(--site-layout-top,0px))) 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    padding: 25px clamp(22px, 4.4vw, 76px);
    overflow-y: auto;
    background: #ffffff;
  }
  .site-header .site-nav.is-open .nav-group { display: contents; }
  .site-header .site-nav.is-open a { font: 300 34px/1.2 Refined, Georgia, serif; text-transform: none; letter-spacing: -.015em; }
  .site-header .site-nav.is-open .nav-inquire { padding: 10px 24px; margin-top: 12px; }
}

/* Click-to-open pricing choices share the same navigation on every page. */
@media (max-width:360px) {
  .site-header { padding-inline: 16px; gap: 12px; }
  .site-header .menu-toggle { flex-shrink: 0; }
}
.site-header { z-index: 25; }
.nav-pricing { position: relative; }
.site-header .pricing-menu-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: 400 10px/1.5 Body, Arial, sans-serif; text-transform: uppercase; letter-spacing: .13em; cursor: pointer; }
.site-header .pricing-menu-toggle.is-current { text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 1px; }
.pricing-dropdown { position: absolute; top: 100%; right: 0; z-index: 30; min-width: 270px; padding: 8px; border: 1px solid #252d3024; background: #fff; box-shadow: 0 8px 22px #252d3012; }
.pricing-dropdown[hidden] { display: none; }
.site-header .site-nav .pricing-dropdown a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; font: 400 14px/1.4 Baskervville, Georgia, serif; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.site-header .site-nav .pricing-dropdown a::after { content: none; }
.site-header .site-nav .pricing-dropdown a:hover, .site-header .site-nav .pricing-dropdown a[aria-current="page"] { background: #edf1f3; color: #3d4f60; }
@media (min-width:601px) and (max-width:1050px) {
 .site-header .pricing-menu-toggle { letter-spacing: .08em; }
}
@media (max-width:600px) {
 .site-header .site-nav.is-open .pricing-menu-toggle { font: 300 34px/1.2 Refined, Georgia, serif; text-transform: none; letter-spacing: -.015em; }
 .site-header .site-nav.is-open .pricing-dropdown { position: static; min-width: 0; margin-top: 10px; padding: 0 0 0 16px; border: 0; border-left: 1px solid #252d3024; box-shadow: none; }
 .site-header .site-nav.is-open .pricing-dropdown a { min-height: 40px; padding: 8px 10px; font: 400 18px/1.4 Refined, Georgia, serif; }
 .site-header .site-nav.is-open { justify-content: flex-start; }
}
