/* page-masthead.css — 15 Sep 2026
   The Insights cover format as the H1 block of the main pages and the subpages:
   white sheet, double hairline keyline, kicker with the red mark, uppercase title with the closing
   clause in deep red, hairline foot with the page's proof line and the ZATRA mark.
   Loaded last; specificity carries an ID (h1:is(#…)) so hero-title-unify.css and the v12 inline
   block do not win back the title. Scoped to header.page-masthead only. */

html body .page-masthead:not(#_):not(#__):not(#___):not(#____){
  --mh-ink:#0A0E12; --mh-ink-50:rgba(10,14,18,.55); --mh-line:rgba(10,14,18,.10);
  --mh-red:#F6010F; --mh-red-deep:#900303;
  --mh-font:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mh-pad:clamp(1.25rem,.9rem + 1.8vw,2.5rem);    /* 20px → 40px; 36px at 1440 */
  --mh-t:clamp(1.625rem,1rem + 2.2vw,3rem);        /* 26px → 48px */
  position:relative!important; display:flex!important; flex-direction:column!important; gap:0!important;
  box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important;
  justify-self:stretch!important; align-self:stretch!important;
  margin:0!important; padding:var(--mh-pad)!important;
  background:#fff!important; border:1px solid var(--mh-line)!important; border-radius:4px!important;
  box-shadow:inset 0 0 0 10px #fff, inset 0 0 0 11px var(--mh-line)!important;
  color:var(--mh-ink)!important; text-align:start!important;
  font-family:var(--mh-font)!important;
}
html body .page-masthead:not(#_):not(#__):not(#___):not(#____) > *{ text-align:start!important; }
.page-masthead::after{
  content:"ZATRA"; position:absolute; inset-inline-end:var(--mh-pad); bottom:calc(var(--mh-pad) - .1em);
  font:800 .75rem/1 var(--mh-font); letter-spacing:.2em; color:var(--mh-ink); pointer-events:none;
}

/* kicker */
html body .page-masthead > .eyebrow:not(#_):not(#__):not(#___):not(#____),
html body .page-masthead > .it-kicker:not(#_):not(#__):not(#___):not(#____),
html body .page-masthead > .kicker:not(#_):not(#__):not(#___):not(#____),
html body .page-masthead > .retention-kicker:not(#_):not(#__):not(#___):not(#____){
  display:block!important; width:auto!important; max-width:none!important; justify-self:stretch!important; align-self:stretch!important;
  margin:0 0 1.35rem!important; padding:0!important; background:none!important; border:0!important; border-radius:0!important;
  box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  font:700 .75rem/1.35 var(--mh-font)!important; letter-spacing:.2em!important; text-transform:uppercase!important;
  color:var(--mh-ink-50)!important; -webkit-text-fill-color:var(--mh-ink-50)!important; white-space:normal!important; opacity:1!important; transform:none!important;
}
html body .page-masthead > .eyebrow:not(#_):not(#__):not(#___):not(#____)::before,
html body .page-masthead > .it-kicker:not(#_):not(#__):not(#___):not(#____)::before,
html body .page-masthead > .kicker:not(#_):not(#__):not(#___):not(#____)::before,
html body .page-masthead > .retention-kicker:not(#_):not(#__):not(#___):not(#____)::before,
html body .page-masthead > .eyebrow:not(#_):not(#__):not(#___):not(#____) .dot{ display:none!important; content:none!important; }
html body .page-masthead > .eyebrow:not(#_):not(#__):not(#___):not(#____)::after,
html body .page-masthead > .it-kicker:not(#_):not(#__):not(#___):not(#____)::after,
html body .page-masthead > .kicker:not(#_):not(#__):not(#___):not(#____)::after,
html body .page-masthead > .retention-kicker:not(#_):not(#__):not(#___):not(#____)::after{
  content:""!important; display:block!important; width:54px!important; height:4px!important; margin:.7rem 0 0!important;
  background:var(--mh-red)!important; border:0!important; border-radius:0!important; position:static!important;
}

/* title — the ID list gives the rule ID-level specificity against the hero sheets */
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____){
  margin:0!important; padding:0!important; max-width:100%!important; width:auto!important; min-width:0!important; overflow-wrap:normal!important;
  font-family:var(--mh-font)!important; font-size:var(--mh-t)!important; font-weight:800!important;
  line-height:1.04!important; letter-spacing:-.01em!important; text-transform:uppercase!important;
  color:var(--mh-ink)!important; -webkit-text-fill-color:var(--mh-ink)!important; background:none!important;
  text-wrap:balance!important; text-wrap-style:balance!important; white-space:normal!important;
  hyphens:none!important; word-break:normal!important; overflow-wrap:normal!important;
  opacity:1!important; transform:none!important; text-align:start!important;
}
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .hero-h1-line{
  display:block!important; font:inherit!important; letter-spacing:inherit!important; text-transform:inherit!important;
  color:inherit!important; -webkit-text-fill-color:inherit!important; background:none!important;
  text-wrap:balance!important; text-wrap-style:balance!important; opacity:1!important; transform:none!important;
  white-space:normal!important; max-width:none!important;
}
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .accent,
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .hero-h1-line--accent{
  display:block!important; color:var(--mh-red-deep)!important; -webkit-text-fill-color:var(--mh-red-deep)!important;
  background:none!important; -webkit-background-clip:initial!important; background-clip:initial!important;
  white-space:normal!important; max-width:none!important;
}
.page-masthead > h1 br{ display:none!important; }

/* foot — the page's own proof line (main pages) or desk line (subpages) */
html body .page-masthead > .hero-proof:not(#_):not(#__):not(#___):not(#____),
html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____),
html body .page-masthead > .page-masthead-foot:not(#_):not(#__):not(#___):not(#____){
  display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:.45rem 1.1rem!important;
  margin:1.6rem 0 0!important; padding:1rem 5.5rem 0 0!important; padding-inline-end:5.5rem!important;
  border:0!important; border-top:1px solid var(--mh-line)!important; list-style:none!important;
  font:600 .75rem/1.45 var(--mh-font)!important; letter-spacing:.14em!important; text-transform:uppercase!important;
  color:var(--mh-ink-50)!important; -webkit-text-fill-color:var(--mh-ink-50)!important; max-width:none!important; width:auto!important; opacity:1!important; transform:none!important;
  align-self:stretch!important; justify-self:stretch!important; margin-inline:0!important; text-align:start!important;
}
html body .page-masthead > .hero-proof:not(#_):not(#__):not(#___):not(#____) li{
  display:inline-flex!important; align-items:center!important; gap:.5rem!important; margin:0!important; padding:0!important;
  font:600 .75rem/1.45 var(--mh-font)!important; letter-spacing:inherit!important; text-transform:uppercase!important; color:var(--mh-ink-50)!important; -webkit-text-fill-color:var(--mh-ink-50)!important; white-space:normal!important;
}
.page-masthead > .hero-proof li + li::before,
.page-masthead > .it-split-hero-contact > a::before{ content:"\00b7"; margin:0 .55rem 0 0; color:var(--mh-ink-50); }
html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____){ gap:.45rem .55rem!important; }
html body .page-masthead > .hero-proof:not(#_):not(#__):not(#___):not(#____) li a{ display:inline!important; min-height:0!important; padding:0!important; border:0!important; background:none!important; color:var(--mh-ink)!important; font-weight:700!important; text-decoration:none!important; }
.page-masthead > .hero-proof .stars{ display:inline-flex!important; gap:2px!important; }
.page-masthead > .hero-proof .stars i{ width:10px!important; height:10px!important; }
html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____) > span{ font:600 .75rem/1.45 var(--mh-font)!important; letter-spacing:inherit!important; text-transform:uppercase!important; color:var(--mh-ink-50)!important; -webkit-text-fill-color:var(--mh-ink-50)!important; }
html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____) > a{ font:700 .75rem/1.45 var(--mh-font)!important; letter-spacing:inherit!important; text-transform:uppercase!important; color:var(--mh-ink)!important; -webkit-text-fill-color:var(--mh-ink)!important; text-decoration:none!important; border:0!important; background:none!important; padding:0!important; min-height:0!important; }
/* the template's own " · " text node between the span and the link is replaced by the ::before dot */
html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____){ font-size:0!important; }

/* v12 main pages: the card is the first child of .hero-copy; the lede and actions keep their gap below it.
   The copy column widens a little so the card holds its title rows whole. */
@media (min-width:981px){
  html body .hero:has(.hero-copy > .page-masthead) .hero-grid:not(#_):not(#__):not(#___):not(#____){ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important; }
}
/* v12 main pages: the card is the first child of .hero-copy; the lede and actions keep their gap below it */
.hero-copy > .page-masthead{ margin-bottom:0!important; }
.hero .hero-copy > .page-masthead + .lede{ margin-top:0!important; }

/* split-template subpages: the card sits at the top of the copy column; media centred beside it on desktop */
.it-split-hero .it-split-hero-copy{ text-align:start!important; justify-items:stretch!important; }
.it-split-hero .it-split-hero-copy > .page-masthead + .it-split-hero-lede{ margin-top:.25rem!important; }
@media (min-width:981px){
  html body .it-split-hero:has(> .it-split-hero-copy > .page-masthead) .it-split-hero-media:not(#_):not(#__):not(#___):not(#____){ align-self:center!important; }
}
@media (max-width:980px){
  html body .it-split-hero:has(> .it-split-hero-copy > .page-masthead) .it-split-hero-media:not(#_):not(#__):not(#___):not(#____){ order:0!important; }
  html body .it-split-hero:has(> .it-split-hero-copy > .page-masthead) .it-split-hero-copy{ text-align:start!important; justify-items:stretch!important; }
  html body .it-split-hero:has(> .it-split-hero-copy > .page-masthead) .it-split-hero-actions{ justify-content:flex-start!important; }
}

/* phone */
@media (max-width:760px){
  html body .page-masthead:not(#_):not(#__):not(#___):not(#____){ box-shadow:inset 0 0 0 6px #fff, inset 0 0 0 7px var(--mh-line)!important; }
  html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____){ line-height:1.06!important; }
  html body .page-masthead > .hero-proof:not(#_):not(#__):not(#___):not(#____),
  html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____),
  html body .page-masthead > .page-masthead-foot:not(#_):not(#__):not(#___):not(#____){ flex-direction:column!important; align-items:flex-start!important; gap:.35rem!important; padding-inline-end:0!important; letter-spacing:.1em!important; }
  html body .page-masthead > .hero-proof:not(#_):not(#__):not(#___):not(#____) > li:last-child,
  html body .page-masthead > .it-split-hero-contact:not(#_):not(#__):not(#___):not(#____) > a{ padding-inline-end:4.5rem!important; }
  .page-masthead > .hero-proof li + li::before,
  .page-masthead > .it-split-hero-contact > a::before{ content:none!important; }
  html body .page-masthead > .eyebrow:not(#_):not(#__):not(#___):not(#____),
  html body .page-masthead > .it-kicker:not(#_):not(#__):not(#___):not(#____),
  html body .page-masthead > .kicker:not(#_):not(#__):not(#___):not(#____),
  html body .page-masthead > .retention-kicker:not(#_):not(#__):not(#___):not(#____){ letter-spacing:.16em!important; }
}

/* the subpage templates rendered at body{zoom:1.06} (page-spacing-home.css): every rail 6% off and the
   nav CTA past the viewport at 1440. The main pages and the Insights pages run at 1; so do these now. */
html body:not(#_):not(#__):not(#___):not(#____){ zoom:1!important; --zatra-page-zoom:1!important; }

/* bound phrases and whole rows (page-masthead.js): a name or set phrase never splits across rows;
   a short row stays whole and the size gives way; a released row wraps */
.mh-nb{ white-space:nowrap!important; }
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .hero-h1-line.mh-row-nb,
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .accent.mh-row-nb,
html body .page-masthead > h1.mh-row-nb:not(#_):not(#__):not(#___):not(#____){ white-space:nowrap!important; }
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .hero-h1-line.mh-row-nb.mh-row-wrap,
html body .page-masthead > h1:not(#_):not(#__):not(#___):not(#____) .accent.mh-row-nb.mh-row-wrap,
html body .page-masthead > h1.mh-row-nb.mh-row-wrap:not(#_):not(#__):not(#___):not(#____){ white-space:normal!important; }

/* ── page-facts: the panel that stands where an illustrative picture used to be ──────────────
   Built from the page's own routes or section heads; level with the copy on desktop, after it on a phone. */
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____){
  --mh-ink:#0A0E12; --mh-ink-70:rgba(10,14,18,.72); --mh-ink-50:rgba(10,14,18,.55); --mh-line:rgba(10,14,18,.10); --mh-red:#F6010F;
  --mh-font:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mh-pad:clamp(1.25rem,1rem + 2.2vw,3rem);
  position:relative!important; display:flex!important; flex-direction:column!important; box-sizing:border-box!important;
  align-self:stretch!important; justify-self:stretch!important; width:100%!important; max-width:none!important; min-width:0!important;
  margin:0!important; padding:var(--mh-pad)!important; background:#fff!important; border:1px solid var(--mh-line)!important; border-radius:4px!important;
  box-shadow:none!important; color:var(--mh-ink)!important; font-family:var(--mh-font)!important; text-align:start!important; overflow:visible!important;
}
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-kicker{
  display:block; margin:0 0 .5rem; padding:0 0 .9rem; border-bottom:1px solid var(--mh-line);
  font:700 .75rem/1.35 var(--mh-font); letter-spacing:.2em; text-transform:uppercase; color:var(--mh-ink-50);
}
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-rows{
  list-style:none; margin:0; padding:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; gap:0; counter-reset:facts;
}
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-rows > li{ margin:0; padding:0; border-bottom:1px solid var(--mh-line); }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-rows > li:last-child{ border-bottom:0; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-rows a{
  display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:.2rem .9rem; align-items:baseline; padding:1.1rem 0; text-decoration:none; color:inherit; border:0; background:none;
}
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-rows a::before{
  counter-increment:facts; content:counter(facts,decimal-leading-zero); grid-row:1 / span 2; align-self:start;
  font:700 .75rem/1.6 var(--mh-font); letter-spacing:.12em; color:var(--mh-ink-50);
}
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-k,
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-t,
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-l{ grid-column:2; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-k{ display:block; font:700 .6875rem/1.4 var(--mh-font); letter-spacing:.16em; text-transform:uppercase; color:var(--mh-ink-50); margin:0 0 .15rem; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-t{ display:block; font:700 1.0625rem/1.3 var(--mh-font); color:var(--mh-ink); letter-spacing:-.005em; text-wrap:balance; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-l{ display:block; margin:.3rem 0 0; font:400 .9375rem/1.55 var(--mh-font); color:var(--mh-ink-70); }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) .page-facts-rows a:hover .page-facts-t{ text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-foot{
  margin:.5rem 0 0; padding:1rem 0 0; border-top:1px solid var(--mh-line); font:700 .9375rem/1.45 var(--mh-font); color:var(--mh-ink); text-wrap:balance;
}
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-foot a{ color:inherit; text-decoration:none; border:0; display:inline; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-foot a::after{ content:"\2193"; font-weight:800; color:var(--mh-red); margin-left:.5rem; white-space:nowrap; }
html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-foot a:hover{ text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
@media (min-width:981px){
  html body .it-split-hero:has(> .page-facts){ align-items:stretch!important; }
  /* the panel ends on the 1200 rail, like the copy column starts on it */
  html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____){ margin-inline-end:max(16px, calc((100vw - 1200px) / 2))!important; width:auto!important; }
}
@media (max-width:980px){
  html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____){ order:2!important; margin-top:1.25rem!important; }
  html body .it-split-hero > .page-facts:not(#_):not(#__):not(#___):not(#____) > .page-facts-rows{ justify-content:flex-start; }
}