/* ==========================================================================
   VGraphics — service pages.

   Layered on top of style.css, which supplies the palette, the type stack and
   .wrap / .sec / .eyebrow / .h-sec / .lede / .btn. Only what those do not
   already cover is defined here.

   These pages deliberately do NOT use the .rv reveal class. Their whole job is
   to be read and indexed, so nothing on them is allowed to depend on a script
   running before it becomes visible.
   ========================================================================== */

.svcpage{padding-top:clamp(96px,12vw,148px)}
.svcpage__crumb{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;color:var(--muted-3)}
.svcpage__crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-2)}
.svcpage__crumb a:hover{color:var(--gold)}
.svcpage__cta{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:12px}

.inc{margin-top:clamp(30px,4vw,52px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2.2vw,26px)}
.inc__card{padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:14px;
  background:var(--ink-card)}
.inc__t{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--cream);line-height:1.25}
.inc__d{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}

.flow{margin-top:clamp(30px,4vw,52px);display:grid;gap:0;counter-reset:flow}
.flow__row{display:grid;grid-template-columns:64px 1fr;gap:clamp(14px,2vw,24px);
  padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line)}
.flow__row:last-child{border-bottom:1px solid var(--line)}
.flow__n{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--gold)}
.flow__t{margin:0;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--cream)}
.flow__d{margin:7px 0 0;font-size:14.5px;line-height:1.62;color:var(--muted);max-width:70ch}

.shots{margin-top:clamp(30px,4vw,52px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:clamp(14px,2vw,22px)}
.shots figure{margin:0}
.shots img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.shots figcaption{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--muted-3)}

.faq{margin-top:clamp(30px,4vw,52px);max-width:80ch}
.faq__i{border-top:1px solid var(--line);padding:clamp(18px,2.2vw,24px) 0}
.faq__i:last-child{border-bottom:1px solid var(--line)}
.faq__q{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--cream);line-height:1.3}
.faq__a{margin:9px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted)}

.more{margin-top:clamp(28px,3.5vw,44px);display:flex;flex-wrap:wrap;gap:10px}
.more a{padding:9px 15px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--sans);font-size:13.5px;color:var(--muted);text-decoration:none;transition:.25s var(--ease)}
.more a:hover{border-color:var(--gold);color:var(--gold)}

.endcta{padding:clamp(48px,6vw,84px) var(--pad);background:linear-gradient(135deg,var(--wine),#3A100F);
  text-align:center}
.endcta__t{margin:0 auto;max-width:22ch;font-family:var(--serif);
  font-size:clamp(27px,3.4vw,44px);font-weight:600;color:#fff;line-height:1.12}
.endcta__d{margin:14px auto 0;max-width:56ch;font-size:15px;line-height:1.62;color:rgba(245,239,231,.82)}
.endcta__b{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}