: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);
}

/* =========================================================
   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;
}

/* =========================================================
   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;
  }
}