:root{

  /* Master Pro brand palette */

  --navy:#0b2447;

  --navy-deep:#071a34;

  --blue:#1f5f9f;

  --blue-2:#123f73;

  --gold:#f4c542;

  --gold-dark:#c99714;

  --charcoal:#1e2933;

  --gray:#64748b;

  --gray-dark:#475569;

  --light:#f4f7fb;

  --light-2:#eef3f9;

  --white:#ffffff;

  --border:#dbe3ee;

  --shadow-sm:0 8px 22px rgba(11,36,71,.08);

  --shadow:0 18px 45px rgba(11,36,71,.14);

  --radius:18px;

  --radius-sm:12px;

  --max-width:1180px;

}



*,

*::before,

*::after{

  box-sizing:border-box;

}



html{

  scroll-behavior:smooth;

}



body{

  margin:0;

  font-family:Inter,Arial,sans-serif;

  color:var(--charcoal);

  background:var(--white);

  line-height:1.65;

  -webkit-font-smoothing:antialiased;

}



body,

button,

input,

select,

textarea{

  font-family:Inter,Arial,sans-serif;

}



a{

  color:inherit;

  text-decoration:none;

}



img{

  max-width:100%;

  height:auto;

  display:block;

}



button,

input,

select,

textarea{

  font:inherit;

}



.container{

  width:min(var(--max-width),92%);

  margin-inline:auto;

}



h1,

h2,

h3,

h4{

  color:var(--navy);

  margin-top:0;

}



p{

  margin-top:0;

}



a,

button{

  transition:

    color .2s ease,

    background-color .2s ease,

    border-color .2s ease,

    transform .2s ease,

    box-shadow .2s ease;

}



a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible,

summary:focus-visible{

  outline:3px solid rgba(244,197,66,.6);

  outline-offset:3px;

}



/* =========================================================

   TOP BAR + NAVIGATION

========================================================= */



.site-header{

  position:relative;

  z-index:100;

}



.topbar{

  background:var(--navy);

  color:var(--white);

  font-size:.9rem;

}



.topbar-inner{

  min-height:42px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:1rem;

  padding:.5rem 0;

}



.topbar a{

  color:var(--gold);

  font-weight:800;

}



.topbar a:hover{

  color:#ffe083;

}



.main-nav{

  background:rgba(255,255,255,.98);

  box-shadow:0 2px 18px rgba(15,23,42,.08);

  position:sticky;

  top:0;

  z-index:100;

  backdrop-filter:blur(10px);

}



.nav-inner{

  min-height:82px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:1.5rem;

}



.brand{

  display:flex;

  align-items:center;

  gap:.8rem;

  flex-shrink:0;

  font-size:1.15rem;

}



.brand-mark{

  display:grid;

  place-items:center;

  width:48px;

  height:48px;

  border-radius:14px;

  background:var(--navy);

  color:var(--gold);

  font-weight:900;

  letter-spacing:.03em;

  box-shadow:var(--shadow-sm);

}



.brand strong{

  display:block;

  color:var(--navy);

  line-height:1.1;

}



.brand small{

  display:block;

  margin-top:.2rem;

  color:var(--blue);

  font-weight:800;

  letter-spacing:.06em;

  text-transform:uppercase;

}



.nav-menu{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:1.05rem;

  font-weight:700;

}



.nav-menu > a,

.nav-dropdown > a{

  display:block;

  padding:.7rem .15rem;

  white-space:nowrap;

}



.nav-menu a:hover,

.nav-dropdown:hover > a{

  color:var(--blue);

}



.nav-cta{

  background:var(--gold);

  color:var(--navy)!important;

  padding:.8rem 1.05rem!important;

  border-radius:999px;

  box-shadow:0 8px 20px rgba(244,197,66,.24);

}



.nav-cta:hover{

  background:#ffd45c;

  transform:translateY(-1px);

}



.nav-toggle{

  display:none;

  background:var(--navy);

  color:#fff;

  border:0;

  border-radius:10px;

  padding:.7rem .9rem;

  font-size:1.2rem;

  cursor:pointer;

}



.nav-dropdown{

  position:relative;

}



.dropdown-menu{

  display:none;

  position:absolute;

  top:calc(100% + 1px);

  left:-.75rem;

  min-width:310px;

  padding:.65rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:14px;

  box-shadow:var(--shadow);

}



