/* ============================================================
   SHARED UTILITY CSS — applies to about, contact, privacy-policy pages
   ============================================================ */

/* PAGE HEADER (contact, privacy — solid dark header) */
.page-header{padding:140px 7% 80px;background:var(--dark2);border-bottom:1px solid var(--border)}
.page-breadcrumb{font-size:.75rem;color:rgba(255,255,255,.45);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.page-breadcrumb a{color:var(--gold)}
.page-header h1{font-family:var(--serif);font-size:clamp(2.5rem,5vw,3.8rem);font-weight:400;line-height:1.1}
.page-header h1 em{color:var(--gold);font-style:italic}
.page-header p{color:var(--muted);font-size:1rem;margin-top:1rem;max-width:500px;line-height:1.7}

/* PAGE HERO (about — image hero) */
.page-hero{min-height:55vh;position:relative;display:flex;align-items:flex-end;padding:0 7% 6rem;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 100%);
}
.page-hero-content{position:relative;z-index:1;max-width:700px}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.5rem,5vw,4rem);font-weight:400;line-height:1.1;color:#FAF8F3}
.page-hero h1 em{color:var(--gold);font-style:italic}

/* RESPONSIVE */
@media(max-width:768px){
  .page-header{padding:110px 5% 50px}
  .page-hero{padding:0 5% 4rem}
}