/* ============================================================
   CPG DEVELOPMENT
   Main Site Styles
   Digital Intelligence • AI • Strategy
   ============================================================ */

/* ============================================================
   FONT SYSTEM

   Manrope is CPG's primary UI typeface for a modern, highly
   readable digital-product experience.

   Occupied remains available as a distinctive brand typeface
   for selective use rather than general interface content.
   ============================================================ */

   @font-face {
    font-family: "Occupied";
    src:
      url("/font/Occupied-webfont.woff2") format("woff2"),
      url("/font/Occupied.woff") format("woff"),
      url("/font/Occupied.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Manrope";
    src: url("/font/Manrope-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }
  
  /* ============================================================
     DESIGN TOKENS
     ============================================================ */
  
  :root {
    /* Core brand colors */
    --cpg-black: #000000;
    --cpg-surface: #0b0b0d;
    --cpg-surface-light: #111114;
  
    --cpg-white: #ffffff;
    --cpg-text: #e8e8e8;
    --cpg-muted: #b5b5bd;
  
    --cpg-purple: #8a2be2;
    --cpg-purple-light: #a64dff;
    --cpg-purple-dark: #6516ad;
  
    --cpg-border: rgba(255, 255, 255, 0.12);
    --cpg-purple-border: rgba(138, 43, 226, 0.4);
  
    /* Layout system */
    --cpg-max-width: 1200px;
    --cpg-content-width: 900px;
    --cpg-radius: 12px;
    --cpg-transition: 0.25s ease;
  
    /* Typography system
       Manrope is the primary interface typeface for clarity,
       accessibility and a contemporary digital-product aesthetic.
       Occupied remains available for selective brand expression. */
    --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Occupied", "Manrope", sans-serif;
  
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
  }
  
  /* ============================================================
  
       RESET / BASE
  
       ============================================================ */
  
    *,
  
    *::before,
  
    *::after {
  
      box-sizing: border-box;
  
    }
  
    html {
  
      scroll-behavior: smooth;
  
      background: var(--cpg-black);
  
    }
  
    /* Manrope handles primary reading and interface content.
     This improves legibility, scanability and gives CPG the precision
     expected from a contemporary digital-product experience. */
  
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
  
    background: var(--cpg-black);
    color: var(--cpg-text);
  
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: var(--weight-regular);
    line-height: 1.7;
  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    overflow-x: hidden;
  }
  
    img {
  
      display: block;
  
      max-width: 100%;
  
      height: auto;
  
    }
  
    main {
  
      display: block;
  
    }
  
    section {
  
      position: relative;
  
    }
  
    p {
  
      margin: 0 0 1.5rem;
  
      color: var(--cpg-text);
  
      line-height: 1.7;
  
    }
  
    ul,
  
    ol {
  
      margin-top: 0;
  
    }
  
    strong {
  
      color: var(--cpg-white);
  
    }
  
    /* ============================================================
  
       ACCESSIBILITY
  
       ============================================================ */
  
    .skip-link {
  
      position: absolute;
  
      top: -100px;
  
      left: 20px;
  
      z-index: 9999;
  
      padding: 12px 18px;
  
      background: var(--cpg-white);
  
      color: var(--cpg-black);
  
      text-decoration: none;
  
      border-radius: 0 0 6px 6px;
  
    }
  
    .skip-link:focus {
  
      top: 0;
  
    }
  
    a:focus-visible,
  
    button:focus-visible {
  
      outline: 3px solid var(--cpg-purple-light);
  
      outline-offset: 4px;
  
    }
  
    /* ============================================================
  
       GLOBAL LINKS
  
       ============================================================ */
  
    a {
  
      color: var(--cpg-purple-light);
  
      text-decoration: none;
  
      transition:
  
        color var(--cpg-transition),
  
        border-color var(--cpg-transition),
  
        background-color var(--cpg-transition),
  
        transform var(--cpg-transition);
  
    }
  
    a:hover {
  
      color: var(--cpg-white);
  
    }
  
    /* ============================================================
  
       SHARED CONTAINER
  
       ============================================================ */
  
    .container,
  
    .cpg-container {
  
      width: min(100% - 48px, var(--cpg-max-width));
  
      margin-inline: auto;
  
    }
  
    /* ============================================================
  
       TYPOGRAPHY
  
       ============================================================ */
  
    h1,
  
    h2,
  
    h3,
  
    h4,
  
    h5,
  
    h6 {
  
      margin-top: 0;
  
      color: var(--cpg-white);
  
      font-family: "Occupied", Arial, sans-serif;
  
      font-weight: normal;
  
      line-height: 1.2;
  
    }
  
    h1 {
  
      max-width: 1000px;
  
      margin-inline: auto;
  
      margin-bottom: 1.5rem;
  
      font-size: clamp(2.6rem, 6vw, 5rem);
  
      text-align: center;
  
    }
  
    h2 {
  
      margin-bottom: 1.5rem;
  
      color: var(--cpg-purple-light);
  
      font-size: clamp(2rem, 4vw, 3.4rem);
  
      text-align: center;
  
    }
  
    h3 {
  
      margin-bottom: 1rem;
  
      color: var(--cpg-purple-light);
  
      font-size: clamp(1.4rem, 2.5vw, 2rem);
  
    }
  
    h4 {
  
      margin-bottom: 0.75rem;
  
      font-size: 1.25rem;
  
    }
  
    /* ============================================================
  
       HEADER
  
       ============================================================ */
  
    .cpg-header {
  
      position: relative;
  
      z-index: 100;
  
      width: 100%;
  
      background: rgba(0, 0, 0, 0.96);
  
      border-bottom: 1px solid var(--cpg-border);
  
    }
  
    .cpg-header__inner {
  
      width: min(100% - 48px, var(--cpg-max-width));
  
      min-height: 90px;
  
      margin-inline: auto;
  
      display: flex;
  
      align-items: center;
  
      justify-content: space-between;
  
      gap: 40px;
  
    }
  
    .cpg-header__brand {
  
      flex: 0 0 auto;
  
    }
  
    .cpg-header__logo,
  
    .cpg-logo {
  
      width: clamp(230px, 28vw, 360px);
  
      height: auto;
  
    }
  
    .cpg-header__logo:hover,
  
    .cpg-logo:hover {
  
      opacity: 1;
  
    }
  
    /* ============================================================
  
       NAVIGATION
  
       ============================================================ */
  
    .cpg-nav {
  
      flex: 1;
  
    }
  
    .cpg-nav__inner {
  
      display: flex;
  
      align-items: center;
  
      justify-content: flex-end;
  
      gap: 30px;
  
    }
  
    .cpg-nav ul,
  
    .cpg-nav__list {
  
      display: flex;
  
      align-items: center;
  
      gap: 28px;
  
      margin: 0;
  
      padding: 0;
  
      list-style: none;
  
    }
  
    .cpg-nav li {
  
      margin: 0;
  
      padding: 0;
  
    }
  
    .cpg-nav a {
  
      display: inline-block;
  
      color: var(--cpg-text);
  
      font-size: 0.95rem;
  
      white-space: nowrap;
  
      border-bottom: 2px solid transparent;
  
    }
  
    .cpg-nav a:hover,
  
    .cpg-nav a[aria-current="page"] {
  
      color: var(--cpg-white);
  
      border-bottom-color: var(--cpg-purple);
  
    }
  
    .cpg-nav__cta {
  
      display: inline-flex;
  
      align-items: center;
  
      justify-content: center;
  
      padding: 12px 18px;
  
      color: var(--cpg-white) !important;
  
      border: 1px solid var(--cpg-purple);
  
      border-radius: 6px;
  
      white-space: nowrap;
  
    }
  
    .cpg-nav__cta:hover {
  
      background: var(--cpg-purple);
  
      border-color: var(--cpg-purple);
  
    }
  
    /* ============================================================
  
       HERO
  
       ============================================================ */
  
    .cpg-hero,
  
    .hero {
  
      position: relative;
  
      min-height: 640px;
  
      display: flex;
  
      align-items: center;
  
      justify-content: center;
  
      padding: 110px 24px 100px;
  
      text-align: center;
  
      background:
  
        radial-gradient(
  
          circle at 50% 35%,
  
          rgba(138, 43, 226, 0.13),
  
          transparent 40%
  
        ),
  
        var(--cpg-black);
  
    }
  
    .cpg-hero__inner,
  
    .hero__inner {
  
      position: relative;
  
      z-index: 2;
  
      width: min(100%, var(--cpg-max-width));
  
      margin-inline: auto;
  
    }
  
    .cpg-hero__eyebrow,
  
    .hero__eyebrow,
  
    .eyebrow,
  
    .section-label {
  
      margin-bottom: 18px;
  
      color: var(--cpg-purple-light);
  
      font-size: 0.9rem;
  
      letter-spacing: 0.16em;
  
      text-transform: uppercase;
  
    }
  
    .cpg-hero h1,
  
    .hero h1 {
  
      color: var(--cpg-white);
  
    }
  
    .cpg-hero__description,
  
    .hero__description,
  
    .hero p {
  
      max-width: 820px;
  
      margin: 0 auto 32px;
  
      color: var(--cpg-muted);
  
      font-size: clamp(1.05rem, 2vw, 1.25rem);
  
    }
  
    .cpg-hero__actions,
  
    .hero__actions,
  
    .cta-group {
  
      display: flex;
  
      align-items: center;
  
      justify-content: center;
  
      flex-wrap: wrap;
  
      gap: 16px;
  
      margin-top: 30px;
  
    }
  
    /* ============================================================
  
       BUTTONS / CTAs
  
       ============================================================ */
  
    .cpg-button,
  
    .button,
  
    .btn,
  
    .cta-button {
  
      display: inline-flex;
  
      align-items: center;
  
      justify-content: center;
  
      min-height: 50px;
  
      padding: 13px 24px;
  
      color: var(--cpg-white);
  
      font-size: 1rem;
  
      border: 1px solid var(--cpg-purple);
  
      border-radius: 6px;
  
      cursor: pointer;
  
    }
  
    .cpg-button:hover,
  
    .button:hover,
  
    .btn:hover,
  
    .cta-button:hover {
  
      color: var(--cpg-white);
  
      background: var(--cpg-purple);
  
      transform: translateY(-2px);
  
    }
  
    .cpg-button--secondary,
  
    .button--secondary,
  
    .btn-secondary {
  
      background: transparent;
  
      border-color: var(--cpg-border);
  
    }
  
    .cpg-button--secondary:hover,
  
    .button--secondary:hover,
  
    .btn-secondary:hover {
  
      background: var(--cpg-surface-light);
  
      border-color: var(--cpg-purple);
  
    }
  
    /* ============================================================
  
       GENERAL SECTIONS
  
       ============================================================ */
  
    .cpg-section,
  
    .content-section {
  
      padding: 100px 24px;
  
    }
  
    .cpg-section:nth-of-type(even) {
  
      background: var(--cpg-surface);
  
    }
  
    .cpg-section__inner,
  
    .section-inner {
  
      width: min(100%, var(--cpg-max-width));
  
      margin-inline: auto;
  
    }
  
    .cpg-section__intro,
  
    .section-intro {
  
      max-width: var(--cpg-content-width);
  
      margin: 0 auto 55px;
  
      color: var(--cpg-muted);
  
      font-size: 1.1rem;
  
      text-align: center;
  
    }
  
    /* ============================================================
  
       SERVICES / WHAT WE DO
  
       ============================================================ */
  
    #services {
  
      padding: 100px 24px;
  
    }
  
    .services-grid,
  
    .cpg-services-grid {
  
      width: min(100%, var(--cpg-max-width));
  
      margin: 50px auto 0;
  
      display: grid;
  
      grid-template-columns: repeat(3, minmax(0, 1fr));
  
      gap: 24px;
  
    }
  
    .service-card,
  
    .cpg-service-card {
  
      display: flex;
  
      flex-direction: column;
  
      padding: 32px;
  
      background:
  
        linear-gradient(
  
          145deg,
  
          rgba(138, 43, 226, 0.07),
  
          rgba(255, 255, 255, 0.015)
  
        );
  
      border: 1px solid var(--cpg-border);
  
      border-radius: var(--cpg-radius);
  
      transition:
  
        transform var(--cpg-transition),
  
        border-color var(--cpg-transition),
  
        background-color var(--cpg-transition);
  
    }
  
    .service-card:hover,
  
    .cpg-service-card:hover {
  
      transform: translateY(-5px);
  
      border-color: var(--cpg-purple-border);
  
    }
  
    .service-card h3,
  
    .cpg-service-card h3 {
  
      min-height: 2.4em;
  
    }
  
    .service-card p,
  
    .cpg-service-card p {
  
      color: var(--cpg-muted);
  
    }
  
    .service-card ul,
  
    .cpg-service-card ul {
  
      margin: 5px 0 25px;
  
      padding-left: 22px;
  
    }
  
    .service-card li,
  
    .cpg-service-card li {
  
      margin-bottom: 7px;
  
      color: var(--cpg-text);
  
    }
  
    .service-card > a:last-child,
  
    .cpg-service-card > a:last-child {
  
      margin-top: auto;
  
      color: var(--cpg-purple-light);
  
      font-size: 1rem;
  
    }
  
    .service-card > a:last-child:hover,
  
    .cpg-service-card > a:last-child:hover {
  
      color: var(--cpg-white);
  
    }
  
    /* ============================================================
  
       INSIGHT TO IMPLEMENTATION
  
       ============================================================ */
  
    .process-section,
  
    .cpg-process {
  
      padding: 110px 24px;
  
      background: var(--cpg-surface);
  
      border-top: 1px solid var(--cpg-border);
  
      border-bottom: 1px solid var(--cpg-border);
  
    }
  
    .process-section > *,
  
    .cpg-process > * {
  
      max-width: var(--cpg-max-width);
  
      margin-left: auto;
  
      margin-right: auto;
  
    }
  
    .process-section > p,
  
    .cpg-process > p {
  
      max-width: var(--cpg-content-width);
  
      color: var(--cpg-muted);
  
      text-align: center;
  
    }
  
    .process-list,
  
    .cpg-process-list {
  
      margin: 50px auto 0;
  
      padding: 0;
  
      display: grid;
  
      grid-template-columns: repeat(5, minmax(0, 1fr));
  
      gap: 12px;
  
      list-style: none;
  
      counter-reset: process;
  
    }
  
    .process-list li,
  
    .cpg-process-list li {
  
      position: relative;
  
      min-height: 170px;
  
      padding: 28px 20px;
  
      background: var(--cpg-black);
  
      border: 1px solid var(--cpg-border);
  
      border-radius: var(--cpg-radius);
  
      text-align: center;
  
      counter-increment: process;
  
    }
  
    .process-list li::before,
  
    .cpg-process-list li::before {
  
      content: "0" counter(process);
  
      display: block;
  
      margin-bottom: 15px;
  
      color: var(--cpg-purple-light);
  
      font-size: 0.8rem;
  
      letter-spacing: 0.1em;
  
    }
  
    .process-list strong,
  
    .cpg-process-list strong {
  
      display: block;
  
      margin-bottom: 8px;
  
      color: var(--cpg-white);
  
    }
  
    /* ============================================================
  
       PERFORMANCE AUDIT
  
       ============================================================ */
  
    .audit-section,
  
    .cpg-audit {
  
      padding: 100px 24px;
  
    }
  
    .audit-card,
  
    .cpg-audit__card {
  
      width: min(100%, 1000px);
  
      margin-inline: auto;
  
      padding: 55px;
  
      background:
  
        linear-gradient(
  
          135deg,
  
          rgba(138, 43, 226, 0.14),
  
          rgba(138, 43, 226, 0.025)
  
        );
  
      border: 1px solid var(--cpg-purple-border);
  
      border-radius: var(--cpg-radius);
  
      text-align: center;
  
    }
  
    .audit-card p,
  
    .cpg-audit__card p {
  
      max-width: 780px;
  
      margin-inline: auto;
  
      color: var(--cpg-muted);
  
    }
  
    /* ============================================================
  
       FINAL CTA
  
       ============================================================ */
  
    .final-cta,
  
    .cpg-final-cta {
  
      padding: 120px 24px;
  
      text-align: center;
  
      background:
  
        radial-gradient(
  
          circle at center,
  
          rgba(138, 43, 226, 0.14),
  
          transparent 55%
  
        ),
  
        var(--cpg-black);
  
    }
  
    .final-cta p,
  
    .cpg-final-cta p {
  
      max-width: 760px;
  
      margin-inline: auto;
  
      color: var(--cpg-muted);
  
    }
  
    /* ============================================================
  
       FOOTER
  
       ============================================================ */
  
    .cpg-footer,
  
    footer {
  
      padding: 70px 24px 30px;
  
      background: #050505;
  
      border-top: 1px solid var(--cpg-border);
  
    }
  
    .cpg-footer__inner,
  
    .footer-inner {
  
      width: min(100%, var(--cpg-max-width));
  
      margin-inline: auto;
  
    }
  
    .cpg-footer__grid,
  
    .footer-grid {
  
      display: grid;
  
      grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  
      gap: 50px;
  
    }
  
    .cpg-footer__brand img,
  
    .footer-brand img {
  
      width: min(100%, 320px);
  
      margin-bottom: 22px;
  
    }
  
    .cpg-footer h2,
  
    .cpg-footer h3,
  
    .cpg-footer h4,
  
    footer h2,
  
    footer h3,
  
    footer h4 {
  
      margin-bottom: 18px;
  
      color: var(--cpg-white);
  
      font-size: 1.05rem;
  
      text-align: left;
  
    }
  
    .cpg-footer p,
  
    footer p {
  
      color: var(--cpg-muted);
  
      text-align: left;
  
    }
  
    .cpg-footer ul,
  
    footer ul {
  
      margin: 0;
  
      padding: 0;
  
      list-style: none;
  
    }
  
    .cpg-footer li,
  
    footer li {
  
      margin-bottom: 10px;
  
    }
  
    .cpg-footer a,
  
    footer a {
  
      color: var(--cpg-muted);
  
      font-size: 0.95rem;
  
    }
  
    .cpg-footer a:hover,
  
    footer a:hover {
  
      color: var(--cpg-purple-light);
  
    }
  
    .cpg-footer__bottom,
  
    .footer-bottom {
  
      margin-top: 55px;
  
      padding-top: 25px;
  
      display: flex;
  
      align-items: center;
  
      justify-content: space-between;
  
      gap: 20px;
  
      border-top: 1px solid var(--cpg-border);
  
    }
  
    .cpg-footer__bottom p,
  
    .footer-bottom p {
  
      margin: 0;
  
      color: var(--cpg-muted);
  
      font-size: 0.85rem;
  
    }
  
    /* ============================================================
  
       LEGACY COMPATIBILITY
  
       Temporary support while old markup is phased out
  
       ============================================================ */
  
    #bodyContent {
  
      background: var(--cpg-black);
  
    }
  
    #bodyParagraph {
  
      max-width: var(--cpg-content-width);
  
      margin-inline: auto;
  
      padding: 40px 24px;
  
      text-align: center;
  
    }
  
    #customWebSolutions,
  
    #completeWebSolutions {
  
      color: var(--cpg-purple-light);
  
    }
  
    .landingParagragh {
  
      max-width: var(--cpg-content-width);
  
      margin-inline: auto;
  
      color: var(--cpg-text);
  
      font-size: 1.1rem;
  
    }
  
    #copyright {
  
      color: var(--cpg-muted);
  
      text-align: center;
  
    }
  
    .responsive-image {
  
      max-width: 100%;
  
      height: auto;
  
    }
  
    /* ============================================================
  
       TABLET
  
       ============================================================ */
  
    @media (max-width: 1050px) {
  
      .cpg-header__inner {
  
        flex-direction: column;
  
        padding-top: 22px;
  
        padding-bottom: 22px;
  
        gap: 22px;
  
      }
  
      .cpg-nav__inner {
  
        justify-content: center;
  
        flex-wrap: wrap;
  
      }
  
      .cpg-nav ul,
  
      .cpg-nav__list {
  
        justify-content: center;
  
        flex-wrap: wrap;
  
      }
  
      .services-grid,
  
      .cpg-services-grid {
  
        grid-template-columns: 1fr;
  
        max-width: 750px;
  
      }
  
      .service-card h3,
  
      .cpg-service-card h3 {
  
        min-height: auto;
  
      }
  
      .process-list,
  
      .cpg-process-list {
  
        grid-template-columns: repeat(2, 1fr);
  
      }
  
      .cpg-footer__grid,
  
      .footer-grid {
  
        grid-template-columns: repeat(2, 1fr);
  
      }
  
    }
  
    /* ============================================================
  
       MOBILE
  
       ============================================================ */
  
    @media (max-width: 700px) {
  
      body {
  
        font-size: 16px;
  
      }
  
      .container,
  
      .cpg-container {
  
        width: min(100% - 32px, var(--cpg-max-width));
  
      }
  
      .cpg-header__inner {
  
        width: min(100% - 32px, var(--cpg-max-width));
  
      }
  
      .cpg-header__logo,
  
      .cpg-logo {
  
        width: min(100%, 300px);
  
      }
  
      .cpg-nav__inner {
  
        width: 100%;
  
      }
  
      .cpg-nav ul,
  
      .cpg-nav__list {
  
        width: 100%;
  
        flex-direction: column;
  
        gap: 8px;
  
      }
  
      .cpg-nav a {
  
        padding: 8px 0;
  
      }
  
      .cpg-nav__cta {
  
        width: 100%;
  
        margin-top: 8px;
  
      }
  
      .cpg-hero,
  
      .hero {
  
        min-height: auto;
  
        padding: 80px 20px;
  
      }
  
      h1 {
  
        font-size: clamp(2.3rem, 12vw, 3.5rem);
  
      }
  
      h2 {
  
        font-size: clamp(1.8rem, 9vw, 2.7rem);
  
      }
  
      .services-grid,
  
      .cpg-services-grid {
  
        grid-template-columns: 1fr;
  
        gap: 18px;
  
      }
  
      .service-card,
  
      .cpg-service-card {
  
        padding: 26px;
  
      }
  
      .process-list,
  
      .cpg-process-list {
  
        grid-template-columns: 1fr;
  
      }
  
      .process-list li,
  
      .cpg-process-list li {
  
        min-height: auto;
  
      }
  
      .audit-card,
  
      .cpg-audit__card {
  
        padding: 35px 24px;
  
      }
  
      .cpg-footer__grid,
  
      .footer-grid {
  
        grid-template-columns: 1fr;
  
        gap: 35px;
  
      }
  
      .cpg-footer__bottom,
  
      .footer-bottom {
  
        flex-direction: column;
  
        align-items: flex-start;
  
      }
  
      .final-cta,
  
      .cpg-final-cta {
  
        padding: 90px 20px;
  
      }
  
    }
  
    /* ============================================================
  
       REDUCED MOTION
  
       ============================================================ */
  
    @media (prefers-reduced-motion: reduce) {
  
      html {
  
        scroll-behavior: auto;
  
      }
  
      *,
  
      *::before,
  
      *::after {
  
        transition-duration: 0.01ms !important;
  
        animation-duration: 0.01ms !important;
  
        animation-iteration-count: 1 !important;
  
      }
  
    }
  
  
  
    /* =========================================================
  
     CPG HEADER / NAVIGATION
  
     ========================================================= */
  
  
  
  .site-header {
  
    width: 100%;
  
    background: #000;
  
    padding: 55px 20px 30px;
  
    border-bottom: 1px solid #1f1f1f;
  
  }
  
  
  
  .header-inner {
  
    width: 100%;
  
    max-width: 1180px;
  
    margin: 0 auto;
  
    display: flex;
  
    flex-direction: column;
  
    align-items: center;
  
  }
  
  
  
  /* Logo */
  
  
  
  .site-logo-link {
  
    display: block;
  
    text-decoration: none;
  
    margin: 0 auto 40px;
  
  }
  
  
  
  .site-logo {
  
    display: block;
  
    width: 100%;
  
    max-width: 850px;
  
    height: auto;
  
    margin: 0 auto;
  
  }
  
  
  
  /* Navigation */
  
  
  
  .site-nav {
  
    width: 100%;
  
    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    flex-wrap: wrap;
  
    gap: 12px 34px;
  
    margin: 0 auto;
  
  }
  
  
  
  .site-nav a {
  
    display: inline-block;
  
    color: #fff;
  
    font-size: 18px;
  
    font-weight: 400;
  
    line-height: 1.4;
  
    text-decoration: none;
  
    white-space: nowrap;
  
    padding: 8px 0;
  
    border-bottom: 1px solid transparent;
  
    transition:
  
      color 0.25s ease,
  
      border-color 0.25s ease;
  
  }
  
  
  
  .site-nav a:hover {
  
    color: #a855f7;
  
    border-bottom-color: #a855f7;
  
  }
  
  
  
  /* Keep ampersands visually consistent */
  
  
  
  .site-nav strong {
  
    color: #fff;
  
    font-weight: 600;
  
  }
  
  
  
  /* Audit CTA */
  
  
  
  .site-nav .nav-cta {
  
    color: #fff;
  
    border: 1px solid #8a2be2;
  
    border-radius: 6px;
  
    padding: 11px 20px;
  
    margin-left: 4px;
  
  }
  
  
  
  .site-nav .nav-cta:hover {
  
    color: #fff;
  
    background: rgba(138, 43, 226, 0.12);
  
    border-color: #a855f7;
  
  }
  
  
  
  /* Prevent old global link styles from affecting header */
  
  
  
  .site-header a {
  
    font-size: 18px;
  
  }
  
  
  
  .site-header img:hover {
  
    opacity: 1;
  
  }
  
  
  
  
  
  /* =========================================================
  
     RESPONSIVE HEADER
  
     ========================================================= */
  
  
  
  @media (max-width: 1100px) {
  
  
  
    .site-logo {
  
      max-width: 700px;
  
    }
  
  
  
    .site-nav {
  
      gap: 10px 24px;
  
    }
  
  
  
    .site-nav a,
  
    .site-header a {
  
      font-size: 17px;
  
    }
  
  }
  
  
  
  @media (max-width: 800px) {
  
  
  
    .site-header {
  
      padding: 35px 20px 25px;
  
    }
  
  
  
    .site-logo-link {
  
      margin-bottom: 28px;
  
    }
  
  
  
    .site-logo {
  
      max-width: 550px;
  
    }
  
  
  
    .site-nav {
  
      flex-direction: column;
  
      gap: 6px;
  
    }
  
  
  
    .site-nav a {
  
      white-space: normal;
  
      text-align: center;
  
    }
  
  
  
    .site-nav .nav-cta {
  
      margin: 10px 0 0;
  
    }
  
  }
  
  
  
  /* =========================================================
  
     HEADER / HERO SPACING REFINEMENT
  
     ========================================================= */
  
  
  
     .site-header {
  
      padding-top: 35px;
  
      padding-bottom: 25px;
  
    }
  
    .site-logo-link {
  
      margin-bottom: 25px;
  
    }
  
    .site-logo {
  
      max-width: 700px;
  
    }
  
    /* Pull the homepage hero closer to the header */
  
    .cpg-hero {
  
      min-height: auto;
  
      padding-top: 60px;
  
      padding-bottom: 80px;
  
    }
  
  
  
    /* Homepage hero refinement */
  
  .cpg-hero h1 {
  
    max-width: 900px;
  
    font-size: clamp(2.8rem, 5vw, 4.4rem);
  
    line-height: 1.12;
  
  }
  
  .cpg-hero__description {
  
    max-width: 760px;
  
    font-size: 1.15rem;
  
  }