.dropdown-menu a{

  display:block;

  padding:.75rem .8rem;

  border-radius:10px;

  color:var(--charcoal);

  line-height:1.35;

}



.dropdown-menu a:hover{

  background:var(--light);

  color:var(--blue);

}



.nav-dropdown:hover .dropdown-menu{

  display:block;

}



/* =========================================================

   HERO

========================================================= */



.hero{

  position:relative;

  min-height:650px;

  display:flex;

  align-items:center;

  overflow:hidden;

  color:#fff;



  /*

   * Relative URL keeps this working both inside /MPG/

   * and later on the customer's root domain.

   */

  background:

    linear-gradient(90deg,rgba(7,26,52,.96),rgba(11,36,71,.83)),

    url('../images/projects/hero-gutters.jpg');



  background-size:cover;

  background-position:center;

}



.hero::after{

  content:"";

  position:absolute;

  inset:auto -120px -180px auto;

  width:430px;

  height:430px;

  border-radius:50%;

  background:rgba(244,197,66,.08);

  pointer-events:none;

}



.hero-content{

  position:relative;

  z-index:1;

  max-width:880px;

  padding:6rem 0;

}



.eyebrow{

  margin-bottom:.5rem;

  color:var(--gold);

  font-weight:900;

  letter-spacing:.11em;

  text-transform:uppercase;

  font-size:.8rem;

}



.hero h1{

  max-width:900px;

  margin:.45rem 0 1.25rem;

  color:#fff;

  font-size:clamp(2.65rem,5.4vw,5.1rem);

  line-height:.98;

  letter-spacing:-.035em;

}



.hero p{

  max-width:760px;

  margin-bottom:.85rem;

  color:#e7eef8;

  font-size:1.13rem;

}



.hero .hero-lead{

  font-size:clamp(1.1rem,1.5vw,1.3rem);

  font-weight:600;

  color:#fff;

}



.hero-actions,

.cta-actions{

  display:flex;

  flex-wrap:wrap;

  gap:1rem;

  margin-top:2rem;

}



/* =========================================================

   BUTTONS

========================================================= */



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:.45rem;

  min-height:52px;

  border:2px solid transparent;

  border-radius:999px;

  padding:.9rem 1.35rem;

  font-weight:900;

  line-height:1;

  cursor:pointer;

}



.btn:hover{

  transform:translateY(-2px);

}



.btn-primary{

  background:var(--blue);

  color:#fff;

}



.btn-primary:hover{

  background:var(--blue-2);

}



.btn-gold{

  background:var(--gold);

  color:var(--navy);

}



.btn-gold:hover{

  background:#ffd45c;

  box-shadow:0 10px 24px rgba(244,197,66,.22);

}



.btn-light{

  background:#fff;

  color:var(--navy);

  border-color:#fff;

}



.btn-light:hover{

  background:var(--light);

}



.btn-dark{

  background:var(--navy);

  color:#fff;

}



.btn-dark:hover{

  background:var(--blue-2);

}

.project-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.project-feature-card{
  display:block;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  color:inherit;
  text-decoration:none;
}

.project-feature-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.project-feature-card img{
  display:block;
  width:100%;
  height:240px;
  object-fit:cover;
}

.project-feature-card div{
  padding:1.25rem;
}

.project-feature-card h3{
  margin:0 0 .5rem;
  color:var(--navy);
}

.project-feature-card p{
  margin:0;
  color:var(--gray-dark);
}

@media(max-width:900px){
  .project-feature-grid{
    grid-template-columns:1fr;
  }

  .project-feature-card img{
    height:auto;
    max-height:360px;
    object-fit:cover;
  }
}



/* =========================================================

   GENERAL SECTIONS

========================================================= */



.section{

  padding:5.5rem 0;

}



.section-muted{

  background:var(--light);

}



.section-header{

  max-width:820px;

  margin-bottom:2.35rem;

}



.section-header h2,

.content h2{

  margin:.35rem 0 .9rem;

  color:var(--navy);

  font-size:clamp(2rem,3.5vw,3.15rem);

  line-height:1.08;

  letter-spacing:-.025em;

}



.section-header p:not(.eyebrow){

  color:var(--gray-dark);

  font-size:1.05rem;

}



.split{

  display:grid;

  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

  gap:3rem;

  align-items:center;

}

.service-image-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:start;
}

.service-image{
  margin:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.service-image img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}

