/* Services hub and the service pages, 2026-11-02, after the Ledgerly inner pages.
   Each service has its own page (service.template.html); the hub lists them. Shell, eyebrow and buttons come from
   index <style> and pages.css. */
.svc-hero .wrap{display:grid;grid-template-columns:1fr minmax(0,460px);gap:56px;align-items:center}

/* hub hero index: every service as a small tile */
.svc-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px;border-radius:24px;background:var(--surface);border:1px solid var(--ring)}
.svc-index a{display:grid;justify-items:center;gap:6px;padding:14px 6px 12px;border-radius:var(--r-xl);background:var(--subtle);font-size:13px;font-weight:600;text-align:center;line-height:1.5;transition:background-color .18s,translate .25s var(--ease)}
.svc-index a:hover{background:var(--tint);translate:0 -2px}
.svc-index img{width:56px;height:56px;object-fit:contain}

/* hub cards: art, number, title and one line, linking to the service page */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svc-card{position:relative;display:grid;grid-template-rows:auto 1fr;gap:4px;padding:8px;border-radius:24px;background:var(--surface);border:1px solid var(--ring);transition:border-color .18s,translate .25s var(--ease)}
.svc-card:hover{border-color:var(--line-strong);translate:0 -2px}
.svc-card-art{position:relative;display:grid;place-items:center;height:168px;border-radius:16px;background:var(--subtle);overflow:hidden;isolation:isolate}
.svc-card-art .dots{-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);opacity:.8}
.svc-card-art img{position:relative;width:auto;height:118px;object-fit:contain;transition:scale .35s var(--out)}
.svc-card:hover .svc-card-art img{scale:1.05}
.svc-card-body{display:grid;align-content:start;gap:4px;padding:12px 14px 14px;padding-inline-end:44px}
.svc-card-body b{font-size:18px;font-weight:650;line-height:1.6}
.svc-card-p{font-size:14px;line-height:1.9;color:var(--muted);text-wrap:pretty}
.svc-card .go{position:absolute;inset-inline-end:22px;bottom:18px;color:var(--muted);transition:translate .18s var(--ease),color .18s}
.svc-card .go svg{width:18px;height:18px}
.svc-card:hover .go{translate:-3px 0;color:var(--text)}

/* ---- service page ---- */
/* visual navigator: picture tiles for every service, the current one tinted; scrolls sideways on narrow screens */
.sv-nav{border-bottom:1px solid var(--line)}
.sv-rail{list-style:none;display:flex;gap:6px;padding:12px 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.sv-rail::-webkit-scrollbar{display:none}
.sv-rail li{flex:1 0 96px;scroll-snap-align:center}
.sv-rail a{position:relative;display:grid;justify-items:center;gap:6px;height:100%;padding:10px 6px;border-radius:var(--r-xl);border:1px solid transparent;font-size:13px;font-weight:550;line-height:1.5;text-align:center;color:var(--muted);transition:background-color .18s,color .18s,border-color .18s}
.sv-rail a:hover{background:var(--subtle);color:var(--text)}
.sv-thumb{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--subtle);transition:background-color .18s,translate .25s var(--ease)}
.sv-thumb img{width:40px;height:40px;object-fit:contain}
.sv-thumb svg{width:22px;height:22px;color:var(--text)}
.sv-rail a:hover .sv-thumb{translate:0 -2px}
.sv-rail a[aria-current="page"]{background:var(--tint);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--tint-ink);font-weight:650}
.sv-rail a[aria-current="page"] .sv-thumb{background:var(--surface)}
.sv-rail .sv-all{border:1px dashed var(--ring-strong)}
.sv-lbl{white-space:nowrap}

.sv-hero{padding-top:40px}
.sv-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:48px;align-items:center}
.sv-count{display:inline-flex;align-items:baseline;gap:4px;padding:0 8px;border-radius:999px;background:var(--navy);color:var(--on-navy);font-size:12px;font-weight:650;line-height:22px}
.sv-count small{font-size:11px;opacity:.75}
.sv-copy .svc-metals{margin-top:20px}
.sv-copy .svc-metals:empty{display:none}
.svc-art{position:relative;display:grid;place-items:center;min-height:300px;border-radius:24px;background:var(--subtle);overflow:hidden;isolation:isolate}
.svc-art .dots{-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);opacity:.8}
.svc-art .mist{width:70%;height:60%;left:15%;top:20%;background:radial-gradient(closest-side,var(--mist-a),transparent)}
.svc-art img{position:relative;width:min(62%,260px);height:auto;animation:bob 7s ease-in-out infinite}
.sv-art{min-height:360px;border:1px solid var(--ring)}