/* ==========================================================
   CONTACT PAGE
   Clear lead-generation layout with accessible form controls.
   ========================================================== */

.cpg-contact-hero {
  padding-bottom: 40px;
  text-align: center;
}

.cpg-contact-hero .cpg-section__eyebrow {
  text-align: center;
}

.cpg-contact-hero h1 {
  max-width: 920px;
  margin: 0 auto 24px;
  color: var(--cpg-white);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.12;
}

.cpg-contact-intro {
  max-width: 690px;
  margin: 0 auto;
  color: var(--cpg-muted);
  font-family: var(--font-ui);
  font-size: 1.05rem;
  line-height: 1.8;
}

.cpg-contact-section {
  padding-top: 36px;
}

.cpg-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 32px;
  align-items: start;
}

.cpg-contact-form-card,
.cpg-contact-aside {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--cpg-border);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.012)
  );
}

.cpg-contact-kicker {
  margin: 0 0 14px;
  color: var(--cpg-purple-light);
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cpg-contact-form-card h2,
.cpg-contact-aside h2 {
  margin: 0 0 16px;
  color: var(--cpg-white);
  font-family: var(--font-ui);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-align: left;
}

.cpg-contact-helper,
.cpg-contact-aside > p:not(.cpg-contact-kicker) {
  color: var(--cpg-muted);
  font-family: var(--font-ui);
  font-size: .95rem;
  line-height: 1.75;
}

.cpg-contact-helper {
  margin-bottom: 36px;
}

.cpg-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cpg-contact-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cpg-contact-field--full {
  grid-column: 1 / -1;
}

.cpg-contact-field label {
  color: var(--cpg-white);
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 600;
}

.cpg-contact-field label span {
  color: var(--cpg-purple-light);
}

.cpg-contact-field input,
.cpg-contact-field select,
.cpg-contact-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: #111115;
  color: #fff;
  font-family: var(--font-ui);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cpg-contact-field textarea {
  min-height: 150px;
  resize: vertical;
}

.cpg-contact-field input:focus-visible,
.cpg-contact-field select:focus-visible,
.cpg-contact-field textarea:focus-visible {
  outline: none;
  border-color: var(--cpg-purple-light);
  box-shadow: 0 0 0 3px rgba(166,77,255,.16);
}

.cpg-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 32px;
  padding: 15px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--cpg-purple);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
}

