/* 2 / 8 / 2 is handled by the grid above; this is spacing + hover */
.phd-nav .nav-spaced{ gap:1rem; }
@media (min-width:992px){ .phd-nav .nav-spaced{ gap:1.75rem; } }
@media (min-width:1200px){ .phd-nav .nav-spaced{ gap:2.25rem; } }

/* pill hover + underline */
.phd-nav .navbar-nav .nav-link{
  font-weight:600; letter-spacing:.02em;
  padding:.55rem .9rem; border-radius:999px; position:relative;
  transition:background-color .2s,color .2s,box-shadow .2s;
}
.phd-nav .navbar-nav .nav-link:hover,
.phd-nav .navbar-nav .nav-link:focus-visible{
  background:rgba(var(--bs-primary-rgb),.08);
  box-shadow:0 0 0 2px rgba(var(--bs-primary-rgb),.35) inset;
  color:var(--bs-primary); text-decoration:none;
}
.phd-nav .navbar-nav .nav-link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:6px; height:2px;
  background:transparent; transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease-out, background-color .2s;
}
.phd-nav .navbar-nav .nav-link:hover::after,
.phd-nav .navbar-nav .nav-link:focus-visible::after{
  background:currentColor; transform:scaleX(1);
}

/* social icon pills */
.phd-nav .nav-link.nav-link--icon{
  padding:.45rem .6rem; border-radius:999px;
  transition:background-color .2s,color .2s,box-shadow .2s;
}
.phd-nav .nav-link.nav-link--icon:hover,
.phd-nav .nav-link.nav-link--icon:focus-visible{
  background:rgba(var(--bs-primary-rgb),.08);
  box-shadow:0 0 0 2px rgba(var(--bs-primary-rgb),.35) inset;
  color:var(--bs-primary);
}

/* Hero treatment */
.hero {
  background-position: center;
  background-size: cover;
  min-height: 360px;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* Chips that read well on the photo */
.badge.chip{
  --bs-badge-font-size: .95rem;
  padding: .5rem .85rem;
  background: rgba(255,255,255,.85);
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.badge.chip:hover{
  background: #fff;
  border-color: rgba(0,0,0,.2);
  transform: translateY(-1px);
}

/* one time CSS */
.plan-card .card-img-top {
  width: 100%;
  aspect-ratio: 16 / 9;   /* keeps all previews consistent */
  height: auto;           /* let aspect-ratio control height */
  object-fit: cover;      /* crop to fill without distortion */
}