/* The inner-page opening with its photograph behind the words (pageHero
   imageStyle "cover", the user's choice of 2026-10-05 after the Foundation
   site). Loaded by that opening only (cms/src/frontend/blocks). Every selector
   starts with `html`: this file loads BEFORE site.css, whose .page-hero rules
   these override, so an equally specific selector here would lose. */

/* Nothing sits across the photograph's foot any more (At a glance is in the
   words, 2026-10-14), so the next section starts at the photograph. */
html .page-hero.page-hero-cover{padding:0;background:var(--warm)}

/* The photograph under the whole width, the brand purple washing over it:
   60% behind the words, the least that keeps white text at 4.5:1 over any
   photograph (measured over every opening, 2026-10-15: the brightest need
   58%), 30% at the edges. The client found the near-black at 80% "too
   dark/black" (2026-10-15) after the purple at 80% read "too purple"
   (2026-10-05, 2026-10-13); the user chose this, option B. --shade is the
   brand purple unless the CMS's Settings name another (--wash on the page,
   cms/src/heroWash.ts). */
html .page-hero-cover{--shade:var(--wash,53,0,79)}
html .cover-stage{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(440px,calc(100svh - var(--head-h,144px) - 140px),600px);background:rgb(var(--shade));color:#fff}
html .cover-photo{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden}
html .cover-photo picture{display:block;height:100%}
html .cover-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
html .cover-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--shade),.3) 0%,rgba(var(--shade),.6) 18%,rgba(var(--shade),.6) 82%,rgba(var(--shade),.3) 100%)
}

/* The words across most of the width (the client, 2026-10-13: "squeezed,
   confined to the left"): 64% of the container, the headline uncapped, the
   intro in full white; centred, the intro justified with its last line
   centred (the user, the same day), so the wash is even across the middle. */
html .cover-body{padding:clamp(48px,6vw,88px) 0;text-align:center}
html .cover-body > *{max-width:64%;margin-inline:auto}
html .page-hero-cover .cover-body .lead{text-align:justify;text-align-last:center}
html .page-hero-cover .hero-actions{justify-content:center}
html .page-hero-cover .hero-figures{justify-content:center}
html .page-hero-cover .cover-body h1{line-height:1.06;color:#fff}
html .page-hero-cover .cover-sub{margin:var(--space-4) auto 0;font-family:var(--font-head);font-weight:700;font-size:var(--fs-h3);line-height:1.3;color:#fff}
html .page-hero-cover .cover-body .lead{margin-top:var(--space-5,20px);color:#fff}
/* Why Enwealth's intro at the size of the paragraphs under it (the user,
   2026-10-16), not the lede's: this page only. */
html main[data-page="why-enwealth"] .page-hero-cover .cover-body .lead{font-size:var(--fs-body);line-height:1.7}
html .page-hero.page-hero-cover .hero-actions .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--plum-dark)}
html .page-hero.page-hero-cover .hero-actions .btn:not(.primary){background:transparent;border-color:rgba(255,255,255,.72);color:#fff}
html .page-hero.page-hero-cover .hero-actions .btn:not(.primary):hover{background:rgba(255,255,255,.12);border-color:#fff}
html .page-hero-cover .btn .ar,html .page-hero-cover .btn svg{margin-right:-4px}

/* The opening's figures, white on the wash. */
html .page-hero-cover .hero-figures{margin-top:var(--space-8)}
html .page-hero-cover .hero-figures div{border-right-color:rgba(255,255,255,.24)}
html .page-hero-cover .hero-figures dt{color:#fff}
html .page-hero-cover .hero-figures dd{color:rgba(255,255,255,.8)}

/* At a glance in the words: its lines ticked in white under the buttons (the
   user, 2026-10-14, over a card across the photograph's foot that squeezed
   them into columns). A centred block whose lines start level; the tick is
   drawn, a lime disc with a dark mark. */
html .cover-ticks{display:grid;justify-content:center;gap:10px;margin:var(--space-8) auto 0;padding:0;list-style:none;text-align:left}
html .cover-ticks li{position:relative;padding-left:32px;font-size:var(--fs-body);line-height:1.5;color:#fff}
html .cover-ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--lime)}
html .cover-ticks li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--plum-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
html .cover-ticks b{font-weight:700}
html .cover-ticks a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px}
html .cover-ticks a:hover{text-decoration-color:#fff}

/* Words on the left, the facts in a card on the right, so an opening uses
   its width rather than its height: Who We Are first (the client,
   2026-10-21: "the banner is too big"; the user chose this, option A), then
   every opening with At a glance lines or figures (the user, the same day).
   The words leave the middle, so the wash is the even 60% the words need
   everywhere; a long intro stays justified, its last line to the left.
   Openings with no facts keep the centred words above; tablets and phones
   keep the stack below. */
@media (min-width:1081px){
  html .cover-stage:has(.cover-facts){min-height:0}
  html .cover-stage:has(.cover-facts) .cover-photo::after{background:rgba(var(--shade),.6)}
  html .cover-body:has(> .cover-facts){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:56px;align-items:center;padding:56px 0;text-align:left}
  html .cover-body:has(> .cover-facts) > *{max-width:none;margin-inline:0}
  html .page-hero-cover .cover-body:has(> .cover-facts) .lead{text-align:justify;text-align-last:left}
  html .page-hero-cover .cover-body:has(> .cover-facts) .hero-actions{justify-content:flex-start}
  html .cover-facts{padding:28px 32px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md,16px);background:rgba(var(--shade),.55)}
  html .cover-facts .cover-ticks{justify-content:stretch;gap:12px;margin:0}
  /* With figures (Who We Are's 300+): the card takes the wider column, the
     figures beside the lines behind a rule (the user: the middle sat empty). */
  html .cover-body:has(> .cover-facts .hero-figures){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  html .cover-facts:has(.hero-figures){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:32px}
  html .page-hero-cover .cover-facts .hero-figures{order:-1;flex-direction:column;align-self:stretch;justify-content:center;gap:20px;margin:0;padding-right:32px;border-right:1px solid rgba(255,255,255,.2)}
  html .page-hero-cover .cover-facts .hero-figures div{padding-right:0;border-right:0}
}

/* Tablets: the words take more of the width, so the wash does too. */
@media (max-width:1080px){
  html .cover-photo::after{background:rgba(var(--shade),.6)}
}
/* Phones: the words fill the width, so the wash is even from top to foot. */
@media (max-width:760px){
  html .cover-stage{min-height:0}
  html .cover-photo::after{background:rgba(var(--shade),.6)}
  html .cover-body{padding:40px 0 44px}
  html .cover-body > *{max-width:none}
  html .cover-ticks{margin-top:var(--space-6)}
}