/* ============================================================
   iamNK — Services executive tab system
   Nav-bar tablist · active-link chrome · panel transitions
   ============================================================ */

:root {
  --svc-ink: #0d0d0f;
  --svc-graphite: #2a2a2e;
  --svc-slate: #4a4a52;
  --svc-steel: #6b6b75;
  --svc-mist: #9a9aa3;
  --svc-silver: #c8c8d0;
  --svc-cloud: #e6e6ec;
  --svc-paper: #f4f4f7;
  --svc-white: #ffffff;
  --svc-line: rgba(13, 13, 15, 0.10);
  --svc-line-soft: rgba(13, 13, 15, 0.06);
}

/* ---- Panels wrap ---- */
.svc-tabs-wrap {
  position: relative;
  z-index: 2;
}

/* ---- Nav links act as the tablist ---- */
.nav-links a[data-tab] {
  position: relative;
  transition: color .25s ease, opacity .25s ease;
}

.nav-links a[data-tab][aria-selected="false"] {
  opacity: 0.55;
}

.nav-links a[data-tab][aria-selected="true"] {
  opacity: 1;
}

/* Underline indicator on the active tab */
.nav-links a[data-tab]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

.nav-links a[data-tab][aria-selected="true"]::after {
  width: 70%;
}

.nav-links a.nav-cta[data-tab]::after {
  display: none; /* the CTA pill already stands out */
}

/* Divider between section tabs and page links */
.nav-links .nav-divider {
  width: 1px;
  align-self: center;
  height: 1.1rem;
  background: var(--svc-line);
  margin: 0 .3rem;
  list-style: none;
}
.nav-links a:not([data-tab]) {
  opacity: .6;
  transition: opacity .2s ease;
}
.nav-links a:not([data-tab]):hover { opacity: 1; }

/* ---- Panels ---- */
.svc-panels {
  position: relative;
}

.svc-panel {
  animation: svcPanelIn .45s cubic-bezier(.16, 1, .3, 1) both;
}

.svc-panel[hidden] {
  display: none;
}

@keyframes svcPanelIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Executive section framing ---- */
.svc-panel > section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* ---- Executive contact form (classic engraved fields) ---- */
.svc-panel .cta {
  padding-bottom: 6rem;
}

.svc-panel .cta-card {
  background: var(--svc-white);
  border: 1px solid var(--svc-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(13,13,15,0.04), 0 12px 40px -20px rgba(13,13,15,0.12);
}

.svc-panel .contact-field {
  margin-bottom: 1.1rem;
}

.svc-panel .contact-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--svc-slate);
  margin-bottom: 0.4rem;
}

.svc-panel .contact-field input,
.svc-panel .contact-field select,
.svc-panel .contact-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--svc-ink);
  background: var(--svc-paper);
  border: 1px solid var(--svc-line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none;
}

.svc-panel .contact-field input::placeholder,
.svc-panel .contact-field textarea::placeholder {
  color: var(--svc-mist);
}

.svc-panel .contact-field input:focus,
.svc-panel .contact-field select:focus,
.svc-panel .contact-field textarea:focus {
  outline: none;
  border-color: var(--svc-ink);
  background: var(--svc-white);
  box-shadow: 0 0 0 3px rgba(13,13,15,0.07);
}

.svc-panel .contact-field .req {
  color: var(--svc-steel);
  margin-left: 2px;
}

/* ---- Subtle hover lift on cards/steps (kept tasteful) ---- */
@media (hover: hover) {
  .svc-panel .card {
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .svc-panel .step {
    transition: transform .3s ease, border-color .3s ease;
  }
}

/* ---- Dark theme adjustments ---- */
[data-theme="dark"] .svc-panel .cta-card {
  background: rgba(30, 30, 36, 0.9);
  border-color: rgba(255,255,255,0.10);
}

[data-theme="dark"] .svc-panel .contact-field input,
[data-theme="dark"] .svc-panel .contact-field select,
[data-theme="dark"] .svc-panel .contact-field textarea {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--svc-cloud);
}

[data-theme="dark"] .svc-panel .contact-field input:focus,
[data-theme="dark"] .svc-panel .contact-field select:focus,
[data-theme="dark"] .svc-panel .contact-field textarea:focus {
  background: rgba(255,255,255,0.07);
  border-color: var(--svc-white);
}

[data-theme="dark"] .svc-panel .contact-field label {
  color: var(--svc-silver);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .svc-panel > section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}