.cpg-contact-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.cpg-contact-form-note {
  margin: 16px 0 0;
  color: var(--cpg-muted);
  font-family: var(--font-ui);
  font-size: .78rem;
  line-height: 1.6;
}

.cpg-contact-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cpg-purple-border);
  color: var(--cpg-white);
  font-family: var(--font-ui);
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.cpg-contact-email:hover,
.cpg-contact-email:focus-visible {
  color: var(--cpg-purple-light);
}

.cpg-contact-aside-divider {
  height: 1px;
  margin: 42px 0;
  background: var(--cpg-border);
}

.cpg-contact-next {
  display: grid;
  gap: 24px;
}

.cpg-contact-next > div {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}

.cpg-contact-next span {
  color: var(--cpg-purple-light);
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 700;
}

.cpg-contact-next p {
  margin: 0;
  color: var(--cpg-muted);
  font-family: var(--font-ui);
  font-size: .9rem;
  line-height: 1.65;
}

.cpg-contact-audit-link {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--cpg-border);
  color: var(--cpg-white);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.cpg-contact-audit-link:hover {
  color: var(--cpg-purple-light);
}

@media (max-width: 900px) {
  .cpg-contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cpg-contact-fields {
    grid-template-columns: 1fr;
  }

  .cpg-contact-form-card,
  .cpg-contact-aside {
    padding: 26px 20px;
  }

  .cpg-contact-hero h1 {
    font-size: 2.2rem;
  }
}

