/*
Page V2 — design enhancement for CMS pages (page.php).
Loaded on top of main.css. Enhances the page CHROME only
(hero header, content typography, share, gallery) — never the
self-contained infographics inside .mce content.
Brand: navy #31485a | blue #3399d1
*/

:root{
  --pg_navy:#31485a;
  --pg_navy_deep:#16242f;
  --pg_blue:#3399d1;
  --pg_ink:#22323f;
  --pg_muted:#5c6f7e;
  --pg_line:#e3eaf0;
  --pg_ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 1. HERO (page with photo) ---------- */
.page_top_bg{
  height:460px !important;
  border-radius:24px !important;
  position:relative;
  box-shadow:0 24px 60px rgba(22,36,47,.18);
}
/* Ken-Burns-free depth scrim */
.page_top_bg::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(16,30,41,.04) 0%, rgba(16,30,41,.34) 52%, rgba(16,30,41,.84) 100%);
  z-index:1;
  pointer-events:none;
}
/* title container: bottom-left over the scrim */
.page_top_bg .sec_head.sec_normal{
  position:absolute;
  bottom:0;
  inset-inline:0;
  z-index:2;
  margin:0 !important;
  padding:0 clamp(26px,5%,64px) clamp(30px,5%,54px) !important;
  text-align:start !important;
  background:transparent !important;
}
.page_top_bg .sec_head.sec_normal span{
  position:static !important;
  display:inline-block;
  background:transparent !important;
  color:#fff !important;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:clamp(30px,4.2vw,50px) !important;
  line-height:1.1;
  letter-spacing:-.5px;
  padding:0 !important;
  border-radius:0 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
/* blue accent bar above the title */
.page_top_bg .sec_head.sec_normal span::before{
  content:'';
  display:block;
  width:52px;
  height:5px;
  border-radius:3px;
  background:var(--pg_blue);
  margin-bottom:16px;
}

/* ---------- 1b. HERO (page without photo) ---------- */
.sec_head2.sec_normal2{
  font-family:'Montserrat',sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(30px,4vw,46px) !important;
  letter-spacing:-.6px;
  color:var(--pg_ink) !important;
  padding-top:24px;
}
.sec_head2.sec_normal2 span::before{
  content:'';
  display:block;
  width:52px;
  height:5px;
  border-radius:3px;
  background:var(--pg_blue);
  margin-bottom:16px;
}

/* ---------- 2. CONTENT — website fonts + refined design ---------- */
.p_content.w1200{
  margin-top:56px !important;
}

/* website fonts: replace the content's inline Comic Sans everywhere.
   All infographics here are images, so this only touches real text. */
.mce, .mce p, .mce span, .mce li, .mce a, .mce td, .mce th, .mce em, .mce div, .mce font{
  font-family:'Segoe UI Variable Text','Segoe Fluent','Segoe UI',system-ui,-apple-system,'Helvetica Neue','roboto',arial,sans-serif !important;
}
/* Montserrat for headings + bold emphasis, matching the site's titles */
.mce h1, .mce h2, .mce h3, .mce h4, .mce h5, .mce h6, .mce strong, .mce b{
  font-family:'Montserrat',sans-serif !important;
}

.mce{
  color:#3c4d5b;
  font-size:16px;
  line-height:1.8;
  animation:pg_fade .8s var(--pg_ease) both;
}
@keyframes pg_fade{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

/* readable text column; figures/infographics stay full width */
.mce > p,
.mce > ul,
.mce > ol,
.mce > h1, .mce > h2, .mce > h3, .mce > h4{
  max-width:920px;
  margin-inline:auto;
}
.mce > p{
  margin-block:0 18px;
  line-height:1.85;
}
/* lead paragraph — the intro line, as a Montserrat sub-title */
.mce > p:first-of-type,
.mce > p:first-of-type span{
  font-family:'Montserrat',sans-serif !important;
  font-size:20px;
  line-height:1.5;
  font-weight:700;
  color:var(--pg_ink) !important;
}
.mce > p:first-of-type{ margin-bottom:24px; }

/* infographic images — centered, responsive, with breathing room */
.mce img{
  max-width:100%;
  height:auto;
  margin-block:14px;
}

/* objectives (and any top-level list) → soft card with brand bullets */
.mce > ul{
  list-style:none;
  margin-block:16px 28px;
  padding:24px 30px;
  background:#f6f8fa;
  border:1px solid var(--pg_line);
  border-radius:16px;
}
.mce > ul > li{
  position:relative;
  padding-inline-start:30px;
  margin-bottom:14px;
  line-height:1.55;
}
.mce > ul > li:last-child{ margin-bottom:0; }
.mce > ul > li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:.5em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--pg_blue);
  box-shadow:0 0 0 4px rgba(51,153,209,.18);
}
.mce a{
  color:var(--pg_blue);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.mce a:hover{ border-bottom-color:var(--pg_blue); }

/* ---------- 3. GALLERY collage ---------- */
.collage{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.project_photos_new{
  border-radius:14px !important;
  height:100%;
  object-fit:cover;
  transition:transform .35s var(--pg_ease), box-shadow .35s var(--pg_ease);
  cursor:pointer;
}
.project_photos_new:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(22,36,47,.16);
}

/* ---------- 4. SHARE ---------- */
.page_share_head{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--pg_muted);
  margin:44px 0 4px;
  padding-top:26px;
  border-top:1px solid var(--pg_line);
}

/* ---------- responsive ---------- */
@media all and (max-width:1199px){
  .page_top_bg{ height:320px !important; border-radius:18px !important; }
  .page_top_bg::after{ border-radius:18px; }
  .p_content.w1200{ margin-top:34px !important; }
}
@media all and (max-width:575px){
  .page_top_bg{ height:240px !important; }
  .page_top_bg .sec_head.sec_normal span{ font-size:26px !important; }
  .page_top_bg .sec_head.sec_normal span::before{ width:40px; height:4px; margin-bottom:10px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mce{ animation:none; }
  .project_photos_new{ transition:none; }
}