/* ============================================================
   Jerry Labs — Service Page design system (shared)
   Used by ai-services.html, ops-growth.html, web-services.html.
   Pairs with colors_and_type.css (tokens + type roles).
   Clean, self-contained: nav, hero, sections, cards, CTAs, footer.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #070707;
  color: var(--jl-fg);
  font-family: var(--jl-sans);
  -webkit-font-smoothing: antialiased;
  line-height: var(--jl-lh-body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--jl-mono); font-weight:500;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--jl-mint); }
.kicker::before { content:"//"; color:var(--jl-mint); opacity:.85; font-weight:600; }

/* ---------- NAV ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(7,7,7,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--jl-rule); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1340px; margin:0 auto; padding:16px 32px; }
.nav-brand { display:flex; align-items:center; gap:14px; }
.nav-brand img { width:40px; height:40px; display:block; filter:drop-shadow(0 0 14px rgba(0,255,65,.35)); }
.nav-brand-name { font-family:var(--jl-mono); font-weight:500; font-size:16px;
  letter-spacing:-.01em; }
.nav-brand-name .dot { display:inline-block; width:7px; height:8px; margin-left:3px; vertical-align:2px; font-size:0; background:var(--jl-green); clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); filter:drop-shadow(0 0 5px rgba(0,255,65,.6)); animation:brand-dot-pulse 2.6s ease-in-out infinite; }
.nav-links { display:flex; align-items:center; gap:12px; list-style:none; }
.nav-links a { position:relative; display:inline-flex; align-items:center; overflow:hidden;
  font-family:var(--jl-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jl-fg-muted); padding:9px 16px; border:1px solid var(--jl-hairline); border-radius:999px;
  transition:color .25s,border-color .25s,box-shadow .25s,transform .25s; }
.nav-links a::before { content:""; position:absolute; inset:0; z-index:-1; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,rgba(104,210,186,.16),rgba(104,210,186,.04)); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover { color:var(--jl-mint); border-color:var(--jl-mint); transform:translateY(-2px); box-shadow:0 0 20px var(--jl-mint-glow); }
.nav-links a:hover::before { transform:scaleX(1); }
.nav-links a.active { color:var(--jl-mint); border-color:var(--jl-mint); }
.nav-actions { display:flex; align-items:center; gap:16px; }
.nav-x { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--jl-hairline); color:var(--jl-fg-muted);
  transition:color .25s,border-color .25s,box-shadow .25s,transform .25s; }
.nav-x svg { width:17px; height:17px; display:block; }
.nav-x:hover { color:var(--jl-mint); border-color:var(--jl-mint); box-shadow:0 0 18px var(--jl-mint-glow); transform:translateY(-2px); }
.nav-cta { display:inline-flex; align-items:center; gap:9px; font-family:var(--jl-mono); font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--jl-fg); padding:11px 20px;
  border:1px solid var(--jl-hairline); border-radius:999px; transition:.25s; }
.nav-cta::before { content:""; width:7px; height:7px; border-radius:999px; background:var(--jl-mint); box-shadow:0 0 9px var(--jl-mint); }
.nav-cta:hover { color:var(--jl-mint); border-color:var(--jl-mint); box-shadow:0 0 20px var(--jl-mint-glow); }
.nav-toggle { display:none; background:transparent; border:1px solid var(--jl-hairline); border-radius:6px; width:40px; height:36px; align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle span { display:block; width:16px; height:1px; background:var(--jl-fg); position:relative; transition:transform .25s, top .25s, background .2s; }
.nav-toggle span::before, .nav-toggle span::after { content:''; position:absolute; left:0; width:16px; height:1px; background:var(--jl-fg); transition:transform .25s, top .25s; }
.nav-toggle span::before { top:-5px; }
.nav-toggle span::after { top:5px; }

/* ---------- BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--jl-fg); font-family:var(--jl-mono); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; padding:14px 26px; border-radius:999px; border:1px solid transparent;
  transition:color .25s,border-color .25s,box-shadow .25s,transform .25s; cursor:pointer; }
.btn-primary { color:var(--jl-fg); border-color:var(--jl-hairline); }
.btn-primary::before { content:""; width:8px; height:8px; border-radius:999px; background:var(--jl-mint); box-shadow:0 0 9px var(--jl-mint); flex:none; }
.btn-primary:hover { color:var(--jl-mint); border-color:var(--jl-mint); box-shadow:0 0 22px var(--jl-mint-glow); }
.link-arrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--jl-mono); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--jl-fg-muted); transition:color .2s; }
.link-arrow .arr { transition:transform .2s; }
.link-arrow:hover { color:var(--jl-mint); }
.link-arrow:hover .arr { transform:translateX(4px); }

/* ---------- HERO ---------- */
.svc-hero { position:relative; padding:170px 0 96px; overflow:hidden; border-bottom:1px solid var(--jl-rule); }
.svc-hero::before { content:""; position:absolute; top:-30%; right:-10%; width:55vw; height:55vw; pointer-events:none;
  background:radial-gradient(circle, rgba(46,139,114,.16), transparent 60%); filter:blur(60px); }
