/* ----- Service intro ----- */

.service-intro__grid{

  display: grid; grid-template-columns: 1.3fr 1fr;

  gap: 64px; align-items: center;

}

.service-intro__body p{ color: var(--c-text-soft); margin-bottom: 16px; }

.service-intro__body p strong{ color: var(--c-primary-dark); }

.service-intro__stats{

  display: grid; grid-template-columns: repeat(3, 1fr);

  gap: 20px; margin-top: 28px;

  padding-top: 28px;

  border-top: 1px solid var(--c-border);

}

.service-intro__stats strong{

  display: block;

  font-family: var(--ff-display);

  font-size: 1.8rem; font-weight: 800;

  color: var(--c-accent-dark); line-height: 1;

  margin-bottom: 4px;

}

.service-intro__stats span{

  font-size: .82rem; color: var(--c-text-soft);

  text-transform: uppercase; letter-spacing: .06em;

}


.service-intro__media{

  position: relative; aspect-ratio: 16/21.5;

  border-radius: var(--radius-lg); overflow: visible;

}

.service-intro__img{

  position: absolute; inset: 0;

  background:

    linear-gradient(135deg, rgba(30,58,138,.3), rgba(245,158,11,.4)),

    radial-gradient(circle at 30% 30%, #fcd9a6, transparent 50%),

    linear-gradient(45deg, var(--c-primary), var(--c-primary-light));

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

}

.service-intro__img::after{

  content:''; position: absolute; inset: 0;

  background:

   url(../images/V.NSINGH.png);
   background-size: contain;
    background-repeat: no-repeat;

  border-radius: var(--radius-lg);

}

.service-intro__badge{

  position: absolute; bottom: -20px; left: -20px;

  background: #fff; color: var(--c-primary-dark);

  padding: 16px 20px; border-radius: var(--radius);

  display: flex; align-items: center; gap: 14px;

  box-shadow: var(--shadow-lg); z-index: 2;

  max-width: 280px;

}

.service-intro__badge i{

  width: 44px; height: 44px;

  background: rgba(245,158,11,.15);

  color: var(--c-accent-dark);

  display: flex; align-items: center; justify-content: center;

  border-radius: 12px; font-size: 1.1rem; flex-shrink: 0;

}

.service-intro__badge strong{

  display: block; font-size: .95rem; color: var(--c-primary-dark);

  margin-bottom: 2px;

}

.service-intro__badge span{ font-size: .8rem; color: var(--c-text-soft); }


@media (max-width: 900px){

  .service-intro__grid{ grid-template-columns: 1fr; gap: 56px; }

  .service-intro__media{ max-width: 480px; margin: 0 auto; }

}


/* ----- Service categories grid ----- */

.service-cats__grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

}

.service-cat{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius);

  padding: 32px 28px;

  transition: all .3s var(--tr);

  position: relative; overflow: hidden;

}

.service-cat::before{

  content:''; position: absolute;

  top: 0; left: 0; right: 0; height: 4px;

  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));

  transform: scaleX(0); transform-origin: left;

  transition: transform .35s var(--tr);

}

.service-cat:hover{

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: transparent;

}

.service-cat:hover::before{ transform: scaleX(1); }

.service-cat__icon{

  width: 60px; height: 60px;

  display: flex; align-items: center; justify-content: center;

  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));

  color: #fff;

  border-radius: 16px;

  font-size: 1.5rem;

  margin-bottom: 20px;

  transition: transform .3s var(--tr);

}

.service-cat:hover .service-cat__icon{ transform: rotate(-6deg) scale(1.05); }

.service-cat h3{

  font-family: var(--ff-display);

  font-size: 1.2rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 10px;

}

.service-cat p{

  color: var(--c-text-soft);

  font-size: .92rem; margin-bottom: 18px;

}

.service-cat__link{

  display: inline-flex; align-items: center; gap: 6px;

  font-size: .9rem; font-weight: 600;

  color: var(--c-accent-dark);

}

.service-cat__link i{ transition: transform .2s var(--tr); }

.service-cat__link:hover i{ transform: translateX(4px); }


