/* MS Medical Billing — shared site styles */

:root{
  --ink:#16222B;
  --ink-soft:#4B5A60;
  --harbor:#1C6E8A;
  --harbor-deep:#0F3B4D;
  --gold:#A97A34;
  --gold-light:#D9A65F;
  --mist:#EBF0EF;
  --paper:#F4F6F5;
  --white:#FFFFFF;
  --border:#DCE4E3;
  --max:1120px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:var(--harbor); text-decoration:none; }
a:hover{ color:var(--harbor-deep); }
h1,h2,h3{
  font-family:'Lora', Georgia, serif;
  font-weight:600;
  line-height:1.14;
  margin:0 0 .5em;
  text-wrap:balance;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; color:var(--ink-soft); }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--harbor);
  display:block;
  margin-bottom:14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:7px;
  font-family:'Archivo', sans-serif;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--gold); color:var(--white); box-shadow:0 1px 2px rgba(22,34,43,.06); }
.btn-primary:hover{ background:#8f6a2c; color:var(--white); transform:translateY(-1px); box-shadow:0 6px 16px rgba(169,122,52,.28); }
.btn-outline{ background:transparent; color:var(--paper); border-color:rgba(244,246,245,.4); }
.btn-outline:hover{ border-color:var(--paper); color:var(--paper); background:rgba(244,246,245,.08); }
.btn-ghost{ background:transparent; color:var(--harbor); border-color:var(--border); }
.btn-ghost:hover{ background:var(--mist); color:var(--harbor-deep); border-color:var(--harbor); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,245,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-word{ display:flex; flex-direction:column; line-height:1; }
.brand-ms{ font-family:'Lora', Georgia, serif; font-weight:600; font-size:1.25rem; color:var(--ink); }
.brand-rest{ font-family:'Archivo', sans-serif; font-weight:500; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  color:var(--ink-soft);
  font-size:.92rem;
  font-weight:500;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--gold);
}
.nav-cta{ margin-left:6px; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:8px; margin:0;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--ink);
  margin:5px 0; transition:transform .2s ease, opacity .2s ease;
}

@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start;
    padding:18px 24px 24px;
    gap:16px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-cta{ margin-left:0; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:96px 0 80px;
  overflow:hidden;
}
.hero-watermark{
  position:absolute;
  top:-40px; right:-30px;
  width:340px; height:340px;
  opacity:.06;
  pointer-events:none;
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns:0.95fr 1.25fr;
  gap:28px;
  align-items:center;
  max-width:1200px;
}
.hero-copy{ display:flex; flex-direction:column; gap:22px; max-width:500px; }
.hero .kicker{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.hero .kicker-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-light); }
.hero h1{ color:var(--paper); font-size:clamp(2.2rem, 4.6vw, 3.3rem); }
.hero p.lead{ color:var(--mist); font-size:1.1rem; max-width:56ch; }
.hero .tagline{
  font-family:'Lora', Georgia, serif;
  font-style:italic;
  color:var(--gold-light);
  font-size:1.05rem;
}

/* Hero infographic — "the billing reality, simplified": scattered pain points
   funnelling down through MS Medical Billing into three clean outcomes */
.hero-art{ position:relative; }
.infographic{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--harbor-deep);
  border:1px solid rgba(217,166,95,.22);
  border-radius:14px;
  padding:40px 30px 42px;
  overflow:hidden;
}
.infographic::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(244,246,245,.07) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 40%, transparent 78%);
          mask-image:radial-gradient(ellipse at center, #000 40%, transparent 78%);
  pointer-events:none;
}
.ig-eyebrow{
  position:relative;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11px; letter-spacing:.13em;
  color:var(--gold-light); text-transform:uppercase; margin:0 0 26px; text-align:center;
}

/* chaos cluster — a loose vertical trail feeding down into the funnel. Chips overlap
   vertically (negative margin) since they're offset left/right, so the trail stays
   compact instead of stacking each chip's full height in sequence. */
.ig-chaos{ position:relative; display:flex; flex-direction:column; width:100%; max-width:312px; }
.ig-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 9px; border:1px solid rgba(244,246,245,.4); border-radius:20px;
  font-family:'Archivo',sans-serif; font-size:10.5px; font-weight:600; color:var(--paper);
  white-space:nowrap; background:rgba(22,34,43,.55);
  box-shadow:0 4px 10px rgba(0,0,0,.28);
}
.ig-chip svg{ flex:none; opacity:.8; }
/* fully alternating left/right (not partial indents) so consecutive, vertically-overlapping
   chips land on opposite sides of the track and never cover each other's text */
.ig-chip:nth-child(1){ align-self:flex-start; }
.ig-chip:nth-child(2){ align-self:flex-end; margin-top:-9px; }
.ig-chip:nth-child(3){ align-self:flex-start; margin-top:-9px; }
.ig-chip:nth-child(4){ align-self:flex-end; margin-top:-9px; }
.ig-chip:nth-child(5){ align-self:flex-start; margin-top:-9px; }
.ig-chip:nth-child(6){ align-self:flex-end; margin-top:-9px; }

