/* Official raster artwork remains unchanged. Background extraction is reviewed separately. */
.header-brand {
  gap: 10px;
  padding: 8px;
  border: 0;
  background: transparent;
}
.header-logo-monogram { width: 74px; height: auto; }
.header-logo-wordmark { width: 180px; height: auto; }
.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero-copy { min-width: 0; }
/* Hero clouds (approved 2026-10-12/14): 60% opacity, 60-second linear drift of ±12%, alternating. The layer sits
   between the photograph and its shade and is confined to the sky by --safe-sky, set in main.js. The photograph,
   text and buttons never move. */
.hero-picture { z-index: -3; }
.hero-shade { z-index: -1; }
.hero-clouds {
  position: absolute;
  inset: 0 0 auto;
  height: var(--safe-sky, 0px);
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent);
}
.hero-clouds img {
  position: absolute;
  left: -25%;
  top: 0;
  width: 150%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  animation: hero-cloud-drift 60s linear infinite alternate;
}
@keyframes hero-cloud-drift {
  from { transform: translateX(-12%); }
  to { transform: translateX(12%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-clouds { display: none; }
  .hero-clouds img { animation: none; }
}
/* The foot row stays in the flow so enlarged text pushes the hero taller instead of overlapping the button.
   Bottom paddings are the earlier values minus the space the absolutely positioned foot used to occupy. */
.hero { flex-direction: column; align-items: stretch; justify-content: center; }
.hero-content { flex: 1 0 auto; padding-bottom: 44px; }
.hero-foot {
  position: static;
  flex: none;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-bottom: 28px;
}
@media (min-width: 1700px) {
  .hero-content { padding-bottom: 64px; }
}
/* Enlarged text (200%): let the navigation drop to its own row and long words break instead of widening the page. */
.header-inner { flex-wrap: wrap; row-gap: 0; }
.primary-nav { flex-wrap: wrap; justify-content: flex-end; }
h1, h2, h3, .email-link { overflow-wrap: anywhere; }
/* The logo is transparent, so the footer no longer frames it with a border and a near-black panel. */
.footer-brand { width: 220px; }
.footer-brand img { width: 100%; height: auto; }
.footer-information { min-width: 0; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
}
.footer-nav a {
  font-size: .875rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--muted);
}
.footer-nav a:hover { color: var(--gold); }

/* Existing system sans serif matches the reference's sans lettering category. */
.primary-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .035em;
  color: var(--gold);
  text-shadow: 0 1px 0 #624522, 0 2px 2px #080a0bc9;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .primary-nav a {
    background-image: linear-gradient(180deg, #fff1cf 0%, #e6c58b 30%, #c8a466 49%, #f1d7a5 53%, #d9b975 78%, #c8a466 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* A text-shadow paints over the clipped gradient and darkens the glyphs; a filter keeps the depth outside them. */
    text-shadow: none;
    filter: drop-shadow(0 1px 0 #624522) drop-shadow(0 2px 2px #080a0bc9);
  }
}
.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--gold-highlight);
  -webkit-text-fill-color: var(--gold-highlight);
}
.primary-nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.primary-nav .nav-contact { background-color: transparent; }
.menu-toggle { border: 0; background: transparent; }
.hero .button-gold { border-radius: 999px; padding-inline: 32px; }
.hero .button-gold:active { background: var(--gold); transform: translateY(0); }
.status { border-radius: 999px; padding-inline: 16px; }

@media (forced-colors: active) {
  .primary-nav a {
    background-image: none;
    color: LinkText;
    -webkit-text-fill-color: LinkText;
    text-shadow: none;
    filter: none;
  }
  .primary-nav a:hover,
  .primary-nav a:focus-visible { -webkit-text-fill-color: LinkText; }
  .primary-nav a[aria-current] { text-decoration-color: LinkText; }
}
@media (max-width: 760px) {
  .header-brand { gap: 8px; padding: 6px; }
  .header-logo-monogram { width: 48px; }
  .header-logo-wordmark { width: 120px; }
  .menu-toggle { min-width: 76px; gap: 8px; padding-inline: 8px; }
  .hero-content { padding-block: 60px 40px; }
  .hero-foot { padding-bottom: 22px; }
  .hero-foot > span { max-width: 9.375rem; }
  .footer-main { align-items: flex-start; }
  .footer-information { width: 100%; order: 3; }
  .footer-nav { gap: 8px 20px; }
  .footer-main .back-top { order: 2; }
  /* 0.7 × the original clamp(1.5rem, 6vw, 2.2rem), with a 44px touch area. */
  .email-link {
    font-size: clamp(1.05rem, 4.2vw, 1.54rem);
    min-height: 44px;
    max-width: 100%;
    padding-block: 8px;
  }
}