/* ==========================================================================
   CSC Innovations — SERVICES layer ("The Rate Card")
   Loads AFTER site.css on services.html. Vibe: a tactile, confident price/spec
   sheet pressed in warm amber on espresso — mono package indices, ledger-ruled
   feature rows, gold figures. Same Midnight system, retinted entirely through
   tokens (the home stays emerald; this page steps into amber).
   ========================================================================== */

/* ==========================================================================
   PER-PAGE THEME — "Amber Rate Card"
   Base shifts to a warm espresso-black; the accent to a struck-gold amber.
   ========================================================================== */
body.page-services{
  /* COLOR v2 — Amber Rate Card, richer (struck gold on espresso) */
  --bg:#15100A; --bg-2:#0F0B06; --surface:#221A11; --surface-2:#2E2415; --panel:#33230A;
  --accent:#F0B95C; --accent-deep:#C68E2C; --accent-glow:#F8DCA0; --on-accent:#1A1204;
  --accent-12:rgba(240,185,92,.12); --accent-18:rgba(240,185,92,.18);
  --line:rgba(246,238,222,.11); --line-strong:rgba(246,238,222,.20);
  --text:#FAF3E3; --text-muted:rgba(250,243,227,.76); --text-faint:rgba(250,243,227,.56);
  --sh-forest:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(240,185,92,.16);
  --svc-bronze:#C68E2C;
  background:var(--bg);
}
/* Knot = PAGE COLOR (client's ask): mark falls back to site.css var(--accent*)
   → amber in nav + footer + hero. No emerald pin. */

/* rate-card hero headline (atmosphere = .page-hero + .ph-wash) */
.page-services .page-hero h1{letter-spacing:-.03em;}
/* (I) hero wash — struck gold, lifted with a warm forge-ember lower bloom (neon-PNW). */
.page-services .ph-wash{background:
  radial-gradient(115% 130% at 90% -12%,var(--accent-18),transparent 56%),
  radial-gradient(58% 58% at 52% 40%,var(--accent-12),transparent 72%),
  radial-gradient(78% 88% at 6% 112%,rgba(255,110,60,.14),transparent 60%);}

/* ---- Package cards as spec tiles ---------------------------------------- */
.page-services .tier{counter-increment:pkg;padding-top:var(--s5);}
.page-services .tier::after{content:"0" counter(pkg);position:absolute;top:16px;right:20px;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;color:var(--text-faint);
  font-feature-settings:"tnum" 1;}
.page-services .tier h3{font-size:clamp(22px,2.4vw,28px);}
.page-services .tier .price{display:flex;align-items:baseline;gap:.4em;margin:.15em 0 .1em;}
.page-services .tier .tagline{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--text-faint);border-bottom:1px solid var(--line);padding-bottom:var(--s2);}

/* feature rows become a ruled ledger with bronze check marks */
.page-services .tier .ticks li{display:flex;gap:.7em;align-items:flex-start;padding:9px 0 9px 0;}
.page-services .tier .ticks li::before{position:static;transform:none;content:"";flex:0 0 auto;
  width:13px;height:8px;margin-top:6px;border-left:2px solid var(--svc-bronze);border-bottom:2px solid var(--svc-bronze);
  transform:rotate(-45deg);}
.page-services .tier.featured .ticks li::before{border-color:var(--accent-glow);}

/* featured tile: warm amber wash + glow index */
.page-services .tier.featured{background:
  radial-gradient(90% 120% at 88% 0%, rgba(231,178,78,.16), transparent 60%), var(--surface-2);
  border-color:var(--accent);}
.page-services .tier.featured::after{color:var(--accent-glow);}
.page-services .tier .price small{color:var(--accent-glow);}

/* ---- "Real build at every tier" imagery strip -------------------------- */
.tier-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);margin-top:var(--s5);}
@media (max-width:860px){.tier-shots{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}}
.tier-shot{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;}
.tier-shot .frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:var(--sh-3);background:#0c0a06;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);}
.tier-shot .frame .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--surface);
  border-bottom:1px solid var(--line);}
.tier-shot .frame .bar .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--line-strong);}
.tier-shot .frame .bar .dot:nth-child(1){background:#ff5f57;}
.tier-shot .frame .bar .dot:nth-child(2){background:#febc2e;}
.tier-shot .frame .bar .dot:nth-child(3){background:#28c840;}
.tier-shot .frame .bar .url{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--text-faint);
  background:var(--bg-2);padding:4px 11px;border-radius:var(--r-pill);flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.tier-shot .frame img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center top;background:#fff;}
.tier-shot:hover .frame{transform:translateY(-5px);box-shadow:var(--sh-forest);}
.tier-shot .cap{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);}
.tier-shot .cap .nm{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--text);letter-spacing:-.01em;}
.tier-shot .cap .pr{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);
  font-feature-settings:"tnum" 1;}
.tier-shot .note{font-size:var(--fs-sm);color:var(--text-muted);}

/* ---- Add-ons read like line items on an invoice ------------------------ */
.page-services .bg-bone .card h3 .muted{color:var(--accent)!important;font-family:var(--mono)!important;
  font-size:14px!important;letter-spacing:.02em;font-weight:500;}
.page-services .bg-bone .card{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);}
.page-services .bg-bone .card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}

/* a subtle gold rule under the section eyebrows for the rate-card feel */
.page-services .section .eyebrow::before{background:linear-gradient(90deg,var(--accent),transparent);width:30px;}

/* the closing callout, retinted to warm amber on espresso */
.page-services .callout{background:linear-gradient(135deg,#3a2a0c,#1b1307);
  border-color:rgba(231,178,78,.22);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(231,178,78,.16);}

/* ---- (D) hero focal gets a slow ambient float ------------------------------
   The browser-frame proof floats gently; the child .ph-device keeps flair.js's
   pointer-tilt (separate element, no transform clash). Off touch + reduced-motion. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .page-services .ph-focal{animation:svcFloat 9s var(--ease) infinite;}
}
@keyframes svcFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}