.ig-funnel{ position:relative; margin:16px 0 18px; opacity:.85; }

.ig-node{
  position:relative;
  display:flex; align-items:center; gap:9px;
  background:var(--harbor-deep); border:1px solid var(--gold-light); border-radius:30px;
  padding:10px 22px 10px 16px;
}
.ig-node .mark{ width:21px; height:21px; border-radius:6px; background:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; }
.ig-node b{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:14.5px; color:var(--paper); letter-spacing:.01em; }

.ig-drop{ position:relative; width:1px; height:26px; border-left:1px dashed rgba(217,166,95,.55); margin:3px 0; }

.ig-outcomes{ position:relative; display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.ig-outcome{ display:flex; align-items:center; gap:7px; }
.ig-outcome .tick{ width:19px; height:19px; border-radius:50%; border:1px solid rgba(217,166,95,.6); display:flex; align-items:center; justify-content:center; flex:none; }
.ig-outcome span{ font-size:12.5px; font-weight:600; color:var(--paper); }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-copy{ max-width:none; }
  .hero-art{ max-width:520px; margin:0 auto; }
}
/* on narrow phones the chip track itself is narrower, so shrink the chips a little
   to keep the same left/right alternation from colliding — same layout, less width per chip */
@media (max-width:480px){
  .ig-chip{ padding:5px 10px 5px 7px; gap:5px; font-size:9.5px; }
  .ig-chip svg{ width:12px; height:12px; }
}

.page-hero{
  position:relative;
  background:var(--harbor-deep);
  color:var(--paper);
  padding:68px 0 60px;
  overflow:hidden;
}
.page-hero .hero-watermark{ top:-50px; right:-40px; width:280px; height:280px; opacity:.07; }
.page-hero .wrap{ position:relative; }
.page-hero h1{ color:var(--paper); font-size:clamp(1.95rem,3.6vw,2.7rem); }
.page-hero p{ color:var(--mist); max-width:60ch; }

/* ---------- Sections ---------- */
section{ padding:76px 0; }
.section-alt{ background:var(--mist); }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Tighter rhythm for pages with several compact, single-line-card sections in a row
   (e.g. Services) so the page doesn't accumulate the full-size section padding
   six times over for content that's lighter than a standard grid section. */
.section-tight{ padding:54px 0; }
.section-tight .section-head{ margin-bottom:30px; }

/* Stat row */
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--white);
}
.stat-block{
  padding:36px 40px;
  display:flex;
  align-items:center;
  gap:20px;
}
.stat-block + .stat-block{ border-left:1px solid var(--border); }
.stat-num{
  font-family:'Lora', Georgia, serif;
  font-weight:600;
  font-size:clamp(2.2rem,4.4vw,2.9rem);
  color:var(--harbor);
  line-height:1;
  flex:none;
}
.stat-num .unit{ font-size:1.35rem; }
.stat-label{ font-size:.92rem; color:var(--ink-soft); max-width:24ch; }
@media (max-width:640px){
  .stats{ grid-template-columns:1fr; }
  .stat-block + .stat-block{ border-left:none; border-top:1px solid var(--border); }
}

/* Cards / grids */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .grid-2, .grid-3, .stats{ grid-template-columns:1fr; }
}

.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  padding:26px;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover{ box-shadow:0 10px 24px rgba(22,34,43,.07); transform:translateY(-2px); border-color:#C9D5D3; }

/* Icon-badge cards (Who We Work With / Why Choose Us) */
.icon-card{ display:flex; gap:16px; align-items:flex-start; }
.icon-badge{
  flex:none;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--mist);
  display:flex; align-items:center; justify-content:center;
}
.icon-card h3{ font-size:1.02rem; margin-bottom:3px; }
.icon-card .d{ font-size:.86rem; color:var(--ink-soft); margin:0; }
.icon-card p.body-text{ font-size:.92rem; margin:2px 0 0; }

.tick-item{ display:flex; gap:14px; align-items:flex-start; }
.tick-item svg{ flex:none; margin-top:3px; }
.tick-item p{ margin:0; color:var(--ink); font-size:.98rem; }