/* Contact page: keep the introduction and form connected. */
.cpg-contact-hero {
  padding-bottom: 20px;
}

.cpg-contact-section {
  padding-top: 20px;
}

/* Keep the spam trap inaccessible to ordinary visitors. */
.cpg-contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Accessible feedback without changing the established layout. */
.cpg-contact-feedback {
  margin: 24px 0;
  padding: 18px 22px;
  border: 1px solid var(--cpg-border);
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.6;
}

.cpg-contact-feedback--success {
  color: #d5f7e4;
  border-color: rgba(82, 200, 132, 0.35);
  background: rgba(82, 200, 132, 0.08);
}

.cpg-contact-feedback--error {
  color: #ffd6d6;
  border-color: rgba(255, 110, 110, 0.35);
  background: rgba(255, 110, 110, 0.08);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

   .cpg-about-page .cpg-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  
  /* Hero */
  
  .cpg-about-page h1 {
    max-width: 1050px;
    font-size: clamp(2.6rem, 4.5vw, 4.5rem);
    line-height: 1.15;
    margin-bottom: 28px;
  }
  
  .cpg-about-page h2 {
    max-width: 1050px;
    margin: 0 auto 30px;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    line-height: 1.2;
  }
  
  /* Body copy */
  
  .cpg-about-page .cpg-section p {
    line-height: 1.75;
  }
  
  .cpg-about-page .cpg-section p + p {
    margin-top: 20px;
  }
  
  /* Expertise section */
  
  .cpg-about-page .cpg-about-expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
  }
  
  .cpg-about-page .cpg-about-expertise-card {
    padding: 32px;
    border: 1px solid rgba(170, 100, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
  }
  
  .cpg-about-page .cpg-about-expertise-card h3 {
    font-size: clamp(1.5rem, 2vw, 2rem);
    margin-bottom: 18px;
  }
  
  .cpg-about-page .cpg-about-expertise-card p {
    margin-bottom: 24px;
  }
  
  @media (max-width: 900px) {
    .cpg-about-page .cpg-about-expertise-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 600px) {
    .cpg-about-page .cpg-section {
      padding-top: 52px;
      padding-bottom: 52px;
    }
  
    .cpg-about-page h1 {
      font-size: clamp(2.3rem, 9vw, 3.2rem);
    }
  
    .cpg-about-page h2 {
      font-size: clamp(1.9rem, 7vw, 2.6rem);
    }
  
    .cpg-about-page .cpg-about-expertise-card {
      padding: 24px;
    }
  }


/* ============================================================
   ABOUT PAGE — EXPERTISE CARDS
   ============================================================ */

.cpg-about-page .cpg-about-expertise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.cpg-about-page .cpg-about-expertise-card {
  display: flex;
  flex-direction: column;
  padding: 36px 30px;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.cpg-about-page .cpg-about-expertise-card:hover {
  border-color: rgba(170, 85, 255, 0.55);
}

.cpg-about-page .cpg-about-expertise-card h3 {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.25;
}

.cpg-about-page .cpg-about-expertise-card p {
  flex-grow: 1;
  margin: 0 0 28px;
  line-height: 1.7;
}

.cpg-about-page .cpg-about-expertise-card a {
  display: inline-block;
  align-self: flex-start;
  color: var(--cpg-purple-light);
  text-decoration: none;
  font-weight: 600;
}

.cpg-about-page .cpg-about-expertise-card a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .cpg-about-page .cpg-about-expertise {
    grid-template-columns: 1fr;
  }
}


/* ABOUT PAGE — KEEP EXPERTISE LINK ARROWS WITH TEXT */

.cpg-about-page .cpg-about-expertise-card a span {
  display: inline-block;
  white-space: nowrap;
  margin-left: 4px;
}

.cpg-about-page .cpg-link-nowrap {
  white-space: nowrap;
}


/* ============================================================
   ABOUT PAGE — HOW WE WORK
   ============================================================ */

   .cpg-about-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
  }
  
  .cpg-about-process-step {
    padding: 32px;
    background: var(--cpg-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
  }
  
  .cpg-about-process-number {
    display: block;
    margin-bottom: 24px;
    color: var(--cpg-purple-light);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }
  
  .cpg-about-process-step h3 {
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 2vw, 2rem);
  }
  
  .cpg-about-process-step p {
    margin: 0;
    line-height: 1.7;
  }
  
  @media (max-width: 1100px) {
    .cpg-about-process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 640px) {
    .cpg-about-process-grid {
      grid-template-columns: 1fr;
    }
  
    .cpg-about-process-step {
      padding: 28px;
    }
  }


/* ============================================================
   ABOUT PAGE — EXPERIENCE & FINAL CTA
   ============================================================ */

/* Improve readability of the experience section */
.cpg-about-section[aria-labelledby="about-experience-heading"] p:not(.cpg-section__eyebrow) {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Give the closing CTA a clear visual hierarchy */
.cpg-about-cta {
  text-align: center;
}

.cpg-about-cta > .cpg-container > p:not(.cpg-section__eyebrow) {
  max-width: 850px;
  margin: 0 auto 32px;
}

.cpg-about-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid var(--cpg-purple-light);
  border-radius: 8px;
  color: var(--cpg-white);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cpg-about-cta-link:hover,
.cpg-about-cta-link:focus-visible {
  background-color: rgba(160, 70, 255, 0.12);
  border-color: var(--cpg-white);
}