/* ============================================================================
   LAYOUT — page scaffolding and the shared heading system
   ----------------------------------------------------------------------------
   Loaded by : every page
   Depends on: base/tokens.css

   Every marketing section on the site is built from the same three parts:

     <span class="sec-eye">   small uppercase kicker above the heading
     <h2 class="sec-title">   the heading itself
     <p class="sec-sub">      one supporting paragraph

   Use these rather than restyling headings per section, so type stays
   consistent as sections are added.
   ============================================================================ */

section{padding:90px var(--gutter);}

/* Centred content column shared by every section. */
.container{max-width:var(--content-max);margin:0 auto;}

.sec-eye{
  display:block;
  font-size:0.73rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--blue);margin-bottom:0.7rem;
}

.sec-title{
  font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;
  color:var(--text-dark);margin-bottom:0.9rem;line-height:1.25;
}
.sec-title span{color:var(--navy);}

.sec-sub{
  font-size:0.97rem;color:var(--text-mid);
  max-width:580px;line-height:1.85;
}

/* Short rule used under section headings. */
.sec-divider{
  width:48px;height:3px;background:var(--navy);
  border-radius:2px;margin:1rem 0 1.5rem;
}