/* V2.8 small production-polish pass.
   - Contact hero cards are genuine navigation controls.
   - Employment Verification keeps the horizontal Name / Position / Dates rhythm,
     but gives it full-width breathing room instead of three narrow towers. */

/* Contact hero: surfaces that look actionable should actually be actionable. */
.contact-visual-card{
  grid-template-columns:46px minmax(0,1fr) 28px;
  color:inherit;
  text-decoration:none;
  position:relative;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.contact-visual-card strong,
.contact-visual-card small{grid-column:2}
.contact-visual-card::after{
  content:"→";
  grid-column:3;
  grid-row:1/3;
  align-self:center;
  justify-self:center;
  color:#456f91;
  font-size:1.15rem;
  font-weight:850;
  line-height:1;
  transition:transform .18s ease,color .18s ease;
}
.contact-visual-card:hover{
  transform:translateY(-2px);
  border-color:#bed7e8;
  background:#fff;
  box-shadow:0 12px 26px rgba(21,59,99,.11);
}
.contact-visual-card:hover::after{transform:translateX(3px);color:var(--navy-deep)}
.contact-visual-card:focus-visible{
  outline:3px solid rgba(100,181,246,.32);
  outline-offset:3px;
  border-color:#7fb5dc;
}

/* Employment Verification hero: balanced two-column layout with a compact
   horizontal Name / Position-title / Dates read. The details are deliberately
   summarized here; fuller disclosure language remains lower on the page. */
.verification-hero{padding-bottom:72px}
.verification-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
  gap:clamp(42px,6vw,82px);
  align-items:center;
}
.verification-hero-copy{max-width:760px}
.verification-hero-copy .lead{max-width:700px}
.verification-scope{
  min-width:0;
  padding:28px 30px 24px;
  border:1px solid #dbe6ee;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(239,247,255,.96),rgba(255,249,237,.88) 56%,rgba(241,249,242,.94));
  box-shadow:0 18px 42px rgba(21,59,99,.09);
}
.verification-scope-intro{margin-bottom:20px}
.verification-scope-intro .eyebrow{margin-bottom:5px}
.verification-scope-intro h2{
  margin:0;
  color:var(--navy-deep);
  font-size:clamp(1.45rem,2vw,1.85rem);
  line-height:1.15;
}
.verification-scope-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.verification-scope-item{
  position:relative;
  min-width:0;
  min-height:132px;
  padding:18px 12px 16px;
  border:1px solid rgba(211,225,235,.95);
  border-radius:19px;
  background:rgba(255,255,255,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 8px 20px rgba(21,59,99,.05);
}
.verification-scope-item::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:3px;
  border-radius:0 0 8px 8px;
  background:#9bc9ea;
}
.verification-scope-item.scope-green::before{background:#9dcea6}
.verification-scope-item.scope-orange::before{background:#f4c66c}
.verification-scope-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--navy);
  box-shadow:0 6px 16px rgba(22,54,92,.08);
  margin-bottom:11px;
}
.verification-scope-item h3{
  margin:0;
  color:var(--navy-deep);
  font-size:1rem;
  line-height:1.2;
}
.verification-scope-note{
  margin:18px 2px 0;
  color:var(--muted);
  font-size:.91rem;
  line-height:1.5;
}

@media (max-width:980px){
  .verification-hero-layout{
    grid-template-columns:1fr;
    gap:30px;
  }
  .verification-hero-copy{max-width:850px}
  .verification-scope{max-width:760px}
}

@media (max-width:620px){
  .contact-visual-card{grid-template-columns:42px minmax(0,1fr) 24px;padding:16px}
  .contact-visual-card>span{width:42px;height:42px}
  .verification-hero{padding-bottom:56px}
  .verification-scope{padding:22px 18px 20px;border-radius:22px}
  .verification-scope-grid{gap:7px}
  .verification-scope-item{min-height:112px;padding:15px 7px 13px;border-radius:15px}
  .verification-scope-item::before{left:12px;right:12px}
  .verification-scope-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px;margin-bottom:9px}
  .verification-scope-item h3{font-size:.88rem}
  .verification-scope-note{font-size:.86rem}
}

@media (max-width:390px){
  .verification-scope{padding-left:13px;padding-right:13px}
  .verification-scope-grid{gap:5px}
  .verification-scope-item{padding-left:5px;padding-right:5px}
  .verification-scope-item h3{font-size:.82rem}
}