/* ----- Location / state cards ----- */

.service-locations__grid{

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 18px;

}

.loc-card{

  position: relative;

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius);

  padding: 24px 22px;

  text-align: left;

  cursor: pointer;

  font-family: var(--ff-body);

  transition: all .3s var(--tr);

  display: flex; flex-direction: column;

  overflow: hidden;

}

.loc-card::before{

  content:''; position: absolute;

  top: 0; left: 0; right: 0; height: 3px;

  background: var(--c-accent);

  transform: scaleX(0); transform-origin: left;

  transition: transform .35s var(--tr);

}

.loc-card:hover{

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

  border-color: var(--c-accent);

}

.loc-card:hover::before{ transform: scaleX(1); }

.loc-card__icon{

  width: 44px; height: 44px;

  background: rgba(30,58,138,.08);

  color: var(--c-primary);

  display: flex; align-items: center; justify-content: center;

  border-radius: 12px;

  font-size: 1.1rem;

  margin-bottom: 14px;

  transition: all .3s var(--tr);

}

.loc-card:hover .loc-card__icon{

  background: var(--c-accent);

  color: #1f1300;

}

.loc-card__tag{

  position: absolute; top: 14px; right: 14px;

  background: var(--c-accent); color: #1f1300;

  font-size: .68rem; font-weight: 700;

  letter-spacing: .08em; text-transform: uppercase;

  padding: 4px 10px; border-radius: 999px;

}

.loc-card h3{

  font-family: var(--ff-display);

  font-size: 1.05rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 10px;

}

.loc-card__meta{

  display: flex; flex-direction: column; gap: 6px;

  font-size: .82rem; color: var(--c-text-soft);

  margin-bottom: 16px;

}

.loc-card__meta i{ color: var(--c-accent); margin-right: 6px; width: 14px; }

.loc-card__cta{

  margin-top: auto;

  display: inline-flex; align-items: center; gap: 6px;

  font-size: .85rem; font-weight: 600;

  color: var(--c-primary);

}

.loc-card__cta i{ transition: transform .2s var(--tr); }

.loc-card:hover .loc-card__cta i{ transform: translateX(4px); }


/* ----- State modal ----- */

.state-modal{

  position: fixed; inset: 0;

  z-index: 100;

  display: flex; align-items: center; justify-content: center;

  padding: 24px;

  opacity: 0; visibility: hidden;

  transition: opacity .25s var(--tr);

}

.state-modal.is-open{ opacity: 1; visibility: visible; }

.state-modal__backdrop{

  position: absolute; inset: 0;

  background: rgba(10, 18, 48, .7);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

}

.state-modal__dialog{

  position: relative;

  background: #fff;

  width: 100%; max-width: 520px;

  border-radius: var(--radius-lg);

  box-shadow: 0 30px 80px rgba(0,0,0,.4);

  overflow: hidden;

  transform: scale(.92) translateY(20px);

  transition: transform .3s var(--tr);

  max-height: 90vh;

  display: flex; flex-direction: column;

}

.state-modal.is-open .state-modal__dialog{

  transform: scale(1) translateY(0);

}

.state-modal__close{

  position: absolute; top: 16px; right: 16px;

  width: 36px; height: 36px;

  background: rgba(15,23,42,.06);

  color: var(--c-text-soft);

  border: 0; border-radius: 50%;

  cursor: pointer; font-size: .95rem;

  transition: all .2s var(--tr);

  display: flex; align-items: center; justify-content: center;

  z-index: 2;

}

.state-modal__close:hover{

  background: var(--c-accent); color: #1f1300;

  transform: rotate(90deg);

}

.state-modal__head{

  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);

  color: #fff;

  padding: 32px 28px;

  display: flex; align-items: center; gap: 18px;

  position: relative; overflow: hidden;

}

.state-modal__head::before{

  content:''; position: absolute; top: -40px; right: -40px;

  width: 140px; height: 140px;

  background: radial-gradient(circle, rgba(245,158,11,.3), transparent 60%);

}

.state-modal__head > *{ position: relative; }

