/* ==========================================================================
   Dark pages (services) — sits on top of site.css and motion.css.
   Restyles the shared header/footer for a dark canvas so the same partials
   are reused rather than duplicated.
   ========================================================================== */

/* --- the supplied wave canvas, positioned exactly as its own file had it.
   No `overflow:hidden` on body: that belonged to the standalone demo and
   would stop the page scrolling. --- */
#wave-bg-canvas{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:-1; }

body.dark-page{ background:#060608; color:#F3F5F9; }
/* a veil so body copy never fights the moving lines */
body.dark-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 15% 12%, rgba(6,6,8,.88), rgba(6,6,8,.45) 55%, transparent 78%),
    linear-gradient(180deg, rgba(6,6,8,.74), rgba(6,6,8,.32) 40%, rgba(6,6,8,.80));
}

/* ---------- shared header, dark ---------- */
body.dark-page .hdr,
body.dark-page .hdr.solid{
  background:rgba(12,14,20,.55) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.8) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
body.dark-page .hdr .h1r,
body.dark-page .hdr.solid .h1r{ color:rgba(226,232,240,.62) !important; }
body.dark-page .hdr .h1r::after,
body.dark-page .hdr.solid .h1r::after{
  background:linear-gradient(90deg,rgba(255,255,255,.10) 0 37%,transparent 37% 63%,rgba(255,255,255,.10) 63% 100%) !important;
}
body.dark-page .hnav a,
body.dark-page .hdr.solid .hnav a{ color:rgba(226,232,240,.82) !important; }
body.dark-page .hnav a:hover,
body.dark-page .hdr.solid .hnav a:hover{ background:rgba(255,255,255,.10) !important; color:#fff !important; }
body.dark-page .hnav a.on,
body.dark-page .hdr.solid .hnav a.on{ background:rgba(255,255,255,.13) !important; color:#fff !important; }
body.dark-page .hdr .logo img,
body.dark-page .hdr.solid .logo img{ filter:drop-shadow(0 2px 12px rgba(0,0,0,.6)) !important; }
body.dark-page .h2r .btn-r,
body.dark-page .hdr.solid .h2r .btn-r{ background:var(--red) !important; color:#fff !important; }
body.dark-page .burger{ border-color:rgba(255,255,255,.22) !important; background:rgba(255,255,255,.08) !important; }
body.dark-page .burger i{ background:#fff !important; }

/* ---------- shared footer, dark ---------- */
body.dark-page .f-badges{ background:rgba(10,12,16,.72); }
body.dark-page .fb{ background:transparent; }
body.dark-page .ftr{ background:rgba(6,6,8,.78); }

/* ---------- rhythm ---------- */
body.dark-page .sec{ padding-block:clamp(64px,7.5vw,116px); position:relative; }
body.dark-page .sec--sm{ padding-block:clamp(44px,5vw,76px); }
body.dark-page .sec + .sec{ padding-top:clamp(44px,5vw,76px); }
body.dark-page .sec + .sec::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1240px,100% - var(--gut)*2);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 20%,rgba(255,255,255,.10) 80%,transparent);
}
body.dark-page .phero{
  padding-top:calc(var(--hdrH) + clamp(46px,6vw,92px));
  padding-bottom:clamp(40px,5vw,78px);
  background:none;
}
body.dark-page .phero::before,
body.dark-page .phero::after{ display:none; }
body.dark-page .phero h1{ text-shadow:0 4px 40px rgba(0,0,0,.65); }
body.dark-page .phero p{ color:rgba(226,232,240,.84); text-shadow:0 2px 16px rgba(0,0,0,.55); }

/* ---------- typography on dark ---------- */
body.dark-page h1,body.dark-page h2,body.dark-page h3,body.dark-page h4{ color:#F3F5F9; }
body.dark-page .lede{ color:#93A0B4; }
body.dark-page .crumb{ color:rgba(226,232,240,.55); }
body.dark-page .crumb a{ color:rgba(255,255,255,.88); }
body.dark-page .btn-ink{ border-color:rgba(255,255,255,.34); color:#fff; }
body.dark-page .btn-ink:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.5); }

/* ---------- category blocks ---------- */
.cat + .cat{ margin-top:clamp(52px,6.5vw,88px); }
.cat-head{
  display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.10);
}
.cat-head h2{ font-size:clamp(24px,2.9vw,38px);margin:0 }
.cat-head .dot{ width:10px;height:10px;border-radius:50%;flex:none }
.cat-head .count{ margin-left:auto;font-family:var(--m);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#93A0B4 }
.cat-head p{ width:100%;margin:8px 0 0;color:#93A0B4;font-size:14.5px }

.cards{ display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:14px }
.card{
  position:relative;display:block;padding:24px 24px 22px;border-radius:16px;
  background:rgba(17,20,28,.66);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--accent,#ED1C24);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.card:hover{ transform:translateY(-6px);background:rgba(22,26,36,.82);border-color:rgba(255,255,255,.20) }
.card:hover::before{ transform:scaleX(1) }
.card h3{ font-size:17.5px;margin:0 0 8px;color:#fff }
.card p{ margin:0;font-size:13.5px;color:#93A0B4;line-height:1.55 }
.card .go{ display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--m);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#ED1C24) }
.card .go svg{ width:12px;height:12px;transition:transform .25s }
.card:hover .go svg{ transform:translateX(4px) }

/* ---------- detail page pieces ---------- */
.glass{
  border-radius:18px;padding:clamp(22px,2.6vw,34px);
  background:rgba(17,20,28,.66);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.svc-kicker{ display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase }
.svc-kicker .dot{ width:8px;height:8px;border-radius:50%;display:inline-block }

.points{ display:grid;gap:2px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10) }
.point{ background:rgba(17,20,28,.70);padding:20px 24px;display:flex;gap:18px;align-items:flex-start;
  transition:background .25s }
.point:hover{ background:rgba(24,28,38,.86) }
.point .num{ font-family:var(--m);font-size:11px;color:var(--accent,#ED1C24);min-width:26px;padding-top:4px }
.point b{ display:block;font-family:var(--d);font-size:16.5px;margin-bottom:5px;color:#fff }
.point p{ margin:0;font-size:14px;color:#93A0B4;max-width:62ch }

.duo{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
.duo h4{ font-family:var(--m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:#93A0B4;margin:0 0 14px;font-weight:400 }
.duo ul{ list-style:none;margin:0;padding:0 }
.duo li{ font-size:14.5px;padding:7px 0 7px 20px;position:relative;color:#D7DEE9 }
.duo li::before{ content:"";position:absolute;left:0;top:15px;width:8px;height:2px;
  border-radius:2px;background:var(--accent,#ED1C24) }
.duo p{ margin:0;font-size:15px;color:#D7DEE9;line-height:1.6 }

body.dark-page .faq details{ border-bottom:1px solid rgba(255,255,255,.10) }
body.dark-page .faq summary{ color:#fff }
body.dark-page .faq p{ color:#93A0B4 }
body.dark-page .f-chips a{ border-color:rgba(255,255,255,.16);color:rgba(226,232,240,.75) }
body.dark-page .f-chips a:hover{ border-color:var(--red);color:#fff }

@media (max-width:760px){ .duo{ grid-template-columns:1fr } }