/* Services page design (DECISION-003, WP-B3).

   No design_lock mockup exists for this page (confirmed in the ticket
   spec - Home's own hero/services-section covers the "services" concept
   visually, but that is Home, not this standalone /services page). Built
   by applying the established design system (--hr-* tokens from
   static/css/site_redesign.css, Barlow Condensed/Barlow fonts, the veins
   glow hero treatment, and the card/grid treatment already used on Home's
   services section - see static/css/home_redesign.css) to this page's
   own real content (real PageContent rows for key='services', dumped via
   scripts/diag_page_content_dump.py, not invented). Scoped entirely under
   body.services-redesign so no other page's styling changes.

   Real content this build carries: hero heading/subtitle, the 9 real
   service-category cards (AI & ML, Cloud & Infrastructure, Specialized
   Computing, Technology Expertise, Web Development, Rapid Prototyping,
   Product Development, Data Analysis, Data Forensics), and the CTA
   section. The legacy page's Bootstrap case-studies carousel (14 project
   slides, key='carousel_for_projects_showcase') was intentionally not
   ported here - it is not part of the "-redesign" card/grid vocabulary
   and duplicating Home's own 4-card case-study grid on this page was not
   requested; stated here rather than silently dropped. Expected to need
   a live-correction round the same way Home did, per the ticket. */

/* WP-D5 addendum: Primarch directive after reviewing the Products pages
   screenshots ("each text block must have glass boxes") extended to every
   other redesigned page. The .hr-card grid already carried the glass
   treatment (rgba(13,15,20,0.30) + blur(14px) + hairline border - the
   values reused verbatim below), but the hero subtitle and the CTA
   section's heading/copy were bare text with no panel behind them. Both
   are added directly on their own element (no template change needed -
   every one of these already has a wrapping element to attach to).
   .hr-hero h1 keeps its own `background` consumed by the gradient-text-
   clip effect, so its panel lives on a ::before pseudo-element instead
   (z-index: -1, same technique already proven on about_redesign.css's
   .ar-title-glass wrapper, just without needing a new wrapper div here
   since ::before does not require one). The CTA h2 is plain-colored (no
   gradient-clip), so its panel is applied directly - no ::before needed
   there. */

body.services-redesign {
    background: var(--hr-bg) !important;
    font-family: 'Barlow', sans-serif;
}

/* #uv-background-canvas restored (was wrongly hidden - see home_redesign.css). */

/* --- Hero: veins glow scoped to the hero-wrap only (not the whole page -
   SESSION_REVIVAL.md item 89's lesson: stretching this layer across the
   full page height dilutes the two color blobs across far more area than
   ever approved). --- */
body.services-redesign .hr-page { position: relative; overflow: hidden; }
body.services-redesign .hr-hero-wrap { position: relative; }
body.services-redesign .hr-veins {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 10%, rgba(181,51,247,0.09), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(1,206,211,0.07), transparent 45%);
}