.service-image figcaption{
  padding:.8rem 1rem;
  color:var(--gray-dark);
  font-size:.9rem;
  line-height:1.4;
}

@media(max-width:1000px){
  .service-image-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){
  .service-image-grid{
    grid-template-columns:1fr;
  }

  .service-image img{
    height:210px;
  }
}


/* =========================================================

   TRUST BAR

========================================================= */



.trust-bar{

  position:relative;

  z-index:5;

  margin-top:-42px;

}



.trust-grid{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:.8rem;

  padding:.9rem;

  background:#fff;

  border:1px solid rgba(219,227,238,.8);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

}



.trust-grid div{

  min-height:90px;

  padding:1rem 1rem 1rem 1.1rem;

  border-left:4px solid var(--gold);

  display:flex;

  flex-direction:column;

  justify-content:center;

}



.trust-grid strong{

  display:block;

  margin-bottom:.18rem;

  color:var(--navy);

  font-size:.98rem;

}



.trust-grid span{

  color:var(--gray);

  font-size:.88rem;

  line-height:1.4;

}



/* =========================================================

   	REVIEWS

========================================================= */



.review-widget-area{

  max-width:1000px;

}



.review-placeholder{

  padding:3rem;

  background:#fff;

  border:1px dashed var(--border);

  border-radius:var(--radius);

  text-align:center;

}



.review-placeholder h3{

  margin-bottom:.5rem;

  color:var(--navy);

}



.review-placeholder p{

  margin-bottom:0;

  color:var(--gray);

}



/* =========================================================

   CARDS

========================================================= */



.card-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:1.35rem;

}



.card{

  height:100%;

  padding:1.65rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:var(--radius);

  box-shadow:var(--shadow-sm);

}



.card:hover{

  transform:translateY(-3px);

  box-shadow:var(--shadow);

}



.card h3{

  margin:0 0 .75rem;

  color:var(--navy);

  font-size:1.28rem;

  line-height:1.2;

}



.card p{

  color:var(--gray-dark);

}



.card a{

  display:inline-block;

  margin-top:.35rem;

  color:var(--blue);

  font-weight:900;

}



.card a:hover{

  color:var(--navy);

}



/* =========================================================

   FEATURE BOX / LIST

========================================================= */



.feature-box{

  padding:2.4rem;

  color:#fff;

  background:

    linear-gradient(145deg,var(--navy-deep),var(--navy));

  border-radius:var(--radius);

  box-shadow:var(--shadow);

}



.feature-box h2{

  margin:.35rem 0 1rem;

  color:#fff;

  font-size:clamp(2rem,3vw,2.75rem);

  line-height:1.08;

}



.feature-box p{

  color:#dce8f7;

}



.feature-list{

  display:grid;

  gap:.85rem;

  margin:1.25rem 0;

}



.feature-list span{

  position:relative;

  padding:1rem 1rem 1rem 2.9rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:var(--radius-sm);

  box-shadow:var(--shadow-sm);

  color:var(--charcoal);

  font-weight:700;

}



.feature-list span::before{

  content:"✓";

  position:absolute;

  left:1rem;

  top:50%;

  transform:translateY(-50%);

  display:grid;

  place-items:center;

  width:1.25rem;

  height:1.25rem;

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);

  font-size:.78rem;

  font-weight:900;

}



/* =========================================================

   PROJECT CARDS

========================================================= */



.project-card{

  min-height:310px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:1.5rem;

  overflow:hidden;

  border-radius:var(--radius);

  color:#fff;

  background:

    linear-gradient(rgba(11,36,71,.15),rgba(7,26,52,.92)),

    url('../images/projects/project-placeholder.jpg');

  background-size:cover;

  background-position:center;

  box-shadow:var(--shadow-sm);

}



.project-card:hover{

  transform:translateY(-4px);

  box-shadow:var(--shadow);

}



.project-card h3{

  margin:0 0 .45rem;

  color:#fff;

  font-size:1.45rem;

}



.project-card p{

  margin:0;

  color:#e4edf8;

}



/* =========================================================

   FAQ

========================================================= */



.faq-list{

  display:grid;

  gap:.85rem;

  max-width:900px;

}



.faq-item{

  background:#fff;

  border:1px solid var(--border);

  border-radius:14px;

  box-shadow:0 6px 18px rgba(11,36,71,.05);

  overflow:hidden;

}



