/* ============================================================
   Legalio — interior page foundation (Templates, Our Work,
   About, Contact). A tighter masthead than the homepage hero:
   the homepage sells, these pages orient.
   ============================================================ */

.masthead{
  position:relative;
  color:var(--paper);
  overflow:hidden;
  padding:150px 0 78px;
  margin-top:-72px;                 /* slide under the transparent nav */
  background:
    radial-gradient(1000px 520px at 78% -10%, rgba(198,154,76,.13), transparent 60%),
    radial-gradient(1100px 700px at 4% 6%, rgba(58,92,152,.22), transparent 58%),
    linear-gradient(180deg,#12244A 0%,#0F1C39 62%,#0D1930 100%);
}
/* the same gold hairline that crowns the footer, inverted to close the masthead */
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line) 22%,var(--gold-line) 78%,transparent);
}
.mast-inner{position:relative;z-index:2;max-width:760px}
.mast-inner.center{margin:0 auto;text-align:center}

/* breadcrumb doubles as the eyebrow — it says where you are, not just a label */
.mast-crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-d2);margin-bottom:22px;
}
.mast-crumb a{color:var(--muted-d2);transition:color .25s}
.mast-crumb a:hover{color:var(--gold-2)}
.mast-crumb .sep{opacity:.45}
.mast-crumb b{color:var(--gold-2);font-weight:500}

.masthead h1{
  font-family:'Fraunces';font-weight:400;
  font-size:clamp(38px,5vw,62px);line-height:1.06;letter-spacing:-.025em;
  margin:0;text-wrap:balance;
}
.mast-lede{
  margin:22px 0 0;font-size:18.5px;line-height:1.6;color:var(--muted-d);max-width:600px;
  text-wrap:pretty;
}
.mast-inner.center .mast-lede{margin-left:auto;margin-right:auto}

/* a compact fact row — used where a page has real numbers worth leading with */
.mast-facts{
  display:flex;gap:38px;flex-wrap:wrap;margin-top:40px;padding-top:26px;
  border-top:1px solid var(--line-d2);
}
.mast-facts div{display:flex;flex-direction:column;gap:5px}
.mast-facts b{font-family:'Fraunces';font-size:30px;font-weight:500;line-height:1;color:#fff}
.mast-facts span{
  font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-d2);
}

@media(max-width:760px){
  .masthead{padding:126px 0 60px}
  .mast-facts{gap:26px}
}