/* Services page-specific styles, extracted from inline HTML. */
/* Preloader Styles */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #preloader img {
      width: 150px;
      opacity: 0;
      animation: logoFadeScale 2.5s forwards;
    }

    @keyframes logoFadeScale {
      0% {
        opacity: 0;
        transform: scale(0.5);
      }
      25% {
        opacity: 1;
        transform: scale(1);
      }
      75% {
        opacity: 1;
        transform: scale(2);
      }
      100% {
        opacity: 0;
        transform: scale(2);
      }
    }

    /* =========================================================
       Services page enhancements (image-rich, matches site feel)
       - Uses explicit page classes mapped to local background images.
       - If an image path doesn't exist, gradient overlay still looks good.
       ========================================================= */

    /* Hero / page title: add subtle background image + overlay */
    .services-page .page-title {
      position: relative;
      overflow: hidden;
    }
    .services-page .page-title::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 55%, rgba(0,0,0,.65));
      background-size: cover;
      background-position: center;
      transform: scale(1.02);
      filter: saturate(1.05);
      opacity: .95;
      z-index: 0;
    }
    .services-page .page-title .heading,
    .services-page .page-title .breadcrumbs {
      position: relative;
      z-index: 1;
    }

    /* Section spacing polish */
    .services-page .section-title p { max-width: 720px; margin-left: auto; margin-right: auto; }

    /* Service cards: image-backed tiles */
    .services-page .service-item.service-card {
      border-radius: 18px;
      overflow: hidden;
      padding: 22px 20px;
      min-height: 240px;
      background: #0f0f0f;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
      transition: transform .25s ease, box-shadow .25s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 100%;
    }
    .services-page .service-item.service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: #111;
      background-image:
        linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.78) 100%),
        var(--service-card-image, linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)));
      background-size: cover;
      background-position: center;
      z-index: 0;
    }

    /* Explicit local image mapping. Paths are relative to assets/css/services.css. */
    .service-card--consultation { --service-card-image: url('../img/gallery/measure.jpg'); }
    .service-card--design { --service-card-image: url('../img/gallery/designer.jpg'); }
    .service-card--manufacture { --service-card-image: url('../img/gallery/printer.jpg'); }
    .service-card--install { --service-card-image: url('../img/gallery/Olde-English-Tile-Metal-3D-signage.jpg'); }
    .service-card--architectural { --service-card-image: url('../img/gallery/alange_facade.jpg'); }
    .service-card--retail { --service-card-image: url('../img/gallery/Mrs-Fields-NZ-Natural-Retail-signage.jpg'); }
    .service-card--fabricated { --service-card-image: url('../img/gallery/zymus-3d-building-sign.jpg'); }
    .service-card--illuminated { --service-card-image: url('../img/gallery/green-led-illuminated-sign.jpg'); }
    .service-card--graphics { --service-card-image: url('../img/gallery/News-Corp-Office-Mural.jpg'); }
    .service-card--wayfinding { --service-card-image: url('../img/gallery/office-wayfinding-sign.jpg'); }
    .service-card--statutory { --service-card-image: url('../img/gallery/unisex-accessible-shower-braille-sign.jpg'); }
    .service-card--display { --service-card-image: url('../img/gallery/Stax-Retail-Display-signage.jpg'); }
    .service-card--featured-hills { --service-card-image: url('../img/gallery/On-Hills-Building-sign.jpg'); }
    .service-card--featured-uec { --service-card-image: url('../img/gallery/UEC-College-Reception-Sign.jpg'); }
    .service-card--featured-braille { --service-card-image: url('../img/gallery/braille.jpg'); }

    .services-page .service-item.service-card > * { position: relative; z-index: 1; }

    .services-page .service-item.service-card .icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(6px);
    }
    .services-page .service-item.service-card .icon i {
      font-size: 1.4rem;
      line-height: 1;
    }
    .services-page .service-item.service-card h4 { margin-bottom: 8px; }
    .services-page .service-item.service-card h4 a { color: #fff; }
    .services-page .service-item.service-card p {
      color: rgba(255,255,255,.78);
      margin-bottom: 0;
    }

    .services-page .service-item.service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 44px rgba(0,0,0,.28);
    }

    /* Quick stats band */
    .services-stats {
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
    }
    .services-stats .stat {
      padding: 18px 16px;
      text-align: center;
    }
    .services-stats .stat strong {
      display: block;
      font-size: 1.4rem;
      letter-spacing: .2px;
    }
    .services-stats .stat span {
      display: block;
      font-size: .92rem;
      color: rgba(255,255,255,.75);
    }

    /* Featured projects */
    .featured-work .work-card {
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      min-height: 220px;
      background: #0f0f0f;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .featured-work .work-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.85) 100%),
        var(--work-bg, linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)));
      background-size: cover;
      background-position: center;
      z-index: 0;
    }
    .featured-work .work-card .content {
      position: relative;
      z-index: 1;
      padding: 18px 18px 16px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .featured-work .work-card h3 {
      color: #fff;
      font-size: 1.15rem;
      margin: 0 0 6px 0;
    }
    .featured-work .work-card p {
      margin: 0 0 14px 0;
      color: rgba(255,255,255,.78);
    }
    .featured-work .work-card .btns a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      color: #fff;
      background: rgba(255,255,255,.06);
      text-decoration: none;
      transition: transform .2s ease, background .2s ease;
    }
    .featured-work .work-card .btns a:hover { transform: translateY(-2px); background: rgba(255,255,255,.10); }

    /* Big CTA */
    .services-cta {
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: #0f0f0f;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    .services-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.35) 55%, rgba(0,0,0,.85));
      background-size: cover;
      background-position: center;
      opacity: .98;
      z-index: 0;
    }
    .services-cta > * { position: relative; z-index: 1; }
    .services-cta h2, .services-cta p { color: #fff; }
    .services-cta p { color: rgba(255,255,255,.8); }

    /* Mobile tweaks */
    @media (max-width: 575.98px) {
      .services-page .service-item.service-card { min-height: 220px; }
      .featured-work .work-card { min-height: 200px; }
    }

/* Hide the whole section content until it is scrolled into view */
    #process .process-reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s ease, transform .6s ease;
    }
    #process .process-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Optional: subtle stagger for the cards once the wrapper reveals */
    #process .process-reveal .col-xl-3 {
      transition: transform .6s ease, opacity .6s ease;
    }
    #process .process-reveal.is-visible .col-xl-3:nth-child(1) { transition-delay: .05s; }
    #process .process-reveal.is-visible .col-xl-3:nth-child(2) { transition-delay: .12s; }
    #process .process-reveal.is-visible .col-xl-3:nth-child(3) { transition-delay: .19s; }
    #process .process-reveal.is-visible .col-xl-3:nth-child(4) { transition-delay: .26s; }