.faq-item summary{

  position:relative;

  padding:1.15rem 3.5rem 1.15rem 1.25rem;

  color:var(--navy);

  font-weight:800;

  cursor:pointer;

  list-style:none;

}



.faq-item summary::-webkit-details-marker{

  display:none;

}



.faq-item summary::after{

  content:"+";

  position:absolute;

  right:1.25rem;

  top:50%;

  transform:translateY(-50%);

  color:var(--blue);

  font-size:1.55rem;

  line-height:1;

}



.faq-item[open] summary::after{

  content:"−";

}



.faq-answer{

  padding:0 1.25rem 1.2rem;

  color:var(--gray-dark);

}



.faq-answer p:last-child{

  margin-bottom:0;

}



/* =========================================================

   CTA

========================================================= */



.cta-section{

  padding:4.5rem 0;

  color:#fff;

  background:

    linear-gradient(135deg,var(--navy-deep),var(--blue-2));

}



.cta-section h2{

  margin:.3rem 0 .8rem;

  color:#fff;

  font-size:clamp(2rem,3vw,3rem);

  line-height:1.08;

}



.cta-section p:not(.eyebrow){

  color:#dce8f7;

}



.cta-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:2.5rem;

}



.cta-inner > div:first-child{

  max-width:760px;

}



.cta-actions{

  flex-shrink:0;

  margin-top:0;

}



/* =========================================================

   FORMS

========================================================= */



.forms-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:1.5rem;

}



.form-card{

  padding:2rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

}



.form-card-dark{

  background:var(--navy);

  color:#fff;

}



.form-card h2,

.form-card h3{

  color:var(--navy);

}



.form-card-dark h2,

.form-card-dark h3{

  color:#fff;

}



.form-card label{

  display:block;

  margin:.85rem 0;

  font-weight:800;

}



.form-card input,

.form-card select,

.form-card textarea{

  width:100%;

  margin-top:.35rem;

  padding:.9rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:12px;

  color:var(--charcoal);

}



.form-card textarea{

  min-height:140px;

  resize:vertical;

}



.form-card-dark input,

.form-card-dark select,

.form-card-dark textarea{

  border-color:rgba(255,255,255,.28);

}



.forms-single{

  max-width:820px;

  margin-inline:auto;

}



.forms-single .form-card{

  width:100%;

}

.hp-field{

  position:absolute!important;

  left:-10000px!important;

  width:1px!important;

  height:1px!important;

  overflow:hidden!important;

}



/* =========================================================

   INTERNAL PAGE HERO / CONTENT

========================================================= */



.page-hero{

  padding:5rem 0;

  color:#fff;

  background:

    linear-gradient(135deg,var(--navy-deep),var(--blue));

}



.page-hero h1{

  max-width:900px;

  margin:.35rem 0 .9rem;

  color:#fff;

  font-size:clamp(2.35rem,5vw,4.3rem);

  line-height:1.02;

  letter-spacing:-.03em;

}



.page-hero p{

  max-width:760px;

  color:#e0ebf7;

  font-size:1.08rem;

}



.breadcrumb{

  margin-bottom:.75rem;

  color:#dbeafe;

  font-size:.92rem;

  font-weight:700;

}



.breadcrumb a:hover{

  color:var(--gold);

}



.content{

  padding:5rem 0;

}



.content p,

.content li{

  color:var(--gray-dark);

}



.content a{

  color:var(--blue);

  font-weight:700;

}



/* =========================================================

   AREA LIST

========================================================= */



.area-list{

  padding:0;

  columns:3;

  column-gap:1rem;

  list-style:none;

}



.area-list li{

  break-inside:avoid;

  margin:.45rem 0;

  padding:.65rem .8rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:10px;

}

.area-grid{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:1rem;

}



.area-card{

  display:flex;

  align-items:center;

  min-height:72px;

  padding:1rem 1.15rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:14px;

  color:var(--navy);

  font-weight:800;

  box-shadow:var(--shadow-sm);

}



.area-card:hover{

  transform:translateY(-2px);

  color:var(--blue);

  box-shadow:var(--shadow);

}



@media(max-width:900px){

  .area-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

}



@media(max-width:600px){

  .area-grid{

    grid-template-columns:1fr;

  }

}



/* =========================================================

   FOOTER

========================================================= */



.site-footer{

  padding:4.5rem 0 1.2rem;

  background:var(--navy-deep);

  color:#dbeafe;

}