.svc-hero .svc-plexus { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.svc-hero .wrap { position:relative; z-index:1; }
.svc-hero h1 { font-family:var(--jl-mono); font-weight:500; font-size:clamp(34px,5vw,64px); line-height:1.05;
  letter-spacing:-.02em; margin:24px 0 22px; max-width:18ch; text-wrap:balance; }
.svc-hero .lede { font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:var(--jl-fg-muted); max-width:60ch; margin-bottom:36px; }
.svc-cta-row { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* ---------- SECTION SHELL ---------- */
.section { position:relative; padding:88px 0; border-bottom:1px solid var(--jl-rule); }
.section > .sec-plexus { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.section > .wrap { position:relative; z-index:1; }
.section.alt { background:#141714; }
.section.light { background:var(--jl-paper); color:var(--jl-graphite); border-top:1px solid var(--jl-green); }
.section-head { margin-bottom:48px; }
.section-head h2 { font-family:var(--jl-mono); font-weight:500; font-size:clamp(26px,3vw,40px); line-height:1.1;
  letter-spacing:-.02em; margin-top:14px; max-width:24ch; }
.section.light .kicker { color:var(--jl-accent-light); }
.section.light .kicker::before { color:var(--jl-green); }
.section.light .section-head h2 { color:var(--jl-graphite); }
.section.light .lede,
.section.light .process-goal { color:var(--jl-graphite-2); }
.section.light .process-steps .step { color:var(--jl-graphite); }
.section.light .process-steps .sep { color:var(--jl-accent-light); }
.section.light .usecases { background:none; border:none; border-radius:0; column-gap:52px; row-gap:0; margin-top:52px; }
.section.light .usecases li { background:none; padding:18px 0; color:var(--jl-graphite); border-top:1px solid rgba(0,0,0,.12); }
.section.light .usecases li::before { background:var(--jl-accent-light); box-shadow:none; margin-top:.62em; }

/* ---------- PROBLEM ---------- */
.problem .lede { font-size:clamp(17px,1.6vw,21px); line-height:1.6; color:var(--jl-fg); max-width:62ch; margin-bottom:30px; }
.symptoms { list-style:none; display:grid; gap:14px; max-width:60ch; }
.symptoms li { position:relative; padding-left:26px; color:var(--jl-fg-muted); font-size:16px; line-height:1.5; }
.symptoms li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:999px;
  background:var(--jl-mint); box-shadow:0 0 8px rgba(104,210,186,.45); }

/* ---------- BUILD GRID (what we build) ---------- */
.build-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.build-card { background:var(--jl-surface); border:1px solid var(--jl-rule); border-top:2px solid var(--jl-mint);
  border-radius:8px; padding:28px; transition:transform .25s,box-shadow .25s,border-color .25s; }
.build-card:hover { transform:translateY(-4px); border-color:var(--jl-hairline);
  box-shadow:0 16px 40px rgba(0,0,0,.3),0 0 26px rgba(104,210,186,.12); }
.build-card h3 { font-family:var(--jl-mono); font-weight:500; font-size:19px; letter-spacing:-.01em; margin-bottom:10px; }
.build-card p { color:var(--jl-fg-muted); font-size:15px; line-height:1.55; }

/* ---------- PROCESS ---------- */
.process-steps { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:18px; }
.process-steps .step { font-family:var(--jl-mono); font-size:clamp(18px,2.2vw,28px); letter-spacing:-.01em; color:var(--jl-fg); }
.process-steps .sep { color:var(--jl-mint); font-size:14px; display:inline-flex; align-items:center; }
.process-steps .sep .hex-sep { width:11px; height:11px; display:block; }
.process-goal { color:var(--jl-fg-muted); font-size:16px; max-width:60ch; }

/* ---------- TIERS (engagement types) ---------- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tier { background:var(--jl-surface); border:1px solid var(--jl-rule); border-radius:8px; padding:28px; }
.tier .t-name { font-family:var(--jl-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--jl-mint); margin-bottom:14px; }
.tier p { color:var(--jl-fg-muted); font-size:15px; line-height:1.55; }

/* ---------- USE CASES ---------- */
.usecases { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--jl-rule); border:1px solid var(--jl-rule); border-radius:8px; overflow:hidden; }
.usecases li { background:#070707; padding:24px 26px; color:var(--jl-fg-muted); font-size:16px; line-height:1.5; display:flex; gap:14px; }
.usecases li::before { content:""; flex:none; width:8px; height:8px; margin-top:.5em; border-radius:999px; background:var(--jl-mint); box-shadow:0 0 8px rgba(104,210,186,.45); }

/* ---------- CLOSE ---------- */
.close { position:relative; overflow:hidden; text-align:center; padding:104px 0; background:#050505; border-top:1px solid var(--jl-rule); }
.close::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 50% 60% at 50% 55%, rgba(46,139,114,.14), transparent 60%); }
.close .close-plexus { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.close .wrap { position:relative; z-index:2; }
.close h2 { font-family:var(--jl-mono); font-weight:500; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.02em; margin-bottom:16px; }
.close p { color:var(--jl-fg-muted); font-size:18px; max-width:46ch; margin:0 auto 34px; }
.close .svc-cta-row { justify-content:center; }

/* ---------- FOOTER ---------- */
.foot { background:#0F100F; border-top:1px solid var(--jl-hairline); padding:48px 0; color:var(--jl-fg-faint); }
.foot-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.foot a { color:var(--jl-fg-muted); }
.foot a:hover { color:var(--jl-mint); }
.foot .mono { font-family:var(--jl-mono); font-size:12.5px; letter-spacing:.04em; }
.foot-status { color:var(--jl-fg-muted); }
.foot-ic { display:inline-flex; width:13px; height:13px; vertical-align:middle; margin-right:6px; }
.foot-ic svg { width:100%; height:100%; display:block; }
.foot-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#00FF41;
  box-shadow:0 0 8px #00FF41; margin-right:9px; vertical-align:middle; animation:foot-pulse 2.4s ease-in-out infinite; }
@keyframes foot-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@media (prefers-reduced-motion: reduce) { .foot-dot { animation:none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .build-grid, .tiers, .usecases { grid-template-columns:1fr; }
  .svc-hero { padding:140px 0 72px; }
}
/* ---- Mobile nav (unified 2026-06-14): flex-wrap dropdown, matches home ---- */
@media (max-width:820px) {
  .nav-inner { flex-wrap:wrap; row-gap:0; }
  .nav-brand { order:1; }
  .nav-toggle { display:inline-flex; order:2; }
  .nav-links { order:3; }
  .nav-actions { order:4; }
  .nav-links, .nav-actions { display:none; flex-basis:100%; width:100%; }
  .nav.is-open .nav-links {
    display:flex; flex-direction:column; align-items:center; gap:10px; list-style:none;
    margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--jl-rule);
  }
  /* roomy full-width buttons so the outline has breathing room around the label */
  .nav.is-open .nav-links a {
    display:block; width:170px; max-width:100%; box-sizing:border-box; text-align:center;
    padding:16px 20px; font-size:14px; letter-spacing:.12em;
    border:1px solid rgba(104,210,186,.28); border-radius:12px;
  }
  .nav.is-open .nav-actions {
    display:flex; flex-direction:column; gap:10px; align-items:center;
    margin-top:10px; padding:0;
  }
  /* Contact matches the service buttons: full-width outlined, no green fill/dot */
  .nav.is-open .nav-cta {
    order:1; display:block; width:170px; max-width:100%; box-sizing:border-box; text-align:center;
    padding:16px 20px; font-size:14px; letter-spacing:.12em; text-transform:uppercase;
    background:transparent; color:var(--jl-fg-muted);
    border:1px solid rgba(104,210,186,.28); border-radius:12px; box-shadow:none;
  }
  .nav.is-open .nav-cta::before { display:none; }
  .nav.is-open .nav-x { order:2; align-self:center; }
  .nav.is-open .nav-toggle span { background:transparent; }
  .nav.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
  .nav.is-open .nav-toggle span::after  { top:0; transform:rotate(-45deg); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ---------- FULL SITE FOOTER (converged from home, 2026-06-10) ---------- */
.site-footer { background:#0F100F; border-top:1px solid var(--jl-hairline); padding:64px 0 28px; color:var(--jl-fg); }
.site-footer-inner { display:flex; flex-direction:column; gap:44px; }
.sf-top { display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.sf-brand { display:flex; align-items:flex-start; gap:18px; max-width:460px; }
.sf-mark { width:72px; height:72px; object-fit:contain; flex-shrink:0; }
.sf-brand-txt { display:flex; flex-direction:column; gap:9px; }
.sf-wordmark { font-family:var(--jl-mono); font-weight:600; letter-spacing:.16em; font-size:19px; color:var(--jl-fg); }
.sf-tag { font-family:var(--jl-sans); font-size:15px; line-height:1.55; color:var(--jl-fg-muted); margin:0; }
.sf-nav { display:flex; gap:56px; }
.sf-col { display:flex; flex-direction:column; gap:12px; }
.sf-head { font-family:var(--jl-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--jl-fg-faint); margin-bottom:4px; }
.sf-col a { font-family:var(--jl-mono); font-size:14px; color:var(--jl-fg-muted); text-decoration:none; transition:color var(--jl-t-base); }
.sf-col a:hover { color:var(--jl-mint); }
.sf-base { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--jl-rule); }
.sf-status { display:inline-flex; align-items:center; gap:9px; font-family:var(--jl-mono); font-size:12px; color:var(--jl-fg-muted); }
.sf-dot { width:7px; height:7px; border-radius:50%; background:#00FF41; box-shadow:0 0 8px #00FF41; animation:sf-pulse 2.4s ease-in-out infinite; }
.sf-legal { font-family:var(--jl-mono); font-size:12px; color:var(--jl-fg-faint); }
@keyframes sf-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@media (max-width:720px) { .sf-top { flex-direction:column; gap:32px; } .sf-nav { gap:44px; flex-wrap:wrap; } .sf-base { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion: reduce) { .sf-dot { animation:none; } }

/* ---------- PROCESS section: slim band (2026-06-10) ---------- */
.section:has(.process-steps) { padding:40px 0; }
.section:has(.process-steps) .section-head { margin-bottom:20px; }
.section:has(.process-steps) .process-steps { margin-bottom:10px; }

/* ============================================================
   Touch devices (no hover): hover affordances are invisible on mobile,
   so give links a visible resting (pre-highlighted) state + a press flash.
   Scoped to (hover:none) so desktop hover behavior is untouched.
   ============================================================ */
@media (hover: none) {
  .nav-links a,
  .nav.is-open .nav-cta,
  .link-arrow { color: var(--jl-mint) !important; }
  .nav-links a:active,
  .link-arrow:active,
  .btn:active,
  .btn-primary:active,
  .btn-secondary-dark:active,
  .btn-secondary-light:active,
  .nav-cta:active { opacity: .55 !important; transition: opacity .06s ease; }
}