/* =========================================================================
   Shared page heading
   /stylesheets/page-head.css

   Link this on EVERY page, once, from includes/head.asp. It is deliberately
   small and deliberately unscoped, so any page can use the same title block:

       <div class="egct-head">
         <h1>Page Title</h1>
         <p>One line of supporting text.</p>
         <span class="egct-rule"></span>
       </div>

       <div class="egct-intro">
         <p>Opening paragraph.</p>
       </div>

   Two things to know before adding it to a page:

   1. DELETE the page's existing <h1>. Most pages already have one, usually
      inline-styled. Leaving both gives two competing titles on screen and
      two h1 elements in the markup, which is bad for search.

   2. The egct- prefix belongs to this block and to contact.css. Do not
      confuse it with egc-, which is the chat widget's namespace and defines
      its own .egc-head as a blue flex bar.

   It carries its own border-box because the site has no global reset.
   ========================================================================= */

:root{
    --egct-navy:   #123F72;
    --egct-blue:   #0167CD;
    --egct-steel:  #548CBF;
    --egct-orange: #FF5A00;
    --egct-panel:  #EEF5FC;
    --egct-line:   #D7E5F2;
    --egct-icobg:  #E8F1FB;
    --egct-muted:  #51657E;
    --egct-soft:   #7A7E91;
    /* Body copy grey. Measured off seo.html, about-us.html and sem.html:
       running text on this site is rgb(119,119,119) in Roboto, inside
       div.twelve > div. The intro block below uses it so a page heading
       does not arrive with body text a different colour from every other
       page. */
    --egct-body:   #777777;
}

.egct-head,
.egct-head *,
.egct-intro,
.egct-intro *{ box-sizing: border-box; }

.egct-head{ text-align: center; margin: 0 0 34px; padding: 0 16px; }

/* Some pages put the heading INSIDE a flex row - the pricing page drops it
   straight into .container.pricing-layout alongside the tier column and the
   side nav. Without this it becomes a third column and shrinks to share the
   width. Mirrors what layout.css already does for h1.page-title. */
.container.pricing-layout > .egct-head,
.container.eg-layout > .egct-head,
.container:has(> .subnav) > .egct-head{
    flex: 0 0 100%;
    order: -1;
    margin-bottom: 26px;
}
.egct-head h1{
    margin: 0 0 10px;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 46px; font-weight: 900; line-height: 1.05;
    letter-spacing: -.02em; color: var(--egct-navy);
    text-wrap: balance;
}
.egct-head p{
    margin: 0 auto 16px; max-width: 62ch;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px; line-height: 1.5; color: var(--egct-muted);
}
.egct-rule{
    display: block; width: 54px; height: 4px; margin: 0 auto;
    background: var(--egct-orange); border-radius: 2px;
}

/* Body copy that sits under a page heading. The measure is the point: the
   solutions page was carrying inline styles with no max-width, so the text
   ran the full width of the container and was hard to read. */
.egct-intro{
    max-width: 760px;
    margin: 0 auto 38px;
    padding: 0 16px;
    /* Roboto and #777 to match the running text on every other page.
       Montserrat is the display face here - it belongs to the heading, not
       to body copy. */
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--egct-body);
    text-align: center;
}
.egct-intro p{ margin: 0 0 16px; }
.egct-intro p:last-child{ margin-bottom: 0; }

@media only screen and (max-width: 959px){ .egct-head h1{ font-size: 38px; } }
@media only screen and (max-width: 767px){
    .egct-head h1{ font-size: 32px; }
    .egct-head p{ font-size: 15.5px; }
    .egct-intro{ font-size: 16px; margin-bottom: 28px; }
}
@media only screen and (max-width: 479px){ .egct-head h1{ font-size: 28px; } }
/* -------------------------------------------------------------------------
   Headings that sit inside div.menu-toggle (faqs.html)

   layout.css carries two legacy rules that are MORE specific than the
   shared ones above:

       .menu-toggle div h1        (0,0,1,2)  beats  .egct-head h1  (0,0,1,1)
       .menu-toggle .container p  (0,0,2,1)  beats  .egct-head p   (0,0,1,1)

   so on those pages the block renders as a 33px Helvetica Light steel h1
   with a 32px steel paragraph. Restating the treatment here at (0,0,3,1)
   settles it without touching the legacy rules, which still style every
   other heading inside .menu-toggle.

   The media steps have to be repeated too: specificity beats source order
   regardless of which media query a rule sits in, so without these the
   46px would hold all the way down to a phone.
   ------------------------------------------------------------------------- */
.menu-toggle .container .egct-head h1{
    margin: 0 0 10px;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--egct-navy);
}
.menu-toggle .container .egct-head p{
    margin: 0 auto 16px;
    max-width: 62ch;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--egct-muted);
}

@media only screen and (max-width: 959px){
    .menu-toggle .container .egct-head h1{ font-size: 38px; }
}
@media only screen and (max-width: 767px){
    .menu-toggle .container .egct-head h1{ font-size: 32px; }
    .menu-toggle .container .egct-head p{ font-size: 15.5px; }
}
@media only screen and (max-width: 479px){
    .menu-toggle .container .egct-head h1{ font-size: 28px; }
}
/* -------------------------------------------------------------------------
   Headings inside .intro or .sub (index.html and the pages built on .sub)

   Same problem as the .menu-toggle block above, different legacy rule:

       .intro div p, .sub div p   (0,0,1,2)  beats  .egct-head p  (0,0,1,1)

   so the subtext renders as 32px Helvetica Light steel - the style those
   pages use for their big pull-quote paragraphs. The h1 is listed too:
   nothing outranks it today, but the same rules would if a page ever wrapped
   a heading in .sub div.
   ------------------------------------------------------------------------- */
.intro .egct-head h1,
.sub .egct-head h1{
    margin: 0 0 10px;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--egct-navy);
}
.intro .egct-head p,
.sub .egct-head p{
    margin: 0 auto 16px;
    max-width: 62ch;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--egct-muted);
}

@media only screen and (max-width: 959px){
    .intro .egct-head h1,
    .sub .egct-head h1{ font-size: 38px; }
}
@media only screen and (max-width: 767px){
    .intro .egct-head h1,
    .sub .egct-head h1{ font-size: 32px; }
    .intro .egct-head p,
    .sub .egct-head p{ font-size: 15.5px; }
}
@media only screen and (max-width: 479px){
    .intro .egct-head h1,
    .sub .egct-head h1{ font-size: 28px; }
}
/* -------------------------------------------------------------------------
   Section headings

   layout.css sets these to Helvetica Light 32px/400 in steel. The face is
   real and loaded, but at 400 in a light cut it reads as a caption rather
   than a heading, and it shares nothing with the Montserrat h1 above it.

   Colour is deliberately unchanged: navy h1 over steel h2 is the hierarchy,
   and both are already tokens in this file. Size and weight do the rest.

   The layout.css rules are .intro div h2 (0,0,1,2) - the same specificity as
   these. They lose on source order, so page-head.css must stay linked AFTER
   layout.css in includes/head.asp.

   The banner h2 and the footer's .egf-h are outside .intro div / .sub div
   and are not touched.
   ------------------------------------------------------------------------- */
.intro div h2,
.sub div h2{
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--egct-steel);
}

@media only screen and (max-width: 767px){
    .intro div h2,
    .sub div h2{ font-size: 24px; }
}
@media only screen and (max-width: 479px){
    .intro div h2,
    .sub div h2{ font-size: 22px; }
}