.footer-grid{

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1.3fr;

  gap:2rem;

}



.site-footer h3,

.site-footer h4{

  margin-bottom:.85rem;

  color:#fff;

}



.site-footer p{

  color:#c8d8ea;

}



.site-footer a{

  display:block;

  margin:.48rem 0;

  color:#dbeafe;

}



.site-footer a:hover{

  color:var(--gold);

}



.footer-bottom{

  display:flex;

  justify-content:space-between;

  gap:1rem;

  margin-top:2.4rem;

  padding-top:1.1rem;

  border-top:1px solid rgba(255,255,255,.14);

  color:#91a8c3;

  font-size:.9rem;

}



/* =========================================================

   STICKY CALL / QUOTE

========================================================= */



.sticky-call,

.sticky-quote{

  position:fixed;

  bottom:18px;

  z-index:200;

  border-radius:999px;

  font-weight:900;

  box-shadow:var(--shadow);

}



.sticky-call{

  left:18px;

  padding:.9rem 1rem;

  background:var(--blue);

  color:#fff;

}



.sticky-call:hover{

  background:var(--blue-2);

}



.sticky-quote{

  right:18px;

  padding:.9rem 1.2rem;

  background:var(--gold);

  color:var(--navy);

}



.sticky-quote:hover{

  background:#ffd45c;

}



/* =========================================================

   RESPONSIVE

========================================================= */



@media (max-width:1050px){

  .nav-menu{

    gap:.75rem;

    font-size:.92rem;

  }

}



@media (max-width:900px){



  .topbar-inner{

    min-height:auto;

    padding:.55rem 0;

    flex-direction:column;

    align-items:flex-start;

    gap:.15rem;

  }



  .nav-inner{

    min-height:74px;

  }



  .nav-toggle{

    display:block;

  }



  .nav-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    right:0;

    max-height:calc(100vh - 116px);

    overflow-y:auto;

    flex-direction:column;

    align-items:stretch;

    gap:.15rem;

    padding:1rem 4% 1.4rem;

    background:#fff;

    border-top:1px solid var(--border);

    box-shadow:var(--shadow);

  }



  .nav-menu.is-open{

    display:flex;

  }



  .nav-menu > a,

  .nav-dropdown > a{

    padding:.75rem .6rem;

  }



  .nav-dropdown{

    width:100%;

  }



  .dropdown-menu{

    display:block;

    position:static;

    min-width:0;

    margin:.1rem 0 .4rem;

    padding:0 0 0 .75rem;

    border:0;

    box-shadow:none;

  }



  .dropdown-menu a{

    padding:.62rem .7rem;

    font-size:.92rem;

  }



  .nav-cta{

    text-align:center;

    margin-top:.35rem;

  }



  .hero{

    min-height:600px;

  }



  .hero-content{

    padding:4.5rem 0 5.5rem;

  }



  .trust-grid,

  .card-grid,

  .split,

  .forms-grid,

  .footer-grid{

    grid-template-columns:1fr;

  }



  .trust-bar{

    margin-top:-32px;

  }



  .trust-grid{

    gap:.35rem;

  }



  .trust-grid div{

    min-height:auto;

  }



  .cta-inner{

    flex-direction:column;

    align-items:flex-start;

  }



  .cta-actions{

    margin-top:.5rem;

  }



  .area-list{

    columns:1;

  }



  .footer-bottom{

    flex-direction:column;

  }



  .sticky-call{

    left:12px;

    right:92px;

    text-align:center;

  }



  .sticky-quote{

    right:12px;

  }

}



@media (max-width:600px){



  .container{

    width:min(94%,var(--max-width));

  }



  .section{

    padding:4rem 0;

  }



  .brand-mark{

    width:43px;

    height:43px;

  }



  .brand{

    font-size:1rem;

  }



  .brand small{

    font-size:.68rem;

  }



  .hero{

    min-height:560px;

  }



  .hero h1{

    font-size:clamp(2.35rem,11vw,3.7rem);

  }



  .hero p{

    font-size:1rem;

  }



  .hero-actions,

  .cta-actions{

    width:100%;

  }



  .hero-actions .btn,

  .cta-actions .btn{

    width:100%;

  }



  .feature-box{

    padding:1.65rem;

  }



  .project-card{

    min-height:245px;

  }



  .sticky-call,

  .sticky-quote{

    bottom:10px;

    font-size:.88rem;

  }

}