body.services-redesign .hr-hero {
    position: relative; z-index: 2;
    padding: 90px 64px 60px; max-width: 1500px; margin: 0 auto;
}
body.services-redesign .hr-hero h1 {
    position: relative; display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 88px; font-weight: 800; letter-spacing: 1px;
    background: linear-gradient(90deg, var(--hr-highlight) 0%, #7b5fd0 30%, #4a9fd8 65%, var(--hr-primary) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    line-height: 1.0; margin-bottom: 22px;
}
/* Glass panel behind the h1 - own element's `background` is already
   consumed by the gradient-text-clip above, so this lives on ::before.
   2026-08-24: colored per docs/DESIGN_SYSTEM_REQUIREMENTS.md's glass-pane
   requirement (a flat panel is no longer the target state) - alternates
   violet/teal with the subtitle panel below it for visual rhythm, same
   radial-gradient values already used by .hr-card.violet/.hr-card.teal. */
body.services-redesign .hr-hero h1::before {
    content: ''; position: absolute; inset: -16px -28px; z-index: -1;
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
}
body.services-redesign .hr-hero .hr-subtitle {
    display: inline-block;
    font-family: 'Barlow', sans-serif;
    font-size: 26px; color: var(--hr-light); font-weight: 400; max-width: 1000px;
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 20px 28px;
}

/* --- Services grid --- */
body.services-redesign .hr-services-section { position: relative; z-index: 2; padding: 24px 64px 60px; max-width: 1500px; margin: 0 auto; }
body.services-redesign .hr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; }
body.services-redesign .hr-card {
    position: relative; border-radius: 14px; padding: 30px 30px 26px; overflow: hidden;
    background: rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column;
}
body.services-redesign .hr-card.violet { background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); }
body.services-redesign .hr-card.teal { background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); }
body.services-redesign .hr-card-icon { font-size: 30px; margin-bottom: 14px; }
body.services-redesign .hr-card.violet .hr-card-icon { color: var(--hr-highlight); }
body.services-redesign .hr-card.teal .hr-card-icon { color: var(--hr-primary); }
body.services-redesign .hr-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 14px; }
body.services-redesign .hr-card.violet h3 { color: var(--hr-highlight); }
body.services-redesign .hr-card.teal h3 { color: var(--hr-primary); }
body.services-redesign .hr-card p { font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.5; color: var(--hr-text-muted); margin-bottom: 18px; }
body.services-redesign .hr-service-list { list-style: none; margin: 0 0 22px; padding: 0; flex-grow: 1; }
body.services-redesign .hr-service-list li {
    font-family: 'Barlow', sans-serif; font-size: 14px; line-height: 1.6; color: var(--hr-light);
    padding-left: 18px; position: relative; margin-bottom: 6px;
}
body.services-redesign .hr-service-list li::before {
    content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--hr-primary);
}
body.services-redesign .hr-card.violet .hr-service-list li::before { background: var(--hr-highlight); }
body.services-redesign .hr-card .hr-see-more {
    display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
    color: var(--hr-light); text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase;
}
body.services-redesign .hr-card .hr-see-more svg { width: 18px; height: 11px; flex-shrink: 0; }

/* --- CTA --- */
body.services-redesign .hr-cta-section {
    position: relative; z-index: 2; text-align: center;
    padding: 20px 64px 110px; max-width: 900px; margin: 0 auto;
}
/* 2026-08-24: colored per docs/DESIGN_SYSTEM_REQUIREMENTS.md - see the
   hero h1/subtitle comment above for the requirement this satisfies. */
body.services-redesign .hr-cta-section h2 {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: 1px;
    color: var(--hr-light); margin-bottom: 16px;
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 16px 32px;
}
body.services-redesign .hr-cta-section p {
    display: inline-block;
    font-family: 'Barlow', sans-serif; font-size: 18px; line-height: 1.5; color: var(--hr-text-muted); margin-bottom: 32px;
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 18px 26px;
}
body.services-redesign .hr-cta-pill {
    display: inline-flex; align-items: center; padding: 22px 46px; border-radius: 8px;
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary)); color: var(--hr-light);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
    text-decoration: none; box-shadow: 0 0 40px rgba(181,51,247,0.25);
}

/* --- Responsive: tablet first, then phone (built in from the start, not
   retrofitted - SESSION_REVIVAL.md item 89's mobile gap on Home). --- */
@media (max-width: 1024px) {
    body.services-redesign .hr-hero { padding: 60px 40px 40px; }
    body.services-redesign .hr-hero h1 { font-size: 60px; }
    body.services-redesign .hr-hero h1::before { inset: -12px -20px; }
    body.services-redesign .hr-hero .hr-subtitle { font-size: 20px; padding: 16px 22px; }
    body.services-redesign .hr-services-section { padding-left: 40px; padding-right: 40px; }
    body.services-redesign .hr-grid { grid-template-columns: repeat(2, 1fr); }
    body.services-redesign .hr-cta-section { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 768px) {
    body.services-redesign .hr-hero { padding: 40px 20px 30px; }
    body.services-redesign .hr-hero h1 { font-size: 40px; }
    body.services-redesign .hr-hero h1::before { inset: -10px -16px; }
    body.services-redesign .hr-hero .hr-subtitle { font-size: 17px; padding: 14px 18px; }

    body.services-redesign .hr-services-section { padding: 16px 20px 40px; }
    body.services-redesign .hr-grid { grid-template-columns: 1fr; gap: 16px; }
    body.services-redesign .hr-card { padding: 24px 22px 20px; }
    body.services-redesign .hr-card h3 { font-size: 23px; }
    body.services-redesign .hr-card p { font-size: 15px; }

    body.services-redesign .hr-cta-section { padding: 16px 20px 60px; }
    body.services-redesign .hr-cta-section h2 { font-size: 30px; padding: 12px 22px; }
    body.services-redesign .hr-cta-section p { font-size: 16px; padding: 14px 18px; }
    body.services-redesign .hr-cta-pill { padding: 18px 32px; font-size: 14px; }
}