/* Service stack / checklist (Services page) */
.svc-stack{ display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
.svc-row{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid rgba(22,34,43,.10); }
.svc-row .icon-badge{ width:38px; height:38px; }
.svc-row .body-text{ margin:0; color:var(--ink); font-weight:500; font-size:.92rem; }
@media (max-width:760px){ .svc-stack{ grid-template-columns:1fr; } }

.tick-list{ display:flex; flex-direction:column; gap:18px; }

/* Process steps */
.steps{ display:flex; flex-direction:column; gap:0; }
.step{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:22px;
  padding:30px 0;
  border-bottom:1px solid var(--border);
}
.step:last-child{ border-bottom:none; }
.step-num{
  width:52px; height:52px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Lora', Georgia, serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--gold);
  flex:none;
}
.step h3{ font-size:1.2rem; margin-bottom:6px; }

/* Process timeline (How It Works infographic) */
.timeline{ position:relative; display:flex; flex-direction:column; gap:0; }
.timeline::before{
  content:"";
  position:absolute;
  top:58px; bottom:58px; left:29px;
  width:2px;
  background-image:repeating-linear-gradient(to bottom, var(--harbor) 0 6px, transparent 6px 13px);
  opacity:.55;
}
.timeline-step{
  display:grid;
  grid-template-columns:60px 1fr;
  align-items:start;
  gap:24px;
  padding:28px 0;
  position:relative;
}
.timeline-marker{ position:relative; flex:none; }
.timeline-icon{
  position:relative;
  z-index:1;
  width:60px; height:60px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.timeline-num{
  position:absolute;
  bottom:-3px; right:-3px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--gold);
  color:var(--white);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--paper);
  z-index:2;
}
.timeline-content h3{ font-size:1.2rem; margin-bottom:6px; }
@media (max-width:560px){
  .timeline::before{ left:23px; top:52px; bottom:52px; }
  .timeline-step{ grid-template-columns:48px 1fr; gap:18px; }
  .timeline-icon{ width:48px; height:48px; }
  .timeline-icon svg{ width:21px; height:21px; }
}

/* Sample-content marker */
.sample{
  border:1px dashed var(--harbor);
  background:var(--mist);
  border-radius:10px;
  padding:22px 24px;
  position:relative;
}
.sample::before{
  content:"Sample content";
  position:absolute;
  top:-11px; left:18px;
  background:var(--paper);
  padding:0 8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--harbor);
}

/* CTA band */
.cta-band{
  position:relative;
  background:var(--harbor-deep);
  color:var(--paper);
  text-align:left;
  overflow:hidden;
}
.cta-band .hero-watermark{ top:-60px; right:-30px; width:260px; height:260px; opacity:.08; }
.cta-band h2{ color:var(--paper); }
.cta-band p{ color:var(--mist); margin-bottom:0; }
.cta-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-line{ display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px solid var(--border); }
.contact-line span.label{ font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.contact-line a, .contact-line .val{ font-size:1.05rem; color:var(--ink); font-weight:600; }

/* Phone number gets extra emphasis — the number practitioners actually call */
.contact-line a.phone-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Lora', Georgia, serif;
  font-size:clamp(1.5rem, 3vw, 1.9rem);
  font-weight:600;
  color:var(--ink);
}
.contact-line a.phone-link:hover{ color:var(--harbor); }
.contact-line a.phone-link svg{ width:1.2em; height:1.2em; flex:none; }

/* Weekly availability strip */
.day-strip{ display:flex; gap:6px; margin-bottom:16px; }
.day-chip{
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  font-weight:500;
  color:#A9B4B2;
  background:var(--paper);
  border:1px solid var(--border);
}
.day-chip.active{
  color:var(--white);
  background:var(--harbor);
  border-color:var(--harbor);
}

/* ---------- Contact form ---------- */
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.form-field label .opt{ text-transform:none; letter-spacing:0; font-family:'Archivo', sans-serif; color:#8A9A9E; }
.form-field input,
.form-field textarea{
  font-family:'Archivo', sans-serif;
  font-size:.98rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:7px;
  padding:12px 14px;
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea{ resize:vertical; min-height:120px; font-family:inherit; }
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--harbor);
  box-shadow:0 0 0 3px rgba(28,110,138,.14);
}
.form-field input:required:invalid{ box-shadow:none; }
.form-field input.invalid{ border-color:#C0453A; }
.form-field input.invalid:focus{ box-shadow:0 0 0 3px rgba(192,69,58,.14); }
.field-hint{ font-size:.78rem; color:var(--ink-soft); margin:2px 0 0; }
.field-hint.error{ color:#A3392E; }
.contact-form .btn{ align-self:flex-start; border:none; }

/* Honeypot — hidden from real visitors, visible to bots that fill every field */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.form-msg{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:500;
  margin-bottom:20px;
}
.form-msg.success{ background:#EAF3EE; color:#276B4C; border:1px solid #BEDDCB; }
.form-msg.error{ background:#FBEDEC; color:#A3392E; border:1px solid #F1C6C1; }
.form-msg[hidden]{ display:none; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--mist);
  padding:56px 0 28px;
}
.footer-top{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px;
  padding-bottom:36px; border-bottom:1px solid rgba(244,246,245,.14);
}
.footer-brand p{ color:#8FA3A9; max-width:32ch; margin-top:14px; }
.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8FA3A9;
  margin:0 0 14px;
  font-weight:500;
}
.footer-col a{ display:block; color:var(--mist); font-size:.92rem; margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:22px; font-size:.8rem; color:#6E838A;
}