/* Generated by scripts/css-bundle.mjs — do not edit by hand. */
/* /public/css/routes/surfaces/services.css */
@layer routes {
/* ==========================================================================
   services-surface.css
   --------------------------------------------------------------------------
   Purpose
   - Give /services/ a warmer, image-backed route identity.
   - Let promoted reference images feel deliberate instead of pasted in.
   - Keep the surface readable while carrying more atmosphere.
   ========================================================================== */

--services-accent-cool: #455342;
    --services-glow: #8d945e;
    --spw-main-width: 1160px;
    --services-line:
      color-mix(in srgb, var(--services-accent-cool) 18%, rgba(18, 24, 28, 0.12));
    --services-line-strong:
      color-mix(in srgb, var(--services-accent) 32%, transparent);
    --services-paper:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94),
        rgba(248, 245, 239, 0.92)
      );
    --services-panel:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.86),
        rgba(245, 241, 234, 0.94)
      );
    background:
      radial-gradient(
        circle at top center,
        color-mix(in srgb, var(--services-glow) 10%, transparent),
        transparent 34%
      ),
      linear-gradient(180deg, rgba(248, 245, 239, 0.92), rgba(241, 237, 230, 0.98));

    & main > article {
      display: grid;
      gap: clamp(1rem, 2vw, 1.4rem);
    }

    & article > .site-frame {
      overflow: clip;
      border-color: var(--services-line);
      background: var(--services-paper);
      box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.025);

      &:hover {
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.07),
          0 4px 12px rgba(0, 0, 0, 0.03);
      }
    }

    & #services-frame {
      min-height: clamp(22rem, 50vw, 30rem);
      background:
        linear-gradient(
          110deg,
          rgba(250, 247, 241, 0.96) 0%,
          rgba(250, 247, 241, 0.9) 28%,
          rgba(250, 247, 241, 0.7) 54%,
          rgba(36, 46, 45, 0.42) 100%
        ),
        radial-gradient(
          circle at 82% 18%,
          color-mix(in srgb, var(--services-accent) 24%, transparent),
          transparent 24%
        ),
        url('/public/images/services/studio-house-hero.webp') center/cover no-repeat;

      & :is(.frame-topline, h1, p, nav) {
        max-width: min(50rem, 100%);
      }

      & .site-lede {
        color: color-mix(in srgb, var(--ink, #1f2423) 88%, var(--services-accent-cool));
      }

      & .spec-pill {
        border-color: color-mix(in srgb, var(--services-accent) 18%, transparent);
        background: color-mix(in srgb, rgba(255, 255, 255, 0.96) 95%, var(--services-accent) 5%);
        color: color-mix(in srgb, var(--ink, #1f2423) 82%, var(--services-accent-cool) 18%);
      }
    }

    & .frame-panel {
      background: var(--services-panel);
      border-color: color-mix(in srgb, var(--services-accent) 14%, var(--line));

      &:hover .panel-image img {
        transform: scale(1.018);
        filter: saturate(1.04) contrast(1.02);
      }
    }

    & .panel-image {
      margin: 0 0 0.9rem;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--services-line-strong) 46%, var(--services-line));
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 8px 18px rgba(0, 0, 0, 0.04);

      & img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        transition:
          transform var(--duration-deliberate, 360ms) var(--ease-mechanical, ease),
          filter var(--duration-deliberate, 360ms) var(--ease-mechanical, ease);
      }
    }

    & .svc-svg[data-state~="resolved"] .svc-center {
      filter: none;
      animation: none;
    }
  }
}

@keyframes services-resolve-pulse {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

@media (max-width: 820px) {
  :where(body[data-spw-surface="services"]) {
    & main {
      --spw-main-padding-inline: 0.8rem;
    }

    & #services-frame {
      min-height: 0;
      background-position: center right;
    }
  }
}

@media (max-width: 640px) {
  :where(body[data-spw-surface="services"]) {
    & #services-frame {
      padding-inline: 0.9rem;
      background:
        linear-gradient(
          180deg,
          rgba(250, 247, 241, 0.97) 0%,
          rgba(250, 247, 241, 0.94) 46%,
          rgba(250, 247, 241, 0.88) 100%
        ),
        radial-gradient(
          circle at 82% 18%,
          color-mix(in srgb, var(--services-accent) 18%, transparent),
          transparent 28%
        ),
        url('/public/images/services/studio-house-hero.webp') center/cover no-repeat;

      & :is(.frame-topline, h1, p, nav) {
        max-width: 100%;
      }

      & .spec-strip {
        gap: 0.34rem 0.42rem;
      }

      & .spec-pill {
        min-height: 1.72rem;
        padding: 0.16rem 0.5rem;
        font-size: 0.74rem;
      }
    }

    & #what-i-do .frame-grid,
    & #social-context .frame-grid {
      grid-template-columns: 1fr;
    }
  }
}
}