.state-modal__icon{

  width: 56px; height: 56px;

  background: rgba(245,158,11,.2);

  color: var(--c-accent);

  display: flex; align-items: center; justify-content: center;

  border-radius: 14px; font-size: 1.4rem; flex-shrink: 0;

}

.state-modal__eyebrow{

  display: block; font-size: .72rem; font-weight: 600;

  letter-spacing: .12em; text-transform: uppercase;

  color: var(--c-accent); margin-bottom: 4px;

}

.state-modal__head h3{

  font-family: var(--ff-display);

  font-size: 1.6rem; font-weight: 800;

  line-height: 1.1;

}

.state-modal__body{ padding: 28px; overflow-y: auto; }

.state-modal__row{

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 16px; margin-bottom: 24px;

}

.state-modal__row > div{

  background: var(--c-bg-soft);

  border-radius: var(--radius-sm);

  padding: 14px 16px;

  border-left: 3px solid var(--c-accent);

}

.state-modal__row i{

  color: var(--c-accent); font-size: .9rem;

  display: block; margin-bottom: 4px;

}

.state-modal__row strong{

  display: block; font-size: .72rem; color: var(--c-text-soft);

  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px;

}

.state-modal__row span{ font-weight: 600; color: var(--c-primary-dark); }

.state-modal__body h4{

  font-family: var(--ff-display);

  font-size: 1.05rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 14px;

}

.state-modal__services{

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 10px; margin-bottom: 24px;

}

.state-modal__services li{

  display: flex; align-items: center; gap: 8px;

  font-size: .88rem; color: var(--c-text);

}

.state-modal__services i{ color: var(--c-success); font-size: .85rem; }

.state-modal__cta{

  width: 100%; justify-content: center;

}


@media (max-width: 640px){

  .state-modal__row, .state-modal__services{ grid-template-columns: 1fr; }

  .state-modal__head{ padding: 24px 20px; }

  .state-modal__head h3{ font-size: 1.3rem; }

}


/* ----- Documents gallery ----- */

.doc-grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 24px;

}

.doc-card{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius);

  overflow: hidden;

  margin: 0;

  transition: all .3s var(--tr);

}

.doc-card:hover{

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: transparent;

}

.doc-card__media{

  position: relative;

  aspect-ratio: 3/4;

  background: var(--c-bg-alt);

  overflow: hidden;

  cursor: zoom-in;

}

.doc-card__media img{

  width: 100%; height: 100%;

  object-fit: cover; object-position: top;

  transition: transform .5s var(--tr);

}

.doc-card:hover .doc-card__media img{ transform: scale(1.05); }

.doc-card__overlay{

  position: absolute; inset: 0;

  background: linear-gradient(180deg, transparent 50%, rgba(10,18,48,.6) 100%);

  display: flex; align-items: flex-end; justify-content: flex-end;

  padding: 16px;

  gap: 8px;

  opacity: 0;

  transition: opacity .25s var(--tr);

}

.doc-card:hover .doc-card__overlay{ opacity: 1; }

.doc-card__btn{

  width: 40px; height: 40px;

  display: flex; align-items: center; justify-content: center;

  background: rgba(255,255,255,.95);

  color: var(--c-primary);

  border: 0; border-radius: 50%;

  cursor: pointer; font-size: .9rem;

  box-shadow: var(--shadow);

  transition: all .2s var(--tr);

  text-decoration: none;

}

.doc-card__btn:hover{

  background: var(--c-accent);

  color: #1f1300;

  transform: scale(1.1);

}

.doc-card figcaption{

  padding: 22px 24px;

  position: relative;

}

.doc-card__no{

  position: absolute; top: 22px; right: 24px;

  font-family: var(--ff-display);

  font-size: 2rem; font-weight: 800;

  color: var(--c-bg-alt);

  line-height: 1;

}

.doc-card h3{

  font-family: var(--ff-display);

  font-size: 1.1rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 6px;

}

.doc-card p{

  color: var(--c-text-soft);

  font-size: .88rem;

}


@media (max-width: 640px){

  .service-intro__stats{ grid-template-columns: 1fr 1fr; gap: 16px; }

}