/* ---------------------------------------------------------------
   CPM Services brand palette
   Source: CPM Corporate Identity Manual 2020, p.4 (LOGO COLOURS)
     RED    Pantone 1795 C  C9  M98 Y100 K1   -> #D92727
     BLACK  Pantone Black C  C0  M0  Y0   K100 -> #231F20
     BLUE   Pantone 660 C   C85 M44 Y0   K0   -> #007DC0
   --------------------------------------------------------------- */
/* Brand */
/* Neutrals */
/* About / alternating section background */
/* Static accent rules - form fields, table cells, separators.
   Charcoal rather than red, so red stays reserved for calls to
   action and hover states. */
/* Quiet outline for cards (blog listing) */
/* --- Legacy variable names, remapped to the CPM palette ---------
   Kept so existing partials keep compiling; prefer the names above
   in any new work. */
/* lighter red, hover */
/* darker red, button hover */
/* ---------------------------------------------------------------
   CPM Services typography
   CI Manual p.4  : logo font is Maven Pro
   CI Manual p.6  : preferred san-serif order -> Maven Pro, Avenir,
                    Arial, Helvetica
   Type scale measured from CPM-Website-2026.ai (1920px canvas,
   1200px content column):
     36px  hero headline / "CPM Services"
     32px  section headings, tile labels, blue CTA
     24px  three-column headings
     20px  footer column headings
     16px  body, nav, buttons, footer links
   Note: the artwork sets body leading at ~1.22; raised to 1.5 here
   for readability on screen.
   --------------------------------------------------------------- */
/* Scale */
/* inner-page title band */
h1 {
  font-size: 32px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding: 0;
  margin: 0 0 40px;
  color: #231f20;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 30px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 30px;
  line-height: 1.3;
}

h4 {
  font-size: 18px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 24px;
  line-height: 1.3;
}

h5 {
  font-size: 16px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 20px;
  line-height: 1.4;
}

h6 {
  font-size: 14px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 20px;
  line-height: 1.4;
}

p {
  font-size: 16px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.5;
}

a {
  font-size: inherit;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #d92727;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #b81f1f;
}

/* Utility: the design uses uppercase only for footer column headings */
.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pageTitle {
  font-size: 32px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding-bottom: 30px;
}

.pageSubTitle {
  font-size: 24px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

.title-h1 {
  font-size: 32px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding-bottom: 40px;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.title-h2 {
  font-size: 24px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
}

/* Title band - charcoal ground with the logo's roof outline ghosted
   behind the title (white at 8%, baked into roof-ghost.svg). Shared
   by .banner-h1 (inner pages) and .blog-header (articles).
   Geometry: at background-size `auto 200%` the artwork is twice the
   band height, and a y-position of 30% resolves to an offset of
   (H - 2H) * 0.3 = -0.3H - i.e. the roof sits 30% above the band, so
   its arc spans the heading. Using a background rather than a
   pseudo-element keeps the text painting on top without needing a
   wrapper element in the templates.
   On narrow screens the heading wraps and the band gets taller, which
   would scale the roof up with it, so drop to 150% and re-solve:
   P = 100 * 0.2 / (1.5 - 1) = 40% puts the arc 20% above the band. */
.banner-h1 {
  background-color: #231f20;
  background-image: url(../images/SVG/roof-ghost.svg);
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: auto 200%;
}
@media screen and (max-width: 769px) {
  .banner-h1 {
    background-size: auto 150%;
    background-position: center 40%;
  }
}
.banner-h1 {
  padding: 60px 1em;
  text-align: center;
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

@media screen and (max-width: 769px) {
  .banner-h1 {
    padding: 40px 1em;
    font-size: 28px;
  }
}
/*----------- Typography End ---------*/
.category__detail {
  width: 100%;
  max-width: 1920px;
  margin: auto;
}
.category__detail p {
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.category__detail .category__detail--featuregrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 60px;
}
.category__detail .category__detail--featuregrid .box {
  border: 1px solid #000;
  padding: 30px 60px;
  display: flex;
  gap: 30px;
  align-items: center;
  cursor: pointer;
  text-decoration: none !important;
}
.category__detail .category__detail--featuregrid .box .icon {
  flex: 0 0 110px;
}
.category__detail .category__detail--featuregrid .box .icon img {
  max-width: 100%;
  width: auto;
  height: auto;
}
.category__detail .category__detail--featuregrid .box .text {
  flex: 0 1 auto;
  width: 100%;
}
.category__detail .category__detail--featuregrid .box .text h2 {
  margin-bottom: 15px;
  color: #d92727;
}
.category__detail .category__detail--featuregrid .box .text p {
  color: #000;
  margin: 0;
}
.category__detail .category__detail--featuregrid .box:hover {
  border-color: #d92727;
}
@media screen and (max-width: 769px) {
  .category__detail .category__detail--featuregrid .box {
    display: grid;
  }
  .category__detail .category__detail--featuregrid .box .text {
    text-align: center;
  }
}
@media screen and (max-width: 567px) {
  .category__detail .category__detail--featuregrid {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=category_detail.css.map */