.svc-metals{display:flex;gap:6px;flex-wrap:wrap}
.svc-metals a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ring-strong);background:var(--surface);font-size:13px;font-weight:600;transition:border-color .18s}
.svc-metals a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.svc-metals a[href="silver.html"]::before{background:var(--silver)}
.svc-metals a[href="copper.html"]::before{background:var(--copper)}
.svc-metals a:hover{border-color:var(--line-strong)}
.svc-n{font-size:13px;font-weight:650;color:var(--muted)}

/* about: two paragraphs beside three highlight cards */
.sv-about-sec{padding-top:24px}
.sv-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.sv-text{display:grid;gap:14px}
.sv-text h2{font-size:28px;line-height:1.5;margin-bottom:4px}
.sv-text p{font-size:16px;line-height:2.1;color:var(--muted);max-width:60ch;text-wrap:pretty}
.sv-points{display:grid;gap:12px}
.sv-point{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--ring)}
.sv-point h3{font-size:16px;font-weight:650;line-height:1.6;margin-bottom:2px}
.sv-point p{font-size:14px;line-height:1.9;color:var(--muted)}

/* steps and rules */
.sv-how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sv-how>div{display:grid;align-content:start;gap:4px;padding:24px 26px;border-radius:24px;background:var(--surface);border:1px solid var(--ring)}
.sv-how h2{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:650;margin-bottom:14px}
.sv-how h2 svg{width:22px;height:22px;color:var(--accent)}
.sv-how .link{justify-self:start;margin-top:8px}
.svc-steps{list-style:none;counter-reset:st;display:grid}
.svc-steps li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;gap:14px;font-size:15px;line-height:1.85;padding:12px 0;border-bottom:1px solid var(--line)}
.svc-steps li:last-child{border-bottom:0}
.svc-steps li::before{content:counter(st,persian);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--navy);color:var(--on-navy);font-size:14px;font-weight:650}
.svc-rules{list-style:none;display:grid;gap:14px}
.svc-rules li{position:relative;padding-inline-start:16px;font-size:15px;line-height:1.85;color:var(--text)}
.svc-rules li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:6px;height:6px;border-radius:2px;background:var(--accent-2)}
.svc-rules small,.svc-fees small{display:block;font-size:12px;color:var(--muted)}
.svc-rules small:empty{display:none}
.svc-rules a{text-decoration:underline;text-underline-offset:3px}

/* previous / next service */
.sv-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv-pg{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--ring);transition:border-color .18s}
.sv-pg:hover{border-color:var(--line-strong)}
.sv-pg img{width:64px;height:64px;object-fit:contain;flex:none}
.sv-pg-t{display:grid;flex:1;min-width:0}
.sv-pg-t small{font-size:13px;color:var(--muted)}
.sv-pg-t b{font-size:18px;font-weight:650;line-height:1.6}
.sv-pg.next .sv-pg-t{text-align:end}
.sv-pg-go{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--ring-strong);display:grid;place-items:center;color:var(--muted);transition:translate .18s var(--ease),color .18s}
.sv-pg-go svg{width:18px;height:18px}
.sv-pg.prev .sv-pg-go svg{rotate:180deg}
.sv-pg.prev:hover .sv-pg-go{translate:3px 0;color:var(--text)}
.sv-pg.next:hover .sv-pg-go{translate:-3px 0;color:var(--text)}

/* fees note */
.svc-fees{display:flex;align-items:center;gap:20px;padding:24px;border-radius:24px;background:var(--surface);border:1px solid var(--ring)}
.svc-fees h2{font-size:20px;margin-bottom:4px}
.svc-fees p{font-size:15px;color:var(--muted);line-height:1.95;max-width:72ch}
.svc-fees .btn{margin-inline-start:auto}

@media (max-width:1024px){
  .svc-hero .wrap,.sv-hero .wrap{grid-template-columns:1fr;gap:32px}
  .sv-art{min-height:260px}
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-about{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  .sv-how,.sv-pager{grid-template-columns:1fr}
  .svc-fees{flex-wrap:wrap}
  .svc-fees .btn{margin-inline-start:0}
}
@media (max-width:640px){
  .svc-cards{grid-template-columns:1fr}
  .sv-rail{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .sv-rail li{flex:0 0 88px}
  .sv-thumb{width:46px;height:46px;border-radius:14px}
  .sv-thumb img{width:34px;height:34px}
  .sv-text h2{font-size:23px}
  .sv-how>div{padding:20px}
  .sv-pg{padding:12px 14px;gap:12px}
  .sv-pg img{width:52px;height:52px}
}
@media (max-width:520px){
  .svc-index img{width:44px;height:44px}
  .svc-index a{font-size:12px;padding:12px 4px 10px}
  .svc-art img{width:44%}
  .sv-art{min-height:220px}
}