/* ExpertAccess Lifesciences — shared styles
   Design tokens (sampled directly from the ExpertAccess Lifesciences logo)
   ink        #10142E  primary text
   navy-900   #12163C  deep primary (logo "ExpertAccess" navy)
   navy-700   #2B65A4  secondary accent (logo caduceus wing blue)
   sky-100    #EAF1F7  section tint
   paper      #F7FAFD  page background
   green-600  #2F9564  CTA / accent (logo "Lifesciences" green)
   green-100  #DFF3E7  soft badge bg
*/

:root{
  --ink:#10142E;
  --teal-900:#12163C;
  --teal-800:#1A2050;
  --teal-700:#2B65A4;
  --teal-600:#35629B;
  --teal-500:#4F86C2;
  --sage-100:#EAF1F7;
  --sage-50:#F4F8FB;
  --paper:#F7FAFD;
  --gold-600:#2F9564;
  --gold-500:#3DAE77;
  --gold-100:#DFF3E7;
}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
}

.font-display{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-600);
  outline-offset:2px;
}

/* ---------- Signature component: the folder tab ----------
   A small die-cut tab sitting on a card, evoking a personnel
   file / patient chart — "the person behind the paperwork".
*/
.tab-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(18,22,60,0.10);
}
.tab-card .tab{
  position:absolute;
  top:-14px;
  left:22px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px 6px;
  background:var(--gold-600);
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:600;
  text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);
}
.tab-card.tab-teal .tab{ background:var(--teal-700); }

/* Ruled hairline divider with a dot, used between major sections */
.rule-dot{
  display:flex;
  align-items:center;
  gap:14px;
}
.rule-dot::before,
.rule-dot::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(18,22,60,0.18);
}
.rule-dot .dot{
  width:7px;height:7px;border-radius:999px;background:var(--gold-600);
  flex:none;
}

/* Eyebrow badge, notch-cut like a lanyard tag */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-700);
}
.eyebrow::before{
  content:"";
  width:18px;height:2px;background:var(--gold-600);
  display:inline-block;
}

@media screen and (max-width:768px) {
  .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-700);
}
}
/* Hero panel corner-notch, echoes the tab motif at larger scale */
.notch-panel{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}

/* Quote mark */
.quote-mark{
  font-family:'Fraunces', serif;
  font-style:italic;
  line-height:.6;
}

/* Nav link underline grow */
.nav-link{position:relative;}
.nav-link::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--gold-600);
  transition:right .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ right:0; }
.nav-link.active{color:var(--teal-800);}

/* Mobile menu */
#mobile-menu{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
#mobile-menu.open{ max-height:900px; }

/* Marquee-ish partner strip */
.partner-track{
  display:flex; gap:3rem; align-items:center; white-space:nowrap;
}

/* Card hover lift */
.lift{ transition:transform .25s ease, box-shadow .25s ease; }
.lift:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(18,22,60,0.35); }

/* Numbered process node */
.step-node{
  width:2.75rem;height:2.75rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces', serif; font-weight:600;
  background:var(--teal-900); color:#fff;
  flex:none;
}

/* Texture: faint dot grid background */
.dot-grid{
  background-image:radial-gradient(rgba(18,22,60,0.16) 1px, transparent 1px);
  background-size:16px 16px;
}