/* =============================================================
   VITAL DOCS — NEVADA page add-ons
   Loads AFTER css/style.css. Reuses all base tokens & components
   (colors, fonts, buttons, reveals, header, footer, form fields).
   Only NEW, Nevada-specific layouts live here — style.css is untouched.
   ============================================================= */

/* ---------- hero: prominent document list + small tagline under H1 ---------- */
.hero__svcs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0 0 16px;padding:0}
.hero__svcs li{display:flex;align-items:center;font-family:var(--sans);
  font-size:clamp(1rem,1.35vw,1.2rem);font-weight:500;color:var(--ink)}
.hero__svcs li:not(:last-child)::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--clay);margin:0 .7em}
.hero__tag{font-size:clamp(.92rem,1.05vw,1rem);line-height:1.5;color:var(--ink-2);max-width:48ch;margin:0 0 32px}

/* H1: the italic swash capital "N" (Nevada) overhangs left of its glyph box and was
   getting clipped by .kin .w{overflow:hidden}. Let the kinetic word boxes overflow
   HORIZONTALLY (so the swash shows at any width) while keeping the VERTICAL clip that
   masks the word-rise animation. */
.hero__title .w{overflow-x:visible;overflow-y:clip}

/* mobile: shift the hero seal down & slightly left so it overlaps the photo less
   (overrides style.css's max-width:600px rule, which had left:-10px;bottom:-30px) */
@media (max-width:600px){
  .hero__badge{left:-24px;bottom:-72px}
}

/* =============================================================
   FOOTER — developer credit (Infinite Semantic)
   Text adopts the footer's own palette/typography (mono · muted →
   brighter on hover); logo stays full-colour and rotates.
   ============================================================= */
.ftr__dev{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.72rem;line-height:1.4;color:var(--muted);
  transition:color .3s var(--ease)}
.ftr__dev:hover{color:var(--ink-2)}
.ftr__dev-logo{height:16px;width:auto;flex:none;vertical-align:middle;
  filter:none;opacity:1;animation:spinInfinite 12s linear infinite}
@keyframes spinInfinite{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* accessibility: stop the spin when the user prefers reduced motion */
@media (prefers-reduced-motion:reduce){.ftr__dev-logo{animation:none}}
/* very narrow phones: drop the logo image, keep the text credit */
@media (max-width:360px){.ftr__dev-logo{display:none}}

/* =============================================================
   SERVICE BLOCKS — full-width, alternating text / media
   ============================================================= */
.nsvc{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.6vw,70px);align-items:center}
.nsvc + .nsvc{margin-top:clamp(46px,7vw,104px)}
.nsvc__body{order:1}
.nsvc__media{order:2}
.nsvc--flip .nsvc__body{order:2}
.nsvc--flip .nsvc__media{order:1}

.nsvc__cat{display:inline-block;margin-bottom:16px}
.nsvc__title{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.02;margin-bottom:18px}
.nsvc__lead{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6}
.nsvc__lead strong{color:var(--ink);font-weight:600}
.nsvc__lead .clay{color:var(--clay)}

/* feature rows under each service (standalone version of .svc__feat) */
.nfeat{display:flex;flex-direction:column;margin-top:28px}
.nfeat li{display:flex;gap:15px;padding:17px 0;border-top:1px solid var(--line)}
.nfeat li:last-child{border-bottom:1px solid var(--line)}
.nfeat .ic{color:var(--clay);width:1.35em;height:1.35em;margin-top:.12em;flex:none}
.nfeat p{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.nfeat strong{color:var(--ink);font-weight:600}

/* media frame + graceful placeholder (shown until a real image is dropped in) */
.nsvc__media{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(155deg,var(--emerald) 0%,var(--emerald-deep) 100%);
  display:grid;place-items:center;box-shadow:0 40px 70px -50px rgba(27,38,50,.6)}
.nsvc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.nsvc__ph{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;padding:28px}
.nsvc__ph .ic{width:58px;height:58px;color:var(--clay-soft);opacity:.85}
.nsvc__ph b{font-family:var(--serif);font-size:1.25rem;color:var(--paper-2);font-weight:400}
.nsvc__ph span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(231,211,168,.6)}

/* =============================================================
   "NEED A DOCUMENT NOT LISTED ABOVE?" BAND
   ============================================================= */
.nband{position:relative;overflow:hidden;background:var(--emerald-2);color:var(--paper-2);
  border-radius:28px;padding:clamp(34px,5vw,72px);display:grid;
  grid-template-columns:1.25fr auto;gap:clamp(28px,4vw,56px);align-items:center}
.nband h2{color:var(--paper-2);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05}
.nband h2 .it{color:var(--clay-soft)}
.nband p{color:rgba(246,242,233,.72);margin-top:16px;max-width:50ch}
.nband p strong{color:var(--clay-soft);font-weight:600}
.nband__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.nband__note{font-style:italic;font-size:.88rem;color:rgba(246,242,233,.6);max-width:30ch}

/* =============================================================
   REQUEST FORM — inline, at the bottom of the page (not a modal)
   ============================================================= */
.reqform{max-width:700px;margin:44px auto 0;background:var(--paper-2);border:1px solid var(--line);
  border-radius:24px;padding:clamp(26px,4vw,46px);box-shadow:0 50px 90px -60px rgba(27,38,50,.5)}
.form__check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);
  line-height:1.5;cursor:pointer}
.form__check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--clay)}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1000px){
  .nsvc{grid-template-columns:1fr;gap:30px}
  .nsvc__media,.nsvc--flip .nsvc__media{order:-1}     /* image on top */
  .nsvc__body,.nsvc--flip .nsvc__body{order:0}
  .nband{grid-template-columns:1fr;gap:28px}
}
@media (max-width:600px){
  .reqform{padding:22px}
}

/* hero seal — larger ring text so it fills the band and reads on big screens
   (Nevada-only override; WA seal text is longer and stays at its own size) */
.hero__badge .seal__txt{font-size:11px;letter-spacing:.015em;font-weight:700}