/* ============================================================
   Services cluster v2 — /services/* reskin layer
   ============================================================
   Scope: the six pages under deploy/public_html/services/
   (body.service-page). Layers ON TOP of css/ug-brand.css, which
   stays untouched.

   Purpose (roadmap #8/#9, 2026-09-14):
   - Force the signed-off dark homepage palette on these pages even
     if data-theme="light" is set (dark-only until the global phase
     removes the theme toggle site-wide).
   - Mirror homepage tokens: teal #3BDBBF, Neue Regrade headings and
     body, Monomials labels/kickers/numerals, ~24px card radii,
     subtle teal hairline borders, near-black surfaces.
   - Restyle hub + detail components (svc-*, toolkit-*, feature-*,
     step-*, stat-*, habit-*, contact-*) to the homepage visual
     language without changing markup structure.

   Fonts: Neue Regrade / Monomials @font-face blocks exist in
   ug-brand.css only as a commented-out placeholder. The woff2 files
   DO exist in /fonts/, so this file declares them locally
   (no third-party requests). Weight 400 maps to the 300 file as a
   stand-in until a true 400 cut lands.
   ============================================================ */

/* ── Local fonts (files verified present in /fonts/) ─────── */
@font-face {
  font-family: 'Neue Regrade';
  src: url('/fonts/neue-regrade-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Regrade';
  src: url('/fonts/neue-regrade-300.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  /* stand-in: no 400 cut delivered yet; global phase will re-cut */
}
@font-face {
  font-family: 'Neue Regrade';
  src: url('/fonts/neue-regrade-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Monomials';
  src: url('/fonts/monomials-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Token overrides: force the dark homepage palette ──────
   These custom properties are set directly on body.service-page,
   so they beat any value inherited from html[data-theme="light"]
   and keep the whole cluster dark-only. */
body.service-page {
  color-scheme: dark;

  /* type: homepage stacks (Neue Regrade first, Monomials mono) */
  --font-display: "Neue Regrade", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Monomials", "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* accent: Brief teal override of the older #3CDBC0 */
  --accent: #3BDBBF;
  --accent-hover: #2FC4AB;
  --accent-ink: #06231E;
  --accent-soft: rgba(59, 219, 191, .12);
  --stat: #3BDBBF;
  --prussian-tint: rgba(0, 47, 86, .55);

  /* surfaces: near-black, no blue cast */
  --bg-0: #0B0B0C;
  --bg-1: #111315;
  --bg-2: #17191C;
  --bg-glass: rgba(255, 255, 255, .05);
  --bg-glass-brd: rgba(255, 255, 255, .10);
  --sheen: rgba(255, 255, 255, .04);

  /* text */
  --text-hi: #FFFFFF;
  --text-body: rgba(255, 255, 255, .78);
  --text-mute: rgba(255, 255, 255, .55);

  /* lines: subtle teal hairline instead of neutral grey */
  --line: rgba(59, 219, 191, .16);

  /* code / mono surfaces */
  --code-bg: #101012;

  /* footer stays dark (same values as the dark theme) */
  --footer-bg-top: #0B0B0C;
  --footer-bg-bottom: #06131C;
  --footer-text: rgba(255, 255, 255, .62);
  --footer-heading: rgba(255, 255, 255, .85);
  --footer-link: rgba(255, 255, 255, .58);
  --footer-caption: rgba(255, 255, 255, .56);
  --footer-line: rgba(255, 255, 255, .09);
  --footer-brd-top: rgba(59, 219, 191, .25);

  /* corners: homepage-soft (24px cards) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* homepage gradient tokens (signed-off baseline) */
  --svc-grad-numeral: linear-gradient(180deg, #37CDB7 0%, #26A39C 45%, #146C82 100%);
  --svc-grad-hero:
    radial-gradient(110% 150% at 88% -10%, rgba(59, 219, 191, .14) 0%, rgba(0, 47, 86, .30) 42%, rgba(11, 11, 12, 0) 72%),
    linear-gradient(180deg, #070D12 0%, #0B0B0C 100%);
  --svc-grad-proof: linear-gradient(160deg, #000000 0%, #012849 35%, #156973 70%, #29A396 100%);
}

/* ── Base polish ─────────────────────────────────────────── */
body.service-page {
  background: var(--bg-0);
  color: var(--text-body);
  font-family: var(--font-display);
  letter-spacing: .002em;
}
body.service-page h1,
body.service-page h2,
body.service-page h3 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* Kickers / eyebrows: Monomials, teal, homepage-style spacing */
body.service-page .eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Breadcrumbs */
body.service-page .breadcrumbs {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
}

/* ── Hero band (hub + all detail pages) ────────────────────
   Full-width dark band with a faint teal glow, mirroring the
   homepage hero/proof band language. */
body.service-page .toolkit-hero {
  position: relative;
  background: var(--svc-grad-hero);
  border-bottom: 1px solid rgba(59, 219, 191, .16);
  padding: clamp(44px, 7vw, 104px) 0 clamp(36px, 5vw, 72px);
}
body.service-page .toolkit-hero h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
body.service-page .toolkit-hero h1 .accent { color: var(--accent); }
body.service-page .toolkit-hero .lead {
  color: var(--text-body);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
}
/* The hub's oversized chevron watermark rides the band */
body.service-page .svc-hero__mark { color: var(--accent); opacity: .18; }

/* Section heads breathe like the homepage sections */
body.service-page .toolkit-section { padding: clamp(36px, 5vw, 72px) 0; }
body.service-page .toolkit-section__head h2 { font-weight: 600; letter-spacing: -0.02em; }

/* ── Cards: one dark family, teal hairline, 24px radius ──── */
body.service-page .svc-tile,
body.service-page .feature-card,
body.service-page .step-item,
body.service-page .habit-item,
body.service-page .stat-tile,
body.service-page .contact-card,
body.service-page .contact-form-wrapper,
body.service-page .featured-card,
body.service-page .toolkit-cta {
  background: var(--bg-1);
  border: 1px solid rgba(59, 219, 191, .16);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .24);
}

/* Featured hub tile: flat teal tint, stronger hairline (the
   "Start here" badge carries the weight; flat fill per the 2026-09-13
   copy audit's no-gradients ruling for these components) */
body.service-page .svc-tile--featured {
  background: rgba(59, 219, 191, .08);
  border-color: rgba(59, 219, 191, .45);
}
body.service-page .svc-tile--featured:hover { border-color: var(--accent); }

/* Danger / urgent accent (incident response) stays risk-red */
body.service-page .featured-card--danger {
  background: var(--risk-bg);
  border-color: var(--risk-brd);
}
body.service-page .stat-tile--accent {
  background: var(--accent-soft);
  border-color: rgba(59, 219, 191, .35);
}

/* Card icon chips: teal-tinted square with hairline */
body.service-page .feature-card__icon,
body.service-page .contact-card__icon {
  background: rgba(59, 219, 191, .10);
  border: 1px solid rgba(59, 219, 191, .22);
  border-radius: 14px;
  color: var(--accent);
}

/* ── Numerals: Monomials + homepage gradient ink ─────────── */
body.service-page .svc-tile__index,
body.service-page .step-item__num,
body.service-page .habit-num {
  font-family: var(--font-mono);
  font-weight: 400;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body.service-page .svc-tile__index {
    background: var(--svc-grad-numeral);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
body.service-page .step-item__num,
body.service-page .habit-num {
  background: rgba(59, 219, 191, .10);
  border: 1px solid rgba(59, 219, 191, .22);
  color: var(--accent);
}
body.service-page .stat-tile__value {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.service-page .stat-tile--accent .stat-tile__value { color: var(--accent); }

/* ── Badges / tags / pills: Monomials uppercase ──────────── */
body.service-page .svc-tile__tag,
body.service-page .stat-tile__badge,
body.service-page .status-pill,
body.service-page .featured-card__eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .18em;
}
body.service-page .svc-tile__tag {
  background: rgba(59, 219, 191, .12);
  border: 1px solid rgba(59, 219, 191, .35);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── Audience filter (hub): homepage pill language ───────── */
body.service-page .svc-filter__label {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-body);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(59, 219, 191, .22);
  border-radius: 999px;
  transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1),
              background 240ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.service-page .svc-filter__input:checked + .svc-filter__label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
body.service-page .svc-filter__input:focus-visible + .svc-filter__label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  body.service-page .svc-filter__label:hover {
    border-color: var(--accent);
    color: var(--text-hi);
  }
  body.service-page .svc-filter__input:checked + .svc-filter__label:hover {
    color: var(--accent-ink);
  }
}

/* ── Hub highlight items with custom icons (48h + KZN) ───── */
body.service-page .svc-filter-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-brd);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
body.service-page .svc-filter-note a { color: var(--accent); font-weight: 600; }
body.service-page .svc-hl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  color: var(--text-body);
}
body.service-page .svc-hl::before { content: none; }
body.service-page .svc-hl__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(59, 219, 191, .10);
  border: 1px solid rgba(59, 219, 191, .24);
}
body.service-page .svc-hl__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
body.service-page .svc-hl__icon img {
  display: block;
  object-fit: contain;
}

/* Pack icon chips on the four plain hub tiles (2026-09-14 icon pass) */
body.service-page .svc-tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 219, 191, .10);
  border: 1px solid rgba(59, 219, 191, .24);
}
body.service-page .svc-tile__icon img {
  display: block;
  object-fit: contain;
}

/* Pack art is not always square; keep the glass glyphs undistorted
   inside the fixed-square chip slots (2026-09-14 icon pass) */
body.service-page .feature-card__icon img,
body.service-page .contact-card__icon img {
  object-fit: contain;
}

/* ── Buttons: brand-standard primary (blue gradient) ─────── */
body.service-page .btn-primary {
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(5, 84, 163, .28);
}
body.service-page .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  box-shadow: 0 4px 22px rgba(5, 84, 163, .46);
  color: #FFFFFF;
}
body.service-page .btn-primary:focus-visible {
  outline: 2px solid #0554A3;
  outline-offset: 3px;
}
body.service-page .btn-secondary,
body.service-page .btn-outline {
  background: transparent;
  color: var(--text-hi);
  border: 1px solid rgba(59, 219, 191, .30);
}
body.service-page .btn-secondary:hover:not(:disabled),
body.service-page .btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Forms: dark inputs with teal focus ring ─────────────── */
body.service-page .contact-form input,
body.service-page .contact-form textarea {
  background: var(--bg-2);
  color: var(--text-hi);
  border: 1px solid rgba(59, 219, 191, .18);
  border-radius: var(--radius-md);
}
body.service-page .contact-form input:focus,
body.service-page .contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 219, 191, .18);
}

/* ── Footer: dark anchor with teal top rule ──────────────── */
body.service-page .site-footer {
  background: var(--footer-bg-top);
  border-top: 1px solid var(--footer-brd-top);
}

/* ── Reduced motion: respect the homepage rule ───────────── */
@media (prefers-reduced-motion: reduce) {
  body.service-page .svc-filter__label,
  body.service-page .btn-primary,
  body.service-page .btn-secondary,
  body.service-page .btn-outline {
    transition: none;
  }
}

/* ── Small screens: keep highlights and heroes clean ─────── */
@media (max-width: 600px) {
  body.service-page .svc-hl__icon { width: 40px; height: 40px; }
  body.service-page .toolkit-hero h1 { max-width: none; }
}

/* AJAX contact form feedback (see /js/contact-form.js) */
body.service-page .form-status-msg { margin: 12px 0 0; font-size: 14px; min-height: 1.2em; }
body.service-page .form-status-msg.is-ok { color: var(--accent, #3CDBC0); }
body.service-page .form-status-msg.is-error { color: #ff8a8a; }
body.service-page .contact-form .btn:disabled { opacity: .6; cursor: default; }